Job always struck me as a very Zen kinda guy. And I'm trying hard to maintain that meditative, patient, if-it-be-your-will attitude. However, Job never had to deal with the utter gods-be-damned mess that is cross-browser issues in CSS.
gothwalk: (hope springs eternally from my fist)
( Jul. 11th, 2005 03:15 pm)
I'm having an interesting CSS issue here in Internet Explorer 6 - not showing in Firefox or Opera.

Extracts from my code:


<div id="container">
<div id="info"></div>
<div id="content"></div>


#container {
width: 778px;
position: absolute;
left: 50%;
margin-left: -375px;
border-left: 1px solid #382A7E;
border-right: 1px solid #382A7E;
#info {
width: 211px;
float: right;
#content {
width: 566px;
border-right: 1px solid #382A7E;

Now, what's happening in IE is that the info div is too wide, and is pushing the content div down the page. Reducing the width of the info div by 3 pixels to 208 makes it narrow enough, but this isn't ideal - I need every pixel of that 211.

My first conclusion on some research was that this is a manifestation of IE's box-model problems, wherein it puts borders inside the total width, not outside, so that IE would only see 776 pixels to work with #container. However, widening #container by 2px to give it the "full" 778 didn't work - and leaves some ugly gaps in Firefox and Opera.

The 3-pixel difference does lead to to think that it might be something to do with the borders, though...

Anyone able to explain to me what's happening here?

EDIT: Solved by [ profile] loupblanc, by adding "float: left;" to #content. Genius!


RSS Atom

Most Popular Tags

Powered by Dreamwidth Studios

Style Credit

Expand Cut Tags

No cut tags