www.webdeveloper.com
Results 1 to 3 of 3

Thread: Compatibility View layout issue

  1. #1
    Join Date
    Feb 2011
    Posts
    6

    Compatibility View layout issue

    I have a floating right column on my page that moves with the sizing of the window. It works fine in IE8, FF and Rockmelt, but when I turn on compatibility mode it moves to the left and sticks to the right side of my center column and will collapse and disappear when the window is sized down. The code is below. Any ideas?

    It's designed so that the center column has a fixed width of 665px and won't shrink down on window resizing, hence the extra out <div>s.

    Thank you to everyone who has helped me with this page so far.

    <!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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    body {
    min-width: 1000px;
    margin:0;
    padding:0;
    background-position: top center;
    background-color:#C1A898;
    }

    #left-side-outer {
    width: 506px;
    float: left;
    margin-right: -330px;
    height: 100px;
    }

    #left-side{
    margin-right: 665px;
    background-color: rgb(177, 127, 100);
    height: 100%;
    text-align: center;
    }

    #center-column {
    width: 665px;
    float: left;
    color: #000000;
    background-color: rgb(193, 168, 152);
    position: relative;
    z-index: 10;
    height: 100%;
    text-align: center;
    }

    #right-side-outer {
    width: 185px;
    min-width: 185px;
    float: right;
    margin-left: -534px;
    height: 100%;
    }

    #right-side {
    height: 100%;
    background-color: rgb(177, 127, 100);
    text-align: center;
    float: right;
    clear: left;
    }

    #header{
    clear:both;
    height: 182px;
    text-align: left;
    }

    #footer{
    clear:both;
    height: 100px;
    text-align: center;
    background-color: rgb(177, 127, 100);
    }

    </style>
    </head>
    <body>
    <div id="header">Header Image</div>
    <div id="left-side-outer" style="width: 516px" class="container">
    <div id="left-side" style="width: 162px" class="container">
    Left side</div>
    </div>
    <div id="center-column" class="container">Center Content<br />
    </div>

    <div id="right-side-outer" class="container">
    <div id="right-side" style="width: 185px" class="container">Right Column</div>
    </div>
    <div id="footer">Footer</div>
    </body>
    </html>

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    A little bit clumsy your CSS. You have clear the float where you should not, but you did not clear the float when you should. Don't use margins if it is not necessary.

    Think your document as being split into 3 rows: header, content and footer
    Think your content as being split into 3 floated columns: left, center and right. You will need a 4th empty div there, to clear the float.

    Could be as simple as that:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <style type="text/css">
    *{
    margin:0;
    padding:0;
    }
    html body{
    min-width:1000px;
    background:#C1A898;
    }
    .header {
    width:100&#37;;
    height:182px;
    }
    .content{
    width:100%;
    }
    .left{
    width:162px;
    height:100px;
    float:left;
    background:#B17F64;
    }
    .center{
    float:left;
    }
    .right{
    width:185px;
    float:right;
    background:#B17F64;
    }
    .clear{
    clear:both;
    }
    .footer{
    width:100%;
    height:100px;
    background:#B17F64;
    }
    </style>
    
    <body>
    <div class="header">Header image</div>
    <div class="content">
    	<div class="left">Left side</div>
    	<div class="center">Center content</div>
    	<div class="right">Right side</div>
    	<div class="clear"></div><!-- this will clear the float to keep the parent's overflow-->
    </div>
    <div class="footer">Footer</div>
    </body>
    </html>
    Now this would look the same, all over the browsers, versions, compatibilities, etc...

    Just a note: CSS min-width works buggy in IE7. It will work in this case, but in other cases you should use overflow:visible, to make IE7 to be able to distinguish between width and min-width
    Last edited by Kor; 03-11-2011 at 08:49 AM.

  3. #3
    Join Date
    Feb 2011
    Posts
    6
    Thanks for the help. I'll add my content and check for issues.
    Last edited by hexic81; 03-11-2011 at 02:55 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles