SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    div moving when I add a border

    Hello

    I have seen this bug before, but can't find any info about it or how to solve it on the net.

    Basically, I have a div that is in the wrong position in firefox, opera, netscape, but in the correct position in IE. I can't work out why it is wrong, so I add a border. Suddenly, with the border, it jumps to the right place.

    Here is my HTML:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
     <head>
      <title>Bakkavor</title>
    
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
      <meta name="title" content="" />
      <meta name="description" content="" />
      <meta name="keywords" content="" />
    
      <link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
     </head>
    
     <body>
      <div id="container">
       <div id="header">
        <h1>Bakkavor Overseas Limited</h1>
       </div>
    
       <div id="menu">
        <ul>
         <li><a href="">Homepage</a></li>
         <li><a href="">About Us</a></li>
         <li><a href="">Product Portfolio</a></li>
         <li><a href="">Projects</a></li>
         <li><a href="">Financials</a></li>
         <li><a href="">Contact Us</a></li>
        </ul>
       </div>
    
       <div id="content">
    
       </div>
    
       <div id="footer">
    
       </div>
      </div>
     </body>
    </html>
    and css:

    Code:
    body {
     text-align: center;
    }
    
    div#container {
     width: 780px;
     border: 1px solid #d5d3d4;
     margin: 1em auto;
     text-align: left;
    }
    
    div#header {
     background-image: url('images/header.gif');
     background-position: top left;
     background-repeat: no-repeat;
     height: 118px;
     margin: 0;
    }
    
    div#header h1 {
     text-indent: -9999px;
     background-image: url('images/mainlogo.gif');
     background-position: top left;
     background-repeat: no-repeat;
     margin-top: 58px;
    }
    It is the div#header that is causing the trouble. The H1 will sit over the background image (its as though the margin-top i apply on the h1 is applying to the div instead), unless you add a border to the div#header. Only, I don't want a border there for the final thing.

    It is still very much a work in progress, so there is not a lot there at the moment, but does anyone have any clue what this is called, or how to solve it?

    Cheers,

    Chris

  2. #2
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Cheers, I've added 1px of padding to the div to make it work.

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're also using too much markup. Unless you're setting the H1 to a specific width and floating it to the right, or if you have other content that's a sibling of the H1, there is no reason to have the DIV with the ID of header on there. You can safely get rid of that. Just make sure your stylesheet is adjusted to reference the H1. (I'd also use a better image replacement technique on the H1, since what you're using isn't accessible to people who have images disabled while still getting the page rendered with the stylesheet. Try using this method instead.)

    Same goes for the menu. Unless you have other content in the DIV holding the menu, get rid of the DIV and put the ID on the unordered list, then adjust the stylesheet to reference the list. (By the way, I'd leave the DIV for the footer alone - while it's "extra" markup, I find it to be VERY useful as a CSS hook.)

    You're also mixing your unit types as well. Unless you're supporting FireFox 1.0.x (or other older versions of Gecko), there's no reason to be using pixels for your borders when you're using EM for everything else.

    Another thing I'd do is intentionally collapse all the margins and padding on everything in the page using the universal selector:
    Code:
    * {
        margin: 0;
        padding: 0;
    }
    Then, when I've done that, I'd set the margins and padding on only those elements that need it.

  4. #4
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi Dan, thanks for the reply. Just want to clarify some things about it all..

    The markup is incomplete at the moment, and so I've just put in the divs to hold future content as well as what I've got at the moment. I removed some content like the company's contact address etc to post on here anyway, the footer does have content in it on my copy.

    I'm not sure I like the idea of getting rid of the header div - it currently has a background image on it (I could set this on the container instead I guess, but still). I think too much fuss is made over trying to get the markup down to as small as possbile, but I like to divide the page up with divs into header / content / footer etc.

    The menu div has some extra styles in it to create the white line under the menu which couldnt be done with the ul alone. I could use a background image (I have done on the footer), but didn't really see the need when all it needs is a white line, so I used a border.

    The page layout & decorative bits are done with pixels so I can place them precisely. Text will be in ems of course - why is mixing units a problem? All the text will be em, just layout & positioning in pixels. It is a fixed width layout after all.

    Is there any particular reason you'd reset the margin & padding on everything? Seems like a lot of work to get all the stuff you want back to how it was, when I could just be tweaking it here and there where I need to, like at the moment. It would result in more css, maybe better browser compatibility, but I will be checking it and adjusting for most of the major browsers for Win and Mac anyway.

    As for the image replacement - cheers for the link, I'll have a read, but it does use an extra span in there using that method. I don't think any image replacement method is 'perfect'.

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stormrider View Post
    The page layout & decorative bits are done with pixels so I can place them precisely. Text will be in ems of course - why is mixing units a problem? All the text will be em, just layout & positioning in pixels. It is a fixed width layout after all.
    Most people have problems with mixing units. If you're going to clearly separate them (as you said you plan on doing), and you know what you're doing, then you should be fine. Just bear in mind that people have different settings on their computers (font metrics) and like to have their dpi settings configured to suit their needs. So what works on one computer (even if it's otherwise identical to yours) may not work on another.

    Quote Originally Posted by Stormrider View Post
    Is there any particular reason you'd reset the margin & padding on everything? Seems like a lot of work to get all the stuff you want back to how it was, when I could just be tweaking it here and there where I need to, like at the moment. It would result in more css, maybe better browser compatibility, but I will be checking it and adjusting for most of the major browsers for Win and Mac anyway.
    This gives me total control over the layout. Some elements have margins applied by default in one browser, and padding in another. Setting them to zerio gives me total control (as I said before), and allows me to explicitly set them as required.

    Quote Originally Posted by Stormrider View Post
    As for the image replacement - cheers for the link, I'll have a read, but it does use an extra span in there using that method. I don't think any image replacement method is 'perfect'.
    Sometimes extra markup is necessary (like with the clearer div in Paul O'B's 100% height model where the footer sticks to the bottom of the page if there isn't enough content to push it over) and can't be avoided. This is one of those rare times.

  6. #6
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I've just tried the other image replacement technique, and it doesn't work. With images disabled, the span is still on top and seems to be coloured white, so you can't see the header underneath it anyway. What am I likely to be doing wrong?

    HTML Code:
       <div id="header">
        <h1><span></span>Bakkavor Overseas Limited</h1>
       </div>
    Code:
    div#header h1, div#header h1 span {
     height: 22px;
     width: 378px;
     background-image: url('images/mainlogo.gif');
     background-repeat: no-repeat;
     overflow: hidden;
     margin: 57px 0 0 16px;
    }
    
    div#header h1 span {
     margin-bottom: -22px;
     display: block;
     position: relative;
     z-index: 1;
    }

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This appears to be the culprit:
    margin: 57px 0 0 16px;

  8. #8
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    If you are interested, the final design is here

    http://extranet.iceberginternet.co.uk/bakkavor/httpdocs


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
  •