A random link break in my page, help :(

Discussion in 'CSS' started by papa_face, Oct 5, 2007.

0
  1. #1
    Hello,
    Can someone help me out with the following code:
    index.php:
    <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
	<div id="main">
    	<div id="head"><div class="logo"><img src="imgs/logo.gif" alt="VidToMP3.COM" width="189" height="118" /></div><div class="banner"><img src="imgs/headerbanner.gif" /></div>
    	</div>
        <div class="clean"></div>
        
        <div id="nav">
        <ul>
        <li class="first text"><a href="#">HOME</a></li>
        <li class="second text"><a href="#">ABOUT</a></li>
        <li class="third text"><a href="#">TOS</a></li>
        <li class="forth text"><a href="#">CONTACT</a></li>
        </ul>
        </div>
        
        <div id="linkarea">
        	<div class="left">
            	<div class="text">
                	<div class="top"></div>
                    <div class="info">a</div>
                    <div class="bottom"></div>
                </div>
            </div>
      		<div class="right">            
            	<div class="adsense">
                	<div class="top"></div>
                    <div class="adsense">a</div>
                    <div class="bottom"></div>
                </div>
            </div>
        <div class="clean"></div>
        </div>
    </div>
    <div id="footer">
    </div>
</div>
</body>
</html>
    Code (markup):
    styles.css:
    @charset "utf-8";
* {	margin: 0px;	padding: 0px; }
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	margin: 0px;
	padding: 0px;
	color: #444444;
	background-color: #10bdf3;
	background-image: url(imgs/bg.gif);
	background-repeat: repeat-x;
}
#container {
	margin-right: auto;
	margin-left: auto;
	width: 776px;
}
#container #main {
	background-image: url(imgs/mainbg.png);
	background-repeat: repeat-y;
	margin-right: auto;
	margin-left: auto;
	width: 776px;
	padding-left: 13px;
	padding-right: 13px;
}
#container #main #head .logo {
	float: left;
	padding-left: 8px;
}
#container #main #head .banner {
	float: left;
	padding-top: 33px;
	padding-left: 61px;
}
#container #main #nav {
	background-image: url(imgs/nav.gif);
	height: 46px;
	width: 752px;
	margin-top: 10px;
	background-repeat: no-repeat;
}
#container #main #nav ul {
	display: inline;
}
#container #main #nav li {
	display: inline;
	float: left;
	padding-top: 12px;
}
#container #main #nav li a {
	color: #000000;
	font-size: 13px;
	text-decoration: none;
}
#container #main #nav .text {
	margin-top: 2px;
	font-size: 11pt;
	font-weight: bold;
}
#container #main #nav .first {
	padding-left: 16px;
}
#container #main #nav .second {
	padding-left: 42px;
}
#container #main #nav .third {
	padding-left: 40px;
}
#container #main #nav .forth {
	padding-left: 45px;
}
#container #main #linkarea .left {
	float: left;
	width: 582px;
}
#container #main #linkarea .left .text .top {
	background-image: url(imgs/texttop.gif);
	height: 7px;
	width: 581px;
	background-repeat: no-repeat;
}
#container #main #linkarea .left .text .info {
	background-image: url(imgs/textbg.gif);
	background-repeat: repeat-y;
	width: 581px;
}
#container #main #linkarea .left .text .bottom {
	background-image: url(imgs/textbottom.gif);
	height: 6px;
	width: 581px;
	background-repeat: no-repeat;
}
#container #main #linkarea {
	margin-top: 4px;
}
#container #main #linkarea .right {
	float: left;
	width: 167px;
}
#container #main #linkarea .right .adsense .top {
	background-image: url(imgs/adsensetop.gif);
	background-repeat: no-repeat;
	height: 7px;
	width: 165px;
}
#container #main #linkarea .right .adsense .adsense {
	background-image: url(imgs/adsensebg.gif);
	background-repeat: repeat-y;
	width: 165px;
}
#container #main #linkarea .right .adsense .bottom {
	background-image: url(imgs/adsensefooter.gif);
	background-repeat: no-repeat;
	height: 6px;
	width: 165px;
}

#container #main .clean {
	clear: both;
}
#container #footer {
	background-image: url(imgs/footerbg.png);
	height: 19px;
}
    Code (markup):
    A live example can be seen here

    The error is only present in IE 6 and 7. Firefox is fine.

    There is a line of white space in the content area that shouldnt be there.

    Any help would be appreciated.
     
    papa_face, Oct 5, 2007 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Common problem - IE will not let you make an element shorter than the current font-size or line-height.

    font-size:1px; on any 'short' elements usually fixes the problem. I would toss that on BOTH the .top and .bottom classes.
     
    deathshadow, Oct 5, 2007 IP
  3. papa_face

    papa_face Notable Member

    Messages:
    2,237
    Likes Received:
    67
    Best Answers:
    1
    Trophy Points:
    285
    #3
    Thanks :) Works :D
     
    papa_face, Oct 5, 2007 IP