Layout's Widths

Not the same in all browsers

[ridingforlife]

Hello all, I'm new to the forum.

I have a layout I am working on, and I'm testing it right now in four different browsers - IE(7), Firefox, Opera, and Safari.

I had the layout perfect in IE, however in FF and Opera the widths of the navigation/content boxes and footer didn't match up with each other, or with the banner at the top.

The banner is at the top, below that is vertical navigation on the left side, and the content to the right. The footer is below the navigation/content.

So it should look like this:

-BANNER--
N CONTENT
A CONTENT
V CONTENT
I CONTENT
G CONTENT
A CONTENT
T CONTENT
I CONTENT
O CONTENT
N CONTENT
--FOOTER-

My goal is to have layout straight along each side vertically, if that makes sense.

The layout is in the middle of the page - I have auto-ed the margin of the banner so it is in the middle of the page, and floated the navigation to left. Then using margins of the navigation and content to move them under the banner (margin-left for the navigation, and margin-left and margin-right for the content). The footer's left margin is set to move it under everything. The banner, navigation, and footer have set widths. The content does not.

So, I changed some CSS so that it looks perfect in FF, and used conditional comments for IE.

Now, here's the problem currently: The layout's widths match up on each side perfectly in IE and FF, but not in Opera or Safari, though they are close.

Does anyone know how I can go about fixing this? I hope this all makes sense!

Thanks. :)

[swa66]

Since you started somewhat backwards from how most of us work: first a few questions:

• did you do resets of defaults margins padding etc ?
  
• does the html and css validate?
  
• any hacks that didn't get moved to the conditional comments?

Try posting some (minimal) code (ignore IE and its conditional stuff) ...

[ridingforlife]

Hello,

I'm not sure what you mean by the first point?

Yes, the html and css both validate.

I haven't used any other hacks. The only thing I have done is a few conditional comments for IE.

Here is some code then, of each div of the layout. I won't include all the extra stuff for paragraphs and headings and the extra stuff. Header is the banner, main is the content.

#header {
width: 850px;
height: 198px;
background: #fff url(images/banner6.png) top left;
margin: auto;
border: 10px solid #fff;
}

#navigation {
width: 180px;
background: #000 url(images/side1.png) no-repeat bottom left;
float: left;
margin-left: 188px;
}

#main {
padding: 3px;
background-color: #eed;
border-right: 10px solid #fff;
border-left: 180px solid #000;
margin-left: 188px;
margin-right: 189px;
}

#footer {
width: 844px;
height: 30px;
background-color: #000;
padding: 3px;
border: 10px solid #fff;
clear: both;
margin-left: 188px;
}

I should probably also explain, that the content or "main" has a large wide left border the width of the navigation, so that the black colour of the border is the background of the navigation all the way down to the footer. As for all the white borders... there's supposed to be a 10px white border between each div or section (though I am having issues getting it to go all the way down the navigation instead of stopping at the bottom of the links, but that's a different issue that I'll deal with later... There are no borders set for the navigation in the code above because I am using a div inside that div to get the border on either side, and I haven't shown that piece of code as it is not relevent to this current problem).

This layout orginally was done with a table for a school project, and works perfectly with that in all browsers. But since tables aren't supposed to be used for layouts, I wanted to switch it over to divs and use CSS.

Edit: So I decided to test what I have right now in IE5.55 (half for fun and half because I wouldn't be surprised if SOME people still use it, as only now I know someone who just upgraded from Windows 98!) and IE6, and in both it's pretty messed up with the floating. How wonderful.

[ridingforlife]

So I used some more conditional comments, and the widths are working fine in the three IE versions I am testing in. Netscape 9 also works too, as well as FF still.

I've checked again, and Opera and Safari still don't work - but they are close! They're both off by a few pixels each on either side - but not in the same way exactly. The navigation/content is a bit too wide on both sides in Safari, but the opposite in Opera. The footer matches up with the navigation on the left side in both, but is slightly not wide enough in Safari, but slightly too big in Opera.

So Safari and Opera are doing the same thing, but opposite? This is quite frustrating.

The html/css both still validate as well.

If anyone can help, I greatly appreciate it. :)

-Courtney

[swa66]

I'm having trouble understanding what you try to achieve, what's the html to go along with the sample css ? (nesting of the divs)?
I'm worried about the huge borders that go along with huge margins, not sure what you intend there.

Backwards comment: we typically do not touch IE at all till it works in the rest. Trying to do IE from the beginning (esp. with width, padding and borders will throw you more off track.)

From what I see this is a basic 2 col layout with a fixed width. That should have dozens of well tested examples.
Typically a solution would be to have a fixed margin that's wide enough to hold the floated column, and the footer clearing the float and stretching the parent. I'm not sure what you try to achieve with the wide borders.

resetting defaults: every browser has defaults it uses for padding, and margins for different elements.
A harsh way to reset them (expect some drawbacks on e.g. <ul>)
* {padding:0; margin:0}
more selective resetting can help too.

"

margin:auto

" will also set the top and bottom margins to auto (vertical centering), I suppose you meant "

margin: 0 auto 0 auto

" or "

margin: 0 auto

"

[ridingforlife]

Hi,

Sorry I didn't include any html, but I have almost fixed the problem... your post triggered something in my brain!

I put a div called "whole" around the four divs (header, navigation, main, and footer) and set the width to what I want the whole layout to be and the margin to auto so it is centered. So, then I was able to remove all the left/right margins of the header, navigation, main, and footer.

It is now working properly, except for in IE 5 and 6. The problem is in the footer.

The white border is along the top and bottom of the footer, but it has disappeared on the right and left sides, and the last bit of the text at the bottom right corner of the footer has disappeared.

So, it looks something like this right now:

------------
..............te
------------

Instead of:

¦------------¦
¦...........text¦
¦------------¦

(The periods are where blank space is as the text is supposed to be at the bottom right of the footer)

[ridingforlife]

Well I fixed the footer problem! :)

But I have one more issue.

I have a 10px border between and around each section - header, navigation, main, and footer.

The problem is that I want the border to go all the way down on either side of the navigation, to meet the footer. However, it stops on either side at the end of the links in the navigation column.

Is there a way to get the border to go all the way down on either side of the navigation to meet up with the footer?

Right now I am using a div "innerNav" inside of the navigation div to get the border on either side, but it stops at the end of the links. I do have the black background behind the navigation going all the way down (instead of ending at the links like the borders) because I am using the left border of "main" to be the background, as you will see from my bolding it below.

<div id="navigation">
<div id="innerNav">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>

#innerNav {
border-right: 10px solid #fff;
border-left: 10px solid #fff;
margin: 0px;
padding: 0px;
}

#navigation {
width: 180px;
vertical-align: top;
text-align: center;
background: #000 url() no-repeat bottom left;
color: #fff;
float: left;
border: 0px;
}

#main {
padding: 3px;
vertical-align: top;
text-align: left;
background-color: #eed;
border-right: 10px solid #fff;
border-left: 180px solid #000;
}