SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Wizard Busch's Avatar
    Join Date
    Jan 2004
    Posts
    1,072
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I need a horizontal line

    What's the best way to produce a 1px high horizontal line via CSS? I have tried the obvious, making a <div> that is 1px high and Xpx wide and setting the background to the color i want but that doesnt work in all browsers. The only way i have figured out how to do it is by using a 1px x 1px image and making it stretch. Kind of a poor hack...

    Any ideas?

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    HTML Code:
    <hr />
    Or use border-bottom on a div or paragraph.

  3. #3
    SitePoint Wizard Busch's Avatar
    Join Date
    Jan 2004
    Posts
    1,072
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks! i'll check it out and see what happens.

  4. #4
    Beer Monster -Ox's Avatar
    Join Date
    Apr 2003
    Location
    sowth afreeka
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you might want to add a small style to it for example

    HTML Code:
          hr {
               margin: 0;
               height: 1px;
               color: #FF0000;
           }
    then

    HTML Code:
      <hr />
    My postings are a natural product.
    The slight variations in spelling and grammar enhance its
    individual character and beauty and in no way are to be
    considered flaws or defects - http://www.guinnesspig.net

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The hr is hard to style consistently between browsers so I prefer to use a div which works very well cross browser ie5 -6, ie5mac, mozilla, opera (if you do it right ).
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    .line{
     height:1px;
     overflow:hidden;
     background:red;
     width:50%;
    }
    </style>
    </head>
    <body>
    <div class="line"></div>
    </body>
    </html>
    Paul

  6. #6
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    The hr is hard to style consistently between browsers so I prefer to use a div which works very well cross browser ie5 -6, ie5mac, mozilla, opera (if you do it right ).
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    .line{
     height:1px;
     overflow:hidden;
     background:red;
     width:50%;
    }
    </style>
    </head>
    <body>
    <div class="line"></div>
    </body>
    </html>
    Paul
    Isn't that a bit of markup abuse? (not that an hr is much better, but still ).

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Isn't that a bit of markup abuse
    No its a lot of mark up abuse

    But it would take a lot of hacks to make the hr behave the same

    Paul
    Edit:


    doesn't div stand for division anyway?
    quote from w3c:
    These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.

  8. #8
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B
    No its a lot of mark up abuse

    But it would take a lot of hacks to make the hr behave the same
    Ah, the fun of web design

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by vinnie
    Ah, the fun of web design
    lol - makes me laugh anyway

  10. #10
    Beer Monster -Ox's Avatar
    Join Date
    Apr 2003
    Location
    sowth afreeka
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was wondering why we just can get the who wide world to come together and make 1 BROWSER *giggle*
    My postings are a natural product.
    The slight variations in spelling and grammar enhance its
    individual character and beauty and in no way are to be
    considered flaws or defects - http://www.guinnesspig.net

  11. #11
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by -Ox
    I was wondering why we just can get the who wide world to come together and make 1 BROWSER *giggle*
    Let's all go back to Mosaic and forget that HTML 4 and CSS ever happened

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I was wondering why we just can get the who wide world to come together and make 1 BROWSER
    Good idea - but it would put me and Vinnie out of work

  13. #13
    Also available in Large Si's Avatar
    Join Date
    Sep 2002
    Location
    Walsall, UK
    Posts
    1,911
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And this forum would become redundant!!
    Si
    Are you a Photoshop Jedi Master? Prove it!

    Is funky house your bag? You'll love this!

    Voice
    , eyes, ears, body and hands.


  14. #14
    Beer Monster -Ox's Avatar
    Join Date
    Apr 2003
    Location
    sowth afreeka
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    teeheehee I thought that might spark off some comments hehe, come one im Imagine how boring coding would be if we had one browser

    bbbbbbbbbbbbbbaaaaaaaaaaaaaaaa
    My postings are a natural product.
    The slight variations in spelling and grammar enhance its
    individual character and beauty and in no way are to be
    considered flaws or defects - http://www.guinnesspig.net

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ox
    Imagine how boring coding would be if we had one browser
    lol - Yes there is something satisfying about getting a page to display cross-browser


Bookmarks

Posting Permissions

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