IE and Firefox compatability issue

[Alkaline2233]

I want the firefox one to look like the IE one. Here is the code im using:

<div class="top">Portfolio</div>
<div class="sub">&nbsp;Art</div>
<div class="side"></div><div class="cell1">01</div>
<div class="sub">&nbsp;Photography</div>
<div class="side"></div><div class="cell1>01</div>

CSS:

.top {
background-color: #697952;
color: #ffffff;
font-weight: bold;
padding-left: 2px;
}
.sub{
background-color: #8CA26D;
color: #ffffff;
padding-left: 2px;
}
.cell1 {
background-color: #B2BEA0;
color: #ffffff;
padding-left: 2px;
float: right;
width: 91.5%;
}
.side {
width: 15px;
float: left;
}

<admin note>firefox makes the left margin beside the "side" items between 2 "sub" items the colour of the "sub" items, IE keeps the proper bg colour

[edited by: jatar_k at 8:39 pm (utc) on July 22, 2005]
[edit reason] no urls thanks [/edit]

[SuzyUK]

Alkaline2233 - Welcome to WebmasterWorld!

There's probably multiple ways but working off you code above. If you put some content into those side divs then it makes FF display similar to IE, But it doesn't make the background stretch to the end of the last float in either of them.

I'm not sure that you need them "side" divs, at all.. are you just using them as spacers?

If you contain the whole of the sub categories in their own div and then use an h3 (or similar) to contain the title it get's a little easier.

You float the sub class at 100% width this makes it stretch vertically to contain it's floated children (cell1) then the h3 will automatically be 100% of it's parent so force the floated right cell down to the next line. The right floats will always drop down below each other (i.e. will not wrap) because of their width and each time you open a new sub category it's 100% width will ensure that none of the titles wrap to the left of the right floats..

e.g.

.top {
background-color: #697952;
color: #ffffff;
font-weight: bold;
padding-left: 2px;
}
.sub{
background-color: #8CA26D;
color: #ffffff;
float: left; /* to contain nested floats (make background color stretch) */
width: 100%; /* required to fill width to stop shrinkwrap and to enable the right floats to calculate their width */
}

.sub h3 {
padding-left: 2px; /* padding on here now instead of sub */
margin: 0;
padding: 0;
font-size: 15px;
line-height: 1.8;
}

.cell1 {
background-color: #B2BEA0;
color: #ffffff;
padding-left: 2px;
float: right;
width: 91.5%;
}

/*.side {
width: 15px;
float: left;
background: #f00;
}*/

HTML:
<div class="top">Portfolio</div>

<div class="sub">
<h3>Art</h3>
<!--<div class="side"></div>-->
<div class="cell1">01</div>
</div>

<div class="sub">
<h3>Photography</h3>
<!--<div class="side"></div>-->
<div class="cell1">01</div>
<div class="cell1">02</div>
</div>

not sure if that's what you want, but let us know

Suzy

[Alkaline2233]

Thankyou for trying, but it seems you got it backwards. I wanted the FF version to look like the IE version. You made the IE version look like the FF version. I hope that you dont mind trying it again, I would appreciate if you did. And yes, I was trying to make the side class the spacer, so that the background would not stretch to the bottom.

[SuzyUK]

LOL, back to front hehe.. that'll teach me :)

trouble is, from your code I'm seeing the background color from the sub div carry on down through the first cell1 div but not the second one in IE so I flipped the coin the wrong way..

anyhow it's seems to be simpler the other way, again I don't think you need the side divs, just add {clear: both;} to the .sub div, and then you can remove those side spacer divs if you want.

does that help this time, and/or does the clearance cause other issues with the rest of your layout in FF?

Suzy

[Alkaline2233]

Thank you very much. Adding clear: both; solved my problem.