IE inheritance problem

Discussion in 'CSS' started by t0Mi, Feb 2, 2010.

0
  1. #1
    I've got a problem with left oriented layout, last year I figured it out by using tables, but I'd like to 'css only' this time. The problem is that internet explorer is inheriting the 100% width from the body, not from the parent element. Here's a little screenshot:

    [​IMG]

    As you see when I float footerLeft to the left and footerRight to the right, giving them 50% of the width, ie takes the width from the body, which is wrong.
    Is there any way to fix this without using tables and/or javascript ? It may be an easy task, but I'm a css amateur. Thanks in advance..

    My stylesheet:
    body {
    margin:0;
    background:#E5EEF7 url(../Images/Themes/Blue/bodyBg.gif) repeat-x;
    font-family:Verdana;
    font-weight:normal;
    font-size:10pt;
    }

    #top {
    background:url(../Images/Themes/Blue/banner.png) no-repeat;
    height:84px;
    }

    #menu {
    position:absolute;
    background:url(../Images/Themes/Blue/menuBg.gif) repeat-y;
    border-bottom: 1px solid #000;
    width:125px;
    }

    #main {
    position:absolute;
    margin:18px 20px 20px 140px;
    border:1px solid #000;
    }

    #content {
    padding:20px;
    background:#FFF url(../Images/Themes/Blue/secBg.png) repeat-x;
    }

    #footer {
    height:48px;
    background:red url(../Images/Themes/Blue/footerBg.gif) repeat-x;
    font-size:7pt;
    color:#575757;

    }

    #footerLeft {
    background:lightgreen;
    float:left;
    width:50%;

    }

    #footerRight {
    background:pink;
    text-align:right;
    float:right;
    width:50%;
    }

    My code:
    <body>

    <div id="top">
    -- top --
    </div>

    <div id="menu">
    -- menu --
    <br/>link 1
    <br/>link 2
    <br/>link 3
    </div>

    <div id="main">
    <div id="content">
    -- content --
    </div>
    <div id="footer">
    <div id="footerLeft">
    -- footerLeft --
    </div>
    <div id="footerRight">
    -- footerRight --
    </div>
    </div>
    </div>

    </body>
     
    t0Mi, Feb 2, 2010 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Excellent example of more elements than you need.... and the IE left/right width issue... and the width reporting issue.

    TECHNICALLY those 50% shouldn't even be working in the standards compliant browsers - since you didn't declare position:relative on their parent for it to report it's width, and the parent element doesn't HAVE a width specified on it. In this case, I'd say IE is exhibiting the correct behavior by the specification and basing that 50% on body width instead of the wrapper. No width on #footer, no width to base 50% on.

    Try this:

    #footer {
	position:relative; /* make the element report it's width and height to children */
	width:100%; /* give the floats a width to base off of */
	height:48px;
	background:red url(../Images/Themes/Blue/footerBg.gif) repeat-x;
	font:normal 9pt/12pt arial,helvetica,sans-serif;
	color:#575757;
}

#footerLeft {
	background:lightgreen;
	float:left;
	display:inline; /* prevent IE margin doubling */
	width:50%;
	margin-right:-6px; /* prevent 3px jog error */
}

#footerRight {
	background: pink;
	text-align:right;
	float:right;
	display:inline; /* prevent IE margin doubling */
	width:50%;
}
    Code (markup):
    Oh, and you do know to ALWAYS declare your line-height when you change font-size since the default can't be trusted, and that 7pt is WAY below accessibility norms, ja?

    That should work all the way back to IE 5.x
     
    deathshadow, Feb 2, 2010 IP
  3. t0Mi

    t0Mi Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Woow, it works ! Now I understand. Clearly you're a pro. I promise to redesign the layout to what I exactly need. Thank you soo much ! :)
     
    t0Mi, Feb 2, 2010 IP