FireFox, Nested Divs and Incomplete Display - CSS

[pagansilver]

Hi All, I am new to the forum so please be nice to me!

I am building a page with 3 colums, 3 rows and nested, floating content with CSS. No tables at all.

It works fine in IE but not in FF (where most of the text colors and sizes default to something obcene but the positions and other attributes remain and show correctly!)

It works fine if you view it on its own as a static page in an editor but as soon as you slip it into the FF broswer it goes nutts.

Any help would be greatly appriciciated!

CSS:

body{}

/* Headings */

h1 { 
padding-left: 10px;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 0px;
font: bold 28px arial, sans-serif;
color: #025c9a;
background-color: #ffffff;
margin-bottom: 10px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}

h2 { 
font: bold 24px arial, sans-serif;
color: #207CBD;
background-color: #ffffff;
}

/* HTML Styles for the Home Page*/

h3{
color: #5FAFEC;
background-color: #ffffff;
font-family: Arial, sans-serif;
font-weight: normal;
font-size: 32px; 
padding: 0px;
margin: 0px;
}

h3.h3_box_1{ 
color: #5FAFEC;
background-color: #ffffff;
font-family: Arial, sans-serif;
font-size: 32px;
font-weight: normal;
text-align: center;
}

h3.h3_box_2{
position: absolute;
color: #5FAFEC;
background-color: #ffffff;
font-family: Arial, sans-serif;
font-size: 32px;
font-weight: normal;
text-align: left;
top: 30px;
left: 10px;
margin: 0px;
padding: 0px;
}

h3.h3_box_3{
color: #CCCCCC;
background-color: #207CBD;
font-family: Arial, sans-serif;
font-size: 32px;
font-weight: normal;
text-align: left;
margin-left: 5px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 10px;
padding: 0px;
}

h3.h3_box_4{
position: absolute;
color: #5FAFEC;
font-family: Arial, sans-serif;
font-size: 32px;
font-weight: normal;
text-align: center;
right: 5px;
top: 3px;
margin: 0px;
}

h3.h3_box_7{
color: #5FAFEC;
font-family: Arial, sans-serif;
font-size: 20px;
text-align: center;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 0px;
margin-right: 0px;
padding: 0px;
}

h4{
position: absolute;
color: #cccccc;
font-family: Arial, sans-serif;
font-size: 20px;
font-weight: normal;
text-align: left;
bottom: 10px;
left: 10px;
width: 150px;
margin: 0px;
padding: 0px;
}

/* End of Headings */

/* Paragraphs */

p{
font-weight: normal;
}

p.box_1_a{
position: absolute;
text-align: left;
width: 120px;
top: 5px;
left:5px;
color: #999999;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
margin: 0px;
padding: 0px;
}

p.box_1_b{
position: absolute;
text-align: left;
width: 120px;
top: 80px;
left:160px;
color: #999999;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
margin: 0px;
padding: 0px;
}

p.box_2{
position: absolute;
text-align: left;
width: 150px;
top: 20px;
left: 230px;
color: #999999;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
margin: 0px;
padding: 0px;
}

p.box_3{
color: #ffffff;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: bold;
margin-left: 5px;
margin-right: 5px;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
}

p.box_4{
position: absolute;
text-align: left;
width: 150px;
top: 75px;
left: 210px;
color: #999999;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
margin: 0px;
padding: 0px;
}

p.box_5{
position: absolute;
text-align: left;
width: 175px;
top: 75px;
left: 105px;
color: #999999;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
margin: 0px;
padding: 2px;
}

p.special_box_5{
position: absolute;
text-align: left;
width: 90px;
top: 10px;
right: 5px;
color: #FF0000;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
margin: 0px;
padding: 0px;
}

p.more_info{
color: #207CBD;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
position: absolute;
bottom: 5px;
right: 5px;
margin: 0px;
padding: 0px;
}

p.box_7{
color: #999999;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
padding: 5px;
margin: 0px;
}

/* End of Paragraphs */

/* Spans for text */

span.more_info_box_1{
color: #207CBD;
font-family: Arial, sans-serif;
font-size: 20px;
font-weight: normal;
margin: 0px;
padding: 0px;
}

span.special_box_5_big{
color: #FF0000;
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
margin: 0px;
padding: 0px;
}

/* End of Spans for Text */

/* Anchor Links */

a.more_info{
color: #207CBD;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}

a.more_info:hover{
color: #207CBD;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: bold;
text-decoration: underline;
}

a.more_info:visited{
color: #207CBD;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}

a.box_4_img{
border: 0px;
}

a.box_7{
font-family: Arial, sans-serif;
font-size: 14px;
color: #4A7595;
text-decoration: none;
text-align: center;
margin-top: 5px;
}

a.box_7:hover{
font-family: Arial, sans-serif;
font-size: 14px;
color: #4A7595;
text-decoration: underline;
border: 0px;
text-align: center;
margin-top: 5px;
}

a.box_7:visited{
font-family: Arial, sans-serif;
font-size: 14px;
color: #4A7595;
text-decoration: none;
border: 0px;
text-align: center;
margin-top: 5px;
}

a.box_7_img_link{
text-decoration: none;
border: 1px solid #ffffff;
text-align: center;
margin-bottom: 5px;
}

a.box_7_img_link:hover{
text-decoration: none;
border: 1px solid #ffffff;
text-align: center;
margin-bottom: 5px;
}

/* End of Anchor Links */

img.link{border: 0px;}

/*ul.box_3_list{
position: absolute;
top: 20px;
left: 10px;
border: 0px;
}*/

li.box_3_list_item{
color: #ffffff;
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: bold;
list-style-type: square;
list-style-position: outside;
border: 0px;
padding-left: 10px;
padding-right: 5px;
}

/*End of Home Page HTML Styles*/

a{ text-decoration:none;
color: #025c9a;
}

a:link{ text-decoration:none;
color: #025c9a;
}

a:active{ text-decoration:none;
color: #025c9a;
}

/* Custom Classes */

#main{ width: 100%;}

td.paddedcell {
padding-left: 10px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
margin: 0px;
width: 400px;
font-family: arial, sans-serif;;
font-size: 14px;
color: #207CBD;
text-align:justify;
}

div.pagebody {
width: 100%;
}

.pagebody li {
list-style: square inside;
border: 1px solid #000000;
}

div.pagefooter {
position:relative;
border: 0px solid black;
font: bold 28px arial, sans-serif;
color: #000000;
text-align: center;
}

table.content {
margin-left: 10px;
}

div.menuright {
position: absolute;
padding: 0px;
top:150px;
margin-left: 180px;
width: 773px;
height: 20px;
text-align: right;
font-size: 0pt;
}

.menuright img {
display: inline; 
height: 20px;
width: 84px;
border: 0px;
padding: 0px;
margin: 0px;
}

/*Secondary Menu with sections */

/* Second Navigational Menu container*/

/*div.menu_two {
width:100%;
height: 60px;
display: inline;
border-collapse: collapse;
}*/



/* End of Secondary Nav Manu container */

/* Search facility within the Secondary Nav Menu*/

/*div.search {
position:relative;
float: left;
width:15%;
height:60px;
text-align: center;
font-weight:bold;
color:#ffffff;
background-color:#5FAFEC;
padding: 5px;
}*/

/* End of Search in 2nd Nav */

/* Shop By section of the 2nd Nav Menu */

/*div.shopby {
position: relative;
width:15%;
height:60px;
float: left;
background-color:#EAE9E9;
color:#025c9a;
font-weight:bold;
text-align:center;
padding: 5px;
}*/

/* End of Shop By section*/

/* Top Ten Sellers Section */

/*div.topten {
position:relative;
height:60px;
width:20%;
float: left;
background-color:#5FAFEC;
font-weight:bold;
font-size: 20px;
color:#ffffff;
text-align:center;
padding: 5px;
}*/

/* End of Top Ten */

/* Telephone Details section */

/*div.telephone {
position:relative;
width:20%;
height:60px;
background-color:#EAE9E9;
font-weight:bold;
color:#025C9A;
text-align:center;
float: left;
padding: 5px;
}*/

/* End of Telephone details section */

/* Sign up section*/

/*div.signup {
position: relative;
width:20%;
height:60px;
float: left;
text-align: center;
font-weight:bold;
font-size: 20px;
color:#ffffff;
background-color:#5FAFEC;
padding: 5px;
}*/

/* End of Sign Up section*/

/* End of Secondary Menu with Sections */

#spaced_white {
color:#ffffff;
font-size:18px;
word-spacing:10px;
line-height:25px;
}

#blue_text_tel{
color:#025c9a;
font-weight:bold;
font-size: 20px;
text-align:center;
}

ul.ten li {
text-align:left;
color:#919191;
font-weight:bold;
font-size:14px;
}

span.section{
padding-left:180px;
}

span.lcaption{
padding-left: 10px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
margin: 0px;
width: 400px;
font-family: arial, sans-serif;;
font-size: 20px;
color: #207CBD;
text-align:justify;
}

form{margin-top: 0px;}

/* Home Page Positioning Styles */
#hp_left{
position: relative;
float: left;
width: 390px;
margin: 5px;
vertical-align: top;
z-index: 1;
}

#box_1{
font-weight: normal;
position: relative;
margin-bottom: 10px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0px;
height: 165px;
border: 1px solid #999999;
z-index: 2;
}

img.float{
position: absolute;
top: 80px;
left: 45px;
z-index: 10;
margin-bottom: 1px;
margin-right: 1px;
margin-left: 1px;
margin-top: 0px;
padding: 0px;
height: 118px;
border: 0px;
}

img.float_right{
position: absolute;
top: 0px;
right: 0px;
z-index: 3;
margin: 0px;
padding: 0px;
border: 0px;
}

#box_2{
position: relative;
font-weight: normal;
margin-bottom: 10px;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
padding: 0px;
height: 140px;
border: 1px solid #999999;
z-index: 2;
}

img.float_box_2{
position: absolute;
top: 25px;
left: 100px;
margin: 0px;
padding: 0px;
border: 0px;
}

#box_3{
position: relative;
font-weight: normal;
background-color: #207CBD;
margin-bottom: 5px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
height: 165px;
border: 1px solid #999999;
padding: 0px;
}

img.box_3
{position: absolute;
top: 0px;
right: 5px;
margin: 0px;
}

#hp_right{
float: left;
width: 363px;
margin: 5px;
vertical-align: top;
}

#box_4{
position: relative;
font-weight: normal;
margin-bottom: 10px;
height: 165px;
border: 1px solid #999999;
}

img.box_4{
position: absolute;
top: 10px;
left: 5px;
border: 0px;
}

#box_5{
position: relative;
font-weight: normal;
margin-bottom: 10px;
height: 140px;
border: 1px solid #999999;
}

img.box_5{
position: absolute;
top: 0px;
left: 0px;
border: 0px;
}

#box_6{
position: relative;
font-weight: normal;
margin-bottom: 10px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
height: 165px;
border: 1px solid #999999;
}

img.box_6_a{
position: absolute;
top: 10px;
left: 10px;
border: 0px;
}

img.box_6_b{
position: absolute;
top: 10px;
right: 10px;
border: 0px;
}

#hp_features{
float: left;
width: 160px;
margin: 5px;
text-align: center;
vertical-align: top;
padding: 0px;
}

#box_7{
border: 1px solid #999999;
vertical-align: top;
margin: 0px;
padding: 5px;
}

img.box_7_img{
border: 0px;
margin-bottom: 5px;
}

/*End of Home Page Positioning Styles*/

/* Left Side Menu Styles */

a.pnav{
display: block;
color: #ffffff;
background-color: #207CBD;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: bold;
text-decoration: none;
border: 1px solid #919191;
padding-left: 10px;
padding-bottom: 2px;
padding-top: 2px;
}

a.pnav:hover{
display: block;
color: #ffffff;
background-color: #58ACEB;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: bold;
text-decoration: none;
border: 1px solid #919191;
padding-left: 10px;
padding-bottom: 2px;
padding-top: 2px;
}

td.navtable{
background-color: #207CBD;
}

/* End of Left Menu Styles */

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="yada.css" />

</head>
<body>

<!-- Main Content Boxes -->

<div id='hp_left'>

<a href='ishop/1087/shopscr337.html'>
<img src='/ishop/images/1087/crazyfrog.gif' alt='Image of the crazy frog' height='108' width='95' class='float'></a>

<div id='box_1'>
<h3 class='h3_box_1'>new<br />arrivals</h3>
<p class='box_1_a'>Crazy Frog Head Nodder with Sound!
<br />
<span class='more_info_box_1'>From £19.99</span>
<br />

<a href='ishop/1087/shopscr337.html' class='more_info'>more info</a>
</p>


<p class='box_1_b'>Perfect Body Duvet Cover<br />
<span class='more_info_box_1'>
From £34.95
</span>
<br />
<a href='/ishop/1087/shopscr196.html' class='more_info'>more info</a>
</p>

<a href='/ishop/1087/shopscr196.html'>
<img src='/ishop/images/1087/duvet.gif' alt='Image of a duvet cover with a headless naked couple on it' height='163' width='114' class='float_right'>
</a>

</div>

<div id='box_2'>
<h3 class='h3_box_2'>
best<br /> 
buy
</h3>

<a href='/ishop/1087/shopscr10.html'>
<img src='/ishop/images/1087/poker.gif' alt='Image of Poker chips' width='106' height='106' class='float_box_2'>
</a>

<p class='box_2'>
Anybody who has been playing poker for a while will want to upgrade their chips.. 
<br />
<a href='/ishop/1087/shopscr10.html' class='more_info'>
more info
</a>
</p>

</div>

<div id='box_3'>
<h3 class='h3_box_3'>our promise</h3>

<p class='box_3'>

- We treat every order as if it's our only 
order to ensure that your goods are delivered promptly in 
pristine condition and at our lowest price.<br />
- Our secure online ordering system allows you 
to shop with confidance and safety.<br />
- If you are pleased with the service you recieve 
from Spoilt4Choice please tell your friends and family.

</p>

<img src='/ishop/images/1087/logo.jpg' alt='Spoilt 4 Choice Logo' class='box_3' width='142' height='40'>

</div>

</div>

<div id='hp_right'>

<div id='box_4'>
<h3 class='h3_box_4'>suckuk <br />mirror clock</h3>

<a href='/ishop/1087/shopscr216.html' class='box_4_img'>
<img src='/ishop/images/1087/mirror.gif' alt='Image of an LCD Mirror and Clock' width='155' height='135' class='box_4'>
</a>

<p class='box_4'>LED Glass Mirror with scrolling LED message board is functional and cutting edge. £300<br />
<a href='/ishop/1087/shopscr216.html' class='more_info'>more info</a></p>
</div>

<div id='box_5'>
<a href='/ishop/1087/shopscr237.html'>
<img src='/ishop/images/1087/ifo.gif' alt='Image of a floating globe' width='100' height='138' class='box_5'>
</a>
<h3 class='h3_box_1'>special<br />offer</h3>
<p class='special_box_5'>Reduced From £89.95 to<br />
<span class='special_box_5_big'>£69.95</span></p>
<p class='box_5'>How does the IFO 3000 work?<br />
Its Magic!</p>
<a href='/ishop/1087/shopscr237.html' class='more_info'>more info</a>
</div>

<div id='box_6'>

<img src='/ishop/images/1087/bed.gif' alt='Photo of a dog beg with a big bone shaped pillow' width='152' height='80' class='box_6_a'>
<a href='/ishop/1087/shopscr242.html'>
<img src='/ishop/images/1087/space.gif' alt='Photo of a Night Sky Projector' width='148' height='148' class='box_6_b'>
</a>
<h4>Find MORE GREAT GIFTS like these...</h4>
</div>

<!-- End of Main Content Boxes -->

</body>
</html>

Thanks for any help given!

 

[pagansilver]

I found a fix - it was the commercial engine my company uses ruining all the code with one stray font tag!

*how annoying!*

I hope that I haven't taken up too much of your time and I appriciate the help guys!

 

[ChrisHunt]

Glad you found the fault, pagansilver. That's a seriously bloated CSS file you have there, you can cut it down dramatically (making it quicker to load and easier to maintain) if you cut out all the duplication. For example, instead of

h3{
color: #5FAFEC;
background-color: #ffffff;
font-family: Arial, sans-serif;
font-weight: normal;
font-size: 32px;
padding: 0px;
margin: 0px;
}

h3.h3_box_1{
color: #5FAFEC;
background-color: #ffffff;
font-family: Arial, sans-serif;
font-size: 32px;
font-weight: normal;
text-align: center;
}

h3.h3_box_2{
position: absolute;
color: #5FAFEC;
background-color: #ffffff;
font-family: Arial, sans-serif;
font-size: 32px;
font-weight: normal;
text-align: left;
top: 30px;
left: 10px;
margin: 0px;
padding: 0px;
}

you only need to define the standard properties of <h3>s once, then apply any exceptions:

h3{
color: #5FAFEC;
background-color: #ffffff;
font-family: Arial, sans-serif;
font-weight: normal;
font-size: 32px;
padding: 0;
margin: 0;
}

h3.h3_box_1{
text-align: center;
}

h3.h3_box_2{
position: absolute; /* be careful with this, it's often */
top: 30px;          /* better to use margins or padding */
left: 10px;         /* instead of absolute positioning  */
text-align: left;
}

Furthermore, you don't need to use a class to identify where one element lies inside another. Instead of the [tt]h3_box_1[/tt] class, you can do this:

#box_1 h3{
text-align: center;
}

As a rule of thumb, if you're applying a class or id to (almost) every element of your document, you're probably doing something wrong.

Finally, I'd try to make your product listings more generic, then use CSS to style them how you want them (and maybe differently in different parts of the page. So your HTML might look something like:

<div id="box_1">
<h3 class='h3_box_1'>new<br />arrivals</h3>
  <div class="product">
     <a href='ishop/1087/shopscr337.html'>
       <img src='/ishop/images/1087/crazyfrog.gif' alt='Image of the crazy frog' height='108' width='95'>
    </a>
    <h4>Crazy Frog Head Nodder with Sound!</h4>
    <p class="price">From £19.99</p>
    <p class="desc">Just as irritating as the real thing</p>
    <p class="more"><a href='ishop/1087/shopscr337.html'>more info</a></p>
  </div>
  <div class="product">
    <a href='/ishop/1087/shopscr196.html'>
      <img src='/ishop/images/1087/duvet.gif' alt='Image of a duvet cover with a headless naked couple on it' height='163' width='114' class='float_right'>
    </a>
    <h4>Perfect Body Duvet Cover</h4>
    <p class="price">From £34.95</p>
    <p class="more"><a href='/ishop/1087/shopscr196.html'>more info</a></p>
  </div>
</div>

I think that could make life a lot easier when generating content from a back-end database.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd