Weird CSS behavior

Discussion in 'Web Design and Development' started by MindBrain, Jun 17, 2008.

  1. MindBrain macrumors regular

    Joined:
    Jun 8, 2007
    #1
    Hello, working on a design for CSS Zen Garden. Trying to get the hang of positioning DIVs and such. I've noticed that DIVs will shift when given a border. Trying to get these DIVs that have 2 background images to line up. Here's a picture of whats happening:

    Any insight or advice as to whats happening here please? Thanks!
     

    Attached Files:

  2. MindBrain thread starter macrumors regular

    Joined:
    Jun 8, 2007
    #2
    This is in FireFox 2.0
    I looked at it in IE 6.0 without the border and it lines up fine. Although appears different from FF 2.0 when the border is used.
     
  3. reclusivemonkey macrumors 6502

    reclusivemonkey

    Joined:
    Jun 2, 2008
    Location:
    Sowerby Bridge, West Yorkshire, UK
  4. ChicoWeb macrumors 65816

    ChicoWeb

    Joined:
    Aug 16, 2004
    Location:
    California
    #4
    That looks like the classic div height issue, but that only happens in IE6. You just use font-size: 0, line-height: 0; but since you said FF, and didn't post any code, that's my best guess at this time.
     
  5. MindBrain thread starter macrumors regular

    Joined:
    Jun 8, 2007
    #5
    Ah I found out what it was. I was the <p> element there that had the default padding and margin. So I had to set #quicksummary p {padding:0 margin:0}
     
  6. reclusivemonkey macrumors 6502

    reclusivemonkey

    Joined:
    Jun 2, 2008
    Location:
    Sowerby Bridge, West Yorkshire, UK
    #6
    Do you have

    Code:
    * {padding: 0px; margin: 0px; border: 0px;}
    at the beginning of your CSS? Handy to have as a default.
     
  7. MindBrain thread starter macrumors regular

    Joined:
    Jun 8, 2007
    #7
    I have it for "body html" . but since i have a background color specified in the "body html" then it makes other elements take the bg color. So I guess I can just separate the two. And when I have padding and margin set to 0 for the universal selector, when I set a the padding or margin for a div or element it replaces the universal selector right? Thanks
     

Share This Page