CSS issue

Ph3n0m · 10-03-2006 10:40AM #1

Got a strange one, I have googled for an answer and it doesnt make sense

Basically I have a page laid out as follows

<div id="leftColoumn">
<div class="albumList">
<div class="left"><img></div>
<div class="right">information</div>
</div>
</div>

<div id="rightColoumn">
content, etc
</div>

OK with me so far?

Now the styling I have is as follows

#leftColoumn {float:left; width:317px;margin-left:10px;margin-right:10px;}
#rightColoumn {float:left;width:663px;}
#leftColoumn .albumList {
	border:2px dashed #f1f1f1; margin-bottom:20px; padding:10px;
}
#leftColoumn .albumList .left {float:left; width:140px;margin-right:5px;}
#leftColoumn .albumList .right {float:left;}

The problem is that instead of left and right Coloumns floating side by side there is now a monstrous gap between them, the leftcoloumn is more then 317px in width

The solution I have googled said it was to do with incorrectly nested elements, but having been through the code, there is nothing nested incorrectly, especially as I tab in my code

Does anyone have any ideas? This problem is only occuring in IE (as per feckin usual)

Serbian · 10-03-2006 01:32PM

I stuck the CSS above into my browser and this is what I got (obviously I added the border around the image myself and I replaced <img> in the html with asdas):

Does that look like what you are getting? I can't seem to see the massive gap; they look pretty similar in both FireFox and IE. The only obvious problem I can see is the difference in the left margin between the two. This is the IE6 Double Float Margin bug and can be fixed by adding: display: inline; to #leftColoumn.

Maybe you can post the complete HTML and CSS if this is different?

Ph3n0m · 10-03-2006 02:08PM

aye the inline fix was what was required, found it earlier on.

But thanks Serbian - atleast someone here cares

Ph3n0m · 10-03-2006 05:43PM

I want to follow my previous post up with this other annoying css malarky

Why is it when I specify a border around a div, specifically

"border:2px dashed #f1f1f1;"

IE decides it wont draw the border fully, and will only show it when I highlight the div or drag my mouse across it

mewso · 10-03-2006 05:50PM

Come on now you know why. It's IE. Am I right in thinking there is a javascript library out there to correct some of the IE css problems. The reason I ask is because when IE7 comes along it will be of much more value than the css hacks that will apparently now break in IE7.

*edit - yes here it is - http://dean.edwards.name/IE7/overview/ - don't think it fixes the dashes problem though. The name of the library may cause confusion.

Serbian · 10-03-2006 05:57PM

Ph3n0m wrote:

Why is it when I specify a border around a div, specifically "border:2px dashed #f1f1f1;"

I think what you are experiencing Phenom is known as Border Chaos. There is an explanation and a couple of fixes in that link.

mewso · 10-03-2006 06:05PM

I thought it was this phomenon - http://www.zakkum.com/programming/web/border-issue.html - which I don't know of a fix for.

Ph3n0m · 10-03-2006 06:17PM

actually its neither

The border is drawn as it should be, but literally disappears, and if I continue scrolling down, it reappears..

ah this screenshot should show what I mean

mewso · 10-03-2006 08:09PM

Looks like some form of border chaos to me.

Serbian · 11-03-2006 01:42AM

Ph3n0m wrote:

actually its neither

The border is drawn as it should be, but literally disappears, and if I continue scrolling down, it reappears..

ah this screenshot should show what I mean

Hrm, try adding zoom: 1; to the CSS of the containing div and see if that makes a difference? I should probably note that zoom will invalidate your CSS, so if it works, that's the trade-off.

Ph3n0m · 05-04-2006 10:58AM

Just to follow up - this was a case of border chaos and it also wasnt

The usual fixes didnt apply - what I had to do is the div that was not drawing the border correctly - I had to put a background colour on its parent div

example

<parent div>
<border div>
content, blah blah other divs, etc
</border div>
</parent div>

background colour was applied to parent div and it resolved the border issue

CSS issue

Comments