Thanks Paul.
I haven't defined my h1-h6 styles yet just because I haven't gotten that far yet, but I will. I can change my "header3" id to something more semantic. I currently was just using it to define a background image that needs no image replacement because it is not an actual text header, but it is part of the interface design. Maybe I should title it something more like "interface3".
Therefore my question still exists:
For example in my html: <div id="interface3"></div>
My CSS for "interface3" would be as follows:
#interface3
{
position: relative;
width: 836px;
height: 37px;
margin: 0 auto;
padding: 0px;
background: #2A331F url(../img/header3.gif) no-repeat;
}If I use this, is it okay to leave the div empty as in <div id="background3"></div> or should I fill the div with something that the user will never see even if CSS is enabled or not. Make sense? John Oxten mentioned that this may cause a "nasty margin" in IE. Can this be avoided and what is the proper way or is it fine to leave it empty? Does a non-breaking space make a difference with the IE problem?
My reference files for the question keeping in mind that "header3" would be changed to something more semantic like "interface3":
Home page thus far: http://sonze.com/lange/index.html
CSS for the page: http://sonze.com/lange/css/master.css
Thanks again guys, Shane
My basic question is, "Is it okay to leave a div empty in order just to show a background image?"
On Sep 29, 2004, at 1:13 PM, Paul Novitski wrote:
At 11:35 AM 9/29/2004, Shane Helm wrote:I have some empty div tags to be able to make a graphic a background image since this presentation is common to all pages.
For example in my html:
<div id="header3"></div>
My CSS for "header3"> is as follows: #header3 { position: relative; width: 836px; height: 37px; margin: 0 auto; padding: 0px; background: #2A331F url(../img/header3.gif) no-repeat; }
Since I this is only my second site using Web Standards, I'm unsure if leaving a div tag empty is okay or not. Or is there another method I should be using?
Shane,
Consider using h1-h6 for headlines on your page. Semantically they mean "headings" while a div is merely an anonymous division. Your page should make sense when your stylesheet is missing. If you view your page without CSS or images, does it lose meaning without the headline showing? If so, here's an alternative way to mark that up:
<h3><span>Frog Doggies</span></h3>
h3 { background: ...; } h3 span { display: none; }
If CSS is enabled, the image displays and the text is suppressed. If CSS isn't enabled, the text displays but not the image.
Where this "image replacement" solution fails is in user agents in which CSS is enabled but images are suppressed.
Paul
****************************************************** The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
****************************************************** The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
