Padding/Float Issues

Hey,

Just some quick fixes that I can’t figure out what’s going wrong. On this page here, (First, ignore the terrible coding, I know its bad…:D) on chrome the menu seems to be being pushed down even though viewing it locally does not show that? Second, on p12 the paragraph isn’t floating to the top of that content area. I know it has to do with the blockquote since removing it seems to fix the issue…but I don’t know how to fix it as it stands right now. This bug appears in all browsers.

Thanks for the help!
Eric Huang

Second, on p12 the paragraph isn’t floating to the top of that content area. I know it has to do with the blockquote since removing it seems to fix the issue…but I don’t know how to fix it as it stands right now. This bug appears in all browsers.
That’s not a bug, it’s just the nature of floats.

If you bring the right float .p12 first in that series of floats it will work. You may need to float the blockquote also. You got some clear:boths that may pose a problem also.

If you think about it, that behavior is the only type of behavior we’d want :).

If floats didn’t need to come first, then they would just continue to go up until it reaches the top of the monitor. What would stop the float from continually rising :).

As Ray said, just switch up the HTML :slight_smile:

Okay, that worked wonders…I feel stupid now. I swear I tried that before I posted… Oh well, did any of you see any extra menu padding in chrome? I can’t replicate it locally, but it shows up in the live site…

I just compared the menu in Opera/Chrome and there isn’t any extra menu padding?

Hi,
I’m using Chrome 4 and I don’t see the problem there.

I am getting a horizontal scrollbar in all browsers due to the negative margins on your images.


.img2 {float:left;margin: 50px -70px}
.img3 {float:right;margin: 50px -80px}
.img4 {float:left;margin: 20px -300px}
.img4 img {padding-top:30px}
.img5 {float:right;margin: 50px -300px}

All you really need to do is remove the widths from the p classes that sit beside those images and just set overflow:hidden; on those p classes.

It will give you the same results, without the scrollbar of course.

If I do that though, if you’re on a lower resolution you won’t be able to scroll horizontally to see some of the graphs…Also, I guess I have no idea why chrome is showing something different than what everyone else (and locally) is seeing.

What version of chrome are you using? If it’s a beta version then don’t worry about it :slight_smile: