Trying to get styles that work in browser IE don't work in FireFox?

Discussion in 'CSS' started by chriswick, Oct 10, 2007.

0
  1. #1
    Hi Guys,

    I'm designing a website for myself and have a problem with my CCS in browsers FF and IE.

    Here is the style from my CSS.

    .spacerbg {
    clear: both;
    height: 2px;
    overflow: hidden;
    }

    Here is my tag. <div class="spacerbg"></div>

    It works in IE but will not work in FireFox, is there anything I can do to make it work in both browsers?

    Thanks.
     
    chriswick, Oct 10, 2007 IP
  2. webdesigner

    webdesigner Well-Known Member

    Messages:
    489
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    110
    #2
    Just tested in Firefox and it works fine... What page is it happening on? There may be other styles affecting that div so would need to see full code/page to help.
     
    webdesigner, Oct 10, 2007 IP
  3. chriswick

    chriswick Peon

    Messages:
    907
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #3
    It's part of the this style.

    .spacer {
    clear: both;
    padding: 10px 0 10px 0;
    }

    .spacerbg {
    clear: both;
    height: 2px;
    overflow: hidden;
    }

    and the tag is: <div class="spacer"><div class="spacerbg"></div></div>

    The website isn't live yet.

    Should the tag be like this <div class="spacer"></div><div class="spacerbg"></div> or was I right the first time?
     
    chriswick, Oct 10, 2007 IP
  4. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Are these supposed to just be clearing floats as well as adding empty space on the page?

    I wouldn't nest the divs then, but then again, if I were to use a "space" div in the first place, I would just use one and give it a height large enough to take up the space.

    A better idea (depending on what you're doing) is to use whatever div is already under the floats to have the clear:both and add some top margin to make the empty space on the page.
     
    Stomme poes, Oct 10, 2007 IP
  5. cristalron

    cristalron Peon

    Messages:
    19
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Iv made a lot of websites and know the problem.... frustrating isn't it :p

    When setting a style to text never use padding... use margin instead...
    if you want padding to work... set the style to a cell or table....

    Note: i advice you not to use padding at all... a lot of times when using more paddings on your page IE deforms it....
     
    cristalron, Oct 10, 2007 IP