By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,445 Members | 1,159 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,445 IT Pros & Developers. It's quick & easy.

CSS hr noshadow

P: n/a
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">Main Title</h1>
<hr class="title" />
<h1 class="sname">Second 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
Jul 20 '05 #1
Share this Question
Share on Google+
21 Replies


P: n/a

"Atanas Boev" <su*************@cs.tut.fi> wrote in message
news:bs**********@news.cc.tut.fi...
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


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
Jul 20 '05 #2

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


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
Jul 20 '05 #3

P: n/a
"Atanas Boev" <su*************@cs.tut.fi> wrote in message
news:bs**********@news.cc.tut.fi...

"Atanas Boev" <su*************@cs.tut.fi> wrote in message
news:bs**********@news.cc.tut.fi...
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


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?


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.
Jul 20 '05 #4

P: n/a

"Stanimir Stamenkov" <s7****@netscape.net> wrote in message
news:bs***********@ID-207379.news.uni-berlin.de...
<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" />


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.
Jul 20 '05 #5

P: n/a
"Atanas Boev" <su*************@cs.tut.fi> wrote:
Is there any CSS way to make a <hr /> noshadow so I don't get the
default 3D look in Netscape?
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).
I want to get the following

LOGO Main Title
LOGO ------------------------------------------
LOGO Second Title
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?
here is example in HTML:
<img class="logo" src="logo.gif" />
<h1 class="mname">Main Title</h1>
<hr class="title" />
<h1 class="sname">Second Title</h1>


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/
Jul 20 '05 #6

P: n/a

"Jukka K. Korpela" <jk******@cs.tut.fi> wrote in message
news:Xn*****************************@193.229.0.31. ..
(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?


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.
Jul 20 '05 #7

P: n/a
On Mon, 29 Dec 2003, Neal wrote:
"Jukka K. Korpela" <jk******@cs.tut.fi> wrote in message
news:Xn*****************************@193.229.0.31. ..
(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?


Well, the funny /'s do plenty of good, so long as you're after XHTML 1.0
strict,


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.

Jul 20 '05 #8

P: n/a
"Jukka K. Korpela" <jk******@cs.tut.fi> wrote in message
news:Xn*****************************@193.229.0.31. ..
Terve!
I fixed the cosmetics of the layout, but still I want to get to the bottom
of the issue.
"Atanas Boev" <su*************@cs.tut.fi> wrote:
I want to get the following

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


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?

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 "introductory 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
Jul 20 '05 #9

P: n/a
"Jukka K. Korpela" <jk******@cs.tut.fi> wrote in message
news:Xn*****************************@193.229.0.31. ..
"Atanas Boev" <su*************@cs.tut.fi> wrote:
I want to get the following

LOGO Main Title
LOGO ------------------------------------------
LOGO Second Title
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

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
Jul 20 '05 #10

P: n/a

"Jukka K. Korpela" <jk******@cs.tut.fi> wrote in message
news:Xn*****************************@193.229.0.31. ..
"Atanas Boev" <su*************@cs.tut.fi> wrote:
here is example in HTML:
<img class="logo" src="logo.gif" />
<h1 class="mname">Main Title</h1>
<hr class="title" />
<h1 class="sname">Second Title</h1>
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


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?
omit the alt attributes?


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
Jul 20 '05 #11

P: n/a
Atanas Boev wrote:
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 "introductory 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.


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
Jul 20 '05 #12

P: n/a

"Stanimir Stamenkov" <s7****@netscape.net> wrote in message
news:bs***********@ID-207379.news.uni-berlin.de...
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">

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 "introductory 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:bs**********@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
Jul 20 '05 #13

P: n/a

"Atanas Boev" <su*************@cs.tut.fi> wrote in message
news:bs**********@news.cc.tut.fi...
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..."

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.
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.
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.
So, if having alt="" should I use alt at all? Is it necessary of just
recommended?


src and alt are required attributes. Not required but important - height and
width. And consider the longdesc attribute for any complex image.
Jul 20 '05 #14

P: n/a
Atanas Boev wrote:
One small note here, IMHO hr should have some structural specification,
otherwise it wouldn't be a tag resent html specifications.
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.
Still I have this big problem if I don't use HR as I explained in
news:bs**********@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.
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.
.... and have nice holidays:)


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

--
Stanimir
Jul 20 '05 #15

P: n/a
Stanimir Stamenkov <s7****@netscape.net> wrote:
Atanas Boev wrote:
One small note here, IMHO hr should have some structural
specification, otherwise it wouldn't be a tag resent html
specifications.


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.


From the beginning, the hr element has had dual nature. It has been
defined as 'change of topic', yet named after 'horizontal rule'.

The b and i elements, on the hand, might be regarded as more purely
presentational. Yet, they are essential in a markup language that lacks
better semantic markup. For example, what markup would you use for
the species name "Homo sapiens"? According to well-established
biological writing rules, the name shall be italicized whenever
possible (and underlined when not possible). Using just span and CSS
(font-style: oblique or font-style: italic) is not satisfactory, IMHO,
since then the text appears as normal text whenever the style sheet is
not used. So <i>Homo sapiens</i> is adequate, though you could also
used more verbose and more informative markup like <i class="taxon"
lang="la" xml:lang="la">Homo sapiens</i>.

Similarly, in some notations in physics, italics indicates a symbol of
a quantity and bolding indicates a vector. I would not rely on CSS in
such matters.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Jul 20 '05 #16

P: n/a
"Atanas Boev" <su*************@cs.tut.fi> wrote:
"Jukka K. Korpela" <jk******@cs.tut.fi> wrote in message
news:Xn*****************************@193.229.0.31. ..
"Atanas Boev" <su*************@cs.tut.fi> wrote:
> here is example in HTML:
> <img class="logo" src="logo.gif" />
> <h1 class="mname">Main Title</h1>
> <hr class="title" /> <h1 class="sname">Second Title</h1>
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


Invalid in which standart?


By HTML specifications ever since HTML 4.0, which made the alt
attribute mandatory.
I got the impression that having space-slash-close_tag is
not harming the standart in any way, maybe I'm wrong?
This is a long story, and really an HTML matter and not CSS, but
briefly, the extra slash is of no use unless you really write XHTML
in _exactly_ correct syntax, and even then, it's of little practical
impact at present.
omit the alt attributes?


you mean the image? hm... I found myself using alt="" alot.


But in this case, there was no alt attribute, which is a different
thing.
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.
Well, "Horizontal Divider" would surely be a clueless alt text. But the
university's name would not.

But if you are worried about such issues, you might consider putting
the identifying information _last_ in the HTML source and using CSS to
position it first in the visual appearance. After all, the identifying
information might be the only quick way to find the context of the
page, in situations where the user arrives at the page via a link from
another site or via Google.
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.


The positioning method would help here too. On the other hand, this
really depends on your <title> element too. If it contains full
contextual information, as it ideally should, it gives a good hint to
people who see the entry in Google results. If not - and sometimes you
just can't have enough info there - it might not be too bad if users
see, in Google results, the identifying information. They see the title
prominently, then information like university and lab name, which is
important enough in many cases to give an idea of the type of the page.

The alt text is also relevant on graphic browsers when image loading
has been turned off (e.g. for efficiency) or the browser has not (yet)
got the image. For such purposes, it is useful to consider styling the
img element too, though this won't help on IE for example (since IE
wants to present alt texts in its own fixed, tiny-size poor-quality
way). If you specify
<img class="logo" src="logo.gif" alt="University of Nowhere" />
and use, say,
img.logo { font-family: "Copperplate Gothic Bold";
color: black;
background: yellow; }
then browsers like Mozilla will apply the rule to the presentation of
the alt text when they do not show the image but present the textual
alternative.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Jul 20 '05 #17

P: n/a
Jukka K. Korpela wrote:
[...]

Similarly, in some notations in physics, italics indicates a symbol of
a quantity and bolding indicates a vector. I would not rely on CSS in
such matters.


You know, you're right but I've ever wondered why the U(nderline)
element is taken out of the Strict DTD while [b] and [i] are left. I
would say HTML is somehow "more text oriented" and such basic tags
like P, B, HR, etc. are required to express more rich meaning with
fewer generic elements. Either way, I think the P(aragraph) element
would be deprecated, also. :-)

--
Stanimir
Jul 20 '05 #18

P: n/a
On Tue, 30 Dec 2003, Jukka K. Korpela wrote:
Similarly, in some notations in physics, italics indicates a symbol of
a quantity


Puts me in mind of <var> markup, which is typically rendered as italic
or oblique.
Jul 20 '05 #19

P: n/a

"Neal" <ne**@spamrcn.com> wrote in message
news:3f**********************@news.rcn.com...

"Atanas Boev" <su*************@cs.tut.fi> wrote in message
news:bs**********@news.cc.tut.fi...
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..."

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.


Which is very clever as point of view!
Still, the logo in my case is just because the official document layout
guidelines. In other words, people are used to see it there. There are no
guidelines for the aural representation of official document. I can't even
imagine how a nicely formatted aural document should look (er, sound) like.
I can only judge by myself.

Having more general example like "(IBM LOGO) IBM Corporation". What is the
informaion purpose of the logo? It could imply that it is original product,
or make the user distinguish the brand at a first glance. Now, what are the
conterparts of "autenticity" and "first glance" for the visual impaired
user? I don't know. In the case of "Microsoft" when the logo and the text
are the same thing it is easy.

Since a page holding the logo of the university in my case doesn't have any
distingtive meaning that one that does not, I don see the same information
value in presenting only the University title, or both the logo and title.

Maybe the strict way is having the title in a div, text padded to right, and
the logo put as a no-repeat background to the left? Since even in text
browser, I don't see why we need to have logo as a placeholder, if it is
only a graphical representation of something.

If we had aural logo, like radios do, then I can put the "logo-sound" as a
"background" of the div. Can I do this actually? There is such thing as a
"background sound", does it exist in css?

suncho
Jul 20 '05 #20

P: n/a
On Wed, 31 Dec 2003, Atanas Boev wrote:
Having more general example like "(IBM LOGO) IBM Corporation". What is the
informaion purpose of the logo?


What conclusion did you reach when you researched the considerable
previous discussion of this topic before deciding to ask? I'd venture
to suggest it's unlikely that someone will develop a stunning new
insight, just because you decided to raise this frequently-discussed
topic again. On the other hand if _you_ have some genuinely new
insight, I'm sure the relevant group/s (hint: unlikely to be
stylesheets in the first instance) will be interested.

Jul 20 '05 #21

P: n/a
As an answer to the original question please try this:

HR{height:1px; border:none; border-top:1px solid #000000;}

It works well for me.
Jul 20 '05 #22

This discussion thread is closed

Replies have been disabled for this discussion.