|
CSS - Ie6 Css Crash
Hi there,
I'm having issues with a webpage of mine. I've isolated the issue to the CSS code (below). I've tried researching this, but to no avail. The page works perfectly with IE7, Firefox, and Safari. But it crashes in IE6 (tested on two computers). Any suggestions? Thanks. Code:
body {
background-color: #000000;
padding:20px;
margin:0px;
text-align: center;
}
#content {
text-align: left;
vertical-align: middle;
width:1020px;
margin: 0px auto;
padding: 0px;
background-color: #bed876;
}
#index-01_ {
height:50px;
width:1020px;
background-color: #bed876;
}
#index-02_ {
position:inline;
left:0px;
}
#index-03_ {
position:inline;
background-color: #bed876;
}
#index-04_ {
position:inline;
text-align: center;
}
#index-05_ {
position:inline;
background-color: #bed876;
}
#index-06_ {
position:inline;
text-align: center;
}
#index-07_ {
position:inline;
text-align: center;
}
#index-08_ {
position:inline;
background-color: #bed876;
height:30px;
width:1020px;
}
Similar TutorialsHello, Hoping you might be able to help. My website crashes (HTML and CSS below), but only in IE6. It works fine in Safari, IE7, Firefox. I think there is a glitch in the CSS coding, but don't know what. It appears to fail while loading index3, index4, and/or index5. Any ideas what the issue might be, or how I need to code differently? Many thanks! Code: <!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>The Home Page of Blah</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style/index.css" type="text/css" />
</head>
<body>
<div id="content">
<div id="index1">
</div>
<div id="index2">
<img id="index02" src="images/index/index02.gif" alt="" width="1020" height="451" />
</div>
<div id="index3">
<a href="http://blahblah.typepad.com/marketing/" />
<img id="index04" src="images/index/index04.gif" alt="" width="338" height="30" />
</div>
<div id="index4">
<a href="http://www.blah.ca/pdf/annualreport.pdf" />
<img id="index06" src="images/index/index06.gif" alt="" width="338" height="19" />
</div>
<div id="index5">
<a href="weddinghome.html" />
<img id="index07" src="images/index/index07.gif" alt="" width="338" height="24" />
</div>
<div id="index6">
</div>
</div>
</body>
</html>
===================================================
body {
background-color: #000000;
padding:20px;
margin:0px;
text-align: center;
}
img {
border: 0px;
}
#content {
text-align: left;
vertical-align: middle;
width:1020px;
margin: 0px auto;
padding: 0px;
background-color: #bed876;
}
#index1 {
height:50px;
width:1020px;
background-color: #bed876;
}
#index2 {
top:71px;
left:0px;
width:1020px;
height:451px;
}
#index3 {
text-align:center;
margin-left:auto;
margin-right:auto;
}
#index4 {
text-align:center;
margin-left:auto;
margin-right:auto;
}
#index5 {
text-align:center;
margin-left:auto;
margin-right:auto;
}
#index6 {
background-color: #bed876;
height:30px;
width:1020px;
}
Here's some code that crashes Internet Explorer. On the surface it seems it should work, but down the browser goes!
html4strict Code: Original - html4strict Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>list test</title> <style type="text/css"> .list { background: url('http://www.geocities.com/coffee_breath_23/images/Picture1.gif'); } .list li::first-letter { margin-left: 1px; } </style> </head> <body> <div class="list"> <ol type="1"> <li>Th<span>is is a test list.</span></li> <li><span>This is only a test.</span></li> </ol> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Notice the following details: Containing element with background set Contextual :first-letter selector :first-letter is given margin Element is <li> First and/or second letter wrapped in <span></span> tags I tried it with padding instead of margin, and it did the same thing: css Code: Original - css Code .list li::first-letter { padding-left: 1px; }
.list li::first-letter {
I've tested this thoroughly. All the details must be present to trigger a shutdown. But when I tried adding layout to the <ol> element, the problem went away: css Code: Original - css Code .list ol { zoom: 1; }
.list ol {
Open up these three test files in IE, and you'll see what I'm talking about. The first two links will shut down the browser, so be very careful with them. If you're working on anything in another IE window, all windows of IE will shut down and you will lose your work. The third link is safe, though. http://www.freewebs.com/desertowl/listtest.html http://www.freewebs.com/desertowl/listpad.html http://www.freewebs.com/desertowl/listlayout.html Edit: I just discovered that the bug is not just triggered by a <span> inside an <li>; see below. |
|||||||