Div Boundries 1

[bam720]

I have a class called alternate to apply a different styled background

.alternate {
padding-left: 30px;
width: inherit;
background: #F0F2F3;
display: block;
}

It works great in IE, but not so hot in FF. Of course if I set the width to what I'd really like (say 90%) it works fine in FF but not IE.

http://www.aspexpos.com/new

Any tips would be awesome.

 

[BillyRayPreachersSon]

One way would be to use the underscore hack to target IE browsers (v6 and below):

width: 90%; /* All browsers */
[!]_[/!]width: inherit; /* IE 6 and below only */

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

Although - do you need to set a width at all?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[ChrisHunt]

Actually, I think both browsers will understand [tt]width: inherit[/tt] in the same way on this page. Firefox will inherit a value of 100% from its parent, IE doesn't understand [tt]inherit[/tt] at all, so it defaults to 100%

The difference is IE's broken box model. The page doesn't have a full DOCTYPE, so IE's running in quirks mode. In that mode, the 30px of padding happens inside the 100% width. FF applies the standard, so the 30px is applied in addition to the 100%.

You really ought to fix your DOCTYPE for better cross-browser compatibility, but in this case you don't need a [tt]width[/tt] rule anyway. Just leave it out and it should work fine.

As a rule of thumb, it's often easier to use either [tt]width[/tt] OR [tt]margin[/tt]/[tt]padding[/tt] rather than both together on non-floated elements.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[bam720]

Fixed the doctype, and I removed the margin and it worked. Thanks.