Solved

overlap in one slide show, not another

Posted on 2011-09-21
19
214 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
ID: 36574399
Try adding a clear to the .ad-nav declaration.

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

Author Comment

by:mel200
ID: 36574720
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
ID: 36575165
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
ID: 36575254
Awesome, thanks so much! I'll try it now.
0
 

Author Comment

by:mel200
ID: 36575290
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
ID: 36575366
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
ID: 36575624
Ok, I'll try it then. Thanks again!
0
 
LVL 9

Expert Comment

by:user_n
ID: 36575637
* {
    line-height: 140%;
}

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

Accepted Solution

by:
user_n earned 500 total points
ID: 36575653
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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:mel200
ID: 36575676
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
ID: 36575713
I am running firefox 6.2.0 and it is ok
0
 
LVL 9

Expert Comment

by:user_n
ID: 36575716
I want to say 6.0.2
0
 
LVL 9

Expert Comment

by:user_n
ID: 36575793
I turned it off completely
0
 

Author Comment

by:mel200
ID: 36576044
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
ID: 36576157
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
ID: 36576181
Did you try the font-size declaration suggestions for the test page?
0
 

Author Comment

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

Author Comment

by:mel200
ID: 36576202
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
ID: 36701646
Sorry it took so long to give you the points -thanks, this worked!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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.
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

863 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

20 Experts available now in Live!

Get 1:1 Help Now