SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict sparkdigital's Avatar
    Join Date
    Feb 2005
    Location
    Kendal, Cumbria - The Lake District, UK
    Posts
    249
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy 11px margin / padding difference in FF and IE - what am I doing wrong?

    Hi guys, I have a small problem with the layout of my new website http://www.sparkdigital.co.uk.

    The main content column in the three column layout doesn't want to align vertically with the other two columns - when right in IE it's displayed 11 pixels lower in FF...

    Any ideas what I might be doing wrong?

    Thanks v much,

    Konrad

  2. #2
    SitePoint Zealot
    Join Date
    Feb 2006
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd suggest changing the structure of your HTML. Put #box3 after #box2, and float #box2 to the left. Remove the margins from #box2 (obviously).

    Code:
    #box2 {
      background-color:#A0B1B3;
      background-image:url(img/bg2.jpg);
      height:560px;
      width:280px;
      float: left;
    }
    Note: It's bad practice to constrain the height of your design.

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

    The 11px difference is the top margin on the h1 that collapses onto the parent container and pulls it downwards. You nust control all the margins and apdding on all the elements you use as this caries between browers.

    Code:
    h1 { 
        font-size: medium;
        padding: 30px 20px 0px 20px;
    margin:0
    }
    Also what wyrd33 said above makes sense as it is better to float all columns in a fixed width layout and avoid the 3px jog which is making your columns drop right down in ie6 (see faq on floats for more info).

  4. #4
    SitePoint Addict sparkdigital's Avatar
    Join Date
    Feb 2005
    Location
    Kendal, Cumbria - The Lake District, UK
    Posts
    249
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great, thanks for your help - I made your suggested changes and it works great.

    Just one more thing - my print.css works in ff bot not in ie. Is this normal?

    Thanks again,

    Konrad

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    my print.css works in ff bot not in ie. Is this normal?
    It depends on what you mean by not working.

    IE will read the print stylesheet ok and your page seems to be previewing ok in ie7.

    Print stylesheets are a bit hit and miss so keep things simple (e.g. no floats or absolute positioning etc.).

  6. #6
    SitePoint Addict sparkdigital's Avatar
    Join Date
    Feb 2005
    Location
    Kendal, Cumbria - The Lake District, UK
    Posts
    249
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul,

    It still seems to print the normal layout including images - or could this be due to caching?

    Thanks,

    Konrad

  7. #7
    SitePoint Addict sparkdigital's Avatar
    Join Date
    Feb 2005
    Location
    Kendal, Cumbria - The Lake District, UK
    Posts
    249
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry folks, it was simply the caching of the old css file that caused the problem.

    Thanks for all your help though,

    Konrad


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
  •