[RESOLVED] Messy web page - so many things that don't work

[Scottyob]

Hi all.

I'm building a rater complicated web page. I thought the interface would be the simple thing, but now I've ended up with nothing but mess on my interface design. For now all the CSS and HTML are meshed, and I think most of my problems are CSS ones.

If you view the HTML in Firefox, you'll see that everything is nice, how I want it to be. But as soon as you view it in Safari, then the content div tag no longer takes up 100%, but something more, and spans off the side of the page, causing you to scroll right to see it (I wanted you to scroll in the web page, like it does in Firefox). Then when we get into IE, that's where the fun begins. It doesn't like to work at all, it even spans over the sidebar on the left. Other things to mention is the fact I'm using Javascript to make the main content div take take up 100% of the browsers height (well, almost :P).

If you could point me in the right direction of fixing these issues, I'd be most thankful. If you felt extremely giving generous and could post the amended cost, that'd be so sweet and save me a hell of a lot of time, but I'd like to know where I'm going wrong, and why?

I have posted my web pages HTML to http://pastebin.ca/raw/595194,

Thanks so much

[WebJoel]

-Looking at it now...

I am seeing what you mean. Looks good in Fx, a bit of overlap in IE6 and presumeably this is the problem.

I note this:

div#content
{
background-color:white;
line-height:1.4;
margin-right:8px;
float:right;
}

which can be a problem... is this 1.4px, 1.4em, 1.4cm, 1.4in, 1.4ex, etc etc etc...

Most browsers would probably 'assume' that line-height would be "em", but it could be "px" and right there is a potential massive problem...
...

also:

div#navHeader
{
background-color:#66FF00;
border:thin solid #000000;
padding-left:10px;
font:bold;
background-image: url(SideBar.jpg);
background-repeat: repeat-y;
}

is not a "font". You probably mean "font-weight:bold;"

...

div#wrapper {
float:right;
width:100%;
margin-left:-210px
}

I am not a fan of 'negative margins' for IE... unless it is a few pixels maybe but I have seen 'negative margins' not work right in IE sometimes... This can be addressed.

...

div#leftContainer
{
float:left;
clear:left;
display:block;
margin:auto;
width:210px;
text-align:left;
}

-Was there a point to "floating-left" this and then "clearing" it immediately? Maybe you are trying to clear a previous float(??) in which case you'd write it as "clear:left; float:left;" (order of precedence rule, -last rule read is the over-riding rule).

...

....div#content
{
background-color:white;
line-height:1.4;
margin-right:8px;
float:right;
}

div#navigation {
margin-bottom:30px;
margin-top:50px;
width:200px;
display:block;
margin:auto;
}

div#navHeader
{
background-color:#66FF00;
border:thin solid #000000;
padding-left:10px;
font:bold;
background-image: url(SideBar.jpg);
background-repeat: repeat-y;
}

div#navBody
{
background-color:white;
border:thin solid black;
}


div#wrapper {
float:right;
width:100%;
margin-left:-210px
}
div#content {
margin-left:210px;
overflow:scroll;
}....

While not an error or any problem to re-list your Selectors, doing so bloats the CSS and can greatly confuse editing it later. -these should be condenced into one unified statement.
searching...

[WebJoel]

Probably not perfect and room for tweakages, but looks the same now for IE6 and Firefox 2.0.0.4

p.s.:

I noted earlier and didn't post before the 30-min deadline for edit-cutoffs:

div#navigation {
margin-bottom:30px;
margin-top:50px;
width:200px;
display:block;
margin:auto;
}

"Rule of Precedence" again, -last-stated declaraction is the one obeyed globally. "margin:auto;" here over-writes "margin-bottom:30px; (and)
margin-top:50px;".

You mean to say:

margin:50px auto 30px auto;

(but not sure if I retained this or not..)

[Scottyob]

Thanks so much. This is awesome. It works perfectly now