CSS 3col layout display problems in Firefox

[lgiuliari]

I can't seem to figure out why the layout I am trying to create is not displaying properly in browsers other than IE6. The body of my page does not seem to line up against the top navigation unless I completely remove my contentBody div. Also my content area, the white background wont expand to the height of my left navigation if the leftnav happens to be longer than the content in the body. Those are my two biggest problems at the moment so any help would be much appreciated.

Page - http://www.judiciary.state.nj.us/lay...st/index7.html
CSS - http://www.judiciary.state.nj.us/layout_test/style7.css

[David Laakso]

Correct the 76 markup validation errors.
Tidy Online is helpful in correcting grotesque HTML, and will correct most of the errors for you. Correct the remaining errors manually. Confirm the file is valid with the w3c Markup Validation Service, upload the valid file to your server, and notify the forum of same. Thanks.

[drhowarddrfine]

Question: are you using IE6 as your initial test? If so, you are testing against the worst browser on the planet. Always use a modern browser to make sure your markup is written correctly. That means FF, Opera or Safari. Then check in IE to see if it screws it up.

[lgiuliari]

That was a helpful site I havn't seen before. Thanks for that. I cleaned up all of the errors found when I ran it through HTML Tidy and it came back clean after running it through the w3c Markup Validation Service.

IE6 was the only browser availible until recently. I now have a copy of firefox and am working with that to try and address all of the display issues I am having.

I went with your advice and cleaned up my code but still can't seem to figure out why the body wont align up against the header and the white background in the body wont extend to the length of the leftnav when that is longer.

I've reuploaded both the css and html page cleaned up.

[David Laakso]

Well, fwiw, I'd start with a clean sheet, a clear mind, a layout that's known to work cross-browser [1], abandon the use of absolute positioning, put the vertical nav last in the source order, followed by a cleared footer, and continue to validate the markup and css while working, and coding to Opera, Safari, Firefox with check-backs to the non-compliant browsers-- IE/6 and IE/7. You can hold off on the background images until the page and column positioning is resolved. Write back if help is needed.


this layout will do
(your vertical nav would go in the orange box)

A nice touch would be to change the font-size on the body declaration of the linked example from 76% to 100%, thus avoiding what you got now all over again: mousetype on a measure that extends from here to Constantinople. ..

[drhowarddrfine]

You are seeing an IE bug. IE is collapsing margins between <div> elements which it should not do. Firefox, as always, is performing correctly. Margins between <p> should collapse to the size of the margin but this is not true of <div>.

To replicate IEs bug, add to #wrapper1 'border:1px solid some-color;' or whatever suits.

[David Laakso]

To replicate IEs bug, add to #wrapper1 'border:1px solid some-color;' or whatever suits.

Hmm. Interesting. Have we tried:

#wrapper1 {border:1px solid red;overflow:hidden;}

to see if Opera holds when at minimum font-size 32px?

[lgiuliari]

I'll try a few of the suggestions offered and post what luck I have. Thanks!

[lgiuliari]

I tried adding in:

#wrapper1 {border:1px solid red;overflow:hidden;}

Here are the links to the pages I applied that to.

http://www.judiciary.state.nj.us/layout_test/index8.html

http://www.judiciary.s tate.nj.us/layout_test/index8.html

The wrapper is aligning right against my top navigation but its seems to be my contentBody or maincol div where something is off.

Also, it was mentioned to not use absolute positioning. I am using relative for a lot of them, is that correct in doing so?

EDIT: Just another thought that came to mind while I was looking at the layout linked by David Laasko...When I loaded it into dreamweaver, the preview in there does not look like it does in the browser. Ad to edit/add content in the future, one would have to add it by editing the html. I just ask this because while its not a problem for myself, others might have to edit this page in the future that aren't as confident in editing a page without seeing what its going to look like. So I was wondering is it possible to get it to display like it will look in dreamweaver as well or I shouldn't be concerned about it and it won't look right in there but when displayed in a browser it will?

[David Laakso]

I tried adding in:

#wrapper1 {border:1px solid red;overflow:hidden;}

Here are the links to the pages I applied that to.

http://www.judiciary.state.nj.us/layout_test/index8.html

http://www.judiciary.s tate.nj.us/layout_test/index8.html

The wrapper is aligning right against my top navigation but its seems to be my contentBody or maincol div where something is off.

The top link was found.
The bottom link was not found.
Make the following change to the CSS:

#wrapper1 {
	border:1px solid red;<---------- :: delete ::     
        width:100%; <-------------------- :: add ::
	}
p {margin: 0;} <------------------------- :: add this new ruleset to the CSS file.

I am using relative for a lot of them, is that correct in doing so?

Code no more, nor less, than necessary to make the page work cross-browser. If it works without position: relative in IE7 & IE/6, then it may not be necessary. Sometimes it helps. Sometime not. And sometimes it is harmful.

EDIT: Just another thought that came to mind while I was looking at the layout linked by David Laasko...When I loaded it into dreamweaver, the preview in there does not look like it does in the browser. Ad to edit/add content in the future, one would have to add it by editing the html. I just ask this because while its not a problem for myself, others might have to edit this page in the future that aren't as confident in editing a page without seeing what its going to look like.

Let's figure they know better-- concentrating on your issues, not theirs (and spelling my name correctly).

So I was wondering is it possible to get it to display like it will look in dreamweaver as well or I shouldn't be concerned about it and it won't look right in there but when displayed in a browser it will?

No one in their right mind trusts any editor's viewer-- including Dreamweavers.

Check your page in compliant browsers: Opera, Safari, and Firefox. Make frequent check-backs to non-compliant browser: IE7 and IE/6.

Ditch Dreamweavers viewer.

[lgiuliari]

That did the trick with closing the gap. I reuploaded the changed css.

http://www.judiciary.state.nj.us/layout_test/index8.html

http://www.judiciary.s tate.nj.us/layout_test/index8.html

I also removed the absolute positioning on footerLeft and now that is displaying properly in Firefox but not IE. Any thoughts on why IE doesn't like the way I have that set?

Aside from that, everything seems to look properly excecpt a few spacing issues on my left nav which I should be able to clean up. Would you still suggest I take a look at the layout you linked earlier and see if I can use that to build the same layout? I'm not sure if I'm using an unnecessary amount of divs and if I can get the look I want but with less code.

Thank you so much for all of the help you have provided thus far.

[David Laakso]

That did the trick with closing the gap. I reuploaded the changed css.

http://www.judiciary.state.nj.us/layout_test/index8.html

http://www.judiciary.s tate.nj.us/layout_test/index8.html

You are not out of the woods yet in compliant browsers (and I still get a 404 -- file not found -- on the bottom link).
Your page is held together now only because of the frozen (IE users have to jump through hoops to scale pixel based fonts) mousetype (web typographers slang for primary content text set smaller than default) rules on the body declaration.
Re-set to:

body {
font-family: "Trebuchet MS", Arial, sans-serif;<--------------::delete::
font-size: 12px;<------------------- :: delete
font: 100%/1.4 "Trebuchet MS", Arial, sans-serif;<--------------::add::

With the above correction, the gap between the bottom of the v-nav and the footer will become greater with user discretion to scale fonts even larger than default (100%). Create a faux column by running a strip of the gray image 10px tall by the same width as the nav as a background image ( repeat-y) on #wrapper1.

#wrapper1 is the first id to open and the last id to close. The footer needs to be inside #wrapper1. Whether IE/6 and IE/7 goes along with all this remains to be seen, and perhaps even dealt with...

[David Laakso]

The comments above deal with the state of your current layout, and some needs that should be met for compliant browsers before correcting the IEs. And as it stands it is not a bad approach, providing it can, and is brought, to a successful conclusion cross-browser.

Would you still suggest I take a look at the layout you linked to earlier and see if I can use that to build the same layout?

You can't in the literal sense build the "same" layout with it. That's the point of using it. It will "look the same" on the screen as what you have-- under the hood it's an entirely differnt construction.

Nowadays many Web designers, myself among them, prefer content first in source order for a number of reasons, including accessibility, search engine optimization, heading outline structure, ease of conversion to a printing style sheet, and more. These are the reasons one might use a layout such as the one I pointed to.

Whether you decide to follow that concept, or not follow it, is strictly up to you and your client to make. The only thing I can assure you of is the world will not end if you stick with what you got now.

[lgiuliari]

Heres the links to the updated files with the suggestions you made.

http://www.judiciary.state.nj.us/layout_test/index8.html

http://www.judiciary.s tate.nj.us/layout_test/index8.html

I moved my footer into the wrapper but I'm still having the same issues with the divs seeming like they are stacking rather than sitting in each other. Or well atleast the background images I'm trying to insert.

On a local copy I used the code suggested above in another post:
[HTML]border:1px solid red;overflow:hi dden[/HTML]
And it does show that way that footerLeft is 200px wide and sitting in the footer div but the corner background pieces are sitting below and cut off because of the over flow.

You make a really good point about putting the content first for accessibilty reasons. I didn't think of that before and it is pretty important. I'd think after getting this layout to work, looking further into the other format you suggested would be well worth the knowledge I could gain from it.

[David Laakso]

Heres the links to the updated files with the suggestions you made.

http://www.judiciary.state.nj.us/layout_test/index8.html

http://www.judiciary.s tate.nj.us/layout_test/index8.html

I moved my footer into the wrapper but I'm still having the same issues with the divs seeming like they are stacking rather than sitting in each other. Or well at least the background images I'm trying to insert.

Bear with me. Please forget about IE until we get you out of the woods in compliant browsers.

Since we've converted pixel font-size on the body declaration, doesn't it make sense to convert /all/ pixel font-sizes to percent throughout the style sheet?

Your primary content is in the center panel so it inherits default (100%) from the body-- and this is good.

Your secondary content is in the right panel-- since it is "secondary content" does it make sense to assign the p in the style sheet for it a reduction of its font size by 5% less than default to 95%?

Assuming the horizontal navigation is less important than both the primary content and the secondary content, does it make sense to reduce it by 10% less than default to 90%?

Since the vertical navigation is less important than the primary content, the secondary content, and the horizontal navigation, does it make sense to reduce it by 15% less than default to 85%?

That leaves the word "Advanced" in the search bar the least important content on the page. Does it make sense to reduce the font-size of the least important content to 20% less than default to 80%?

Content determines height. Therefore, to prevent the content (the stuff in the search block and the horizontal nav bar) from escaping their containers with user discretion to scale fonts delete, the height on their containers and assign padding top and bottom to them. There is one element that needs height-- the footer because it contains a fixed height image, so leave it as is.

Since you no longer have any absolute positioning, all the z-index rules can be deleted.

There's more but we'll get to that and the folks in Redmond in due time. With your permission, of course...