www.webdeveloper.com
Results 1 to 7 of 7

Thread: Layout differences in IE6, IE7 and FF.

  1. #1
    Join Date
    Mar 2007
    Posts
    12

    Layout differences in IE6, IE7 and FF.

    Hi,

    See attached image for what I mean by layout differences. When I say differences, I really mean screwing up totally!

    I only have IE7 & FF layouts in the screenie, but IE6 moves the main content div to below the menu vertically, but keeps it in line horizontally!

    Any thoughts, or is it just a case of browsers recognising the code slightly differently.

    Cheers.
    Attached Images Attached Images

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    This would be solvable but I'd need to see a URL. I have a suspect in mind already but can't say what it might be just from looking at the images...
    I build for: Firefox and tweak for IE

  3. #3
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Some of that is resolved in my reply to your other post regarding the menu. As WebJoel says, need a url or code.

    Cheers
    Graeme

  4. #4
    Join Date
    Mar 2007
    Posts
    12
    body {
    font-family: Arial, Helvetica, sans-serif;
    background-color:#C1DADA;
    font-size: 12px;
    }

    #intranet-trunk {
    position:relative;
    width:750px;
    height:auto !important;
    height:100%;
    background:#FFFFFF;
    top: 0px;
    margin:0 auto;
    }

    #intranet-trunk-container {
    position:relative;
    background:#FFFFFF;
    height:100%;
    width:100%;
    }

    #intranet-banner {
    position:relative;
    width:750px;
    height: 160px;
    background:#FFFFFF url(images/intranet_banner_cornered_both_green_light.jpg) no-repeat center top;
    }

    #intranet-banner-logo {
    width:750px;
    height:160px;
    background-image:url(images/intranet_banner_logo2.gif);
    }

    * {
    margin: 0;
    padding: 0;
    }

    #intranet-menu {
    float:left;
    background-color:#FFFFFF;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 10px;
    }

    #intranet-menu li {
    list-style:none;
    margin-top:5px;
    }

    #intranet-menu a {
    color:#0000FF;
    text-decoration:none;
    background-image:url(images/interface/link_button.jpg);
    background-repeat: repeat-y;
    display: block;
    width: 182px;
    padding: 2px 0 2px 5px;
    }

    #intranet-menu a:hover {
    color: #131313;
    font-weight: bold;
    background-image:url(images/interface/hover_button.jpg);
    }

    #intranet-menu a:active {
    color:#0000FF;
    background-image:url(images/interface/busy_button.jpg);
    }

    #intranet-content {
    float:none;
    width:561px;
    height:auto !important;
    height:1%;
    margin-left:189px;
    margin-top:0px;
    background-color:#FFFFFF;
    }

    #intranet-content-text {
    margin-top: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    margin-left: 2px;
    }

    #intranet-altmenu {
    clear:both;
    width:750px;
    height:auto !important;
    height:1%;
    background-color:#FFFFFF;
    }

    #intranet-altmenu-corner-left {
    float:left;
    background-image:url(images/bottom_corner_left.gif);
    width:34px;
    height:34px;
    }

    #intranet-altmenu-corner-right {
    float:right;
    background-image:url(images/bottom_corner_right.gif);
    width:34px;
    height:34px;
    }

    #intranet-altmenu-text {
    text-align:center;
    font-size:10px;
    margin-top: 5px;
    margin-right: 10px;
    margin-bottom: 5px;
    margin-left: 10px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-top-color: #C1DADA;
    }

    #intranet-altmenu-links {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    }

    #intranet-altmenu-links a:link{
    color:#0000FF;
    text-decoration:none;
    }

    #intranet-altmenu-links a:hover{
    color:#0000FF;
    text-decoration:underline;
    That's the full CSS file. I am now getting the one layout issue with IE6/7. That's the CSS file with the code you supplied Centauri/Graeme. Thanks for that, worked a treat.

    <body>

    <div id="intranet-trunk">
    <div id="intranet-trunk-container">
    <div id="intranet-banner">
    <div id="intranet-banner-logo">
    </div>
    </div>
    <div id="intranet-menu">
    <ul>
    <li><a href="#">Index</a></li>
    <li><a href="#">Corporate Forum</a></li>
    <li><a href="#">NIAS Reference Centre</a></li>
    <li><a href="#">Directorates</a></li>
    <li><a href="#">Strategies</a></li>
    <li><a href="#">Policies/Procedures</a></li>
    <li><a href="#">Trust Board</a></li>
    <li><a href="#">Agenda for Change</a></li>
    <li><a href="#">Review of Public Administration</a></li>
    <li><a href="#">Staff Communiques</a></li>
    <li><a href="#">NIAS Newsletter</a></li>
    <li><a href="#">Feedback</a></li>
    </ul>
    </div>
    <div id="intranet-content">
    <div id="intranet-content-text">
    <!-- TemplateBeginEditable name="content" -->content<!-- TemplateEndEditable -->
    </div>
    </div>
    <div id="intranet-altmenu">
    <div id="intranet-altmenu-text">
    <div id="intranet-altmenu-links">
    <a href="#">Corporate Bulletin Board</a> |
    <a href="#">NIAS Reference Centre</a> |
    <a href="#">Directorates</a> |
    <a href="#">Strategies</a> |
    <a href="#">Policies/Procedures</a> |
    <a href="#">Trust Board</a> |
    <a href="#">Agenda for Change</a> |
    <a href="#">Review of Public Administration</a> |
    <a href="#">Staff Communiques</a> |
    <a href="#">NIAS Newsletter</a> |
    <a href="#">Complaints &amp; Compliments</a>
    </div>
    </div>
    </div>
    </div>
    </div>


    </body>
    That's the main html code. Attached is what I am getting in IE6/7. Firefox is shown too. Sorry for being annoying.

    Thanks guys!
    Attached Images Attached Images

  5. #5
    Join Date
    Mar 2007
    Posts
    12
    I've just been quickly tweaking a few margins and have noticed if I have the margin in -
    #intranet-menu {
    float:left;
    background-color:#FFFFFF;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 10px;
    }
    - set to 0px, the layout is grand. I'll assume if I tweak the margins on the other divs, things will work out fine?

    Thanks!

  6. #6
    Join Date
    Mar 2007
    Posts
    12
    I'm still getting the dodgy layout issues within IE6. IE7 and FF is grand, but IE6 is still placing the content div below the menu div.

    Help!

  7. #7
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Been looking at your code. What is the deal with the unnecessary nested divs? #intranet-trunk-container and #intranet-content-text are totally not needed, and it looks like one or two divs are not needed in the footer either.

    A little maths required. If you used side margins of 5px on #intranet-menu, then the width of this div is width of <a> of 182px, plus its 5px left padding, plus above margins of 2x 5px = 197px total. If NOT using the #intranet-content div, then giving it 10px additional left and right margins will do the same job as padding, therefore left margin of 207px. As IE has a little problem with calculations around floats, DON'T try to specify exact widths and expect them to fit. As a div naturally expands the full width of its container, there is no need to specify the width of #intranet-content div at all (just as there is no need to set the widths of #intranet-banner or #intranet-banner-logo either).

    Try this
    Code:
    #intranet-menu {
    	float:left;
    	background-color:#FFFFFF;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	margin: 0 5px;
    }
    #intranet-content {
    	background-color:#FFFFFF;
    	margin: 0 10px 0 207px;
    }
    Cheers
    Graeme

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