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;
}
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---
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 <lesburg-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 > > -------------- > > #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; > } > > > > >--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en -~----------~----~----~----~------~----~------~--~---
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
<HTML>
<HEAD>
<style type="text/css">
#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;
}
</style>
</HEAD>
<BODY>
<div id="flasharea" style="top: 3px;">
<div id="Flash" class="warning">This is a
warning</div>
<div id="Flash" class="info">This is some
info</div>
<div id="Flash" class="notice">This is a
notice</div>
</div>
</BODY>
</HTML>
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
>
> > --------------
>
> > #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;
> > }
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---
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 > > <HTML> > <HEAD> > <style type="text/css"> > #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; > } > </style> > </HEAD> > <BODY> > <div id="flasharea" style="top: 3px;"> > <div id="Flash" class="warning">This is a warning</div> > <div id="Flash" class="info">This is some info</div> > <div id="Flash" class="notice">This is a notice</div> > </div> > </BODY> > </HTML> > > 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 --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en -~----------~----~----~----~------~----~------~--~---
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: http://validator.w3.org/#validate_by_input+with_options Good luck, -Conrad On 11/9/07, cal <lesburg-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> 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 > > <HTML> > <HEAD> > <style type="text/css"> > #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; > } > </style> > </HEAD> > <BODY> > <div id="flasharea" style="top: 3px;"> > <div id="Flash" class="warning">This is a warning</div> > <div id="Flash" class="info">This is some info</div> > <div id="Flash" class="notice">This is a notice</div> > </div> > </BODY> > </HTML> > > > > > 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 > > > > > -------------- > > > > > #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; > > > } > > > > >--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en -~----------~----~----~----~------~----~------~--~---
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">
<head>
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type"
content="text/css" />
<style type="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;
}
</style>
</head>
<body>
<div id="flasharea" style="top: 3px;">
<div class="warning">This is a warning</div>
<div class="info">This is some info</div>
<div class="notice">This is a notice</div>
</div>
</body>
</html>
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
> >
> > <HTML>
> > <HEAD>
> > <style type="text/css">
> > #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;
> > }
> > </style>
> > </HEAD>
> > <BODY>
> > <div id="flasharea" style="top: 3px;">
> > <div id="Flash" class="warning">This is a
warning</div>
> > <div id="Flash" class="info">This is some
info</div>
> > <div id="Flash" class="notice">This is a
notice</div>
> > </div>
> > </BODY>
> > </HTML>
> >
> > 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
>
>
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---
<!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">
<head>
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type"
content="text/css" />
<style type="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;
}
</style>
</head>
<body>
<div id="flasharea" style="top: 3px;">
<div class="warning">This is a warning</div>
<div class="info">This is some info</div>
<div class="notice">This is a notice</div>
</div>
</body>
</html>
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">
>
> <head>
> <title>An XHTML 1.0 Strict standard template</title>
> <meta http-equiv="content-type"
> content="text/html;charset=utf-8" />
> <meta http-equiv="Content-Style-Type"
content="text/css" />
> <style type="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;
> }
> </style>
> </head>
>
> <body>
> <div id="flasharea" style="top: 3px;">
> <div class="warning">This is a warning</div>
> <div class="info">This is some info</div>
> <div class="notice">This is a notice</div>
> </div>
> </body>
> </html>
>
>
> 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
> > >
> > > <HTML>
> > > <HEAD>
> > > <style type="text/css">
> > > #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;
> > > }
> > > </style>
> > > </HEAD>
> > > <BODY>
> > > <div id="flasharea" style="top: 3px;">
> > > <div id="Flash" class="warning">This is
a warning</div>
> > > <div id="Flash" class="info">This is
some info</div>
> > > <div id="Flash" class="notice">This is
a notice</div>
> > > </div>
> > > </BODY>
> > > </HTML>
> > >
> > > 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
> >
> >
> >
> > > >
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---
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 On Nov 9, 7:16 pm, "Conrad Taylor" <conra...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> <!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"> > > <head> > <title>An XHTML 1.0 Strict standard template</title> > <meta http-equiv="content-type" > content="text/html;charset=utf-8" /> > <meta http-equiv="Content-Style-Type" content="text/css" /> > <style type="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;} > > </style> > </head> > > <body> > <div id="flasharea" style="top: 3px;"> > <div class="warning">This is a warning</div> > <div class="info">This is some info</div> > <div class="notice">This is a notice</div> > </div> > </body> > </html> > > On 11/9/07, Conrad Taylor <conra...-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"> > > > <head> > > <title>An XHTML 1.0 Strict standard template</title> > > <meta http-equiv="content-type" > > content="text/html;charset=utf-8" /> > > <meta http-equiv="Content-Style-Type" content="text/css" /> > > <style type="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; > > } > > </style> > > </head> > > > <body> > > <div id="flasharea" style="top: 3px;"> > > <div class="warning">This is a warning</div> > > <div class="info">This is some info</div> > > <div class="notice">This is a notice</div> > > </div> > > </body> > > </html> > > > END CODE: > > > On 11/9/07, Rob Biedenharn <R...-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 > > > > > <HTML> > > > > <HEAD> > > > > <style type="text/css"> > > > > #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; > > > > } > > > > </style> > > > > </HEAD> > > > > <BODY> > > > > <div id="flasharea" style="top: 3px;"> > > > > <div id="Flash" class="warning">This is a warning</div> > > > > <div id="Flash" class="info">This is some info</div> > > > > <div id="Flash" class="notice">This is a notice</div> > > > > </div> > > > > </BODY> > > > > </HTML> > > > > > 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 > > > R...-xa9cJyRlE0mWcWVYNo9pwxS2lgjeYSpx@public.gmane.org--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en -~----------~----~----~----~------~----~------~--~---