Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    Saz
    Saz is offline
    Regular Coder
    Join Date
    Jun 2005
    Posts
    277
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Any way to validate horizontal line ?

    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.

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    HTML has no self closing tags (i.e., the slash inside the bracket), so you would use

    HTML — <hr>
    XHTML — <hr />

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Have a look at what the W3school has to say about <hr/>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Saz
    Saz is offline
    Regular Coder
    Join Date
    Jun 2005
    Posts
    277
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Thumbs up

    Many thanks Richard - that was very much appreciated.

    If only everything could be that simple eh !

    Saz.

  • #5
    Saz
    Saz is offline
    Regular Coder
    Join Date
    Jun 2005
    Posts
    277
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Have a look at what the W3school has to say about <hr/>
    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.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    check this one out:
    Code:
    hr {
    	height: 12px;
        border-top: solid 6px #ccc;
        border-bottom: solid 6px #888;
        border-left: solid 5px #888;
        border-right: solid 5px #333;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by Saz View Post
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,636
    Thanks
    6
    Thanked 1,003 Times in 976 Posts
    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 how to style hrs with CSS.

  • #10
    Saz
    Saz is offline
    Regular Coder
    Join Date
    Jun 2005
    Posts
    277
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    check this one out:
    Code:
    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.

  • #11
    Saz
    Saz is offline
    Regular Coder
    Join Date
    Jun 2005
    Posts
    277
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Arbitrator View Post
    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.

  • #12
    Regular Coder Karen S. Garvin's Avatar
    Join Date
    Nov 2006
    Location
    Maryland
    Posts
    227
    Thanks
    5
    Thanked 2 Times in 2 Posts

    So Blue

    How do you like this blue?

    Code:
    <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>
    ----------------------------------------------
    Karen S. Garvin
    http://ksgarvin.wordpress.com

  • #13
    Saz
    Saz is offline
    Regular Coder
    Join Date
    Jun 2005
    Posts
    277
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I like that Karen, I like it a lot.

    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.

  • #14
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by Saz View Post
    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:

    Code:
    border-width: 6px 5px;
    border-style: solid;
    border-color: #ccc #333 #888 #888;
    Quote Originally Posted by Saz View Post
    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.

    Quote Originally Posted by Karen S. Garvin View Post
    Code:
    <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.
    Last edited by Arbitrator; 01-31-2007 at 10:00 PM. Reason: I added a clarification about the groove border style.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #15
    Saz
    Saz is offline
    Regular Coder
    Join Date
    Jun 2005
    Posts
    277
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Many thanks for the detailed reply Arbitrator - it's appreciated.

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

    Saz.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •