Robert Ginn wrote:
> > I've been working in XHTML Strict, mostly for experience, but it
> > doesn't like the <hr> tag, at least the "noshade" attribute. I'd
> > like this page to work in Strict, but am stuck on the noshade
> > problem. Without it, the hr's look strange---and without any hr's at
> > all, half my design skills would be gone. Is there a CSS element
> > similar to the hr, or should I make this a Transitional page?
>Add some styles to hr...
>hr {border: none; /* good browsers */}
>* html hr {border-style: solid; /* IE6 */}
>*:first-child+html hr {border-style: solid; /* IE7 */}
>....and it will look pretty consistent across browser-land.
>Also, the hr is an "empty element", and as such is written as <hr /> for
>xhtml 1.0 - *not* <hr></hr>
>We often use the top and/or bottom border on ordinary elements as purely
>visual separators.
>For example, the addition of...
>h1#top {border-top: solid 3px #fff; clear: both; margin-top: 0;}
>....can replace the <hr id="headerbottom" /> in your page, and is
>self-clearing.
>A <div class="separator"><!-- --></div> with suitable border, width,
>height, background-color, and margins for centering, can also replace
>the hr visually - and creates no cross-browser problems. It'll disappear
>if CSS support is missing, but that's rarely ever a problem when dealing
>with separators.
>regards
> Georg
>From: david <[EMAIL PROTECTED]>
>Perhaps you could:
>1. Leave the <hr> tags alone, unstyled except for one thing in CSS: hide
>them. When CSS is enabled, the HR isn't shown.
>2. Get the desired "horizontal rule" effects you want using the border
>of either the block element above or below it. Much more power, that
>way, and much better across browsers.
Thanks very much, gentlemen. I've cleaned up the page, but haven't tried any
cross-browser styles
for hr elements. I need to progress further in CSS before I understand that
coding well enough to
use it. Instead, I first used top and bottom borders to provide visual
separation. These worked
fine until I reduced the size of the viewing window. When using <hr>, the
horizontal rule
separated the narrowed text perfectly. When using borders on existing <div>
elements as
separators, the effect was awful when the viewing window was reduced. I then
went to a separator
<div> as Georg suggested, and it looks just fine in Firefox when viewed in a
small window, but IE7
allows the text of the header to extend below the separator <div> below it.
More trial and error (and help) is needed, but here is the current incarnation:
http://www.sitkamusicfestival.org/6-strictindex.html
http://www.sitkamusicfestival.org/6-strictssmf.css
Many thanks.
Bob
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
