Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    May 2004
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Layout - Unexplained gap in IE/PC between horizontal DIVs

    I'm redesigning my website and I've got a pretty simple problem that I just can't seem to locate a solution for. I've made a layout enclosed in a 720px bow with rounded corners. For the head and the foot, I've made divs that are 720px x 10px that have a background image of the rounded corners. Here is the code for thos divs:

    Code:
    #main-cap-head, #main-cap-foot {
    	display: inline;
    	width: 720px;
    	height: 10px;
    	background-repeat: no-repeat;
    	margin: 0;
    	padding: 0;
    }
    
    #main-cap-head {
    	background-image: url(../img/main_cap_head.gif);
    }
    
    #main-cap-foot {
    	background-image: url(../img/main_cap_foot.gif);
    }
    then, under that, is a 'main-content' div, here's the code for that:

    Code:
    #main-content {
    	width: auto;
    	height: auto;
    	padding: 0px;
    	margin: 0;
    	background-color: #606060;
    }
    and here's the HTML markup:

    Code:
    <body>
    	<div id="container">
    		<div id="main-cap-head"></div>
    		<div id="main-content">
    			<div id="header">
    				<div id="head-img"><img src="_lib/img/main_head_name.gif" width="189" height="41" alt="Chris Forrette | Graphic Designer"></div>
    				<div id="navigation">
    					<ul>
    						<?=$navigation ?>
    					</ul>
    				</div>
    				<div class="clear"></div>
    			</div>
    			<div class="clear"></div>
    etc...

    Everything displays fine, except in IE on a PC, there is a gap between the 'main-cap-head' div and the 'main-content div'. I've tried searching around for solutions, switching between 'inline' and 'block' displays for each element including the img tag. Does anyone know how to fix this? I'm attaching an image of how it should look and the page is up on my server at:

    http://www.ascendvisual.com/_v3/main.php

    Thanks!
    Attached Thumbnails Attached Thumbnails CSS Layout - Unexplained gap in IE/PC between horizontal DIVs-av_screen.gif  

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    by default IE will make a div 17px high as a MINIMUM. The image your using is only 10px tall.

    try this:

    Code:
    #main-cap-head {
    	background-image: url(../img/main_cap_head.gif) bottom;
    }
    and see if that makes IE happy. If not make your image 17px tall. and make the div it's in 17px instead of 10px.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by harbingerOTV
    by default IE will make a div 17px high as a MINIMUM. The image your using is only 10px tall.

    and see if that makes IE happy. If not make your image 17px tall. and make the div it's in 17px instead of 10px.
    Only because its accounting for the font-size, change the font-size to 1px and set the line-height to 0px, you probably don't even need to change the font-size, its the line-height that will need to be changed though including the font-size doesn't hurt.

  • #4
    New Coder
    Join Date
    May 2004
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Changing the font-size and line-height attributes seemed to do the trick! Thank you so much!

  • #5
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Quote Originally Posted by _Aerospace_Eng_
    Only because its accounting for the font-size, change the font-size to 1px and set the line-height to 0px, you probably don't even need to change the font-size, its the line-height that will need to be changed though including the font-size doesn't hurt.
    good point _Aero_. I remeber reading a post by you on the same thing a while back. I guess I havenever had the need (or encountered the problem myself) to fix the line height & font size for IE before.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •