Layout differences in IE6, IE7 and FF.

**badblood** · 03-29-2007 10:32 AM

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.

**WebJoel** · 03-29-2007 10:37 AM

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...

**Centauri** · 03-29-2007 11:34 AM

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

**badblood** · 03-29-2007 11:47 AM

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">
content
</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 & 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!

**badblood** · 03-29-2007 11:55 AM

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!

**badblood** · 03-31-2007 02:03 PM

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!

**Centauri** · 03-31-2007 07:28 PM

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: Layout differences in IE6, IE7 and FF.

Thread Tools

Display

Layout differences in IE6, IE7 and FF.

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions