[web] [SOLVED] [html + css] IE doesn't like my columns
Author
Yet another post today.
I've been developing the band website for a little while, and ever since I redesigned it with more css-ness, certain things began to go horribly (well, not that bad) wrong with IE. Mainly in two instances:
> IE doesn't render the correct amount of spacing on the side of the columns. I've got Firefox and Opera, and both do it fine.
> IE, for some reason, hates the hell out of it when I create a table within a div and assign it a width. It completely forgets that I assigned 'float' to the two side bars, and it knocks the main content pane down to the bottom of each. It doesn't let the div overflow onto the other.
Since I can't really explain it all that well, here's the example: Example
It has both errors jam-packed into one page.
To view the first error, simply go to the page. To view the second error, click on the link in the middle (it's self-explanatory).
I made this example page directly from my site by ripping out the content and erasing some of the random info and other crap I put on there.
[Edited by - deadimp on May 13, 2007 6:05:07 PM]
I added a doc type which may mess with the code for the rest of your site.
I validated the code (not css).
I closed a div that was left open.
I validated the code (not css).
I closed a div that was left open.
<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><link href="error.css" rel="stylesheet" type="text/css" /><script type="text/javascript">function show() { document.getElementById("evil").style.display="";}</script><style type="text/css">.group .title { font-size: 10pt;}</style></head><body><div id='header'> Header </div><div id='main'> <div id='nav'> <ul id='nav_base'> <li> <a href='#'>Left</a> </li> </ul> </div> <div id='event' class='event'> <div class='title'>Right</div> </div> <div id='content'> <h1>Title</h1> <br /> <a href='javascript:show()'>Disrupt normality</a> <div class='group'> <div class='title'>Title</div> <table id='evil' style='display: none'> <tr> <td>I</td> <td>hate</td> <td>IE</td> </tr> </table> </div> </div> <div id='footer'> Best viewed in 1024x768 or 1280x1024 resolution with <a href="http://mozilla.com/" target="_blank">Mozilla Firefox</a><br /> </div></div></body></html>
Author
It doesn't fix the spacing problem, but it does fix the table problem, which is the most pressing issue.
I'm going to try adding the doctype header information first, see what that does, and then try and find which div it is... Which div did you close? I'm not sure if I omitted it while reformatting the site code or it's actually a problem in the site itself.
EDIT: Changing the doctype did work! Wouldn't a-thought it, but then again, I'm ignorant. I'm going to run over the code with TIDY in Firefox and see if it finds any open div's.
I'm going to try adding the doctype header information first, see what that does, and then try and find which div it is... Which div did you close? I'm not sure if I omitted it while reformatting the site code or it's actually a problem in the site itself.
EDIT: Changing the doctype did work! Wouldn't a-thought it, but then again, I'm ignorant. I'm going to run over the code with TIDY in Firefox and see if it finds any open div's.
No problem, in IE you triggered the old method - before I could begin I wanted to make sure that I was triggering strict mode. From there I could then validate your html, and if things still didn't look right I would have jumped into your css.
But enabling strict mode (the document type at the top will trigger it) took care of that padding problem (in ie 7).
It may have been a copy / paste error, I added another closed div to the very end of your sample page. I may have even ended it too soon, but I know that one div was left open which caused a problem.
But enabling strict mode (the document type at the top will trigger it) took care of that padding problem (in ie 7).
It may have been a copy / paste error, I added another closed div to the very end of your sample page. I may have even ended it too soon, but I know that one div was left open which caused a problem.
Quote:Original post by markadrakeMore accurately, leaving out the doctype will trigger quirks mode; it's possible to choose a doctype that will still not enable strict mode, and prior to IE7 you can also trigger quirks mode in IE by including an XML prolog at the beginning of your document.
But enabling strict mode (the document type at the top will trigger it)
Read on having layout. There's a hidden element property in IE called hasLayout. Whether it's set or not determines how your elements are rendered. Most IE problems are caused by having block elements (i.e. floats) inside elements that do not "have layout". It can cause the weirdest of bugs.
In your case, the main div does not "have layout" so anything within it can suffer weird bugs. Try setting a "width: 100%;" on the main div to trigger hasLayout.
In your case, the main div does not "have layout" so anything within it can suffer weird bugs. Try setting a "width: 100%;" on the main div to trigger hasLayout.
Author
I've applied "width: 100%" to "#main", but it didn't change the spacing between the columns. I even check "[main].currentstyle.hasLayout", which returns true, but when looking at it with the IE DOM explorer, it says that "hasLayout" for the current style is false.
I've also tried the Holly Hack in that article, but it didn't make anything different than from when I had it before.
EDIT: I've updated the example.
EDIT 2: Just edited as you posted that...
[Edited by - deadimp on May 13, 2007 4:47:53 PM]
I've also tried the Holly Hack in that article, but it didn't make anything different than from when I had it before.
EDIT: I've updated the example.
EDIT 2: Just edited as you posted that...
[Edited by - deadimp on May 13, 2007 4:47:53 PM]
Dead - do you have your error page updated with the code I provided?
What's the spacing between the columns problem? I'm unsure as to what your pin pointing...
What's the spacing between the columns problem? I'm unsure as to what your pin pointing...
Author
Here's what IE is rendering: (well, without that floating text and the lines)
Note the extra space between the columns. It doesn't do that in Firefox/Opera.
Note the extra space between the columns. It doesn't do that in Firefox/Opera.
Well this sort of made me mad. I got it down to work correctly in the IE 6.0 browser (what you've done works in IE 7) but there was a 1px border on the "right" side (event div).
I had to apply a "right: -1px;" to fix this. It seems to look the same between IE 6, IE 7, and Firefox 2. There are a few updates in the css for the divs:
main
nav
content
event
Source code html (main div closed before footer now)
CSS (some changes have occured)
#nav {
width: 200px;
position:absolute;
top:0;
left:0;
padding: 0px;
margin: 0px;
}
#nav ul {
width: 100%;
list-style: none;
margin: 0px;
padding: 0px;
}
#nav li {
position: relative;
}
#nav li ul {
position: absolute;
left: 200px;
top: 0;
display: none;
/*Same as '#main_nav'*/
margin: 0;
padding: 0;
list-style: none;
width: 250px; /* Width of Menu Items */
}
/* Styles for Menu Items */
#nav li a {
display: block;
color: #fff;
background: #a00;
padding: 5px;
text-decoration: none;
}
#nav li a.sub, #nav li a.sub:hover {
background-image: url(../img/arrow-expand.gif);
background-repeat: no-repeat;
background-position: 98% center;
}
#nav li a:hover {
background: #c00;
text-decoration: none;
}
/* Sub Menu Styles */
#nav li ul li a {
padding: 5px;
}
/* The magic */
#nav li:hover ul, #nav li.over ul {
display: block;
}
/*IE Fix - Looks like crap in FF
* #nav li { float: left; height: 1%;}
* #nav li a { height: 1%; }*/
I had to apply a "right: -1px;" to fix this. It seems to look the same between IE 6, IE 7, and Firefox 2. There are a few updates in the css for the divs:
Source code html (main div closed before footer now)
<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><link href="error.css" rel="stylesheet" type="text/css" /><script type="text/javascript">function $(x) { return document.getElementById(x); }window.onload=function() { var main=$("main"), out=$("out"); var str="Non-IE"; if (main.currentStyle) str="main.hasLayout: "+main.currentStyle.hasLayout; out.innerHTML=str;}</script></head><body><div id='header'> Header </div><div id='main'> <div id='content'> <h1>Title</h1> <br> Output: <br> <div id='out'></div> </div> <div id='nav'> <ul id='nav_base'> <li> <a href='#'>Left</a> </li> </ul> </div> <div id='event'> <div class='title'>Right</div> </div></div><div id='footer'>Best viewed in 1024x768 or 1280x1024 resolution with <a href="http://mozilla.com/" target="_blank">Mozilla Firefox</a> </div></body></html>CSS (some changes have occured)
body { font-family: "Lucida Grande","Lucida Sans Unicode",sans-serif; font-size: 10pt; margin: 0px; padding: 0px; background: #ccc;}a { color: #882; border: 0px; text-decoration: underline;}a img { border: 0px;}a:hover { text-decoration: none;}p { text-indent: 20px; margin: 0px;}ol, ul { margin: 0px; padding-left: 25px;}.title, h1 { font-weight: normal; padding: 0px; margin: 0px; font-size: 16pt; text-align: left; background: #ddd;}h2 { font-size: 14pt;}table { background: #fff; padding: 3px; width: 100%; /* THIS IS WHERE IE SCREWS UP!!! Defining width messes with IE somehow*/}td { font-size: 10pt;}/* Better solution? Have 'table.tr.td:colspan=2', or just 'div.div.title'?*/table .title, table .title td { font-size: 10pt; padding: 2px;}.group { background: #fff; padding: 5px;}.group .body { padding: 3px;}/* PAGE SETUP */#header { background: #a00; color: #fff; text-align: center;}#footer { color: #fff; background: #a00; text-align: center; padding: 8px; margin: 0px;}#footer a { color: #FFF; text-decoration: underline;}#footer a:hover { text-decoration: none;}#main { /* Contains content, current, nav */ width: 100%; background: #ccc; position:relative;}#content { padding: 10px; height: 400px; margin: 0 200px 0 200px; background: #eee;}#event { background: #a00; position: absolute; width: 200px; top:0px; right: -1px;}#event .title { font-size: 10pt; font-weight: normal; text-align: left; color: #fff; background: #a00; padding: 5px;}/* Navigation Adaptation of: http://alistapart.com/articles/horizdropdowns */#nav {
width: 200px;
position:absolute;
top:0;
left:0;
padding: 0px;
margin: 0px;
}
#nav ul {
width: 100%;
list-style: none;
margin: 0px;
padding: 0px;
}
#nav li {
position: relative;
}
#nav li ul {
position: absolute;
left: 200px;
top: 0;
display: none;
/*Same as '#main_nav'*/
margin: 0;
padding: 0;
list-style: none;
width: 250px; /* Width of Menu Items */
}
/* Styles for Menu Items */
#nav li a {
display: block;
color: #fff;
background: #a00;
padding: 5px;
text-decoration: none;
}
#nav li a.sub, #nav li a.sub:hover {
background-image: url(../img/arrow-expand.gif);
background-repeat: no-repeat;
background-position: 98% center;
}
#nav li a:hover {
background: #c00;
text-decoration: none;
}
/* Sub Menu Styles */
#nav li ul li a {
padding: 5px;
}
/* The magic */
#nav li:hover ul, #nav li.over ul {
display: block;
}
/*IE Fix - Looks like crap in FF
* #nav li { float: left; height: 1%;}
* #nav li a { height: 1%; }*/
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
