# Css difference between IE6 and FF?

**URL:** <https://www.ruby-forum.com/t/css-difference-between-ie6-and-ff/119748>\
**Category:** Rails\
**Created:** [November 9, 2007, 11:07pm UTC](https://www.ruby-forum.com/t/css-difference-between-ie6-and-ff/119748 "2007-11-09T23:07:17Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![cal](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/f1d935/32.png) [@cal](https://www.ruby-forum.com/u/cal)\
**Post date:** [November 9, 2007, 11:07pm UTC](https://www.ruby-forum.com/t/css-difference-between-ie6-and-ff/119748/1 "2007-11-09T23:07:17Z")

</div>

Hi,

In my main css file, I have styled up various types of flash elements  
as pasted below. All three flash classes (notice, info, and warning)  
render fine in FireFox, but only the first one defined is shown in  
Internet Explorer. I am sure that a CSS guru in the room can point  
out the error of my ways… Thanks!

-cal

* * *

#Flash {  
text-align: left;  
font-weight: bold;  
font-family: verdana, arial, helvetica, sans-serif;  
font-size: 100%;  
margin: 0;  
padding: 5px 5px 5px 30px;  
}

div#Flash.notice {  
border-color: #9c9;  
color: #060;  
background: url(/images/thumbs\_up.gif) #E2F9E3 left no-repeat;  
}

div#Flash.info {  
border-color: #c99;  
color: #559;  
background: url(/images/info.gif) #DDDDDD left no-repeat;  
}

div#Flash.warning {  
border-color: #c99;  
color: #fff;  
background: url(/images/thumbs\_down.gif) #C00000 left no-repeat;  
}

---

<div class="post-metadata">

**Author:** ![cal](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/f1d935/32.png) [@cal](https://www.ruby-forum.com/u/cal)\
**Post date:** [November 10, 2007, 12:13am UTC](https://www.ruby-forum.com/t/css-difference-between-ie6-and-ff/119748/2 "2007-11-10T00:13:24Z")

</div>

Hi, you should be able to use the following to validate the CSS:

[http://jigsaw.w3.org/css-validator/](http://jigsaw.w3.org/css-validator/)

Do you have a test HTML file that you can post that uses the below CSS?  
In  
any case, it may be an issue with IE’s implementation of the CSS  
specification because the CSS validated with errors using a CSS  
2.1validator.

Good luck,

-Conrad

---

<div class="post-metadata">

**Author:** ![cal](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/f1d935/32.png) [@cal](https://www.ruby-forum.com/u/cal)\
**Post date:** [November 10, 2007, 12:46am UTC](https://www.ruby-forum.com/t/css-difference-between-ie6-and-ff/119748/3 "2007-11-10T00:46:07Z")

</div>

The CSS validation passed with no errors. Thanks for the useful  
site. Here’s a small html file which illustrates the issue. In  
firefox, all three lines are styled (no images, of course). In IE,  
only the div#Flash class defined first gets styled. Thanks again for  
your help.

-cal

#Flash { font-family: verdana, arial, helvetica, sans-serif; margin: 0; padding: 5px 5px 5px 30px; } div#Flash.notice { color: #060; background: url(/images/thumbs\_up.gif) #E2F9E3 left no-repeat; }

div#Flash.info {  
color: #559;  
background: url(/images/info.gif) #DDDDDD left no-repeat;  
}  
div#Flash.warning {  
color: #fff;  
background: url(/images/thumbs\_down.gif) #C00000 left no-repeat;  
}

This is a warning

This is some info

This is a notice

---

<div class="post-metadata">

**Author:** ![cal](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/f1d935/32.png) [@cal](https://www.ruby-forum.com/u/cal)\
**Post date:** [November 10, 2007, 1:03am UTC](https://www.ruby-forum.com/t/css-difference-between-ie6-and-ff/119748/4 "2007-11-10T01:03:40Z")

</div>

Hi, after looking at the HTML, I have to point out that you can only use  
an  
id once per page or every id on the page needs to be unique. Thus, an  
id is  
usually used structure the page elements. Please use the following to  
validate your document:

> **[The W3C Markup Validation Service](https://validator.w3.org/)**
>
> W3C's easy-to-use
> markup validation service, based on SGML and XML parsers.

Good luck,

-Conrad

---

<div class="post-metadata">

**Author:** ![cal](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/f1d935/32.png) [@cal](https://www.ruby-forum.com/u/cal)\
**Post date:** [November 10, 2007, 1:02am UTC](https://www.ruby-forum.com/t/css-difference-between-ie6-and-ff/119748/5 "2007-11-10T01:02:29Z")

</div>

You aren’t supposed to have more than one element with a given ID  
attribute. If you swap ID for CLASS in your code and selector rules,  
I suspect you’ll get what you want.

-Rob

On Nov 9, 2007, at 6:45 PM, cal wrote:

> div#Flash.info {
> \> http://jigsaw.w3.org/css-validator/ \> \> \>\> -cal \>

Rob B. [http://agileconsultingllc.com](http://agileconsultingllc.com)  
removed\_email\_address@domain.invalid

---

<div class="post-metadata">

**Author:** ![cal](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/f1d935/32.png) [@cal](https://www.ruby-forum.com/u/cal)\
**Post date:** [November 10, 2007, 1:14am UTC](https://www.ruby-forum.com/t/css-difference-between-ie6-and-ff/119748/6 "2007-11-10T01:14:46Z")

</div>

Hi, here’s an updated file. The other issue is that you have an id,  
flasharea, in the HTML code but it doesn’t appear in your CSS. Finally,  
the  
below code validates successfully.

Good luck,

-Conrad

BEGIN CODE:

 An XHTML 1.0 Strict standard template 

#Flash {  
font-family: verdana, arial, helvetica, sans-serif;  
margin: 0;  
padding: 5px 5px 5px 30px;  
}

div#.notice {  
color: #060;  
background: url(/images/thumbs\_up.gif) #E2F9E3 left no-repeat;  
}

div.info {  
color: #559;  
background: url(/images/info.gif) #DDDDDD left no-repeat;  
}  
div.warning {  
color: #fff;  
background: url(/images/thumbs\_down.gif) #C00000 left no-repeat;  
}

This is a warning

This is some info

This is a notice

END CODE:

---

<div class="post-metadata">

**Author:** ![cal](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/f1d935/32.png) [@cal](https://www.ruby-forum.com/u/cal)\
**Post date:** [November 10, 2007, 1:17am UTC](https://www.ruby-forum.com/t/css-difference-between-ie6-and-ff/119748/7 "2007-11-10T01:17:06Z")

</div>

An XHTML 1.0 Strict standard template

#Flash {  
font-family: verdana, arial, helvetica, sans-serif;  
margin: 0;  
padding: 5px 5px 5px 30px;  
}

div.notice {  
color: #060;  
background: url(/images/thumbs\_up.gif) #E2F9E3 left no-repeat;  
}

div.info {  
color: #559;  
background: url(/images/info.gif) #DDDDDD left no-repeat;  
}  
div.warning {  
color: #fff;  
background: url(/images/thumbs\_down.gif) #C00000 left no-repeat;  
}

This is a warning

This is some info

This is a notice

---

<div class="post-metadata">

**Author:** ![cal](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/f1d935/32.png) [@cal](https://www.ruby-forum.com/u/cal)\
**Post date:** [November 10, 2007, 1:47am UTC](https://www.ruby-forum.com/t/css-difference-between-ie6-and-ff/119748/8 "2007-11-10T01:47:31Z")

</div>

D’oh. Three div’s in a row with the same id. I suppose that if one  
stares at one own flaws long enough, they disappear…

Thanks a bunch.

-cal