SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist OwainGDWilliams's Avatar
    Join Date
    Aug 2005
    Location
    Scotland, UK
    Posts
    435
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Gap between 2 divs.

    Hi!
    Im getting a large gap between a couple of my divs.

    Code:
    .info {padding-left:15px;
    		padding-top:20px;
    		font-family:Verdana, Arial, Helvetica, sans-serif;
    		font-weight:bold;
    		color:#FFFFFF;
    		font-size:14px;
    		width:150px;
    		z-index: 0;
    		}
    
    
    #windsock {background-image:url(images/windsock.jpg);
    background-repeat:no-repeat;
    height:45px;
    width: 2px;
    margin-left:186px;}
    
    
    #aboutGrass {background-image:url(images/aboutGrass.png);
    			background-repeat:no-repeat;
    			height:9px;
    			width:656px;
    			margin-top:-5px;
    			margin-left:50px;
    			margin-bottom:0px;
    			 }
    			 
    .aboutTxt {background-color:#FFFFFF;
    			background-repeat:no-repeat;
    			height:100px;
    			width:650px;
    			margin-top:0px;
    			margin-left:50px;
    			border:1px;
    			border-color:#000000;
    			border-style:solid;
    			padding-left:5px;
    			padding-bottom:15px;
    			padding-top: 5px;
    			font-family:Arial, Helvetica, sans-serif;
    			font-size:12px;
    			overflow:auto;
    
    			 }
    Code:
    <div id="windsock"><div class="info">About The website</div></div>
    	<div id="aboutGrass"></div>
    	<div class="aboutTxt">
    My text goes in here........
    			</div>
    It works fine in FF and IE7 but IE6 puts a large gap between div "aboutGrass" and div "aboutTxt".

    Can anyone shed some light on this please.

    Cheers,
    O.
    Failure happens, its what you learn from it that is important!

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The margins in between you have set to 0px. Try to set them to 0 without the px.

  3. #3
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    0px and 0 is exactly the same so won't make any difference.

    The problem isn't margin or padding but is a bug in IE6 and below which won't allow a box to be smaller in height than the base font and therefore the height won't shrink to 9px;

    The fix for this is to set a font-size: 0; for any occurrences where you need a small set height.

    Code:
    #aboutGrass {background-image:url(images/aboutGrass.png);
    			background-repeat:no-repeat;
    			height:9px;
    			width:656px;
    			margin-top:-5px;
    			margin-left:50px;
    			margin-bottom:0px;
    			font-size: 0;
    }

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As a side issue, you could also simplify your CSS quite a bit by setting your page up like this and using shorthand for things like padding, margin and borders.

    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" xml:lang="en" lang="en">
    <head><title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    body {
    	font-family: verdana, arial, helvetica, sans-serif;
    	font-size: 100&#37;;
    }
    #container {
    	font-size: 0.7em;	
    }
    .info {
    	padding: 20px 0 0 15px;
    	font-weight: bold;
    	color: #FFF;
    	font-size: 1.2em;
    	width: 150px;
    }
    #windsock {
    	background-image: url(images/windsock.jpg);
    	background-repeat: no-repeat;
    	height: 45px;
    	width: 2px;
    	margin-left: 186px;
    }
    #aboutGrass {
    	background-image: url(images/aboutGrass.png);
    	background-repeat: no-repeat;
    	height: 9px;
    	width: 656px;
    	margin: -5px 0 0 50px;
    	font-size: 0;
    }	 
    .aboutTxt {
    	background-color: #FFF;
    	background-repeat: no-repeat;
    	height: 100px;
    	width: 650px;
    	margin: 0px 0 0 50px;
    	border: 1px solid #000;
    	padding: 5px 0 15px 5px;
    	overflow: auto;
    }
    </style>
    </head>
    <body>
    <div id="container">
    	<div id="windsock">
    		<div class="info">About The website</div>
    	</div>
    	<div id="aboutGrass"></div>
    	<div class="aboutTxt">
    	My text goes in here........
    	</div>
    </div>
    </body>
    </html>
    And also don't forget that you should be using <h>eading's and <p>aragraphs were applicable to add semantic meaning to your page

  5. #5
    SitePoint Evangelist OwainGDWilliams's Avatar
    Join Date
    Aug 2005
    Location
    Scotland, UK
    Posts
    435
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fantastic, its these little issues with IE which forums like this are really handy for

    Thanks for the tip about simplifying the CSS, I usually do once I have everything as I want it, not sure why I don't just do it from the start.

    For the headings, is it OK to use multiple <h2>'s? i.e. for the

    Code:
    <div id="windsock">
    		<div class="info"><h2>About The website</h2></div>
    	</div>
    and then further down use another <h2> for the next heading?

    O.
    Failure happens, its what you learn from it that is important!

  6. #6
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep. Only use a single <h1> on a page as this should be what the page is about. If you ever need more than one then you should probably think about splitting the page into more than one page.

    <h2>, <h3> etc can be used as many times as are needed as these should show sections of the page, sub sections and so on.

    My advice would always be to view your page with CSS turned off as this is a good indication of whether you page makes semantic sense.

  7. #7
    SitePoint Evangelist OwainGDWilliams's Avatar
    Join Date
    Aug 2005
    Location
    Scotland, UK
    Posts
    435
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the advice. Will keep it in mind.

    O.
    Failure happens, its what you learn from it that is important!


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
  •