Huh? Odd browser behaviour

ngray · 13th January 2007, 03:18 AM

Really odd. In IE7 this development site (I didn't design it so please forgive the yellow box and starbursts

) when first loaded has a nice border around the entire main wrapper.

Scroll down the page and then half the border is missing on both the left and the right. It should all be within the main wrapper which has a border of 1px solid.

And even stranger,
Scroll back up to the top again and some border is missing from the left and the right for about 70 or so pixels. Press refresh and it comes back again.

And if you scroll up and down, bits of border seem to disappear almost randomly all up and down the left/right side

Works as expected in FF if only I could remember how to make navigation divs fit the entire height of the content div.

Anyone got any experience with this?

Terra · 13th January 2007, 03:14 PM

well - it ain't gonna be easy debugging this.

First - when I tried to validate your CSS I got this:
File not found http://www.drivingschoolservices.com/Style/dotorg.css: Not Found
... which doesn't sound good

Secondly, I'd try IE6 to check if it's working in IE6 or not. If it's IE7 only, then it becomes a bit harder as IE6 has been around longer and is better documented.

Finally, At first glance, it reminds me of the IE Peekaboo bug .. basically content appearing / disappearing at random. A google search brings up lots info including:
http://www.positioniseverything.net/.../peekaboo.html
http://www.brownbatterystudios.com/s...-peekaboo-bug/

Edith

Terra · 13th January 2007, 03:18 PM

Also stuff like this:

Code:

#content {
float:left;
width:555px;
margin-left:4px;
border-left:1px solid #666666;
padding-left:4px;
}

IE usually doubles the margin if floated - which means that if you float left and have a left margin of 4px, then IE makes it 8px. Solution is to add
display: inline;

information: http://www.positioniseverything.net/...ed-margin.html

having doubled margins on floated divs can mean that they push "out" of the page and upset your layout.

NB: if you use floats, it's a good idea to read through these sites:
http://www.positioniseverything.net/
http://css-discuss.incutio.com/

IE seems to hate floats. It's even funnier (as in "driving you insane) if you dare to use negative margins ...

Terra

ngray · 13th January 2007, 03:38 PM

Thanks Edith, I'll check those links.

Funny thing is though, I've been using floats and borders on lots of sites and they all work in both FF and IE7, so I've got used to all the oddities you have to remember with floats.

I'll see what those links tell me...

Quote:

First - when I tried to validate your CSS I got this:

Fixed that, doesn't make any difference it was the same file and I hadn't noticed I was loading it twice with from 2 places

. As I said, development site.