<HL> deprecated?

T

Toby A Inkster

Paul said:
Subject: <HL> deprecated?
Click to expand...

No, it's not been deprecated in any version of HTML yet. It looks like
it's still going to be there in XHTML 2 too.
 
P

Paul Furman

David said:
Paul Furman wrote:
probably another taboo html tag.


I think you mean <hr>, horizontal rule.
Click to expand...


Doh!
So the HTML spec says it's OK to use but to use CSS to set it's display
properties. I can't find where the css spec would explain that. Border
properties add a border around the

I want this (doesn't work):
<hr width=100% style="size: 1px; color: #339966;">
but this is the closest that works:
<hr width=100% size="1" style="color: #339966;">
but that doesn't give me a 1 pixel thickness in Mozilla, I get the 3D
effect.

border-*
Click to expand...


So maybe border-bottom applied to a div is a better way to do it? What I
really want is the line to follow <a> link properties for hover. But
since I can't do that, I'm making it the hover green color which looks
OK moused or not:
http://hills.ccsf.edu/~pfurma02
Maybe a border could be given <a> properties?
 
E

Els

Paul said:
I want this (doesn't work):
<hr width=100% style="size: 1px; color: #339966;">
but this is the closest that works:
<hr width=100% size="1" style="color: #339966;">
but that doesn't give me a 1 pixel thickness in Mozilla, I get the 3D
effect.
Click to expand...

Yes: you have to set the border to none, and the
background-color to the same color as the color.

Like this:
hr {
color: #339966;
background: #339966;
height:1px;
width: 100%;
border:none;
margin-top:0px;
margin-bottom:0px;
}
So maybe border-bottom applied to a div is a better way to do it?
Click to expand...

Some people say it is.
What I
really want is the line to follow <a> link properties for hover. But
since I can't do that, I'm making it the hover green color which looks
OK moused or not:
http://hills.ccsf.edu/~pfurma02
Maybe a border could be given <a> properties?
Click to expand...

No, but the div can be given <a> properties :)
Like this code here:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>hovering over div border</title>
<style>

* {border:0px;}
/* these link styles are necessary to make the link styles
apply to the div later on */
a:link {color: #339966;}
a:visited {color: #339966;}
a:hover {color: #123456;}

/* without height for the div, there's nothing to hover */
div {height:1px;}

a:link div {border-bottom: 10px solid #339966;}
a:visited div {border-bottom: 10px solid #339966;}
a:hover div {border-bottom: 10px solid #123456;}

</style>
</head>
<body>
<a href="#">
<div>
</div>
</a>
</body>
</html>
 
S

Spartanicus

Paul Furman said:
I want this (doesn't work):
<hr width=100% style="size: 1px; color: #339966;">
Click to expand...

div.hr{border-bottom:1px solid #339966}
div hr{display:none}

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

Usage of the <hr> is optional.
 
E

Els

Beauregard said:
Quoth the raven named Els:


Hmmm? I don't think so... <g>
Click to expand...

Yes, you can :-D
You're not allowed to :-(
Sorry, didn't check beforehand. But it works in Moz, NS,
Opera, IE, ...

Any other inline element with borders that might replace the
div?

How about this one then?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>hovering over 'hr'</title>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<style type="text/css">

* {border:0px;}

a:link {color: #339966;}
a:visited {color: #339966;}
a:hover {color: #123456;}

a:link hr {height:10px; color: #339966; background-color:
#339966;}
a:visited hr {height:10px; color: #339966; background-color:
#339966;}
a:hover hr {height:10px; color: #123456; background-color:
#123456;}

</style>
</head>
<body>
<p>
<a href="#">
<hr>
</a>
</p>
</body>
</html>

Uploaded again:
http://home.tiscali.nl/~elizabeth/Paul.html

It's still not valid, the validator now keeps complaining
that it needs a start-tag of one of these:"APPLET",
"OBJECT", "MAP", "IFRAME", "BUTTON".

Can anyone tell me why?
 
P

Paul Furman

"Error: element A not allowed here; possible cause is an inline element
containing a block-level element"
Click to expand...

So you can't nest a div in an a-href. Hmph.


I tried using (an inline) span instead of div but it wouldn't appear
without text and even then is only as wide as the text.


Supposed to look like this all in one link that hover-blinks in unison:


left text
------------------------------------
centered text



<a href="#">

<span class="left">
left text
</span>

<br>

<span class="line">
(actually no text, just looks like a line)
</span>

<br>

<span class="center">
centered text
</span>

</a>
 
P

Paul Furman

OK this works. I don't know if it validates.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>hovering over div border</title>
<style>

* {border:0px;}
/* these link styles are necessary to make the link styles apply to the
div later on */
a:link {color: #339966;}
a:visited {color: #339966;}
a:hover {color: #123456;}

a:link hr {height:1px; color: #339966; background-color: #339966;}
a:visited hr {height:1px; color: #339966; background-color: #339966;}
a:hover hr {height:1px; color: #123456; background-color: #123456;}


</style>
</head>
<body>
<a href="#">

<span class="left">
left text
</span>

<hr>

<span class="center">
centered text
</span>

</a>
</body>
</html>
 
K

kayodeok

So the HTML spec says it's OK to use but to use CSS to set it's
display properties. I can't find where the css spec would
explain that. Border properties add a border around the

I want this (doesn't work):
<hr width=100% style="size: 1px; color: #339966;">
but this is the closest that works:
<hr width=100% size="1" style="color: #339966;">
but that doesn't give me a 1 pixel thickness in Mozilla, I get
the 3D effect.
Click to expand...

This website has some observations on styling <hr> though I am not
sure if it's what you want:

Styling <hr>
http://www.sovavsiti.cz/css/hr.html
 
E

Els

Paul said:
OK this works. I don't know if it validates.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>hovering over div border</title>
<style>

* {border:0px;}
/* these link styles are necessary to make the link styles apply to the
div later on */
a:link {color: #339966;}
a:visited {color: #339966;}
a:hover {color: #123456;}

a:link hr {height:1px; color: #339966; background-color: #339966;}
a:visited hr {height:1px; color: #339966; background-color: #339966;}
a:hover hr {height:1px; color: #123456; background-color: #123456;}


</style>
</head>
<body>
<a href="#">

<span class="left">
left text
</span>

<hr>

<span class="center">
centered text
</span>

</a>
</body>
</html>
Click to expand...

It doesn't, because you still have the <hr> inside the <a>
element.
But I found a way:
Just pick any small gif for the image.
Uploaded again:

http://home.tiscali.nl/~elizabeth/Paul.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>hovering over 'hr'</title>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<style type="text/css">

* {border:0px;}

a:link {color: #339966; text-decoration:none;}
a:visited {color: #339966;text-decoration:none;}
a:hover {color: #123456;text-decoration:none;}

a:link img {border-bottom:5px solid #339966;}
a:visited img {border-bottom:5px solid #339966;}
a:hover img {border-bottom:5px solid #123456;}

div {text-align:center;}

..left {position:absolute; left:10px;}

img {height:0px;width:100%;}
</style>
</head>
<body>
<div>
<a href="#">
<span class="left">
Left aligned text</span>
<br>
<img src="hr.gif" alt="">
Centered text
</a>
</div>
</body>
</html>


:-D
 
B

Beauregard T. Shagnasty

Quoth the raven named Els:
Yes, you can :-D
You're not allowed to :-(
Sorry, didn't check beforehand. But it works in Moz, NS, Opera, IE, ...
Click to expand...

Try it with a strict doctype?
Any other inline element with borders that might replace the div?

How about this one then? ....

<p>
<a href="#">
<hr>
</a>
</p>
Click to expand...
It's still not valid, the validator now keeps complaining that it needs
a start-tag of one of these:"APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON".

Can anyone tell me why?
Click to expand...

Isn't an <hr> a block-level element as well? Block elements aren't
allowed inside anchors, or other inline elements.
 
P

Paul Furman

Thanks all!

This is what I'm using on the actual page and it works well:

a hr {height:1px; width: 100%; border: 0;}
a:link hr {color: #444444; background-color: #444444;}
a:visited hr {color: #444444; background-color: #444444;}
a:hover hr {color: #339966; background-color: #339966;}
a:active hr {color: #444444; background-color: #444444;}
 
E

Els

Paul said:
Thanks all!

This is what I'm using on the actual page and it works well:

a hr {height:1px; width: 100%; border: 0;}
a:link hr {color: #444444; background-color: #444444;}
a:visited hr {color: #444444; background-color: #444444;}
a:hover hr {color: #339966; background-color: #339966;}
a:active hr {color: #444444; background-color: #444444;}
Click to expand...

But it doesn't validate :)
 
P

Paul Furman

Els said:
But it doesn't validate :)
Click to expand...


Bah!

Why shouldn't I be able to wrap an a-href around a whole section of a
page if I want to? They are just being silly, there's no reason for it.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Loop through record in datareader in aspx for textbox other item 1
XHTML - how extend/create ELEMENT body in my DTD? 0
Delimiter for attributes in an element 6
CSS Newbie - CSS Works With Invalid DOCTYPE. Fails With Valid DOCTYPE. 19
Help with code 0
Can't make table the size of the screen 12
Need more info about problem resolving entity reference 1

Members online

Total: 45 (members: 3, guests: 42)
Robots: 336

Forum statistics

Threads
473,755
Messages
2,569,537
Members
45,022
Latest member
MaybelleMa

Latest Threads

Top