Re: css difference between IE6 and FF?

Conrad Taylor
2007-11-10T00:13:58Z

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">


An XHTML 1.0 Strict standard template
    <meta http-equiv="content-type"
        content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type"
content="text/css" />


#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:


On 11/9/07, Rob Biedenharn
<Rob-GBZH0y1GwQfnZcttdmLDtcI/UQi/AW5J@public.gmane.org>
wrote:
>
>
> 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:
> > 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
> >
> >
> >
> >
> > On Nov 9, 6:12 pm, "Conrad Taylor"
<conra...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> >> Hi, you should be able to use the following to validate the CSS:
> >>
> >> 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
> >>
> >> On 11/9/07, cal
<lesb...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> >>> 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
> >>
>
> Rob Biedenharn          http://agileconsultingllc.com
> Rob-xa9cJyRlE0mWcWVYNo9pwxS2lgjeYSpx@public.gmane.org