Welcome Guest ( Log In | Register )



 
 Reply to this topicStart new topic
> Problem With Div's In Ie6 And Lower
wutske
post Sep 5 2008, 09:07 PM
Post #1


Way Out Of Control - You need a life :)
Group Icon

Group: [HOSTED]
Posts: 1,077
Joined: 2-August 05
From: Kapellen (Antwerp, Belgium)
Member No.: 7,585
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> <!-- einde h_arrow --> <br />
        <div id="right"><jdoc:include type="modules" name="right" style="xhtml" /></div> <!-- einde right -->
        <div id="user4"><jdoc:include type="modules" name="user4" style="xhtml" /></div> <!-- einde user4 -->
    </div> <!-- einde right_column -->
    
    <div id="header">
        <div id="h_top"> </div> <!-- einde h_top -->
        <div id="h_middle"><span id="title">De Groene Wijzer</span></div> <!-- einde h_middle -->
        <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> <!-- einde h_bottom -->
    </div>    <!--einde header -->

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

</div> <!-- einde main_wrapper-->
</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 !
Go to the top of the page
 
+Quote Post
TavoxPeru
post Sep 6 2008, 02:54 AM
Post #2


Super Member
Group Icon

Group: [HOSTED]
Posts: 796
Joined: 8-April 06
From: Lima - Peru
Member No.: 12,579
myCENTs:26.78
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,
Go to the top of the page
 
+Quote Post
wutske
post Sep 6 2008, 10:07 AM
Post #3


Way Out Of Control - You need a life :)
Group Icon

Group: [HOSTED]
Posts: 1,077
Joined: 2-August 05
From: Kapellen (Antwerp, Belgium)
Member No.: 7,585
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 mad.gif

//edit: new code to show how I fixed it wink.gif
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">&nbsp;</div> <!-- einde h_arrow --> <br />
        <div id="right"><jdoc:include type="modules" name="right" style="xhtml" /></div> <!-- einde right -->
        <div id="user4"><jdoc:include type="modules" name="user4" style="xhtml" /></div> <!-- einde user4 -->
    </div> <!-- einde right_column -->    
    
    <div id="h_top">&nbsp;</div> <!-- einde h_top -->
    <div id="h_middle"><span id="title">De Groene Wijzer</span></div> <!-- einde h_middle -->
    <div id="h_bottom">
        <table cellpadding="0" cellspacing="0"> <!-- if the padding-top: 5px is applied to this table, IE6 padds the whole h_bottom div, adding a gap in the borders (left and right) -->
            <tr id="IE6_lte_fix_header"><td colspan="3">&nbsp;</td></tr>    <!-- this tr with line-height: 5px does what padding-top: 5px should have done ... -->
            <tr>
                <td id="pill_l">&nbsp;</td>
                <td id="pill_m"><jdoc:include type="modules" name="user3" /></td>
                <td id="pill_r">&nbsp;</td>
            </tr>
        </table>
    </div> <!-- einde h_bottom -->
    
    <div id="content">
        <jdoc:include type="component" />
        <div id="footer" class="clear">
            <jdoc:include type="modules" name="footer"/>
        </div> <!-- einde footer -->
    </div> <!-- einde content -->

</div> <!-- einde main_wrapper-->
</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;
            }


This post has been edited by wutske: Sep 6 2008, 10:32 AM
Go to the top of the page
 
+Quote Post
Herbert
post Sep 18 2008, 04:06 AM
Post #4


Premium Member
Group Icon

Group: [HOSTED]
Posts: 444
Joined: 4-September 04
Member No.: 234
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 rolleyes.gif
Go to the top of the page
 
+Quote Post
wutske
post Sep 19 2008, 05:38 PM
Post #5


Way Out Of Control - You need a life :)
Group Icon

Group: [HOSTED]
Posts: 1,077
Joined: 2-August 05
From: Kapellen (Antwerp, Belgium)
Member No.: 7,585
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 rolleyes.gif


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)
Go to the top of the page
 
+Quote Post
« Next Oldest · Web Design and HTML · Next Newest »
 

Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. Divs/ tables ?(19)


 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 23rd November 2008 - 12:27 AM
Powered By IP.Board 2.2.1 © 2008  IPS, Inc.
Licensed to: Xisto Corporation