Sent by Robert Ginn on 7 May 2007 02:02
> > >From: david [EMAIL-REMOVED]>
> >
> > >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.
What do you mean by "awful"? Tells me nothing about what happened.
> > http://www.sitkamusicfestival.org/6-strictindex.html
> > http://www.sitkamusicfestival.org/6-strictssmf.css
-- David [EMAIL-REMOVED]
Sorry I wasn't very descriptive, David.
When using <hr> elements as visual separators in the page and shrinking the viewing screen size,
the logo appeared, below which was the text contained in the header, below that was the horizontal
rule at the bottom of the header, and below that was the rest of the page, all in order and quite
readable. As I recall, this was the case both in FF and IE7.
When using the border of a separator <div> to define the bottom of the header section, shrinking
the viewing screen (in IE7) causes the header text to overrun the bottom border line and the text
below it, presenting an unintelligible mess (that is the "awful" which I mentioned). The text
flows below the separating border even though the <div> with the separating border contains a
"clear: both;" property. The presentation in Firefox, however, is clear and readable.
Conversely, in the box for "Coming Events," lower on the page, all the text and separator lines
appear in order and the text is again quite readable. Here, separators are provided by border
lines on <h2> elements, rather than separator <div>'s. That probably accounts for the fact that
the text isn't overriding lower text, as the separators are in the text elements themselves.
I'm testing my pages in a reduced screen size to simulate a lower resolution screen, and in an even
smaller screen, to simulate the view in a PDA-size screen. I may be mistaken about the validity of
these tests.
I'm also not terribly concerned about the above effects and may decide just to go ahead with the
page as it is, or close to its present state. I don't have IE6 and am not aware how this page will
show in that browser version, which may be a more significant problem.
At any rate, thanks for your help and I'm still open to any suggestions you might have.
Regards, Bob
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
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/
