Site Falls APART in IE8, Great on Mac: Help!

csanders984 · March 29, 2011, 11:37pm

Here’s a site I coded using CSS: [url=http://blackmatchmade.com/]

It looked great in the first browsers I’ve tried: IE9, Safari, Fire fox, Chrome. (ALL MAC EXCEPT IE9)…IE9 was from my wife’s PC.

But then I check it in IE 8 and firefox on the PC at work and it just looks terrible. The navigation bar is crummy, the style in the navigation bar is thicker than designed, the wording clumps together on the home page and the wording on the “our firm” page cascades terribly.

I’m not even sure what I did wrong to offend IE 8 so much!

css:


/* layoutstyles.css */
 
 
/* Universal style rule */
 
#wrapper{
 
 
}
 
 
 
#wrapper2{
width: 980px ;/*was 60em (don't mix px and em widths)*/
background-color: #FFFFFF;
border-top: thick double #333333;
border-bottom:thick solid #000000;
border-left:thick solid #999999;
border-right:thick solid #999999;
/* Center the wrapper */
margin:0 auto;
/*has top go into top of browser*/
margin-top: 30px;
/*creates Gap at bottom*/
margin-bottom: 100px;
overflow:hidden;/*contain inner floats*/
 
}
 
 
 
body{
font-family:Arial, Helvetica, sans-serif; 
 
}
 
 
.content{
margin:0 auto;
background-color: #990099;
background: url(Images/adventurebosx_webrose.png);
border-top:thick solid #000000;
border-bottom:thick solid #000000;
}
 
.content,p{
font-size:16px;
font-family:Eurostile, Verdana, Arial, Helvetica, sans-serif;
padding-right:20px;
padding-left:10px;
margin-bottom:5px;
padding-left: 60px;
text-align:center;
padding-top:40px;
padding-bottom:90px;
color: #FFFFFF;
}
 
 
.contentblue{
margin:0 auto;
background-color: #990099;
background: url(Images/adventurebosx_webrose.png);
 
}
 
.contentblue,p{
 
font-family:Eurostile, Verdana, Arial, Helvetica, sans-serif;
padding-right:20px;
padding-left:10px;
margin-bottom:5px;
padding-left: 60px;
text-align:center;
padding-top:20px;
padding-bottom:10px;
color: #FFFFFF;
}
 
 
.contentrose{
margin:0 auto;
background-color: #990099;
background: url(Images/adventurebosx_webrose.png);
border-top:thick solid #000000;
 
}
 
.contentrose,p{
 
font-family:Eurostile, Verdana, Arial, Helvetica, sans-serif;
padding-right:20px;
padding-left:10px;
margin-bottom:5px;
padding-left: 60px;
text-align:center;
padding-top:20px;
padding-bottom:10px;
color: #FFFFFF;
}
 
.contentrose li{
margin-left: 220px;
margin-bottom: 20px;
 
 
 
}
 
 
 
 
 
 
 
 
 
.contentgreen{
margin:0 auto;
background-color: #990099;
background: url(Images/adventurebosx_webrose.png);
border-top:thick solid #000000;
 
}
 
.contentgreen,p{
 
font-family:Eurostile, Verdana, Arial, Helvetica, sans-serif;
padding-right:20px;
padding-left:10px;
margin-bottom:5px;
padding-left: 60px;
text-align:center;
padding-top:20px;
padding-bottom:10px;
color: #FFFFFF;
}
 
.contentgreen li{
margin-left: 220px;
margin-bottom: 20px;
 
 
 
}
 
 
 
 
 
.contentgold{
margin:0 auto;
background-color: #990099;
background: url(Images/adventurebosx_webrose.png);
border-top:thick solid #000000;
 
}
 
.contentgold,p{
 
font-family:Eurostile, Verdana, Arial, Helvetica, sans-serif;
padding-right:20px;
padding-left:10px;
margin-bottom:5px;
padding-left: 60px;
text-align:center;
padding-top:20px;
padding-bottom:10px;
color: #FFFFFF;
}
 
.contentgold li{
margin-left: 220px;
margin-bottom: 20px;
 
 
 
}
 
 
 
 
 
 
 
.contentgu{
margin:0 auto;
background-color: #990099;
background: url(Images/adventurebosx_webrose.png);
border-top:thick solid #000000;
border-bottom:thick solid #000000;
}
 
.contentgu,p{
 
font-family:Eurostile, Verdana, Arial, Helvetica, sans-serif;
padding-right:20px;
padding-left:10px;
margin-bottom:5px;
padding-left: 60px;
text-align:center;
padding-top:20px;
padding-bottom:10px;
color: #FFFFFF;
}
 
.contentgu li{
margin-left: 220px;
margin-bottom: 20px;
 
 
 
}
 
 
 
 
.contentz{
margin:0 auto;
background-color: #990099;
background: url(Images/adventurebosx_webrose.png);
border-top:thick solid #000000;
border-bottom:thick solid #000000;
}
 
.contentz,p{
 
font-family:Eurostile, Verdana, Arial, Helvetica, sans-serif;
padding-right:20px;
padding-left:10px;
margin-bottom:5px;
padding-left: 60px;
text-align:center;
padding-top:20px;
padding-bottom:10px;
color: #FFFFFF;
}
 
.contentz li{
margin-left: 220px;
margin-bottom: 20px;
 
 
 
}
 
 
 
 
 
 
 
.pushred{
padding-top: 30px;
padding-top: 20px;
margin-bottom: 20px;
 
}
 
.pushred ul{
padding-right: 20px;
padding-left: 20px;
text-align:left;
list-style:none;
display:block;
background-color:;
border:thin dashed #FFFFFF;
padding-bottom: 10px;
 
 
}
 
 
 
.pushred li{
font-size:18px;
display:block;
padding-left: 380px;
 
}
 
 
 
 
 
.push{
border:dashed thin #FFFFFF;
padding-top: 30px;
padding-top: 20px;
margin-bottom: 20px;
 
}
 
 
.push ul{
padding-right: 20px;
padding-left: 20px;
text-align:left;
list-style:none;
display:block;
background-color:;
border:thin dashed #FFFFFF;
padding-bottom: 10px;
 
 
}
 
 
 
.push li{
font-size:18px;
display:block;
padding-left: 380px;
 
}
 
 
 
 
 
 
.pushy{
 
padding-left:;
 
border:thin dashed #FFFFFF;
 
 
}
 
 
.pushy ul{
list-style: square; 
padding-right: 20px;
padding-left: 200px;
text-align:left;
list-style:none;
margin-left: 40px;
margin-rght: 20px;
}
 
 
 
.pushy li{
font-size:20px;
display:block;
 
 
}
 
.pushd{
 
padding-left:;
 
border:thin dashed #FFFFFF;
padding-bottom: 20px;
 
 
}
 
 
.pushd ul{
list-style: square; 
padding-right: 10px;
padding-left: 200px;
text-align:left;
list-style:none;
margin-left: 40px;
margin-rght: 20px;
}
 
 
.pushd li{
font-size:20px;
display:block;
 
}
 
.pushg{
 
padding-left:;
background: url(Images/stopwatch2.png) no-repeat top left;
 
border:thin dashed #FFFFFF;
 
 
}
 
 
.pushg ul{
list-style: square; 
padding-right: 20px;
padding-left: 210px;
text-align:left;
list-style:none;
}
 
.pushg li{
font-size:20px;
display:block;
color: #FFFFFF;
}
 
 
.pushc{
 
padding-left:;
 
border:thin dashed #FFFFFF;
 
}
 
 
.pushc ul{
list-style: square; 
padding-right: 20px;
padding-left: 270px;
text-align:left;
list-style:none;
}
 
 
 
.pushc li{
font-size:20px;
display:block;
 
}
 
 
 
 
 
.pushgu{
 
padding-left:;
 
border:thin dashed #FFFFFF;
 
 
}
 
 
.pushgu ul{
list-style: square; 
padding-right: 20px;
padding-left: 270px;
text-align:left;
list-style:none;
}
 
 
 
.pushgu li{
font-size:20px;
display:block;
 
}
 
 
 
 
 
 
.pushz{
 
padding-left:;
background:url(Images/code2.png) no-repeat left;
border:thin dashed  #000000;
 
}
 
 
.pushz ul{
list-style: square; 
padding-right: 20px;
padding-left: 270px;
text-align:left;
list-style:none;
}
 
 
 
.pushz li{
font-size:20px;
display:block;
 
}
 
 
 
 
#logo{
margin-left:720px;
padding-bottom: 20px;
padding-top: 20px;
 
}
 
#blackmatch{
}
 
 
 
#blackmatch img{
float:left;
margin-top:20px;
background-color:#FFFFFF;
border: thick black solid;
border-bottom:none;
margin-right: 5px;
 
 
}
 
#blackmatched{
 
 
}
 
 
 
#blackmatched img{
border:thick solid #000000;
float:left;
margin-top:30px;
}
 
.jas{
float: left;
margin-right: 280px;
padding-left: 30px;
color:#000000;
 
 
}
 
 
.style1 {
font-size: 50px;
font-weight: bold;
font-style: italic;
color: #000000;
}
 
.style2 {
color: #CC99FF;
font-size:24px;
padding-left: 400px;
}
 
 
 
 
h1{
text-align:right;
color: #FFFFFF;
padding-bottom: 10px;
font-style:italic;
font-family:Eurostile, Verdana, Arial, Helvetica, sans-serif;
padding-right:150px;
margin-top:10px;
display:block;
 
}
 
h2{
 
color: #FFFFFF;
font-style:italic;
font-family:Eurostile, Verdana, Arial, Helvetica, sans-serif;
padding-right:50px;
padding-left:170px;
margin-top:10px;
text-align:;
display:block;
font-size:26px;
width: 670px;
height:auto;
 
border:thin dashed #FFFFFF;
 
 
}
 
 
.style4 {
color: #000000;
font-weight: bold;
font-size:23px;
    display:block;
padding-left: 300px;
 
}
 
 
 
.once {
font-size: 13px;
color: #FFFFFF;
display:block;
width: 390px;
height: 160px;
margin-left: 470px;
margin-right: 470px;
border:thin dotted #000000;
background: #000000;
padding-right: 33px;
}
 
 
 
 
 
 
#center{
font-size:15px;
color: #000000;
font-style:italic;
background-color:#000000;
color:#FFFFFF;
display:block;
padding-top: 50px;
padding-left: 20px;
}
 
 
.bottom{
margin-top: 40px;
 
 
}
.bottom p{
padding: 2px;
font-size:18px;
color:#000000;
}
 
 
 
.bot{
font-size:12px;
padding: 2px;
color:#000000;
}
 
.logo2{
text-align:center;
 
margin-bottom: 30px;
margin-top: 50px;
 
}
 
 
#navbar{
background-color:#000000;
height:30px;
}
 
 
#navbar ul{
list-style-type: none;
 
}
 
#navbar li{
float: left;
 
}
 
 
 
 
 
 
#bnavbar{
background-color:#000000;
height:30px;
text-decoration:none;
list-style-type:none;
}
 
 
b#navbar ul{
list-style-type: none;
text-decoration:none;
 
}
 
#bnavbar li{
float: left;
text-decoration:none;
list-style-type:none;
 
}
 
#bnavbar a,
#bnavbar a:link,
#bnavbar a:visited{
text-decoration:none;
list-style-type:none;
font-family:Eurostile, Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
padding-top:12px;
display:block;
width: 138px;
text-align:center;
}
 
 
#bnavbar a:hover,
#bnavbar a:active{
background-color: #FFFFFF;
color: #666666;
 
}
 
 
#navbar{
background-color:#000000;
height:30px;
background:url(Images/adventurebosx_web_scrollbar.gif) right top;
}
 
 
#navbar ul{
list-style-type: none;
 
}
 
#navbar li{
float: left;
 
}
 
 
.form{
 
float:left;
border:thick solid #000000;
margin-top: 30px;
margin-left: 10px;
background: ;
color:black;
 
}
 
.formf{
 
float:left;
border:thick solid #000000;
margin-top: 5px;
margin-left: 10px;
 
background: ;
color:black;
 
}
 
 
#navbar a,
#navbar a:link,
#navbar a:visited{
text-decoration:none;
font-family:Eurostile, Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
padding-top:12px;
display:block;
width: 137px;
border:thin dotted #000000;
text-align:center;
 
}
 
 
#navbar a:hover,
#navbar a:active{
background-color: #FFFFFF;
color: #666666;
 }

Note: I validated the code but it won’t say so because I switched to HTML5 and my dreaweaver is CS3 and some of the new invalidations would cause me to lose the visual togetherness of my site. Considering HTML5 is backwards compatible, those particular invalidations shouldn’t effect these pages.

ralphm · March 29, 2011, 11:48pm

Hi csanders984! Welcome to SitePoint.

You’ve just learned Rule No1 of web design: check your work in all browsers as you build, not at the end.

Anyhow, the CSS alone is not enough. Ideally, post a live link. Otherwise, post the HTML along with the CSS, but check it first to see if it gives us a sufficient guilde without images etc.

csanders984 · March 30, 2011, 12:24am

I did. Oh sorry I must of missed it!:

www.blackmatchmade.com
www.blackmatchmade.com/ourfirm

Dude ha, trust me l know but unfortunately I don’t have that luxury now that my wife upgraded her PC’s IE to IE9. Also, I think it has something to do with screen resolution, some sites look great on her browser and terrible on browsers at work and such. Basically I have to call friends and ask around to get a good idea of whats out there.

cydewaze · March 30, 2011, 1:38am

If I can make a couple of suggestions…

Validate your code. It’s super hard to troubleshoot pages that contain HTML errors. There are also a few CSS errors.
Resize those images! Boy are they huge. On my 3mbit connection, they were like waiting for a slow garage door to shut.

ralphm · March 30, 2011, 2:12am

On a Mac, you do have that luxury, as you can install virtual machines that allow you to test all Windows browsers. Options include Virtualbox (free) and VMWare Fusion (commercial). I use the latter.