6 replies [Last post]
the182guy
Offline
Regular
Last seen: 15 years 23 weeks ago
Joined: 2006-06-03
Posts: 13
Points: 0

Hi, I have a very simple CSS layout consisting of 3 columns.

-head
-floated left
-floated right
-mid column

the page and style are available here:

http://the182guy.awardspace.co.uk/layout.htm
http://the182guy.awardspace.co.uk/styles/styles.css

the problem:
If you look closely at the middle column, it seems the left column is pushing the first few lines of the mid column to the right slightly. The content of the entire mid column is not inline.

I only found this problem with IE, firefox displays it fine the way I want it.

Thanks for reading,
Chris

DanA
DanA's picture
Offline
Elder
Last seen: 12 years 8 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Try adding

Try adding
#mid{height:1%;} between conditional comments

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 41 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Its IEs notorious 3px jog

the182guy
Offline
Regular
Last seen: 15 years 23 weeks ago
Joined: 2006-06-03
Posts: 13
Points: 0

That works as far as keeping

That works as far as keeping the text inline, but there is still the small left-margin, this wouldnt matter if it was just text but im trying to tightly fit an image in that middle column, and the small margin causes the image to display under the floated div in IE.

But it works 100% fine in FF, the image is snug in the mid column, and the borders fit tightly (the borders are actually faux columns).

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 41 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

There is no perfect solution.

Its an IE bug. You have a couple of alternatives to mitigate it.

- Use a small negative right margin on the left column, filtered for IE6- only.

- Float the centre column right.

- Free your design from needing tight pixel accuracy.

the182guy
Offline
Regular
Last seen: 15 years 23 weeks ago
Joined: 2006-06-03
Posts: 13
Points: 0

Thanks all, I tried

Thanks all,

I tried floating the mid, it caused the mid to appear under the right column.

Fixed it by having the big image set as a background image.

Chris

gcyrillus
Offline
Enthusiast
FR spoken
Last seen: 13 years 9 weeks ago
FR spoken
Timezone: GMT+2
Joined: 2005-11-16
Posts: 57
Points: 0

what about a simlple display:inline-block ?

hello,
it looks to me that a simlple display:inline-block for the mid column , was enough to fixe that layout (?) bug.
At least in IE6 .

GC