Problem With Div's In Ie6 And Lower

wutske

Sep 5 2008, 09:07 PM

I'm working on a template for joomla, but I'm heaving some serious problems to get it working in IE6 and lower.
Basically, this is my layout:

CODE

-------------------------------------------------------------------------------------
|                                                                                        |                       |
|                            header                                                 |                       |
| ----------------------------------------------------------------- |                       |
|                                                                                        |        right        |
|              content                                                              |        area        |
|                                                                                        |                       |
|                                                                                        |                       |
|                                                                                        |                       |
|                                                                                        |                       |
|                                                                                        |                       |
-------------------------------------------------------------------------------------

html

CODE

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!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="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/groenewijzer/css/style.css" type="text/css" />
</head>
<body>

<div id="main_wrapper">
    <div id="right_column">
        <div id="h_arrow"> </div>  <br />
        <div id="right"><jdoc:include type="modules" name="right" style="xhtml" /></div> 
        <div id="user4"><jdoc:include type="modules" name="user4" style="xhtml" /></div> 
    </div> 

    <div id="header">
        <div id="h_top"> </div> 
        <div id="h_middle"><span id="title">De Groene Wijzer</span></div> 
        <div id="h_bottom">
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <td id="pill_l"> </td>
                    <td id="pill_m"><jdoc:include type="modules" name="user3" /></td>
                    <td id="pill_r"> </td>
                </tr>
            </table>
        </div> 
    </div>    

    <div id="content">
        <jdoc:include type="component" />
        <div id="footer" class="clear">
            <jdoc:include type="modules" name="footer"/>
        </div> 
    </div> 

</div> 
</body>
</html>

CSS

CODE

body {
    background-color: #316b16;
    font: normal 12px arial;
}

#main_wrapper {
    background-color: #FFF;
    border: 1px solid #000;
    margin: auto;
    padding: 5px;
    width: 90%;
}

a img {
    border: 0;
}

a, a:visited {
    color: #4A4;
}

a:active, a:hover {
    color: #383;
}

.small {
    font-size: 10px;
}

.clear {
    clear: both;
}

td.contentheading {
    font: bold 14px arial;
}

td.createdate {
    font-size: 10px;
}

td.modifydate, td.createdate {
    padding: 0px;
    margin: 0px;
    font: normal 8px arial;
    color: #AAA;
}

#header {
    clear: none;
}

    #h_top {
        height: 45px;
        background-color: #FFF;
        margin: 0px 192px 0px 0px;
        padding: 0px;
        border-right: 1px solid #d4f36a;
    }

    #h_middle {
        background-color: #d4f36a;
        height: 60px;
        margin: 0px 192px 0px 0px;
        padding: 0px;
        text-align: center;
    }
        #h_middle #title {
            font: bold 40px arial;
            color: #8a4;
            position: relative;
            top: 10%;
        }

    #h_bottom {
        height: 45px;
        text-align: center;
        background-color: #FFF;
        margin: 0px 192px 0px 0px;
        border-left: 1px solid #d4f36a;
        border-right: 1px solid #d4f36a;
        padding: 0px;
        text-transform: uppercase;
    }

        #h_bottom table {
            margin-top: 5px;
            margin-left: auto;
            margin-right: auto;
        }

        #pill_l {
            width: 23px;
            height: 34px;
            background: url(../images/pill_0_0.png) no-repeat;
        }

        #pill_m  {
            background:  url(../images/pill_0_2.png) repeat-x;
        }

        #pill_r {
            width: 23px;
            height: 34px;
            background: url(../images/pill_0_3.png) no-repeat;
        }

        #h_bottom ul {
            margin: 0px;
            padding: 0px;
        }

        #h_bottom li {                        /*Reserved for top menu*/
            vertical-align: 50%;
            font-weight: bold;
            display: inline;
            list-style: none;
            margin-right: 10px;
            padding-left: 5px;
            border-left: 1px solid #793;
        }

        #h_bottom a, #h_bottom a:visited {
            color: #793;
            text-decoration: none;
        }

#right_column {
    float: right;
}

    #h_arrow {
        background: url(../images/arrow.gif) no-repeat;
        width: 192px;
        height: 150px;
        margin: 0px;
        padding: 0px;
    }

    #user4, #right {
        padding: 5px 3px 5px 7px;
    }

    #user4 *, #right * {
        max-width: 182px;
    }

#content {
    padding: 5px;
    margin-right: 192px;
    border-left: 1px solid #d4f36a;
    border-bottom: 1px solid #d4f36a;
    border-right: 1px solid #d4f36a;
}

#footer {
    font: 8px italic arial;
    text-align: center;
}

and this is the problem:

As soon as I add the "right_colum", my header shrinks a few pixels in IE6, changing the margin-left doesn't help, the header (and it's content) won't grow.
It works in every other browser, IE7, FF, Opera, Safari ... except IE6, IE5.x

Anyone has an idea how to fix this ?

Ps. using tables is not an option !

Comment/Reply (w/o sign-up)

TavoxPeru

Sep 6 2008, 02:54 AM

For me your problem is related with the margins and/or paddings of your divs, try to reset every one to zero and then start adding them as needed.

To reset them simply add this to your css rules, for example for the body:

CODE

body {
    background-color: #316b16;
    font: normal 12px arial;
    margin:0;
    padding:0;
}

Best regards,

Comment/Reply (w/o sign-up)

wutske

Sep 6 2008, 10:07 AM

I tried that, but it changed nothing, IE keeps my header 4-5px away from the right_content.
I did find how I could fix it, but it's just ridiculous, as long as I don't set the height property, everything works like it should do. Hower, this means I have to start cheating with line-height to get the right height for my divs

//edit: new code to show how I fixed it

HTML

CODE

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!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="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/groenewijzer/css/style.css" type="text/css" />
</head>
<body>

<div id="main_wrapper">
    <div id="right_column">
        <div id="h_arrow"> </div>  <br />
        <div id="right"><jdoc:include type="modules" name="right" style="xhtml" /></div> 
        <div id="user4"><jdoc:include type="modules" name="user4" style="xhtml" /></div> 
    </div> 

    <div id="h_top"> </div> 
    <div id="h_middle"><span id="title">De Groene Wijzer</span></div> 
    <div id="h_bottom">
        <table cellpadding="0" cellspacing="0"> 
            <tr id="IE6_lte_fix_header"><td colspan="3"> </td></tr>    
            <tr>
                <td id="pill_l"> </td>
                <td id="pill_m"><jdoc:include type="modules" name="user3" /></td>
                <td id="pill_r"> </td>
            </tr>
        </table>
    </div> 

    <div id="content">
        <jdoc:include type="component" />
        <div id="footer" class="clear">
            <jdoc:include type="modules" name="footer"/>
        </div> 
    </div> 

</div> 
</body>
</html>

CSS (what's changed)

CODE

#h_top {
        line-height: 45px;
        background-color: #FFF;
        margin-right: 192px;
        border-right: 1px solid #d4f36a;
    }

    #h_middle {
        background-color: #d4f36a;
        margin-right: 192px;
        padding: 0px;
        text-align: center;
    }
        #h_middle #title {
            font: bold 40px arial;
            line-height: 60px;
            color: #8a4;
        }

    #h_bottom {
        line-height: 45px;
        text-align: center;
        background-color: #FFF;
        margin-right: 192px;
        border-left: 1px solid #d4f36a;
        border-right: 1px solid #d4f36a;

        padding: 0px;
        text-transform: uppercase;
    }

        #h_bottom table {
            line-height: 12px;
            margin-left: auto;
            margin-right: auto;
        }

        #IE6_lte_fix_header {
            line-height: 5px;
            font: normal 5px arial;
        }
            #pill_l {
                width: 23px;
                height: 34px;
                background: url(../images/pill_0_0.png) no-repeat;
            }

            #pill_m  {
                background:  url(../images/pill_0_2.png) repeat-x;
            }

            #pill_r {
                width: 23px;
                height: 34px;
                background: url(../images/pill_0_3.png) no-repeat;
            }

            #h_bottom ul {
                margin: 0px;
                padding: 0px;
            }

            #h_bottom li {                        /*Reserved for top menu*/
                vertical-align: 50%;
                font-weight: bold;
                display: inline;
                list-style: none;
                margin-right: 10px;
                padding-left: 5px;
                border-left: 1px solid #793;
            }

            #h_bottom a, #h_bottom a:visited {
                color: #793;
                text-decoration: none;
            }

Comment/Reply (w/o sign-up)

Herbert

Sep 18 2008, 04:06 AM

I'm glad you figured it out. Man I hate Joomla. I had to jump in on a project that someone started in Joomla, and had to figure out where the heck they put everything, and it took an hour to make a new page with a form in it.... UGH. I much prefer coding straight PHP and using includes to minimize redundancy.

IE 6 also ticks me off. I'll design a site that looks perfect in all modern browsers (ie 7, firefox, etc) and our client uses ie6 and complains that everything is broken >.<

Luckily, I found a tutorial on how to get IE 6 in Ubuntu, so now at least I can see what he's talking about. And going to my other site's I've done, those are broke too, and never realized it. So web developers, take heed. Find a way to check your work in IE6. It sucks, but people still use it

Comment/Reply (w/o sign-up)

wutske

Sep 19 2008, 05:38 PM

QUOTE(Herbert @ Sep 18 2008, 06:06 AM)

I'm glad you figured it out. Man I hate Joomla. I had to jump in on a project that someone started in Joomla, and had to figure out where the heck they put everything, and it took an hour to make a new page with a form in it.... UGH. I much prefer coding straight PHP and using includes to minimize redundancy.

IE 6 also ticks me off. I'll design a site that looks perfect in all modern browsers (ie 7, firefox, etc) and our client uses ie6 and complains that everything is broken >.<

Luckily, I found a tutorial on how to get IE 6 in Ubuntu, so now at least I can see what he's talking about. And going to my other site's I've done, those are broke too, and never realized it. So web developers, take heed. Find a way to check your work in IE6. It sucks, but people still use it

I have no troubles designing templates for Joomla, requires hardly any php coding so it's basicly the same as creating a site design.
When I design a site, I always design them in linux and test them in windows. I have a virtual XP installed with the most common browsers (IE3 till 7, Firefox 3, Opera 9.50, Safari) and I try to make them work in all (altough I don't mind a few glitches in IE6 and lower, as long as they don't disturb)

Comment/Reply (w/o sign-up)