CSS Firefox Issues??

mobilepc · 22-Sep-2006, 01:05 AM #1

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

mobilepc · 22-Sep-2006, 02:21 AM #2

they are in .txt format for this thread

mobilepc · 22-Sep-2006, 02:22 AM #3

heres the other one

mobilepc · 22-Sep-2006, 02:29 AM #4

/* 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;
}

Shadow2531 · 23-Sep-2006, 09:35 AM #5

how bout a zip file that contains:

Code:

index.html
- css
    master.css
    content.css
- images
    - gif
        crossheader.gif
- scripts
    menu.js
.etc

so we can see what's going on.

Quote:

Well, before I went to publish it i downloaded the newest version of Firefox and Opera

Tip: Check in Opera, Firefox and IE *while* your're developing the page. Just checking in IE during development is asking for trouble. IE is buggy. Most likely, what you did was work around a bunch of IE bugs to make the page look perfect. The problem with that is, other browsers don't need and don't want those workarounds.

Tag Cloud
access acer asus bios bsod computer crash desktop driver drivers error ethernet excel freeze gaming graphics hard drive hardware hdmi internet laptop malware memory monitor motherboard network printer problem ram registry repair router slow software sound svchost.exe trojan ubuntu 11.10 uninstall usb video virus vista wifi windows windows 7 windows 7 32 bit windows 7 64 bit windows xp wireless

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Search
Search for:

Find the solution to yourcomputer problem!

Find the solution to your
computer problem!