Solved

overlap in one slide show, not another

Posted on 2011-09-21
19
200 Views
Last Modified: 2012-05-12
Hi, please look at these two slide shows and tell me why I'm seeing the overlap on the second one (I'll include screen shots to show what I mean).

1)  www [dot] renal meal plans [dot] com

2) www [dot] renal meal plans [dot] com [slash] cfs-test.html

 correct  incorrect
0
Comment
Question by:mel200
  • 10
  • 5
  • 4
19 Comments
 
LVL 10

Expert Comment

by:jtwcs
Comment Utility
Try adding a clear to the .ad-nav declaration.

.ad-gallery .ad-nav {
    clear: both;
    position: relative;
    width: 100%;
}
0
 

Author Comment

by:mel200
Comment Utility
Thanks very much for your help. Problem is, it's going to be hard to make changes and then take them away again, because I don't have access to the files directly. I'll have to ask another busy person to make the changes.

Is there a difference in the two websites I showed you? I guess I assumed that there was a difference there and when we found it we would have our answer.

I will wait and if someone else confirms your instinct, I'll give that a try. Thanks again for your help.
0
 
LVL 10

Expert Comment

by:jtwcs
Comment Utility
I figured it out.  The font size is too large on the test page because there is no declaration for it.  On the main page, it is pulling the font size from the td, which is 12px.  For example, if you change the gallery declaration on the test page to this, it should line up correctly.

#gallery {
    background: none repeat scroll 0 0 #E1EEF5;
    padding: 30px;
    font-size: 12px;
}
0
 

Author Comment

by:mel200
Comment Utility
Awesome, thanks so much! I'll try it now.
0
 

Author Comment

by:mel200
Comment Utility
If I change that in firebug:
#gallery {
    background: none repeat scroll 0 0 #E1EEF5;
    font-size: 12px;
    padding: 30px;

it doesn't  make the thumbnails move over to the left.
0
 
LVL 10

Expert Comment

by:jtwcs
Comment Utility
That's odd, it works for me.  See attached screenshot.  #gallery was just one example, you could also try adding a font-size to the body or even the ad-controls class.

 screenshot
0
 

Author Comment

by:mel200
Comment Utility
Ok, I'll try it then. Thanks again!
0
 
LVL 9

Expert Comment

by:user_n
Comment Utility
* {
    line-height: 140%;
}

causes this problem in  cfs-test.html (line 40)
0
 
LVL 9

Accepted Solution

by:
user_n earned 500 total points
Comment Utility
you can try it yourself before it to be changed on the server in firefox and chrome using inspect element which is add on in firefox, in google chrome I'm not shure. With it you can make changes on the web and to see results imediately for this browser
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 

Author Comment

by:mel200
Comment Utility
OK, I did that live and it still isn't working... it's ok in internet explorer and  Chrome but not in FF. I'm running FF 3.6.
0
 
LVL 9

Expert Comment

by:user_n
Comment Utility
I am running firefox 6.2.0 and it is ok
0
 
LVL 9

Expert Comment

by:user_n
Comment Utility
I want to say 6.0.2
0
 
LVL 9

Expert Comment

by:user_n
Comment Utility
I turned it off completely
0
 

Author Comment

by:mel200
Comment Utility
Ok, that's odd. cfe-test was good this morning, as seen on the screenshot I uploaded. But now it's exhibiting the same characteristics. I'll check it out, user-n, thanks.
0
 

Author Comment

by:mel200
Comment Utility
I went to the live site and changed  line-height: 140%; to line-height: 110%; it didn't make a difference.
0
 
LVL 10

Expert Comment

by:jtwcs
Comment Utility
Did you try the font-size declaration suggestions for the test page?
0
 

Author Comment

by:mel200
Comment Utility
But that does fix cfs-test. Now I'm even more confused.
0
 

Author Comment

by:mel200
Comment Utility
Yes, I have tried it with the font-size AND the line-height, and with the font-size WITHOUT the font-height change. Neither works for the live site.
0
 

Author Closing Comment

by:mel200
Comment Utility
Sorry it took so long to give you the points -thanks, this worked!
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Suggested Solutions

I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now