[Arkham_c]

Back in the days of tables, I was a whiz at web site development. Since then I've moved on into coding, and I've not kept up with the latest in CSS.

I'm doing a new project and needed to use a CSS-driven interface that renders in IE and Mozilla/Firefox.

For the most part, this works fine. However, I have some problems with the page. For instance:

http://68.114.22.41/new/index.html

This is a scraped page off the dynamically driven site. I removed all the images to mask my employer, etc, but you will get the idea. There is a table in the middle of the "content" DIV that should either (a) fit in the page or (b) add scrollbars to the page so that the browser can see it all. Right now it just runs off the right and bottom of the screen. This is obviously not acceptable, but I am at a loss as to my error. I tried using "absolute" positioning, but I cannot because there is an "error" DIV that optionally appears above the content DIV with error messages in it. I tried setting the width to a fixed number, or to "auto" but that did not work either.

How do I fix this? Can some kind soul please take a look at the code and accompanying CSS and offer a solution? Thanks so much.

[Simon Mundy]

Whenever you introduce positioning into the layout using 'relative' or 'absolute' you're allowing a certain amount of chaos into your site's cross-browser consistency. I don't know why, I just know it does.

As Synotic will advise, stick to floats and you should be OK.

If you're structurally happy with the order of HTML and you'd like the menu to appear before the content, I'd try this:-

Code:
#navigation
{
float:left;
width:110px;
height:300px;
background-image...
etc
}

#content
{
margin-left: 110px;
width:auto;
padding-left: 15px;
etc...
}

So really just removing the position directive and the tops/lefts. Replace it with a float and you should be in business.

This is a simply solution but you may find you need some more control over certain zones in your layout - if that's the case then you may also want to visit http://www.bluerobot.com/web/layouts/ for some lovely 2 and 3 column layout recipes.

A couple of other processes I used to keep consistency across browsers:-

a) Use XHTML with an XML declaration at the top. It forces IE6 into 'quirks' mode which means that it behaves similarly to IE5 and IE5.5. It makes bug-fixing a WHOLE lot easier.

b) Create a 'spacer' class in your layouts and use it to escape any floats before the rest of your content continues. Some browsers behave erratically with their handling of floats (don't mention IE for Mac... Grrr....) and this helps to reduce errors. Something like:-

.spacer
{
width:100%;
height: 1px;
overflow:hidden;
clear:both;
display:block;
}

...and then use < span class="spacer"> </ span> after your floats. It's not a pretty solution, and in some ways as bad as using spacer GIFs in tables, but it is the most consistent and reliable solution I've found.

c) Wrap your external styles inside a < style > and @import url(mystyle.css) so that they are hidden from non-compliant browsers.

Theres a few more rules I use but it's still too early in the morning to think straight. I'll post 'em as I remember 'em.

Cheers

[Arkham_c]

Thanks for the advice! I will certainly give it a try and will post my results.