...

View Full Version : Any way to validate horizontal line ?



Saz
01-29-2007, 03:43 PM
I had <hr/> for a horizontal line, but it wouldn't validate under 4.1 transitional, so changed it to <hr /> and it still wouldn't ?

The validating error is below :

<hr />
^

Warning: net-enabling start-tag; possibly missing required quotes around an attribute value

Any help much appreciated.

Saz.

rmedek
01-29-2007, 03:50 PM
HTML has no self closing tags (i.e., the slash inside the bracket), so you would use

HTML — <hr>
XHTML — <hr />

Excavator
01-29-2007, 04:11 PM
Have a look at what the W3school has to say about <hr/> (http://www.w3schools.com/tags/tag_hr.asp)

Saz
01-29-2007, 05:13 PM
Many thanks Richard - that was very much appreciated. :thumbsup:

If only everything could be that simple eh ! :)

Saz.

Saz
01-29-2007, 06:46 PM
Have a look at what the W3school has to say about <hr/> (http://www.w3schools.com/tags/tag_hr.asp)

Many thanks to you as well Excavator - the link was appreciated.

That noshade looked good - just wondering how you would create that groove effect in a style ?

Saz.

Excavator
01-29-2007, 09:28 PM
check this one out:


hr {
height: 12px;
border-top: solid 6px #ccc;
border-bottom: solid 6px #888;
border-left: solid 5px #888;
border-right: solid 5px #333;
}

Arbitrator
01-29-2007, 09:54 PM
That noshade looked good - just wondering how you would create that groove effect in a style ?The CSS would probably be border-style: groove. I just used the noshade attribute for the first time though and I don’t see much of a groove effect in Firefox, Internet Explorer, or Opera.

Excavator
01-29-2007, 11:03 PM
Kind of fun. (http://www.nopeople.com/CSS/hr/)

VIPStephan
01-29-2007, 11:18 PM
Be aware that the noshade attribute is not valid in strict (X)HTML. However, it's kinda hard to style a horizontal rule so it would look similar in any browser. Here's a good solution (http://www.sovavsiti.cz/css/hr.html) how to style hrs with CSS.

Saz
01-31-2007, 02:56 PM
check this one out:


hr {
height: 12px;
border-top: solid 6px #ccc;
border-bottom: solid 6px #888;
border-left: solid 5px #888;
border-right: solid 5px #333;
}

Many thanks for the help on this from everyone - much appreciated.

2 Things, if you wanted to put those border attributes into one, would it be totally compat to do this below:

border: solid 6px #ccc solid 5px #333 solid 6px #888 solid 5px #888;

Also, any ideas on good blue colors for the hr's on here :
http://www.010805.com/hr

All the best.

Saz.

Saz
01-31-2007, 04:06 PM
The CSS would probably be border-style: groove. I just used the noshade attribute for the first time though and I don’t see much of a groove effect in Firefox, Internet Explorer, or Opera.

Getting a little stuck on this, just tried border-style: groove, but just got a box and no color, how would you apply some color to that please ?

The helps appreciated.

Saz.

Karen S. Garvin
01-31-2007, 05:05 PM
How do you like this blue?


<style type="text/css">
<!--
hr {
text-align: center;
width: 80%;
height: 12px;
border-top: solid 6px #99d2ef;
border-bottom: solid 6px #0e6d9e;
border-left: solid 5px #1885be;
border-right: solid 5px #1885be;
}
-->
</style>

Saz
01-31-2007, 05:16 PM
I like that Karen, I like it a lot. :thumbsup:

I'm gonna try a few more blue colors as well, but probably wouldn't be able to better that :) If you, or anyone else can think of any other good blue combinations for it, please let me know, especially if it enhances the 3d bevelled effect.

So far :

http://www.010805.com/hr

Saz.

Arbitrator
01-31-2007, 10:54 PM
2 Things, if you wanted to put those border attributes into one, would it be totally compat to do this below:

border: solid 6px #ccc solid 5px #333 solid 6px #888 solid 5px #888;No, that would be invalid. You could do it this way, however:


border-width: 6px 5px;
border-style: solid;
border-color: #ccc #333 #888 #888;


Getting a little stuck on this, just tried border-style: groove, but just got a box and no color, how would you apply some color to that please ?You’d use the border-color property. The color need not be specified, however, since if it is not, it inherits the color of the text. Thus, if you have a box that you want to apply a border to and don’t specify the color, and the text color for that box is currently black, the border will end up being black.

Note that you may not get the stated result in Internet Explorer. I’m aware that that browser breaks that rule with tables, at least, and renders a default silver border instead of one that matches the text color.

Also, note that the groove style is meant to be used when a single color is specified. For example: border: 1px groove blue. It automatically generates a set of colors derived from the specified color to create the groove effect. If you want to specify each color exactly, then the solid style works better. Aside from this color deriving, I believe that groove is the same as solid.



<style type="text/css">
<!--

-->
</style>The code in red is not necessary. I would remove it unless you need to support browsers that don’t know what a <style> tag is.

Saz
02-06-2007, 05:22 PM
Many thanks for the detailed reply Arbitrator - it's appreciated.

Are there any browsers that don't know what a style tag is ?

Saz.

Saz
02-06-2007, 05:34 PM
Thanks also for the help on getting compat css code. Following on from this, would both blocks of code below be totally compat please ? Also which of the 2 blocks of code would be better please ? I know the 2nd block saves one line of code, but any other reasons at all ?

border-top: solid 5px #deeeff;
border-right: solid 4px #1885be;
border-bottom: solid 5px #0e6d9e;
border-left: solid 4px #1885be;


border-width: 5px 4px;
border-style: solid;
border-color: #deeeff #1885be #0e6d9e #1885be;

Saz.

Arbitrator
02-06-2007, 07:06 PM
Are there any browsers that don't know what a style tag is ?Modern browsers? No.


Thanks also for the help on getting compat css code. Following on from this, would both blocks of code below be totally compat please ? Also which of the 2 blocks of code would be better please ? I know the 2nd block saves one line of code, but any other reasons at all ?What is “compat”? Compatibility with various browsers?

Both sets of declarations are functionally identical. The second is shorter; otherwise, there’s no advantage to either set.

Saz
02-06-2007, 07:30 PM
Many thanks Arbitrator - this thread can be put to bed now - all questions answered.

The helps been appreciated. :thumbsup:

Saz.

Yep, compat = compatibility, just a shorter way of saying something - similar to hr = horizontal ;-)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum