CSS Firefox Issues!

mobilepc

09-22-2006, 05:17 AM

I am a newbie to css, and I have only been scripting for about 3-months and I have made a small website and did everything in CSS - no tables. Well, before I went to publish it i downloaded the newest version of Firefox and Opera. My site looked perfect in IE but when I went to load it in the other 2 it fell to crap. My perfectly aligned divs act as if there nothing holding them up, but even though I do not have years of exp. I know theres something small wrong here. I cant be that far off here. or can I? Below is my home pages source code. I have 2 css files and one is over 33k so i dont want to copy it in here so if you would like to help me out just let me know and i will email my css to you.. or yes if I must i will load it in here..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
removed meta content for this site...

<title>blahblahblahblahblahblahblahblahblahblah</title>
<link href="css/master.css" rel="stylesheet" type="text/css" />
<link href="css/content.css" rel="stylesheet" type="text/css" />
</head>
<body>



<div id="wrapper">
<div id="banner">
I have a flash banner here..
</div>



<div id="navcontent"><script language="JavaScript" src="scripts/menu.js"></script>
</div>
<div id="content">
<div id="crosshead"><img src="images/gif/crossheader.gif" width="800" height="40" />
<div id="accessbox">

<div id="cartbox"><a href="blahblahblahblahblahblah"><img src="images/gif/topnav-cart.gif" alt="Shop" border="0" /></a> </div><div id="carttxtbox">
<p id="carttext"><a class="access" href="blahblahblahblahblahblah">Cart</a></p>
</div>

<div id="shipbox"><a href="blahblahblahblah"><img src="images/gif/barcode2sml.gif" alt="Track Your Package" border="0" /></a></div>
<div id="shiptxtbox">
<p id="shiptext"><a class="access" href="blahblah.html">Tracking</a></p>
</div>
</div>
<div id="shipnote"></div><div class="clear"> </div>
</div>
</div>
<div class="clear"> </div>



<div id="bodycontent">
<div id="bodytopheader"></div>


<div id="columnL">
<div id="killer">
I have a flash movie here..
</div>
</div>


<div id="columnR">
<div id="maintext">
<p>blahblahblahblahblahblahblahblahblahblah</p>
</div>
</div>
<div id="bodybottomheader"></div>
<div class="clear"> </div>
</div>



<div class="footerspace"></div>

<div id="footer">
<div id="footerpic">
<div id="footsale"><p id="footertxt"><a class="accessfoot" href="/blahblah.html">Sales</a></p></div>
<div id="footmap"><p id="footertxt"><a class="accessfoot" href="blahblah.html">Site Map</a></p></div>
<div id="footlink"><p id="footertxt"><a class="accessfoot" href="blahblah.html">Link To Us</a></p></div>
<div id="footcon"><p id="footertxt"><a class="accessfoot" href="blahblah.html">Contact Us</a></p></div>
<div id="footpol">
<p id="footertxt"><a class="accessfoot" href="policy/policy.html">Policy</a></p></div>
</div>
</div><div class="clear"> </div>



<div class="curvel">
<div class="curver">  </div>
</div>

</div>



<div id="copyright">
<p id="copytext">© Copyright 2006 blahblah, Inc. All Rights Reserved.</p>
</div>

</body>
</html>

I hope you guys can help me out, thanks

_Aerospace_Eng_

09-22-2006, 06:00 AM

Can't help you if you don't show us the CSS. A link is preferred.

mobilepc

09-22-2006, 06:07 AM

heres a copy of my css file..

mobilepc

09-22-2006, 06:12 AM

and heres my final and master css file.. i have 2 total.

_Aerospace_Eng_

09-22-2006, 06:21 AM

Just post it as code. Be sure to use the code button, its the # (pound) sign.

mobilepc

09-22-2006, 06:27 AM

/* CSS Document */
/*Begin Overall Page Layout*/

#wrapper {
text-align: left;
padding: 0;
width: 800px;
margin-right: auto;
margin-left: auto;
background-color: #FFFFFF;
border: 0;
z-index: 1;
}

#background {
background-color: #1192df;
text-align: center;
padding: 0px;
height: 100%;
width: 850px;
margin-right: auto;
margin-left: auto;
border: 1px solid #000000;
}
/*Begin Header Layout*/

#crosshead {
position: relative;
top: 0;
left: 0;
margin-left: auto;
margin-right: auto;
width: 800px;
height: 120px;

}
#content {
text-align: left;
padding: 0;
width: 800px;
top: 0px;
margin-right: auto;
margin-left: auto;
background-color: #FFFFFF;
position: relative;
height: 40px;

}
.abdown {
position: absolute;
bottom: 0px;
}

body {
font-family: Arial, Georgia, "Times New Roman", sans-serif, Helvetica;
background-color: #000000;
text-align: center;
margin: 0 auto;
padding: 0px;
height: 100%;
border: 0;
}
#banner {
background-color: #FFFFFF;
text-align: center;
height: 165px;
width: 800px;
margin-right: auto;
margin-left: auto;
top: 0px;
left: 0;

}
#navcontent {
position: relative;
height: 0;
width: 800px;
left: auto;
right: auto;
z-index: 2;
}
/*Access Panel*/

#accessbox {
position: absolute;
top: 0;
right: 0;
width: 170px;
height: 40px;
padding: 0;
}
#carttxtbox {
position: absolute;
width: 20px;
height: 10px;
top: 25px;
left: 11px;

}
#carttext {
bottom: 0;
font-family: Arial, Georgia, "Times New Roman", sans-serif, Helvetica;
font-size: 10px;
color: #1192df;
text-align: center;

}
#cartbox {
position: absolute;
height: 20px;
width: 16px;
padding: 0;
left: 10px;
top: 7px;
}
#shipbox {
position: absolute;
height: 19px;
width: 31px;
padding: 0;
left: 86px;
top: 7px;
}
#shiptxtbox {
position: absolute;
height: 10px;
width: 100px;
top: 25px;
left: 53px;
}
#shiptext {
bottom: 0;
color: #1192df;
font-family: Arial, Georgia, "Times New Roman", sans-serif, Helvetica;
font-size: 10px;
text-align: center;
}

/*Link Attributes*/

/*Access Panel Link Atrributes*/

a.access:link {
color: #1192df;
text-decoration: none;
}

a.access:visited {
color: #1192df;
text-decoration: none;
}

a.access:hover {
color: #1192df;
text-decoration: none;
}
a.access:active {
color: #1192df;
text-decoration: none;
}
/*Footer Link Attributes*/

a.accessfoot:link {
color: #ffffff;
text-decoration: none;
}

a.accessfoot:visited {
color: #ffffff;
text-decoration: none;
}

a.accessfoot:hover {
color: #c8ecfb;
text-decoration: none;
}
a.accessfoot:active {
color: #ffffff;
text-decoration: none;
}

/*Begin Body Layout*/

/*Begin Footer Layout*/

.curvel {
background: url(../images/gif/1bl.gif) 0 100% no-repeat #ffffff;
background-attachment: scroll !important;
background-attachment: fixed;
width: 800px;
padding: 0;

}
.curver {
background: url(../images/gif/1br.gif) 100% 100% no-repeat;
background-attachment: scroll !important;
background-attachment: fixed;
padding: 0;

}
.clear { font-size: 1px;
height: 1px
}

curves {
position: relative;
margin: auto;
padding: 0;
height: 10px;
width: 800px;
top: 0;
left: 0;
}

#copyright {
width: 800px;
margin-right: auto;
margin-left: auto;
position: relative;
border: 0;
}
#copytext {
font-family: Arial, Georgia, "Times New Roman", sans-serif, Helvetica;
font-size: 10px;
line-height: normal;
font-weight: bold;
color: #FFFFFF;
text-align: center;
}
#footer {
position: relative;
width: 800px;
height: 26px;
margin-right: auto;
margin-left: auto;
}
#footerpic {
position: absolute;
width: 600px;
height: 26px;
left: 100px;
background: url(../images/gif/footer.gif) no-repeat;
background-attachment: scroll !important;
background-attachment: fixed;
background-position: top left ;
}
#footpol {
height: 14px;
width: 119px;
top: 6px;
left: 480px;
text-align: center;
border-right: 1px solid #1192df;
position: absolute;
}
#footsale {
height: 14px;
width: 120px;
top: 6px;
left: 0;
text-align: center;
border-right: 1px solid #ffffff;
position: absolute;
}
#footcon {
height: 14px;
width: 120px;
top: 6px;
left: 360px;
text-align: center;
border-right: 1px solid #ffffff;
position: absolute;
}
#footmap {
height: 14px;
width: 120px;
top: 6px;
left: 120px;
text-align: center;
border-right: 1px solid #ffffff;
position: absolute;
}
#footlink {
height: 14px;
width: 120px;
top: 6px;
left: 240px;
text-align: center;
border-right: 1px solid #ffffff;
position: absolute;
}
#footertxt {
font-family: Arial, Georgia, "Times New Roman", sans-serif, Helvetica;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
}

_Aerospace_Eng_

09-22-2006, 06:36 AM

Some issues I see. You have this
curves {
position: relative;
margin: auto;
padding: 0;
height: 10px;
width: 800px;
top: 0;
left: 0;
}
Also what is up with all of the absolute positioning?

mobilepc

09-22-2006, 06:41 AM

I tried to make the relative absolute by placing absolute divs within relative divs. It seemed like it would give me better control over my site. to put everything abosolute to a bigger relative div.

mobilepc

09-22-2006, 06:44 AM

or the other way around..lol

mobilepc

09-22-2006, 06:57 AM

are things to absolute to work to work properly in the other browsers? and if so how much more relative would i have to get?

_Aerospace_Eng_

09-22-2006, 07:10 AM

Without any of the images its a little hard to even try to know where the problem is at. Can you not post a link?

mobilepc

09-22-2006, 07:16 AM

Hey aerospace, I havent even posted the site yet, i have spent the last month puting it together and making the images for it and designing it. I have just been checking it locally. I would be happy to go ahead and post it prematurly so you could help me adjust it. like i said i have only been doing this (CSS) for about month or 2, but in ie it looks perfect so i would suggest looking at it like that first. i will go ahead and post it for you.

_Aerospace_Eng_

09-22-2006, 07:24 AM

You should code for a good browser like Firefox and tweak for IE. This was your first mistake.

mobilepc

09-22-2006, 07:31 AM

yeah kinda hit me after the fact