CSS and IE7 problems

[practicallymagic]

Hi there,

I am really hoping someone out there can help me. I have found that my site doesn't display properly in IE7 or Firefox. I don't get a vertical scrollbar on the browser window. Also I seem to have another problem where all the page elements aren't placing themselves properly and the #wrap div seems to be setting itself as only 190px high!! I am baffled! Please help!

Below is the CSS, and here's the URL www.art2murals.com

Thanks in advance :o)

/*
CSS for Sue Groom Fine Art Studio
*/

h1     {font-family: "Comic Sans MS"; font-size: 36pt; font-weight: bold; text-align:center; color: #FF0033;}
 
h2  {font-family: "Comic Sans MS"; font-size: 24pt; font-weight: bold; text-align:center; color: #660066;}
 
h3  {font-family: "Comic Sans MS"; font-size: 14pt; font-weight: bold; text-align:center; color: #660066;}
 
body     {font-family: "Comic Sans MS"; font-size: 14pt; color: #660066;}
 
 
/*
Links
*/
 
 
a     {font-weight:bold; color: #FF0033; text-decoration: none }
 
a:link {color: #FF0033; text-decoration: none; font-weight:bold }
 
a:visited {color: #660066; text-decoration: none; font-weight:bold }
 
a:hover {color: #00B1AE; text-decoration: none; font-weight:bold }
 
a:active {color: #FF33CC; text-decoration: none; font-weight:bold }
 
 
 
/*
Footer link colours
*/
 
#footer a {font-weight:bold; color: #FFFFFF; text-decoration: none }
 
#footer a:hover{font-weight:bold; color: #00B1AE;}
 
 
 
 
/*
Nav bar
*/
 
 
#navigation ul{margin:0;padding:0;list-style:none; text-decoration: none;}
 
#navigation a{display:block;width:9em;}
 
#navigation a:hover{background:#B0E0E6;}
 
#navigation li{float:left; width:9em; }
 
#navigation li ul{position:absolute; width:9em; left:-999em; background:#B0E0E6;}
 
#navigation li:hover ul{display:block; left:auto;}
 
#navigation li:hover ul, #nav li.sfhover ul {left:auto; background:#B0E0E6;}
 
 
/*
positioning
*/
 
#wrap         {position:fixed; left:0px; top:0px; background:url(red.jpg); width:930px; padding:20px 20px 10px 20px;}
 
#sitebranding      {position:fixed; left:20px; top:20px; width:725px;}
 
#navigation     {position:relative; left:0px; top:140px; background-image:url(navjungle.jpg); width:175px; height: 560px; float:left; }
 
#bodycontent     {position:relative; left:20px; top:140px; background:#B0E0E6; overflow:scroll; width:691px; height:530px; padding: 20px 20px 10px 20px; }
 
#footer         {position:relative; top:670px; color: #FFFFFF; text-align:center; width:725px; font-weight: bold; font-size:14pt; padding:30px 25px 5px 25px; }

[drhowarddrfine]

Validate and fix your 36 html errors and two css errors first. Also, the "Comic Sans" font is not available on all computers.

Showing the css alone means nothing but the link is what helps best.

[nino0057]

I see you are using ID instead of classes. This method in my experience will cause more problems across-browsers. You should consider using classes and relative margins for your design.

[drhowarddrfine]

I see you are using ID instead of classes. This method in my experience will cause more problems across-browsers. You should consider using classes and relative margins for your design.

There is nothing wrong with using ids cross-browser.