Forum Moderators: not2easy
I've just put my site online to show to my client.
Tested it plenty before I did so - looking good in Opera 7, IE6 and Netscape 7 - plus its all been validated as HTML 4.01 Strict and CSS compliant.
Put it online and I discover to my horror that some of the borders and margins disappear in IE 6. I have no idea why - its not always the same ones and they re-appear if you cause a re-draw by dragging another window over the top of the browser, so I guess its some kind of bug in the IE rendering engine.
Must be related to speed since I never saw any of this when I tested locally and now I'm seeing it all the time.
Any solutions? Please?
My current theory is that it something to do with have lists of links for my nav menu.
Anyone got any thoughts?
I had to abandon a layout because of this.
So what do I need to do? Slow down my page to make it work?
Avoid using any borders on any divs?
Or just the divs that contain lists?
I'd advise either not using them or *gulp* using nested tables instead.
Not sure how you could slow the page down.
This problem doesn't occur offline though!
If you really want to use the layout you could (and it hurts to type it!) you could reload the IE page using IE conditionals:
<!--[if ie]>
<script type="text/javascript">
document.refresh();
</script>
<![endif]-->
* {
position: relative;
}
..in at the top of the CSS for good measure...
...but didn't help. :(
BlobFisk: It may come to that!
<script type="text/javascript">
var pageURL = unescape(window.location.pathname);
window.location.href = pageURL;
</script>
It doesn't always seem to solve the problem tho.
Grrr..Damn you Microsoft
I was going to have a nice celebratory night with a good bottle of wine.
How about a META refresh?
How about this? I couldn’t test it in IE6 for PC since i’m using a mac, but i tested in IE 5.2 (OK, i know there is a difference between IE for mac and for PC, but maybe it could work).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fake Borders</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="all">
html, body {
margin: 0px;
padding: 0px;
}#your-div {
width: 16em;
height: 8em;
}
#border-top {
position: absolute;
width: 16em;
height: 1px;
top: 1px;
left: 1px;
background: red;
}
#border-bottom {
position: absolute;
width: 16em;
height: 1px;
top: 8em;
left: 1px;
background: red;
}
#border-left {
position: absolute;
width: 1px;
height: 8em;
top: 1px;
left: 1px;
background: red;
}
#border-right {
position: absolute;
width: 1px;
height: 8em;
top: 1px;
left: 16em;
background: red;
}
</style>
</head>
<body>
<div id="your-div">
<div id="border-top"></div>
<div id="border-bottom"></div>
<div id="border-left"></div>
<div id="border-right"></div>
</div>
</body>
</html>
It uses 1px absolute positioned divs to make the borders.
Hope it helps.
But I'd rather avoid it - the site is very lean and mean at the moment - and I'd rather not re-code it and introduce more images to load.
Besides.... I shouldn't have too!
("Momma.. wheres my whippin' belt? Gonna teach that gates boy a lesson....")
("Momma.. wheres my whippin' belt? Gonna teach that gates boy a lesson....")
SuzyUK and BlobFisk couldn't see it but I could so it may be because I was using Windows XP or it may indeed be a timing issue.
Not entirely certain of what was going on but it did seem to be related to absolute positioning, so I fixed it by recoding the layout to use normal flow rather than absolute positioning. :)
Many, many, many thanks to SuzyUK and BlobFisk who went above and beyond the call of duty to help me out.
Do you have any positioned elements? Add position:static to all unpositioned block-level elements.
Well that's my personal rant taken care of, now onto the problem.
Have you tried increasing the width of the borders? Getting tables right is pretty tricky because the tables are actually 6 layers deep, and I think it's possible that IE6 might be placing the layers on the page in an incorrect order when it *first* renders the page, then when the page is redrawn (by windows auto-redraw property) it's putting them back in the right place.
I'm just thinking maybe if you exaggerate the borders by making them massively bigger than you realistically need, you might be able to detect if this is happening.
Alternatively if there is some way to manipulate the transparency/opaqueness of the layers individually (I don't know yet) then you could experiment with this and see if it makes a difference.
I've racked my brains over it, and the only sensible answer for why this bug occurs seems to me to be the layers are being stacked incorrectly when the page is rendered.
