SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    change <hr> style for moz?

    I have this css:

    Code:
    hr { color: #000000; width: 60%; height: 1px; }
    In IE, it gives me a left aligned horizontal black rule, 60% of the page in width 1px high (pretty much just a long thin black line). In Mozilla, it gives me a center aligned, 60% of the page in width normal looking horizontal rule.

    Can the <hr> tag be mucked with for Moz to do what I need it to do? I need it to look like a thin black line and left aligned. I have tried text-align: left;, encapsulating it in a <div align='left'></div>, but nothing left aligns it.

  2. #2
    Team SitePoint AlexW's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne
    Posts
    832
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    It may be possible but I've always found <hr> to work strangley with css. In the end I've personally preferred to go with a div to get a predictable result.

    Code:
    <style type="text/css">
    .line { 
    	width: 60%; 
    	background:#fff;
    	border-top:1px solid #000
    	}
    </style>
    </head>
    
    <body>
    
    <p>Aliquam a justo. Morbi ac quam vitae pede ultricies fringilla. 
    </p>
    <div class="line" />
    
    <p>Suspendisse potenti. Cras rutrum nonummy nibh. Quisque viverra nunc a augue.	
    </p>
    Alex Walker
    SitePoint Developer
    SitePoint - Learnable

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

    The hr is interpreted differently between moz and Ie but if you play around with these styles you should be able to produce consistent effects.
    Code:
    <style type="text/css">
    <!--
    hr.newrule1 {
     color: #FFFccc;/* IE uses background color*/
     background-color: #FFFCCC;/*moz uses background color*/
     text-align: left;/* IE uses this*/
     margin-left:0px;/*Moz uses this (and IE only seems to use margin when text-align left is set!)*/
     height: 10px;
     width: 30%;
     border: 1px solid #000;
    }
    hr.newrule2 {
     margin-left:0;
     text-align:left;
     border-top:1px solid #000; 
     height:0;
     width:40%;
    }
    -->
    </style>
    </head>
    <body>
    <hr class="newrule1" /> 
    <hr class="newrule2" />
    Hope that helps.

    Paul

  4. #4
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Yes, Opera, Mozilla and M$ have differences of opinion with the <hr /> element and styling which makes like more intersting.

  5. #5
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Paul. Your solution works great in IE and Moz. Thanx for the assistance!

  6. #6
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Safari (on Mac OSX) doesn't like any CSS on the <hr> tag. I have the above method on the hr's on my pages, It seams to work in every browser, but in Safari they are still regular 'shaded' rules.
    The problem with using a alternative class for the rule instead of <hr> tags is that non CSS browsers won't see the break at all.


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
  •