Re: css difference between IE6 and FF?

Conrad Taylor
2007-11-10T00:16:27Z

<!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





On 11/9/07, Conrad Taylor
<conradwt-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
>
> 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
> >
> >
> >
> > > >