Cross Browser CSS problems

Discussion in 'Web Design' started by mjrzasa, Jan 21, 2012.

to remove all ads.
  1. mjrzasa

    mjrzasa New Member

    Messages:
    67
    Sorry, I have no idea what that means. Also, please check my page in IE, because it's really messed up with my "bar" images in the header..

    Maybe you meant create a 1x1 0% opac square to act as if something is there, that's what I did :p

    Now I just have to figure out the IE part of it..
     
    Last edited: Jan 25, 2012
  2. mjrzasa

    mjrzasa New Member

    Messages:
    67
    WELL, for anyone's future reference, I fixed the problems in IE with <img>, <hr>, and <div> tags creating space underneath themselves (if i have set the height under about 6 px) all you need to do is add the CSS styles of " style="line-height:1px;font-size:1px;" "
    and also make the width:100%.
    You can create a <hr> by making an empty div with bg color and 1px/2px/ whatever height.
     
  3. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Hmm, negative values have their place, in margin for instance, but I agree in many cases people do not use them correctly.
     
  4. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    I hate seeing this...why create an empty div tag to make a horizontal rule?? That is what an HR (horizontal rule) tag is for! Use the tags as they are intended.

    If you are having issues with the hr creating space below the tag, that is because, by default, the <hr> tag is a block level element. Meaning it creates a line break after the element. If you want to change this, adjust the display property.

    For example:
    Code:
    hr {
    display:inline-block;
    border:none;
    background-color:#ddd;
    height:1px;
    margin:0;
    }
    
    If all you want is a border in the heading tag, why not ditch the <hr> entirely and add the border-bottom css property to the heading tag rule?
     
  5. mjrzasa

    mjrzasa New Member

    Messages:
    67
    I'm not adding a border, and I tried the display:inline and it didn't work out for me. I don't see any problem using a div for it, and <hr> performs differently on browsers.
     
  6. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    Hmmm, extraneous divs are not very semantic. Like john said, use a hr for a hr.
    With a proper reset, and the correct css, you can get it to display correctly across all browsers.
     

Share This Page