Filed under: Internet
There are lots of great tutorials already out there for CSS, but I’d like to address one specific problem I’ve encountered with Internet Explorer. Say you’ve defined a style for a custom tag in your CSS stylesheet:
header1 {
color: #F1E1FF;
text-decoration: none;
font-size: 18;
}
…all versions of Internet Explorer will completely ignore it!
To work around this, don’t define styles for custom tags if you can help it. Define styles for classes instead, and apply the classes to standard tags. This is easy to do.
Step 1. In your stylesheet, give your style a name beginning with a period. That turns it into a class:
.header1 {
color: #F1E1FF;
text-decoration: none;
font-size: 18;
}
Step 2. In your HTML file, use a standard tag and apply your class to it. For changing font size and color, the <span> tag is handy:
<span class="header1">foo</span>
That’s all you need to do for applying styles to plain text. But if you’d like to apply your style to a link…you’ve got some extra steps left.
Step 3. Internet Explorer will only read a link’s style information from its <a> tag! This is annoying, because most of the time you’ll already have specified a style for your normal links. You’ll need to override it. Go to your stylesheet, copy the class you just made, and add an a before the period. The copy should otherwise be identical to your original:
a.header1 {
color: #F1E1FF;
text-decoration: none;
font-size: 18;
}
Step 4. You can then add some other variations if you’d like to do something more with your link.
a.header1:hover {
color: #F1E1FF;
text-decoration: underline;
font-size: 18;
}
Step 5. Finally, apply the class to your link:
<a href="foo.html" class="header1">foo</a>
Internet Explorer should now do a better job with your CSS style information. However, be aware that it’s still pretty unpredictable compared to its competitors. You may decide that it’s not worth the time to get your page exactly right for just this browser, even if it does have the largest market share.
6 Comments so far
Leave a comment
Good work. You’ve earned a share of my prize.
Comment by nobel 10.10.07 @ 10:14 amI don’t even think I can give you the benefit of the doubt, seeing that this post was published at 4am.
This has to be the worst CSS “tutorial” I have ever seen. Not only is it compltely off base as far as “custom tags” go, but the CSS provided as a solution is very reptitive, verbose and unnecessary.
It’s obvious that web development is new to you, if it isn’t then it’s unfortunate that you haven’t broadend your horizons. You should pick up a book on CSS, read up on best practices and web semantics.
Good luck.
Comment by Joe DuFloth 10.21.07 @ 10:25 amTell you what–I’ll promise to read up and write more elegant CSS from now on, if you’ll point out for everybody’s benefit the “off-base” information that I’ve got wrong.
It might be an ugly solution, but from where I’m sitting it does seem to work.
Comment by Nick 10.21.07 @ 3:04 pmSweet tutorial, just what I have been looking for! Well Pleased…
Comment by Bubbila 02.14.08 @ 2:35 pmCSS “Cascading Style Sheets” LessoNs - WeB DesigN LessoN - - Web site : http://WWW.css-lessons.ucoz.com/index.html
Comment by sezer 05.02.08 @ 8:50 amLeave a comment
Line and paragraph breaks automatic, e-mail address never displayed, HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>
Mnay thanks. I spent 30 minutes looking for exactly this info.
Comment by Jamie 10.05.07 @ 9:10 am