SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    Oct 2002
    Posts
    311
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Annoying IE creating a space that it should not??

    Hey,

    Ok trying to get something working for a client, at the moment I've had to revert back to the problem, so it's a very simple page at the moment.

    This is the code for the div:

    Code:
     div#header 
     	{
     	width:780px;
     	height:96px;
     	background: url(../beta/images/ho_bg.gif) repeat;
     	margin:0px 0px 0px 0px;
     	padding:0px 0px 0px 0px;
     	position: absolute;
     	top:0;
     	left:0;
     	}
    And this is the code I am using on the page:

    Code:
     <div id="header">
     <a href="../index.htm"><img src="../beta/images/logo.gif" alt="SkIN. Skills Intelligence Network" width="242" height="96" border="0"></a>
     </div>
    Now it works fine in Firefox, there is no gap underneath the logo. But in IE 6, there is a gap. I have no idea why, I have specified the height EXACTLY, why does it then create a gap when I tell the div that it's 96px high and the image is also 96px high?

    Going mad here...

    Anyone know what's going on?

    Cheers,
    Chris

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

    Images are treated as text and positioned on the baseline the same as text. This is to leave room for the descenders in the text to poke below but not out of the container.

    There are a couple of ways to avoid it:

    Set the image to display:block.
    Code:
    #header img {display:block}
    Or if you want to keep the image inline use:
    Code:
    #header img {vertical-align:bottom}
    Either should work

    Paul

  3. #3
    SitePoint Addict
    Join Date
    Oct 2002
    Posts
    311
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the quick reply paul, excellent

    When would I want to use the first option, I am currently using the second option you provided.

    Also, would the following apply that rule to all images?

    Code:
     img {vertical-align:bottom}
    ?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    Also, would the following apply that rule to all images?
    Yes that would apply it to all images.

    When would I want to use the first option, I am currently using the second option you provided.
    Well they are pretty interchangeable but I usually use img {display:block}. The only time I wouldn't use it is when you have a series of images that you want to stay inline (on the same line).

    Images are inline content by default so setting display block will force the next image (or content) to a new line.

    Otherwise just check when you use either one that you get the desired result. In most cases both will work.

    Paul

  5. #5
    SitePoint Addict
    Join Date
    Oct 2002
    Posts
    311
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahh right, thanks for the explanation.

    One more thing, I'm trying to apply a style to a list that is within a div I have positioned absolutely. The problem is IE and Mozilla give different vertical positions. I'm using the following for the list styling:

    Code:
     li.inline
     	{
     	display: inline;
     	margin:0px 0px 0px 0px;
     	padding:0px 0px 0px 0px;
     	border-left: 1px solid #FFF;
     	}
     
     li.first
     	{
     	display: inline;
     	margin:0px 0px 0px 0px;
     	padding:0px 0px 0px 0px;
     	}
    And then this for the list:

    Code:
     <ul>
     
     	<li class="first"><a href="index.php?section=involved">Get involved</a></li>
     	
     	<li class="inline"><a href="index.php?section=mailing">Join the mailing list</a></li>
     
     </ul>
    Any ideas?

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

    I'm not sure what you mean by different vertical positions.

    If you mean that the line-heights are different then you could try setting them explicitly.

    If you mean the list starts further down the page in one browser than the other then its probably the default margins in the ul which are different between browsers.
    Code:
    ul {margin:0;padding:0;line-height:25px;height:25px;}
    Of course it may be the element above the ul that has a default margin/padding that needs to be taken care of as well.

    All elements have defaults margin/padding and they vary between browsers. You just need to explicitly set them to control everything.

    Hope that helps.

    Paul

  7. #7
    SitePoint Addict
    Join Date
    Oct 2002
    Posts
    311
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right, forgot to do the margin/padding on the ul tag, looks ok now.

    One last thing Paul, any idea on how to center a div vertically? I know how do it horizontally by using the

    Code:
     margin-right:auto;
     margin-left:auto;
    But can't seem to get it to do the same vertically? Any idea?

    Once again, thanks for your help! Much appreciated.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Vertical centering of divs is only possible if you know the height of the div (ie you have given it a height).

    Otherwise you will just need to use padding/margins to place it approximately where you want.

    Heres an answer I posted to similar question about centring an image on the page (also applies to elements with set width and height).

    If you want to centre an image vertically and horizontally in the page then one way to accomplish this without tables is to use the following CSS.
    Code:
    <style type="text/css" media="screen">
     
    /* commented backslash hack iemac \*/ 
    html, body{height:100%;} 
    /* end hack */ 
     
    img {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -30px; /* make this half your image height */
    margin-left: -30px; /* make this half your image width */
    }
    </style>
    In the body of your document add the following code :
    Code:
    <div ><img src="img.gif" width="60" height="60" /></div>
    (Find yourself a suitable image and replace its name in the code above).

    The first thing we do is declare the body at 100% so that we have something to work on and allow us to find the centre of.

    We then absolutely position the image at 50% from the left and 50% from the top. This will place the top left hand corner of the image in the centre of the page.

    Now to get the image completely central we apply a negative margin to the left and right, which will be half the width and half the height of the image respectively.

    This has the effect of dragging the image back into the centre. If our image is 60px square we drag it left by -30px and up by -30px.

    Now our image is centred and will stay central when the window is resized. (This will only work when you know in advance what size your image is and obviously will not remain central if you scroll the window.)
    Paul

  9. #9
    SitePoint Addict
    Join Date
    Oct 2002
    Posts
    311
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Brilliant. Thanks for all your help Paul, everything is working perfectly now


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
  •