SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Oct 2005
    Location
    Home
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    More IE Problems

    This is the most stubborn browser I have ever had to work with. The only reason I am coding around it is because 40% of my website traffic is from IE users

    Here is an image of my issue:
    ImageShack® - Online Photo and Video Hosting

    The light blue bar on the bottom just above the navigation bar only appears in IE.

    In my header, I have an image for the logo, and another image sretched across the background on the x-axis.

    Here is the code on how I achieved this:
    HTML Code:
    <div id="header">
    	<div id="wrapper">
    		<img src="images/logo.jpg" border="0" />
    	</div>
    </div>
    Let me explain that fast, on why the wrapper is inside the header tag. I wanted to have the logo stretch the WHOLE page, but all content to be displayed in a 900px wide wrapper, in the center.

    Here is the CSS for my header and wrapper:
    Code CSS:
    #header {
    	background-image: url('../images/logo_bg.jpg');
    	width: auto;
    	margin: auto;
    }
     
    #navigation {
    	background-image: url('../images/nav_bg.jpg');
    	margin: auto;
    	line-height: 43px;
    	font-size: 14px;
    	overflow: hidden;
    }
     
    #wrapper {
    	width: 900px;
    	margin: auto;
    }

    Is there anything that is missing that would cause the header to add a few pixels?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    At a guess the gap is probably the fact that images are placed on the baseline by default and not the bottom. This is to accommodate descenders in text.

    The usual solution is to set the image to display:block to kill the gap.

    Code:
    #wrapper img{display:block}
    You can also set the vertical alignment to bottom (#wrapper img {vertical-align:bottom}) if you don't want the image displaying as a block.

  3. #3
    SitePoint Addict
    Join Date
    Oct 2005
    Location
    Home
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That did it, alright!

    My next question is, how to I center all my content in IE? In Firefox it works when I use:
    HTML Code:
    margin: auto;
    However, this does not seem to work in IE.

    --

    Problem solved. I used a DocType method that I found while searching through other ones. There are so many methods that do not work that I found on Google. Could this be because of old IE versions?
    Last edited by Sam Rusch; May 4, 2011 at 05:11. Reason: Problem solved.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    IE will center exactly the same as other browsers assuming you have a full valid doctype (with uri). Otherwise it will default to quirks mode and will not center in the standard way although there is another method but only needed when IE is in quirks mode (no doctype etc).

    For a block element with a width defined just use margin:auto.

    If that doesn't work then we'd need to see more code


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
  •