Jump to content
  • Advertisement
Sign in to follow this  
deadimp

[web] [SOLVED] [html + css] IE doesn't like my columns

This topic is 4233 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

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]

Share this post


Link to post
Share on other sites
Advertisement
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.


<!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>

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
Quote:
Original post by markadrake
But enabling strict mode (the document type at the top will trigger it)
More 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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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]

Share this post


Link to post
Share on other sites
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...

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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)
    <!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%; }*/



    Share this post


    Link to post
    Share on other sites
    Sign in to follow this  

    • Advertisement
    ×

    Important Information

    By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

    GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

    Sign me up!