SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    PGH
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help -- IE Creates Gaps Between Div Layers

    I'm trying to avoid using tables as much as possible (and its getting really annoying). Anyways, the design is basically a giant square and so I've tried to break down each row of the square onto its own DIV. The problem here is that the site displays perfectly in Mozilla and Opera but in IE there is an additional gap of about 3px between each div layer. I've tried everything I can think of to remove it and none of it has worked. Does anyone know how to remove this gap?

    Also, can anyone tell me why the layout centers in IE only and not in Mozilla or Opera?

    CSS
    #container {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    text-align: center;
    }

    body {
    margin-top: 0px;
    margin-left: 0px;
    padding: 0px;
    bgcolor: white;
    text-align:center;
    }

    #firstRow {
    position: relative;
    margin-top: 0px;
    padding: 0px;
    width: 584px;
    background-color: white;
    }

    #secondRow {
    position: relative;
    margin-top: 0px;
    padding: 0px;
    width: 584px;
    background-color: white;
    }

    #thirdRow {
    position: relative;
    margin-top: 0px;
    padding: 0px;
    width: 584px;
    background-color: white;
    }

    #fourthRow {
    position: relative;
    margin-top: 0px;
    padding: 0px;
    width: 584px;
    background-color: white;
    }

    #fifthRow {
    position: relative;
    margin-top: 0px;
    padding: 0px;
    width: 584px;
    background-color: white;
    }

    HTML
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>

    <head>
    <title>American Buyers Discount Mattress - Your Source for Discounting Mattresses, Bedding, Futons, Daybeds, and Bunkbeds</title>
    <link rel="stylesheet" href="files/sets.css">
    </head>

    <body bgcolor="#ffffff">
    <div id="container">
    <div id="firstRow">
    <img src="main_imgs/top_logo.gif" width="442" height="102" alt=""><img src="main_imgs/top_text.gif" width="142" height="102" alt="">
    </div>
    <div id="secondRow">
    <img src="main_imgs/mid_bigblue.gif" width="294" height="102" alt=""><img src="main_imgs/mid_text.gif" width="148" height="102" alt=""><img src="main_imgs/mid_smallblue.gif" width="142" height="102" alt="">
    </div>
    <div id="thirdRow">
    <img src="main_imgs/center_pic1.jpg" width="147" height="102" alt=""><img src="main_imgs/center_pic2.jpg" width="147" height="102" alt=""><img src="main_imgs/center_pic3.jpg" width="148" height="102" alt=""><img src="main_imgs/center_pic4.jpg" width="142" height="102" alt="">
    </div>
    <div id="fourthRow">
    <img src="main_imgs/about_box.gif" width="147" height="102" alt=""><img src="main_imgs/selection_box.gif" width="147" height="102" alt=""><img src="main_imgs/contact_box.gif" width="148" height="102" alt=""><img src="main_imgs/promotions_box_top.gif" width="142" height="102" alt="">
    </div>
    <div id="fifthRow">
    <img src="main_imgs/affiliate_box.gif" width="147" height="99" alt=""><img src="main_imgs/lower_smallgrey.gif" width="147" height="99" alt=""><img src="main_imgs/lower_whitebox.gif" width="148" height="99" alt=""><img src="main_imgs/promotions_coupon.gif" width="142" height="99" alt="">
    <div>
    </div>
    </body>

    </html>

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

    First thing use a full doctype with uri so that you're not working in quirks mode.

    e.g.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    The layout doesn't centre in mozilla because you need to specify a width when you use margin-left:auto and margin-right:auto.

    e.g.
    Code:
    #container {
    position: relative;
    width:584px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    text-align: center;
    }
    The reason it centres in IE is because IE5 (or ie6 in quirks mode) incorrectly applies text-align centre and centres the text and the nested div. You can leave it in (in the body style) as IE5 doesn't understand the margin:auto which is the specified way to centre.

    To get rid of the gaps between rows you could try keeping the whole div in onel ine of code in the html. That is, don't let it break and don't enter any spaces between the images and the surrounding div as well.

    e.g.
    Code:
    <div id="firstRow"><img src="main_imgs/top_logo.gif" width="442" height="102" alt=""><img src="main_imgs/top_text.gif" width="142" height="102" alt=""></div>
    You don't really need to define position relative (unless you have other plans) as the images are in the normal flow anyway. (In fact you probably don't need any of the css except for the body and container tags -unless you have more plans etc.)

    In your body style you have written :
    bgcolor: white;

    It should be : background-color: white; as you have in your other definitions.

    Hope this helps.

    Paul

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    PGH
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul -

    Thanks for the reply. I took your advice and removed and most of the CSS I had for each individual row. However, I now have a new problem. I'm trying to position a text div to overlay on one of the images. This DIV is nested inside the container div...the CSS is below:

    Code:
    #container {
    	position: relative;
    	margin-left: auto;
    	margin-right: auto;
    	margin-top: 5px;
    	text-align: center;
    	z-index: 1;
    }
    
    #testText {
    	position: absolute;
    	left: 5px;
    	top: 340px;
    	text-align: left;
    	z-index: 2;
    }
    Hopefully I defined that correctly. I have the HTML Utopia book right here in front of me and it says that since I defined the container as relative that by defining the testText as absolute, I can base its position on the container's upper left corner (thus, everything stays centered at all resolutions). However, in IE the text overlays as expected, but in Mozilla it doesn't...can you help?

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

    It looks ok to me except that you will need to supply a width to your container.

    Your are correct in your assumptions that applying position:relative to the parent container will allow you to place elements absolutely (or relatively) inside the container relative to the top left corner.

    If adding a width doesn't fix your problems then try adding a height to the container as well (as your images sizes are known this shouldn't be a problem) although I've tested it and it works without a height but Mozilla sometimes doesn't display backgrounds without height or content.

    If this still doesn't work then post the full code you are using as the error may be somewhere else.

    Paul

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    PGH
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul -

    Thanks a million. You were right, all I had to do was put the width in the container div and that fixed everything. Thanks again.

  6. #6
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    PGH
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul -

    Sorry to keep bothering you, but one last question. I thought I finally had the whole layout worked out until I went to test it one last time in IE and found a new problem. I got the text to align perfectly in Mozilla and Opera, but in IE it aligns about 7px too high.

    I can't think of anything else to do...can you help me?

    Code:
    body, div, img, a {
    	margin: 0; 
    	border: 0; 
    	padding: 0;
    }
    
    P {
    	color: black;
    	font-size: 10px;
    	font-family: Verdana, Geneva, Helvetica, Arial, sans-serif;
    }
    
    a:link {
    	color: black;
    	font-family: Verdana, Geneva, Helvetica, Arial, sans-serif;
    	text-decoration: none;
    }
    
    a:hover {
    	color: black;
    	font-family: Verdana, Geneva, Helvetica, Arial, sans-serif;
    	text-decoration: underline;
    }
    
    #container {
    	position: relative;
    	margin-left: auto;
    	margin-right: auto;
    	margin-top: 5px;
    	width:584px;
    	text-align: center;
    	z-index: 1;
    }
    
    body { 
    	margin-top: 0px; 
    	margin-left: 0px; 
    	padding: 0px;
    	background-color: white;
    	text-align:center;
    }
    
    #firstRow {
    	position: relative;
    	width: 584px;
    	background-color: white;
    }
    
    #secondRow {
    	position: relative;
    	width: 584px;
    	background-color: white;
    }
    
    #thirdRow {
    	position: relative;
    	width: 584px;
    	background-color: white;
    }
    
    #fourthRow {
    	position: relative;
    	width: 584px;
    	background-color: white;
    }
    
    #fifthRow {
    	position: relative;
    	width: 584px;
    	background-color: white;
    	z-index: 1;
    }
    
    #sixthRow {
    	position: relative;
    	width: 584px;
    	background-color: white;
    }
    
    #aboutText {
    	position: absolute;
    	left: 6px;
    	top: 309px;
    	width: 130px;
    	text-align: left;
    	z-index: 2;
    }
    
    #selectionText {
    	position: absolute;
    	left: 152px;
    	top: 309px;
    	width: 130px;
    	text-align: left;
    	z-index: 2;
    }
    
    #contactText {
    	position: absolute;
    	left: 298px;
    	top: 309px;
    	width: 130px;
    	text-align: left;
    	z-index: 2;
    }
    
    #affiliateText {
    	position: absolute;
    	left: 6px;
    	top: 413px;
    	width: 130px;
    	text-align: left;
    	z-index: 2;
    }
    
    #promotionsText {
    	position: absolute;
    	left: 447px;
    	top: 309px;
    	width: 129px;
    	height: 130px;
    	text-align: left;
    	z-index: 2;
    }
    
    #couponText {
    	position: absolute;
    	left: 447px;
    	top: 475px;
    	width: 129px;
    	height: 130px;
    	text-align: left;
    	z-index: 2;
    }
    
    #copyrightText {
    	position: absolute;
    	left: 2px;
    	top: 535x;
    	width: 584px;
    	text-align: center;
    	z-index: 2;
    }
    HTML
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    	<head>
    		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    		<title>American Buyers</title>
    		<link rel="stylesheet" href="files/sets.css">
    	</head>
    
    	<body bgcolor="#ffffff">
    		<div id="container">
    			<div id="firstRow"><img src="main_imgs/top_logo.gif" width="442" height="102" alt=""><img src="main_imgs/top_text.gif" width="142" height="102" alt=""></div>
    			<div id="secondRow"><img src="main_imgs/mid_bigblue.gif" width="294" height="102" alt=""><img src="main_imgs/mid_text.gif" width="148" height="102" alt=""><img src="main_imgs/mid_smallblue.gif" width="142" height="102" alt=""></div>
    			<div id="thirdRow"><img src="main_imgs/center_pic1.jpg" width="147" height="102" alt=""><img src="main_imgs/center_pic2.jpg" width="147" height="102" alt=""><img src="main_imgs/center_pic3.jpg" width="148" height="102" alt=""><img src="main_imgs/center_pic4.jpg" width="142" height="102" alt=""></div>
    			<div id="fourthRow"><img src="main_imgs/about_box.gif" width="147" height="102" alt=""><img src="main_imgs/selection_box.gif" width="147" height="102" alt=""><img src="main_imgs/contact_box.gif" width="148" height="102" alt=""><img src="main_imgs/promotions_box_top.gif" width="142" height="102" alt=""></div>
    			<div id="fifthRow"><img src="main_imgs/affiliate_box.gif" width="147" height="99" alt=""><img src="main_imgs/lower_smallgrey.gif" width="147" height="99" alt=""><img src="main_imgs/lower_whitebox.gif" width="148" height="99" alt=""><img src="main_imgs/promotions_coupon.gif" width="142" height="99" alt=""></div>
    			<div id="sixthRow"><img src="main_imgs/serta_sealy.gif" width="147" height="34" alt=""><img src="main_imgs/spring_symbol.gif" width="147" height="34" alt=""><img src="main_imgs/bottom_whitebox.gif" width="148" height="34" alt=""><img src="main_imgs/coupon_bottom.gif" width="142" height="34" alt=""></div>
    			<div id="aboutText">
    				<p>This is a test</p>
    			</div>
    			<div id="selectionText">
    				<p>This is another test</p>
    			</div>
    			<div id="contactText">
    				<p>This is yet another test to see if it wraps</p>
    			</div>
    			<div id="affiliateText">
    				<p>This is yet one more test</p>
    			</div>
    			<div id="promotionsText">
    				<p>This is a promotions text</p>
    			</div>
    			<div id="couponText">
    				<p>This is a coupon text</p>
    			</div>
    			<div id="copyrightText">
    				<p>Copyright</p>
    			</div>
    		</div>
    	</body>
    
    </html>

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

    I suspect that it's mozilla that's wrong this time as it has the habit of inheritng the margin of its first child element. the usual fix is to set div p {margin-top:0px} which will make it the same as IE.

    Bur seeing as you want a bigger margin you could try this:

    Code:
    div p{margin-top:7px}
    This will of course set every <p> in a div to have a margin top of 7px. If you want to be more specific then you will have to target the elements specifically (ie use a class or id).

    I think the first solution may work unless it alters something else that you may add later. You can of course just change the margin on those elements to suit your purpose.

    Hope this helps.

    Paul


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
  •