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/lay...st/index8.html
http://www.judiciary.state.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/lay...st/index8.html
http://www.judiciary.state.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/lay...st/index8.html
http://www.judiciary.state.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/lay...st/index8.html
http://www.judiciary.state.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/lay...st/index8.html
http://www.judiciary.state.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:hidden[/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/lay...st/index8.html
http://www.judiciary.state.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...

[lgiuliari]

I reuploaded copies of the html and css with all of the font sizes converted to percents and removed the z-indexes.

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.

Are you saying that I should be able to remove the heights I have set on things like the search bar and horizontal nav and then use padding to get the height I need?

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

Permission to?

And as I mentioned before, thank you again for all of the help you have provided so far!

[David Laakso]

Are you saying that I should be able to remove the heights I have set on things like the search bar and horizontal nav and then use padding to get the height I need?

Yes. And check at 2+ font-scaling in Safari, FF, and SeaMonkey to male sure the links and search stuff is not walking out the bottom of their respective containers.


PS I think you forgot to reduce the font-size of the secondary content....

#rightNav p {font-size: 95%;}
 

[lgiuliari]

Alright, I'll start working to remove those now. And yes I did let that one slip by. Updated the css with that change for now. =)

[lgiuliari]

I removed the heights from the top nav, header and search bar and used some padding to get the spacing to look right. I checked it in the browsers you suggested and I dont appear to get any thing out of place.

http://www.judiciary.state.nj.us/lay...st/index8.html
http://www.judiciary.state.nj.us/layout_test/style8.css

[David Laakso]

http://www.judiciary.state.nj.us/lay...st/index8.html
http://www.judiciary.state.nj.us/layout_test/style8.css

You are getting there. Still concentrating on compliant browsers. The search bar stuff is a little tight vertically. Confusing to cope with as you have styles in the html and css file for it. Only the css was modified (below).

The horizontal link bar is a little tight vertically-- this and some other matters dealt with below (see the notes).

Modification and/or tweaking may or may not be needed (done live, and not tested).

#searchBar {
background-image: url(images/search_background.gif);<-- delete :: not deep enough to hold text
background-repeat: repeat-x;<-------------------------- delete
background: #dedecd;<---------------------------------- add to fake the image        
border-top: 3px double #fff;<-------------------------- add to fake the image 
border-bottom: 3px double #fff;<----------------------- add to fake the image 
text-align: right;
padding: 6px 10px 0.5em 0;<-------------------------- add 
padding-right: 10px;<---------------------------------- delete
font-size: 80%;<--------------------------------------- delete
color: #004990;
}
#searchBar a:link, a:visited { 
font-size: 65%;<--------------------------------------- add to re-set the word "advanced"
}
.searchButton{ <--------------------------------------- delete entire ruleset :: not needed
vertical-align:middle;
}
.inputSearch{ <---------------------------------------- delete entire ruleset :: not needed
font-family: Trebuchet MS, Arial, sans-serif;
font-size: 75%;
height:    20px;
width: 150px;
border:    0px;
padding: 0;
margin: 0;
}
#topNav {
background-color: #bdc7d5;
border: 1px solid #b2bcc8;*/<- delete
font-size: 90%;<-------------- delete :: moved to li
color: #000000;<-------------- delete
padding-bottom: 26px;<-------- delete
padding: 8px 0;<-------------- add to center vertically
overflow: hidden; <----------- add to clear and enclose   
}
#topNav li
{
float: left;
font-size: 90%;<-------------- add
}
p {
margin: 0;<-------------- delete
margin: 0 0 0 20px;<------add :: shortens primary content line measure to improve readability
padding: 20px 0;<----   --add :: sets the paragraph leading to improve readability
}
.leftNavHeader {
text-align: left;<-------------delete :: left is default so this is not needed
padding: 12px 4px 12px 6px;<-- amend to read
}
#leftNav {
font-size: 85%;<-------------- delete :: moved to li and size bumped
}
#leftNav li {
font-size: 90%;<-------------- add
}    
#rightNav p {
position:relative;<------------delete :: not needed 
padding-top: 10px;<------------delete 
padding: 31px 0;<--------------add so secondary content lines up with primary content 
}    
 
 

[lgiuliari]

I added in all of your suggestions.

Here's the pages with those changes -

http://www.judiciary.state.nj.us/la...est/index8.html
http://www.judiciary.state.nj.us/layout_test/style8.css

I noticed the 65% font-size in the #searchBar div is over riding the font sizes defined in the lists for the leftNav and topNav. I'll be sure to post another set of links if I can get the size to work properly on those 2 pieces.

Thanks again for all of your help so far.

[David Laakso]

I noticed the 65% font-size in the #searchBar div is over riding the font sizes defined in the lists for the leftNav and topNav.

404 on top URL.

Move the font size from the li to the li a as below:

#topNav li 
{
font-size: 90%;<----delete
}
#topNav li a
{
font-size: 90%;<----add
}
 
#leftNav li 
{
font-size: 90%;<----delete
}
#leftNav li a
{
font-size: 90%;<----add
}
 

[lgiuliari]

http://www.judiciary.state.nj.us/lay...st/index8.html
http://www.judiciary.state.nj.us/layout_test/style8.css

Ah that did the trick. I didn't think at first to move it to the li a vs the li. Why thought does the 65% over ride the links for the rest of the page like that when thats defined in #searchBar. Shouldn't it technically be just confined to that div?

[David Laakso]

Ah that did the trick. I didn't think at first to move it to the li a vs the li. Why though does the 65% override the links for the rest of the page like that when thats defined in #searchBar. Shouldn't it technically be just confined to that div?

Good question. I guess because the selectors in question inherited the 65% font-size set on #searchbar li a. Moving the target selector from li to li a for both the top nav and left nav, gives them higher specificity[1], thus overriding the inherited 65%.
[1] Cascading, and Inheritance

[lgiuliari]

Ah yes that makes sense with it now working once moved to the li a. The link is very helpful too, thanks for that.

Are there other areas I should be looking at to figure out how to fix to make my layout work in compliant browsers before tackling the challenge of getting it to display in non-compliant browsers?

[David Laakso]

Are there other areas I should be looking at to figure out how to fix to make my layout work in compliant browsers before tackling the challenge of getting it to display in non-compliant browsers?

Depends on whether or not you suffer from OCD (Obsessive-Compulsive Disorder).
Personally, if you're up for it I'd try:
1/ Tweak the search bar so the bottom of the search thing isn't clipped in Opera, when Opera is set at minimum font-size 32px.
Open Opera>address bar>type: opera:config>in next screen to come up type: minimum>minimum font-size>re-set>32px>save.
2/ Re-set the width of the first to open, last to close div (as below), to a min/max width so users on screens from than 1280 to 3600 do not land on a page whose primary content line measure is so long as to be very difficult to read (IE/6 does not support min/max width. Use your favorite work around. If you don't have one, wait... we'll get to it.

#foo {width: 99%; margin: 0 auto 0 auto; 
max-width: 60em; min-width: 552px; overflow: hidden;}
* html #wrapper {overflow: visible;}/*4 IE/6*/
 

3/ Whether the value of the background color (gray) is too dark for ease of reading is a matter of opinion-- my opinion is it is too dark. Try in the #eee range. See what you think?

[lgiuliari]

I'm pretty OCD when it comes to this kind of stuff.

http://www.judiciary.state.nj.us/lay...t/index10.html
http://www.judiciary.state.nj.us/lay...st/style10.css

Looking at your suggestions, I was able to fix the clipping problem in Opera at the font size you suggested. I removed the height on the box itself and it seemed to do the trick.

The second suggestion I'm not too clear about. I added in the code you suggested and put a <div id="foo"> around my layout and saw it brought in the sides giving some padding. I did adjust it because I added in a header and made the min width the total with of the 2 pieces of my header put together. I also upped it to 70em to fill out my page a bit more on larger resolutions. One thing I did notice though, was if I go down to smaller resolutions or shrink the size of the window, I no longer have the 12 pixel margin on the right, but it does stay on the top left and bottom. Is there a way to correct that? Also for the * html #wrapper line, where should I add in a wrapper div? Inside the foo one?

I'm pretty fuzzy on how to do the work arounds to get things to work in IE. That was my initial problem, sort of, in that I had a working layout in IE but not in compliant browsers. But now things seem to be working much better in compliant browsers, so am I getting closer to a point where we can begin to work on getting the same effects I am in compliant browsers in non-compliant browsers?

As for the colors, I'm unfortunately locked into these so they'll have to stick for now. =(

Also, as always thank you so much for all your help thus far. I've leaned quite a bit more since the start of this topic and learning how to do a layout in css compared to tables is infinitely better!

[David Laakso]

http://www.judiciary.state.nj.us/lay...t/index10.html
http://www.judiciary.state.nj.us/lay...st/style10.css
But now things seem to be working much better in compliant browsers, so am I getting closer to a point where we can begin to work on getting the same effects I am in compliant browsers in non-compliant browsers?

Yes <sigh> it is a good idea to make sure your automobile has an engine before worrying about the fact that the windshield wipers are not working.

I will get back to you on all the questions you raised, including correction for our beloved friends, associates, and comrades in Redmond, in a while...

[David Laakso]

I'm pretty OCD when it comes to this kind of stuff.

Then since you've spent all this time on it, you'll want to validate to an xhtml strict doctype rather than xhtml transitional doctype (and use proper character encoding). I'll let you, and someone else, wrangle that part out.

Search engines will have fun indexing your site as you have a document title but no h1 heading supporting it, nor no h2 through h6 headings to serve as an outline of the documents content.

The 30 or so links in the left column, and the secondary content in the right column preceding the primary content in the center column may not help the SEO cause, either; nor that of those using so called "screen readers." But we have talked about this before, including ways to resolve it.

Nevertheless it seems to be working relatively well now cross-browser. Corrections to IE/6 have been made including the addition of min/max js [1] for min/max support in that browser. The CSS has been cleaned including the use of CSS shorthand for some rules. You'll want to check the page at 800 to see if you really want to draw a 170px horizontal scroll bar. And check on your end at 1024 with a side bar in place.

Corrections and notes on this file.

[1] doxdesk min/max js

[lgiuliari]

I can't begin to thank you enough on all of the help you have provided me.

I'll look into validating it to a xhtml strict doctype.

I left the h1 and all those declarations for last and figured I would get the big pieces working first then clean up and add in the finer details. I will also look further into the things you've mentioned prior about putting the content first in the code to make it more accessible to screen readers and so on. That seems pretty important to making a site fully accessible.

Also the comments in the css are very helpful. I've learned quite a bit and this thread is a great reference. Thank you again for all of your help!

[David Laakso]

I'll look into validating it to a xhtml strict doctype.

Replace your current doctype and character encoding with this. Then w3c Validation Service will then show what needs correction.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
 

Imho, you dont want to draw the 170px h-scroll bar you're getting in an 800 window; and, the width of the page is too close (tight) to the rails at 1024. Try replacing the styles for #page, with these-- and see what your opinion is regarding use at 800 and 1024...

#page { /*border: 1px solid fuchsia;*/ /*testing only*/
width: 99%;
margin: 0 auto 0 auto;
max-width: 60em;
min-width: 765px;
overflow: hidden;
} 
 

[/code]

[lgiuliari]

I ran it through both as Transitional and Strict. It came back fine in Transitional and with 12 errors when Strict. All of the errors though were related to the google search. I'll have to do a bit more digging, but I'm not sure I can alter that code much since its the code from the appliance. I'll have to investigate that one more. If I can't alter the code for the search and still get those errors with it set to strict, would it be best to leave it as transitional or strict anyway?

Your right and the 60em width does look better. I played around with the min-width a bit and I think I'll have to figure out what to do with that one. The main problem is the size of that image on the right. I'll have to see if I am able to change that image. I also get some overflow issues when I kick it down to 765 since the images together are larger. I put in a overflow: hidden; on the #header to stop it from doing that so it just cuts out the whole image but then the layout looks even more bland to someone at that res. Now if only my header could scale size wise based on screen resolution...

[David Laakso]

I ran it through both as Transitional and Strict. It came back fine in Transitional and with 12 errors when Strict.

I'll leave you, Google, and someone else to the validation issues. Plenty of sites running around in valid xhtml strict mode using Google search afaik-- find one, and figure out how they did it-- and/or Google for same. You and the w3c rule your client's site on the Web, not Googles applications.

Your right and the 60em width does look better. I played around with the min-width a bit and I think I'll have to figure out what to do with that one. The main problem is the size of that image on the right.

Didn't look at it but seem to recall the logo has white space on the right that might be cropped? And you might consider allowing the image on the right float beneath the logo in narrow windows (or decrease its width)? Or, you could just leave an h- scroll bar at 800-- mindful, of course, it is difficult to read text if you have to scroll both horizontally and vertically to do so...

[lgiuliari]

I removed the white space off the right image before so I could get more of it in at the top. There is some still on the logo image but I didn't want to completely crop it off so the logo doesn't get too close to the right image.

Before in earlier versions of my layout, before I posted here, I had the header overlapping when the window was made smaller. The way I did it though was using absolute positioning. Is there an easier way to accomplish that. I tried playing with the overlow on #header but no luck.

Here's the code I was using before:

#headerLeft {
    background-attachment: fixed;
    background-image: url(images/banner_topLeft.gif);
    background-repeat: no-repeat;
    background-position: left;
    height: 88px;
    width: 357px;
    float:left;
    position: absolute;
    left: 12px;
}
#headerRight {
    background-attachment: fixed;
    background-image: url(images/banner_topRight.jpg);
    background-repeat: no-repeat;
    background-position: right;
    height: 88px;
    width: 638px;
    float:right;
    position: absolute;
    right: 12px;
}
 

I've also looked some places and seen its possible to load a different stylesheet based on a users resolution. I might look into that because that might be a viable solution and maybe make things look a bit better on an 800x600 resolution but am unsure of how hard it would be to maintain it. I'll have to investigate further.

[David Laakso]

Re:
http://www.judiciary.state.nj.us/lay...t/index10.html
Let's explore more reasonable alternatives before you go off the deep end into total and complete oblivion..
Back-up your files just in case you want to back.
Re-set the CSS and revise the markup as follows:

CSS
#page {
min-width: 776px; <-------- :: amend to read ::
} 
#header {
position:relative; <-------- :: add rule ::
width:100%;<-------- :: add rule ::
height:88px;<-------- :: add rule ::
}
#headerLeft {...} <-------- :: entire declaration not needed ::
#headerRight {...} <-------- :: entire declaration not needed ::
Add both of these new declations to your style sheet
img.c1  {position:absolute; top:0;left:0;width: 357px;height: 88px;z-index:1; }
img.c2 {position:absolute; top:0;right:0;width:600px;height: 88px;}
HTML
<div id="page">
<div id="header">
<img class="c1" src="http://www.judiciary.state.nj.us/layout_test/images/banner_topLeft.gif" width="357" height="88" alt="" />
<img class="c2" src="http://www.judiciary.state.nj.us/layout_test/images/banner_topRight.jpg" width="600" height="88" alt="" />
</div><!--/header-->
<div id="searchBar">
 

The flag/court house image will slide under the logo at narrow windows and the page will hold at 800 without drawing an h-scroll bar.
What you think?

[lgiuliari]

I added in the changes and heres the results:

http://www.judiciary.state.nj.us/lay...st/index12.htm
http://www.judiciary.state.nj.us/lay...st/style12.css

Before I brought the header images in through the stylesheet because I figured if any changes in the future were to occur, I thought it would be easier to do the changes through the stylesheet vs on each individual page.

I'm looking further into the body now not taking on the 60em max-width after adding in those changes. I'll upload another set of files if I can figure out why that is no longer working. It just seems like the header is adjusting now. But I did check an 800x600 res and that piece does contract properly now. Thanks!

[David Laakso]

When anything does not work as intended, the first thing to do is validate the markup and css: Line 350, Column 5: end tag for element "div" which is not open.

<div id="header">
...
...
</div>
</div><------------------ :: delete
<div id="searchBar">
 
 
 
 
 
 
 

[lgiuliari]

Doh, I can't believe I missed something as simple as that. I replaced the file with the corrected version.

Does it make more sense to put the header in the html vs the stylesheet? Just a thought I had that I mentioned since I did it the other way as a background image just incase the size of the header pieces ever needed to change, I wouldn't have to edit all of the pages and could just change the stylesheet.

[David Laakso]

re: http://www.judiciary.state.nj.us/lay...st/index12.htm
What you put where is up to you. At some point, you'll want an h1 in the header-- search engines and so called "screen readers" for the sightless can't "read" your site's logo. How to handle that is a matter of opinion. Interesting thoughts (on one method) were recently brought up on this thread .

[lgiuliari]

That is defintely an interesting approach to work in the h1. I gave it a shot and had some success. I even managed to work it so the images are being read from the stylesheet.

I edited my header to be:

<div id="header"><h1 class="logo"><a href="http://www.njcourts.com" class="logo">New Jersey Courts</a></h1><div id="headerRight"></div></div>

And added to my stylesheet:

#headerRight {
    background: url(images/banner_topRight.jpg) no-repeat right;
    height: 88px;
    width: 600px;
    float:right;
}
h1.logo {
    background:url(images/banner_topLeft.gif) no-repeat top right;
    position:absolute;
    float: left;
    margin: 0;
    padding: 0;
    width: 357px;
    height: 88px;
    z-index:1;
} 
a.logo {
    display:block;
    height:88px;
    width:357px;
    text-indent:-9999px;
}

http://www.judiciary.state.nj.us/lay...st/index13.htm
http://www.judiciary.state.nj.us/lay...st/style13.css

[David Laakso]

That is defintely an interesting approach to work in the h1. I gave it a shot and had some success. I even managed to work it so the images are being read from the stylesheet.

http://www.judiciary.state.nj.us/lay...st/index13.htm
http://www.judiciary.state.nj.us/lay...st/style13.css[/quote]
I think you handled it quite well-- sure makes a difference when viewing your page with CSS disabled. Take your page for a ride in a Lynx Viewer and see what you think...

[lgiuliari]

I gave the stripped down view a shot. All of my navigation is below my content so I think I might give it a shot to do some rearranging and put my content first to make it more accessible to screen readers. Thanks for the resource, I'll be saving that site to do further checks in.

[David Laakso]

Not sure what you mean, but nevertheless you might consider using this layout [1]. Put your vertical navigation in the #extra division (orange block) so it is last in the source order. FWIW, those layouts use div#foo. That high specificity is not needed in most cases. #foo will do. Things should go well for you in switching to a negative-margin layout as you have worked out most issues in your current layout. Good luck.
laout gala 14

[lgiuliari]

Sorry if that was a bit unclear. I was refering to how my site has my navigation first in the code instead of my content like you mentioned before.

I'm taking a look at the site you mentioned and thank you again for all the help you have provided!

[David Laakso]

I'm taking a look at the site you mentioned and thank you again for all the help you have provided!

You are very welcome. If you have difficulty transferring to a new layout, bring it back. Preferably on a new thread (different subject line).