Cross-Browser issues (Javascript/CSS)

[druidjaidan]

Since I typed more than I meant to...here's a link http://customersandbox.mobiuscc.com. Summary: Why isn't IE using my styles on the navbar and other places. And why is it not running my javascript.

Ok so I've been happily working on my business website for a few months now. I'm a fairly experienced (for having never taken a class in it) programmer in c/c++, however I'm learning as I go in terms of php/js/css as I haven't designed a website since before css even seriously existed. I decided to set up a website to sell custom computers from,found some friends and started work.

Well now the code base is let's say about 90% complete (well 90% until it's complete enough to launch the site), and the "pretty" is maybe 50%. I've been working pretty much entirely from linux using firefox (with firebug for testing). I pop into windows this morning to check on how bad it looks cross browser (I already assumed that it would have issues that would have to be addressed). The extent of the issues makes me think I'm doing something wrong (or else using things that just simply aren't supported by IE, ENTIRELY POSSIBLE =).

Firefox Windows/Linux -

Renders as I expect it to...certainly not done, but it's as i expect it to be based on what I have done. All JS and CSS is behaving and rendering as I expect it to.

Opera -

Also fully functional in terms of layout and appearance (perhaps even looks a little better). However on /gameconfig.php (and any other config page really) the pictures are non functional. Not sure what else I need to do to make opera happy with it.

IE -
Horrible mess...Main div width is off, fails to use more than half the styles (the nav sidebar, and the myaccount page are severly f-ed up). It also ignores my javascript altogether...and yes I checked the security settings and it was enabled.

Overall info -
According to the w3c validator my site checks out with ~1 error on each page...pretty much all of which are due to my using a name attribute on the order form to save me a few lines of code...I'll probably even go back and change that later though.

Any help on where to start would be appreciated...probably most on the javascript since I was surprised to have problems there more than I was with the style issues...though the number of those bothered me to.

the site can be viewed in the testing domain at http://customersandbox.mobiuscc.com
If you need/want to see the account stuff there is a test account currenty
username: test@test.com
pword: 123

[Fang]

Remove ALL child selectors, just use:.SBHeader a { foo:bar;}
What JavaScript?

[druidjaidan]

Thanks that resolved pretty much every problem style from IE...the page now looks almost perfect style wise.

Almost...as in it's missing exactly 5px's in IE =( The div main won't float up unless I remove the 5px margin-right from the sidebar (truly it should be unnecessary to have the margin since the body is 780, sidebar 160 and main 615, and since one is float left and the other float right they should, and do in FF and opera separate by 5px's anyways). When I remove the margin in IE the main div slides up, however it is directly in contact with the border of the sidebar...strangely enough the a:hover's also appear to be 5px's boxes appear to be 5px's too small in IE while they fit perfectly in FF/Opera. Any hints as to what I'm running into here?

As for the javascript portion I think I'll just head over to the javascript forum and make a post exclusively for that now that you helped resolve most of this css problems, thanks.

[Fang]

A lot of changes:@charset "utf-8";
/* CSS Document */

/* Basic Styles */
body {
width: 780px;
font-family:Arial, Helvetica, sans-serif;
padding:0px;
margin:10px auto;
font-size:12px;
}
img {
display:block;
border:0px;
}
th {
background-color:#a6c0e1;
margin:1px;
text-align:left;
}


/* Explicit Styles */

#PageHeader {
xwidth:780px;
height:100px;
background-image:url(mainlogo.gif);
margin-bottom:1px;
clear:both;
}
#PageFooter {
xwidth:780px;
height:1.5em;
clear:both;
border-style:ridge;
border-width:1px;
}
#Main {
width:615px;
float:right;
}

#TopLinks {
list-style-type:none;
float:right;
margin:0px;
padding:0px;
}

#TopLinks li {
display:inline;
margin: 5px;
}

#BottomLinks {
list-style-type:none;
margin:0px;
padding:0px;
float:right;
}

#BottomLinks li {
display:inline;
margin: 5px;
}

#copyright {
float:left;
}

#Sidebar {
width:160px;
float:left;
}
#Sidebar ul {margin:0;padding:0;}
#NavBar {
margin:0;
background-color:#eaebff;
list-style-type:none;
border-style:ridge;
border-width:1px;
border-color:#5078a9;
}

#picdiv {
display:none;
position:absolute;
left:0;
top:300px;
width:160px;
height:160px;
}

#logstatus {
float:right;
clear:right;
font-size:.8em;
}

.SBHeader a {
display:block;
background-color:#eaebff;
text-decoration:none;
color:blue;
border:1px solid #eaebff;
padding-left:5px;
}
.SBHeader ul li {
list-style-type:none;
margin-left:0;
}
.SBHeader a:hover {
border:1px solid blue;
font-weight:bold;
background-color:#ffffe1;
}
.SBHeader a:focus {
margin:0 0 0 -5px;
padding-left:4px;
border-style:solid;
border-width:1px;
font-weight:bold;
background-color:#ffffe1;
}
.SBHeader a:active {
margin:0 0 0 -5px;
padding-left:4px;
border-style:solid;
border-width:1px;
font-weight:bold;
background-color:#ffffe1;
}

.SBSub {
margin-left:-45px;
}
.SBSub a {
display:block;
background-color:#eaebff;
padding-left:30px;
width:126px;
list-style-type:none;
text-decoration:none;
color:#5078a9;
border-width:1px solid #eaebff;
}
.SBSub a:hover {
margin:0;
padding-left:30px;
border:1px solid #000;
color:#000;
font-weight:bold;
background-color:#ffffe1;
}
.SBSub a:focus {
margin:0;
padding-left:30px;
border-style:solid;
border-width:1px;
color:#000;
font-weight:bold;
background-color:#ffffe1;
}
.SBSub a:active {
margin:0;
padding-left:30px;
border-style:solid;
border-width:1px;
color:#000;
font-weight:bold;
background-color:#ffffe1;
}

and.imgtextpair {
display:block;
float:left;
padding-left:5px;
padding-right:5px;
text-align:center;
}

#sysimgblocks {
height:146px;
margin-left:auto;
margin-right:auto;
}