CSS hr noshadow

[Atanas Boev]

Is there any CSS way to make a <hr /> noshadow so I don't get the default 3D
look in Netscape?

I tried to use some border-bottom to make the line, but my "line" should be
under text that is hanging to the right of a image with "float: left" and if
I use border, the line is extended under the image. Also, I thing the <hr />
divider fits the meaning of the text quite well. But if somebody has better
idea than using <hr /> thats also suitable.

I want to get the following

LOGO Main Title
LOGO ------------------------------------------
LOGO Second Title

here is example in HTML:
<img class="logo" src="logo.gif" />
<h1 class="mname">M ain Title</h1>
<hr class="title" />
<h1 class="sname">S econd Title</h1>


and in the CSS:
hr.title {
color: #677379;
}

img.logo {
float: left;
margin-left: 5px;
margin-right: 5px;
}

..sname {
color: #677379;
letter-spacing: .5em;
text-align: right;
font: italic normal normal large sans-serif;
font-style: italic;
margin: 0px;
padding: 0px;
}

..mname {
font: normal normal normal small sans-serif;
margin: 0px;
padding: 0px;
}


suncho

[Atanas Boev]

Re: CSS hr noshadow


"Atanas Boev" <sun-alabala-cho@cs.tut.fi> wrote in message
news:bspklm$sta $1@news.cc.tut. fi...[color=blue]
> Is there any CSS way to make a <hr /> noshadow so I don't get the default[/color]
3D[color=blue]
> look in Netscape?
>
> I tried to use some border-bottom to make the line, but my "line" should[/color]
be[color=blue]
> under text that is hanging to the right of a image with "float: left" and[/color]
if[color=blue]
> I use border, the line is extended under the image. Also, I thing the <hr[/color]
/>[color=blue]
> divider fits the meaning of the text quite well. But if somebody has[/color]
better[color=blue]
> idea than using <hr /> thats also suitable.
>
> I want to get the following
>
> LOGO Main Title
> LOGO ------------------------------------------
> LOGO Second Title[/color]

Actually I found that some workaround is to set both the color and the
background-color to the same value... Still, this is a workaround. Is there
some CSS property that controls the 3d look of a HR like it is possible in
tables?


suncho

[Stanimir Stamenkov]

Re: CSS hr noshadow

Atanas Boev wrote:
[color=blue]
> Is there any CSS way to make a <hr /> noshadow so I don't get the default 3D
> look in Netscape?[/color]

Which Netscape version? Be more specific.

<hr style="border-style: solid" />

should be sufficient, but IE has problem interpreting the default
border-color so you need to specify it explicitly:

<hr style="border: 1px solid black" />

--
Stanimir

[Neal]

Re: CSS hr noshadow

"Atanas Boev" <sun-alabala-cho@cs.tut.fi> wrote in message
news:bspnrs$13e $1@news.cc.tut. fi...[color=blue]
>
> "Atanas Boev" <sun-alabala-cho@cs.tut.fi> wrote in message
> news:bspklm$sta $1@news.cc.tut. fi...[color=green]
> > Is there any CSS way to make a <hr /> noshadow so I don't get the[/color][/color]
default[color=blue]
> 3D[color=green]
> > look in Netscape?
> >
> > I tried to use some border-bottom to make the line, but my "line" should[/color]
> be[color=green]
> > under text that is hanging to the right of a image with "float: left"[/color][/color]
and[color=blue]
> if[color=green]
> > I use border, the line is extended under the image. Also, I thing the[/color][/color]
<hr[color=blue]
> />[color=green]
> > divider fits the meaning of the text quite well. But if somebody has[/color]
> better[color=green]
> > idea than using <hr /> thats also suitable.
> >
> > I want to get the following
> >
> > LOGO Main Title
> > LOGO ------------------------------------------
> > LOGO Second Title[/color]
>
> Actually I found that some workaround is to set both the color and the
> background-color to the same value... Still, this is a workaround. Is[/color]
there[color=blue]
> some CSS property that controls the 3d look of a HR like it is possible in
> tables?[/color]

Another workaround is:

<style>

..gone {
display: none;
}

..hr {
border-bottom: 1px #777 solid;
}

</style>
.. . .
<p>content content</p>
<div class="hr"><hr class="gone" /></div>
<p>content content</p>

Or have your content in a div and set a bottom border in a similar fashion.
The hr element is only kinda-sorta important to content, it's really a
visual cue that something new is coming. Div borders are ideal for this. But
the above workaround allows there to be some kind of a hr in non-CSS
environments.

[Neal]

Re: CSS hr noshadow


"Stanimir Stamenkov" <s7an10@netscap e.net> wrote in message
news:bsq3nu$90m h$1@ID-207379.news.uni-berlin.de...[color=blue]
> <hr style="border-style: solid" />
>
> should be sufficient, but IE has problem interpreting the default
> border-color so you need to specify it explicitly:
>
> <hr style="border: 1px solid black" />[/color]

These both produce a rectangle in Netscape 7.1. I'll assume the original
poster was intending to include ALL NN versions.

Sadly, hr is not terribly manipulative without some serious witchcraft.

[Jukka K. Korpela]

Re: CSS hr noshadow

"Atanas Boev" <sun-alabala-cho@cs.tut.fi> wrote:
[color=blue]
> Is there any CSS way to make a <hr /> noshadow so I don't get the
> default 3D look in Netscape?[/color]

Maybe. There is no exact definition of what an hr element _is_ in CSS
terms, but the best interpretation (largely retrofitted by considering
what browsers actually do) is that an hr element is treated as a block
with a border, which is by browser defaults a 1px inset border. And
using the noshade (that's the spelling) attribute in HTML effectively
makes that border solid _and_ sets some grey background color for the
block. You can set such features separately in CSS in the obvious way,
but it's best to set the color property too if you want to set the
background, since some browsers oddly use color for background (maybe
based on an idea that the hr element has an implicit content, a box).
[color=blue]
> I want to get the following
>
> LOGO Main Title
> LOGO ------------------------------------------
> LOGO Second Title[/color]

Does that really call for <hr>? Does the line correspond to a change of
topic in the content, and is it desirable that speech browsers make a
longish pause?
[color=blue]
> here is example in HTML:
> <img class="logo" src="logo.gif" />
> <h1 class="mname">M ain Title</h1>
> <hr class="title" />
> <h1 class="sname">S econd Title</h1>[/color]

To begin with, it's invalid markup. Why, oh why, do people take the
trouble of including those funny "/" characters, which do no good, but
omit the alt attributes?

Anyway, I don't think you should try to use and style an hr element at
all. Rather, just use a bottom border for the Main Title. Then you can
set the border style, width, and color as desired.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Neal]

Re: CSS hr noshadow


"Jukka K. Korpela" <jkorpela@cs.tu t.fi> wrote in message
news:Xns94611AA 219048jkorpelac stutfi@193.229. 0.31...[color=blue]
> (regarding <img class="logo" src="logo.gif" /> )
> Why, oh why, do people take the
> trouble of including those funny "/" characters, which do no good, but
> omit the alt attributes?[/color]

Well, the funny /'s do plenty of good, so long as you're after XHTML 1.0
strict, but the alt text sure does a lot of good as well.

[Alan J. Flavell]

Re: CSS hr noshadow

On Mon, 29 Dec 2003, Neal wrote:
[color=blue]
> "Jukka K. Korpela" <jkorpela@cs.tu t.fi> wrote in message
> news:Xns94611AA 219048jkorpelac stutfi@193.229. 0.31...[color=green]
> > (regarding <img class="logo" src="logo.gif" /> )
> > Why, oh why, do people take the
> > trouble of including those funny "/" characters, which do no good, but
> > omit the alt attributes?[/color]
>
> Well, the funny /'s do plenty of good, so long as you're after XHTML 1.0
> strict,[/color]

But what benefits do you hope to bring to the web by doing that?

XML-based markups have their potential benefits, but XHTML/1.0 is
nothing more than a reworking of HTML/4.01 into XML, which - used in a
web context - brings a number of unnecessary client agent anomalies as
compared with HTML/4.01, but little or nothing in the way of benefits
as far as I can see.

XHTML/1.0 is at best a toy application of XML to get people accustomed
to XML. But to insist on using it in a production WWW context seems
to me to be a triumph of hope over practicality. And by pretending
that it can validly be sent as text/html, there's the risk that naive
users will get the idea that it's just fine to translate their
existing HTML tag soup into XHTML-flavoured tag soup, without making
any fundamental adjustments - thereby missing one of the major
benefits for which XML was supposedly introduced.

[Atanas Boev]

Heading structure, was: Re: CSS hr noshadow

"Jukka K. Korpela" <jkorpela@cs.tu t.fi> wrote in message
news:Xns94611AA 219048jkorpelac stutfi@193.229. 0.31...
Terve!
I fixed the cosmetics of the layout, but still I want to get to the bottom
of the issue.[color=blue]
> "Atanas Boev" <sun-alabala-cho@cs.tut.fi> wrote:[color=green]
> > I want to get the following
> >
> > LOGO Main Title
> > LOGO ------------------------------------------
> > LOGO Second Title[/color]
>
> Does that really call for <hr>? Does the line correspond to a change of
> topic in the content, and is it desirable that speech browsers make a
> longish pause?[/color]
You are right here. My feeling is like hr should be a break between
paragaphs (like the "* * *" they put sometimes in the books). Still I was
thinking it has some structural meaning in that case, the First Title being
"Tampere University of Technology" and Second Title being "Institute of
Signal Processing". The question I tried to reslove for a long time is: how
I should structure "introducto ry text" in the page that is above the main
page title. I have the following headings:
* University Logo
* Our University Name
* Our Institute Name
* Our Great Discoveries (This is the subject of the page)

Any suggestions? Do I use (img)-h1.title-h1.subtitle-h1.main or
h1(img)-h2-hr-h1.main? But now the h1.main gets too far away. The
(img)h2-h3-h1 idea seems pretty wrong...

Actually I did img-h1.title-hr-h1.susbtitle-p-h1 which now seems to me wrong
structure. hm.

suncho
I did

[Atanas Boev]

Re: CSS hr noshadow

"Jukka K. Korpela" <jkorpela@cs.tu t.fi> wrote in message
news:Xns94611AA 219048jkorpelac stutfi@193.229. 0.31...[color=blue]
> "Atanas Boev" <sun-alabala-cho@cs.tut.fi> wrote:[color=green]
> > I want to get the following
> >
> > LOGO Main Title
> > LOGO ------------------------------------------
> > LOGO Second Title[/color][/color]
[color=blue]
> Anyway, I don't think you should try to use and style an hr element at
> all. Rather, just use a bottom border for the Main Title. Then you can
> set the border style, width, and color as desired[/color]
You are right. I have to admit that I have ill love for that hr tag, since
html1.0 and tend to use it widely;) But let's not go off topic;)

Since I have the logo transparent and float: left (it is the TUT logo
actually) if I use bottom border of Main Title I get the following: (in all
browsers worth trying :) )
L O G O Main Title
--L-O-G-O ------------------------------------------
L O G O Second Title

Maybe a separate div holding just the line is good idea? Still I will have
to use some div-wrapper holding Main and second title floating to the left
of the logo, to prevent the line going though. And there comes the
(b)witchcraft, to extend the div, in different browsers, in quirk or strict
mode... aaahhh;( Even a table floating to te left of logo, but I will print
my code and eat it before using tables;)

suncho

[Atanas Boev]

Invalid code, was Re: CSS hr noshadow


"Jukka K. Korpela" <jkorpela@cs.tu t.fi> wrote in message
news:Xns94611AA 219048jkorpelac stutfi@193.229. 0.31...[color=blue]
> "Atanas Boev" <sun-alabala-cho@cs.tut.fi> wrote:[color=green]
> > here is example in HTML:
> > <img class="logo" src="logo.gif" />
> > <h1 class="mname">M ain Title</h1>
> > <hr class="title" />
> > <h1 class="sname">S econd Title</h1>[/color]
>
> To begin with, it's invalid markup. Why, oh why, do people take the
> trouble of including those funny "/" characters, which do no good, but[/color]

Invalid in which standart? (I don't take it offending, of course, I don't
know much HTML, otherwise I wouldn't be asking things in this group) I got
the impression that having space-slash-close_tag is not harming the standart
in any way, maybe I'm wrong?

I don't want to mess my hat with W3C minds, but it at least helps _me_ to
see that there will be no closing tag when I check the source. Looks
somewhat neat to my (humble) style of coding. Actually I was using things
like <hr }> long time ago but when the slash came it was clever idea.

There another point of view. There are some funky devices like nokia 3650
that have xHTML browser. I don't know actually do they need this slash or
not, still my code is far from xhtml, but if it is not harming, why not to
think ahead?
[color=blue]
> omit the alt attributes?[/color]

you mean the image? hm... I found myself using alt="" alot. I simply want to
save the visual impaired user from long sentences like "Microsoft Internet
Explorer... Welcome Page... Logo of the University... Horisontal Divider..."
and the first thing to appear to be the main information. In the same sence
a search engine it close to impaired user, it will also consider alt tags,
imagine how this looks in google search.

So, if having alt="" should I use alt at all? Is it necessary of just
recommended?


suncho

[Stanimir Stamenkov]

Re: Heading structure, was: Re: CSS hr noshadow

Atanas Boev wrote:
[color=blue]
> You are right here. My feeling is like hr should be a break between
> paragaphs (like the "* * *" they put sometimes in the books). Still I was
> thinking it has some structural meaning in that case, the First Title being
> "Tampere University of Technology" and Second Title being "Institute of
> Signal Processing". The question I tried to reslove for a long time is: how
> I should structure "introducto ry text" in the page that is above the main
> page title. I have the following headings:
> * University Logo
> * Our University Name
> * Our Institute Name
> * Our Great Discoveries (This is the subject of the page)
>
> Any suggestions? Do I use (img)-h1.title-h1.subtitle-h1.main or
> h1(img)-h2-hr-h1.main? But now the h1.main gets too far away. The
> (img)h2-h3-h1 idea seems pretty wrong...
>
> Actually I did img-h1.title-hr-h1.susbtitle-p-h1 which now seems to me wrong
> structure. hm.[/color]

Still I'm not sure what you're trying to accomplish but I think
you're misusing the heading elements (H1, H2...). They are for
structuring the main document content only and such elements have no
place in the "header" and "footer" parts added for some reason
(usually containing site-wide logo, on-line navigation, etc.). HR
likewise have only visual presentation means and doesn't specify any
structure. But because CSS2 is pretty limitted in aspect of
generated content and because of accessibility issues authors should
put superfluous content. Your document structure may look like:

<div class="header">
<img class="site-logo" alt="" src="...">
<span class="site-caption">Site Title<!--Our University Name -
Our Institute Name--></span>
<!-- or may be just
<img class="site-logo" alt="Site Title" src="...">
-->
...
<div class="hr"><hr> </div>
</div>

<div class="main">
<h1>Document Title<!--Our Great Discoveries--></h1>
<p>
...
</div>

<div class="footer">
<div class="hr"><hr> </div>
...
</div>

Using the variant Neal has proposed (<div class="hr"><hr> </div>):

div.hr hr { display: none }
div.hr { /* style the "HR" block here */ }

--
Stanimir

[Atanas Boev]

Re: Heading structure, was: Re: CSS hr noshadow


"Stanimir Stamenkov" <s7an10@netscap e.net> wrote in message
news:bsrvjd$pk7 t$1@ID-207379.news.uni-berlin.de...[color=blue]
> Still I'm not sure what you're trying to accomplish but I think
> you're misusing the heading elements (H1, H2...). They are for
> structuring the main document content only and such elements have no
> place in the "header" and "footer" parts added for some reason
> (usually containing site-wide logo, on-line navigation, etc.). HR
> likewise have only visual presentation means and doesn't specify any
> structure. But because CSS2 is pretty limitted in aspect of
> generated content and because of accessibility issues authors should
> put superfluous content. Your document structure may look like:
>
> <div class="header">[/color]
You are absolutely right! I will put them as a paragraphs in div.header, I
could also hide and show it for different CSS media. Actually I have never
tought of "introducto ry text" as a header;)

One small note here, IMHO hr should have some structural specification,
otherwise it wouldn't be a tag resent html specifications.

Still I have this big problem if I don't use HR as I explained in
news:bsrt8g$3c8 $1@news.cc.tut. fi. The problem is I obviously can't have div
floating by another div, just div floating in text.

If you can help me building the structure I have in that msg without HR it
would be very helpful.

.... and have nice holidays:)

suncho

[Neal]

Re: Invalid code, was Re: CSS hr noshadow


"Atanas Boev" <sun-alabala-cho@cs.tut.fi> wrote in message
news:bsruev$3s3 $1@news.cc.tut. fi...[color=blue]
> you mean the image? hm... I found myself using alt="" alot. I simply want[/color]
to[color=blue]
> save the visual impaired user from long sentences like "Microsoft Internet
> Explorer... Welcome Page... Logo of the University... Horisontal[/color]
Divider..."

Then spare the visually able reader from the same clutter. If the image is
important enough to show to the visually able, it's important enough to
provide alt text so the visually impaired won't wonder what's going on,
thinking they're missing something. And frankly, if you're using a LOT of
images that are not easily given "alt" text, it might be a sign that there
are too many extraneous images cluttering up the page.
[color=blue]
> and the first thing to appear to be the main information. In the same[/color]
sence[color=blue]
> a search engine it close to impaired user, it will also consider alt tags,
> imagine how this looks in google search.[/color]

Make it more concise. If you must have a complex header, then design the
layout so you can begin with content and put the header up after.
[color=blue]
> So, if having alt="" should I use alt at all? Is it necessary of just
> recommended?[/color]

src and alt are required attributes. Not required but important - height and
width. And consider the longdesc attribute for any complex image.

[Stanimir Stamenkov]

Re: Heading structure, was: Re: CSS hr noshadow

Atanas Boev wrote:
[color=blue]
> One small note here, IMHO hr should have some structural specification,
> otherwise it wouldn't be a tag resent html specifications.[/color]

There are number of other purely presentational elements like
B(old), I(talic) which are specified in the HTML 4 Strict DTD, too -
I don't know why. You might check the latest HTML/XHTML specs to see
if there is tendency to preserve these tags or if they are
deprecated or even thrown out.
[color=blue]
> Still I have this big problem if I don't use HR as I explained in
> news:bsrt8g$3c8 $1@news.cc.tut. fi. The problem is I obviously can't have div
> floating by another div, just div floating in text.
>
> If you can help me building the structure I have in that msg without HR it
> would be very helpful.[/color]

I would be glad to help you but I'm still not sure what is the exact
visual appearance you're trying to accomplish. The thing with the
horizontal rule not extending over the right aligned "Second Title"
buggers me - is this intentionally?

I'm putting not exact example here:

http://www.geocities.com/stanio/test/suncho.html

(you'll have to save locally and strip off the Yahoo added garbage
from the source). Here what it looks like in my Mozilla (the same as
in IE and Opera) and Lynx:

http://www.geocities.com/stanio/test/proba-moz.png

http://www.geocities.com/stanio/test/proba-lynx.png

You may try swithching off the default style while using Opera or
Mozilla.
[color=blue]
> .... and have nice holidays:)[/color]

Have a Happy New Year, you too! :-)

--
Stanimir