SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Problems with <hr> and using a <div> as a <hr>.

    Hello,

    I'm newer to CSS, I've used it for all sorts of things, but I am now commiting myself to making fully CSS designed pages. I've done pretty well so far, but I have one last hurdle to get over and it's driving me nuts.

    Specifically I want an <hr> between two <p>'s. It's simple, I want it 90% width, centered, and 1px in height. I have this code for it:

    Code:
    #preamble hr
    {
    	color: #7a7a7a;
    	background-color: #7a7a7a;
    	width: 90%;
    	border: none;
    	height: 1px;
    }
    This works just fine except for two problems.

    1. IE and Firefox don't agree on how hr's are seen when it concerns margins. IE seems to count the margin in, and FireFox seems to completely ignore it. In my particular case I have the <p> above and below the <hr> set with margin: 5 0 5 0; which should make them have 5 pixels away from the <hr>. In IE it's working, in FireFox it's not.

    2. My second problem is that FireFox for whatever reason keeps aligning the <hr>'s to the left. Even if I put in text-align: center; into the parent of what's holding the <hr> it will align it to the left.

    So because of the above two problems <hr>'s were not working for me. So I attempted to make a <div> into an <hr>, which just seems lame, because an <hr> should do exactly what I want it to.

    I'm using this code:

    Code:
    #div-hr
    {
    	width: 90%;
    	font-size: 0px;
    	border-top: 1px solid #7a7a7a;
    }
    This looks about right, and I get rid of my problem above with margins. However, again I have a problem. In FireFox it won't center! It keeps aligning to the left again.

    Am I going to be forced to use a 1px image? I was really hoping CSS could get me past using stuff like this. Am I doing something wrong elsewhere? All in all I'm getting really frustrated with such a simple thing, hehe.

    Any help would be greatly appreciated.

  2. #2
    Beer Monster -Ox's Avatar
    Join Date
    Apr 2003
    Location
    sowth afreeka
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can try this for your alignment problem of the hr

    <hr style="margin: 0 auto; width: 90%;" />

    Hope that helps,

    Ox
    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

  3. #3
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ClearSky
    I have the <p> above and below the <hr> set with margin: 5 0 5 0; which should make them have 5 pixels away from the <hr>.
    You have to specify what unit you are using for your margins:
    Code:
    margin: 5px 0;
    (NB: I've used the margin shorthand notation - the first number is for top/bottom, the second number is for left/right)

    2. My second problem is that FireFox for whatever reason keeps aligning the <hr>'s to the left. Even if I put in text-align: center; into the parent of what's holding the <hr> it will align it to the left.
    Text-align is not designed to be used for aligning elements, it's only supposed to work on text (IE, unsurprisingly, gets it wrong).

    If you are specifying a width for your <hr> you could center it using "margin: 0 auto;", I think that works.


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
  •