3 replies [Last post]
sejf83
Offline
Enthusiast
London
Last seen: 15 years 26 weeks ago
London
Joined: 2006-01-01
Posts: 56
Points: 0

I've got a two-column, fixed-width layout where the left column floats left.

The right column contains an image. In IE 6, the images shifts down (as though it is clearing the float.) I've tried adding clear: none; to the class with no luck. Here's the relevant code:

...

...

...

...

And the CSS:

#mainText { width: 100%; background-color: #fff; font: .75em Lucida Grande, Trebuchet MS, Arial, Helvetica, san serif; line-height: 20px; margin:0; padding: 0; }

#mainText .leftCol {
float: left;
width: 435px;
margin: 0 0 0 10px;
padding-top:1px;
}

#mainText .rightCol {
margin: 0px 10px 0px 465px;
padding-top: 0px;
}

img.closedLoop {
padding-top: 15px;
padding-bottom: 15px;
display: block;
margin-left: auto;
margin-right: auto;
border:none;
}

The text in these columns is not aligning they way I'd like it to in FF 2. It looks great if I put padding-top: 1px in the #mainText .rightCol class -- but then that breaks in IE 6 and 7.

Any help is very, very much appreciated.

vinhboy
vinhboy's picture
Offline
Enthusiast
davis, ca
Last seen: 14 years 20 weeks ago
davis, ca
Joined: 2006-12-21
Posts: 257
Points: 0

Couples things to note: 1)

Couples things to note:

1) You are covering most the background image, so I would suggest that you just cut out part of the visible background image and use that instead of loading a huge jpg like that every time. Very bandwidth intensive in my opinion.

2) Your page is mostly centered, so using margin: auto; in your "container" can help you achieve this instead for your entire page instead of margining everything else. Look around the net for examples.

3) I think the reason IE6 drops the grey image down is because there is not enough space for the image on that line. Try making the image size smaller and see if it will fit.

4) I am not sure why your text don't align correctly and why the padding seems different for each of them, but the way I would fix this is to float boat col

#mainText .rightCol { float: left; width: 300px; /* or whatever length */ margin: 0 0 0 10px; padding-top:1px; }

5) put in some

after a float section. Like after your two images and your two floating columns. ( I am not sure of this, but it can't hurt )

sejf83
Offline
Enthusiast
London
Last seen: 15 years 26 weeks ago
London
Joined: 2006-01-01
Posts: 56
Points: 0

Thanks again for your help.

Thanks again for your help. Your suggestions resolved my problem.

As for the margin:auto; in the container, I can't do that because I'm applying a drop shadow.

Thanks for the comment about the background image. I'll see what I can do to minimize the size.

neon07
Offline
newbie
Last seen: 16 years 2 weeks ago
Joined: 2007-01-26
Posts: 1
Points: 0

tnx

Thanks vinhboy. It solved my css problem too. You are genius.