Problems with layout in IE

Discussion in 'CSS' started by Embla, Aug 16, 2006.

0
  1. #1
    Hi,

    I'm new on this forum and i'm quite new on css. I'm working on a complicated layout for a software for billing hours.

    My problem is to make the layout look good in IE. Not the first one i've noticed! There's a gap that I can't get rid of in the top left corner next to the logo ("#wrappertop") There is also a displacement of the content top left corner. You can see for yourself here.

    [​IMG]

    These two bugs seems to be similar. They both have a displacement of 3 px. I've tried display:inline. It removed the gap but everything else looked crap. I've tried to put margin-left:-3px. That didn't work either.

    Besides the layout seams to be very unreliable depending on what content you put in

    Does anyone know how to fix this?

    I have two css-files. One for IE and one for the rest of the browsers.

    Here is the css-code for IE
    body {
	background:url(../bilder/bg.gif) repeat-x #2882A1;
	margin:0;
	padding:0;
	}
	
p	{
	font-family:Verdana, Arial, Helvetica, sans-serif; 
	font-size:12px; 
	color:#ffffff;
	}
	
h2 { 	
	font-family:Verdana, Arial, Helvetica, sans-serif; 
	font-size:12px; 
	color:#003551;
	font-weight:bold;
	}
	
img{
	border-width:0px;
	}
		
a:link {
	color:#003551;
	font-family:Verdana, Arial, Helvetica, sans-serif; 
	text-decoration:underline; 
	font-size:12px
	}

a:visited {
	color:#003551;
	font-family:Verdana, Arial, Helvetica, sans-serif; 
	text-decoration:underline; 
	font-size:12px
	}
a:hover {
	color:#2882A1;
	font-family:Verdana, Arial, Helvetica, sans-serif; 
	text-decoration:underline; 
	font-size:12px
	}
	
a:visited {
	color:#003551;
	font-family:Verdana, Arial, Helvetica, sans-serif; 
	text-decoration:underline; 
	font-size:12px
	}	
		
a.linksbutton:link{ color: #003551; font-weight:bold; font-family:Verdana, Arial, Helvetica, sans-serif; text-decoration: none; font-size:12px}
a.linksbutton:visited{ color: #003551; font-weight:bold; font-family:Verdana, Arial, Helvetica, sans-serif; text-decoration: none; font-size:12px}
a.linksbutton:hover{ color: #2882A1; font-weight:bold; font-family:Verdana, Arial, Helvetica, sans-serif; text-decoration: none; font-size:12px}
a.linksbutton:active{ color: #003551; font-weight:bold; font-family:Verdana, Arial, Helvetica, sans-serif; text-decoration: none; font-size:12px}

.fet {font-weight:bold;}


/*---------"The sheet"-----------*/

/*---------Box som innehåller hela "bladet"-------*/
#wrapper {
	width:100%;
	height:100%;
	}

#headerlogo {
	background: url(../bilder/toj_text.gif) no-repeat bottom;
	width:139px;
	height:59px;
	clear:right;
	}

#wrapperlinks {
	float:left;
	width:122px;
	height:300px;
	background:url(../bilder/gubbe.gif) no-repeat ;
	}


/* ------ left links -------*/
#link_user_on {
	margin-top:96px;
	margin-left:0;
	width:97px;
	height:24px;
	padding-top: 7px;
	padding-left: 25px;	
	font-family: verdana,arial,san-serif;
	font-size:12px;
	font-weight:bold;
	color: #fff;
	background: url(../bilder/kn_anvandare_on.gif) no-repeat;
}

#link_user_off {
	margin-top:96px;
	width:97px;
	height:24px;
	background: url(../bilder/kn_anvandare_off.gif) no-repeat;
}

#link_admin_on{
	margin-top:3px;
	width:97px;
	height:24px;
	padding-top: 7px;
	padding-left: 25px;	
	font-family: verdana,arial,san-serif;
	font-size:12px;
	font-weight:bold;
	color: #fff;
	background: url(../bilder/kn_admin_on.gif) no-repeat;
}

#link_admin_off {
	margin-top:3px;
	width:97px;
	height:24px;
	padding-top: 7px;
	padding-left: 25px;	
	font-family: verdana,arial,san-serif;
	font-size:12px;
	font-weight:bold;
	color: #003551;
	background: url(../bilder/kn_admin_off.gif) no-repeat;
}

#link_report_on {
	margin-top:3px;
	left:0px;
	width:97px;
	height:24px;
	padding-top: 7px;
	padding-left: 25px;	
	font-family: verdana,arial,san-serif;
	font-size:12px;
	font-weight:bold;
	color: #fff;
	background: url(../bilder/kn_rapport_on.gif) no-repeat;
}

#link_report_off {
	margin-top:3px;
	left:0px;
	width:97px;
	height:24px;
	padding-top: 8px;
	padding-left: 25px;	
	font-family: verdana,arial,san-serif;
	font-size:12px;
	font-weight:bold;
	color: #003551;
	background: url(../bilder/kn_rapport_off.gif) no-repeat;
}	

#wrappersheet{/*--- Innehåller bladet*/
	margin:0;

		
	}	
/*--------innehåller topdelen i bladet-----*/
	#wrappertop {
		margin:0;
		height:46px;
		background: url(../bilder/blad_top.gif) repeat-x ;
		}
	
	#sheet_top_l_corner {
		background: url(../bilder/blad_top_v_horn.gif) no-repeat top left;
		float:left;
		width:16px;
			height:46px;
		}
		
		#sheet_top_static {
			background: url(../bilder/blad_top.gif) repeat-x left;
			float:left;
			width:40px;
			height:46px;
		}
		

		#tab_on_l{
			background: url(../bilder/flik_on_v.gif) no-repeat;
			float:left;
			width:36px;
			height:46px;
		}
		
		#tab_on{
			background: url(../bilder/flik_on.gif) repeat-x;
			float:left;
			height:31px;
			font-family:Verdana, Arial, Helvetica, sans-serif; 
			font-size:12px; 
			color:#de8500;
			font-weight:bold;
			padding-top:15px;
		}
		
		#tab_on_r{
			background: url(../bilder/flik_on_h.gif) no-repeat;
			float:left;
			width:36px;
			height:46px;
		}
		
		#tab_off_l{
			background: url(../bilder/flik_off_v.gif) no-repeat;
			float:left;
			width:36px;
			height:46px;
		}
		
		#tab_off{
			background: url(../bilder/flik_off.gif) repeat-x;
			float:left;
			height:32px;
			padding-top:14px;
		}
		
		#tab_off_r{
			background: url(../bilder/flik_off_h.gif) no-repeat;
			float:left;
			width:36px;
			height:46px;
		}

/*---------Innehåller hela mittendelen inkl vänster kanten*/	
	#wrappermiddle {
		margin-left:122px;/*hack för IE*/		
		background:url(../bilder/blad_v.gif) repeat-y top left #E5F7FF;
		overflow:hidden;
		
	}	
	
		#wrapperleft {/*Innehåller vänsterkanten på bladet som ligger i wrapper_middle*/
			background: url(../bilder/blad_v_anv_aktiv.gif) no-repeat top left #E5F7FF;
			width:16px;
			height:264px;				
			float:left;
		}
				
		#main{ /*-------Innehåller tidkortet--------*/
			margin-right:0px;
			margin-left:20px;
			margin-top:30px;
			background-color:#bae1f3;	
			}
			
			/*---round  corners*/
		.roundtop {background: #E5F7FF;}
		.roundbottom {background: #E5F7FF;}
		.r1{
			margin: 0 5px;
			height: 1px; 
			overflow: hidden; 
			background: #AACFE0; 
			border-left: 1px solid #AACFE0; 
			border-right: 1px solid #AACFE0;}
		.r2{
			margin: 0 3px; 
			height: 1px; 
			overflow: hidden; 
			background: #BAE1F3; 
			border-left: 1px solid #AACFE0; 
			border-right: 1px solid #AACFE0; 
			border-width: 0 2px;}
		.r3{
			margin: 0 2px;
			height: 1px; 
			overflow: hidden; 
			background: #BAE1F3; 
			border-left: 1px solid #AACFE0; 
			border-right: 1px solid #AACFE0;}
		.r4{
			margin: 0 1px;
			height: 2px; 
			overflow: hidden; 
			background: #BAE1F3; 
			border-left: 1px solid #AACFE0; 
			border-right: 1px solid #AACFE0;}
		.content {
			padding: 10px;
			border-left: 1px solid #AACFE0; 
			border-right: 1px solid #AACFE0;
}
		
/*------Innehåller nederkanten på bladet--------*/
	
	#wrapperbottom{
		margin-right:0;
		margin-left:122px;
		height:16px;
		background: url(../bilder/blad_ned.gif) repeat-x top;
		clear:left;
	}
		
		#sheet_bottom_l_corner {
			background: url(../bilder/blad_ned_v_horn.gif) no-repeat top;
			float:left;
			width:16px;
			height:16px;
		}
    Code (markup):
    And here is html
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
<head>
<title>TOJ - Tid och jobbrapportering</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>


<link rel="stylesheet" type="text/css" media="screen" href="css/toj.css" />
<!--[if IE]><link rel="stylesheet" type="text/css" media="screen" href="css/toj_ie.css" /><![endif]-->

</head>

<body>



<div id="headerlogo"></div>
<div id="wrapperlinks">
	<div id="link_user_on">Anv&auml;ndare</div>
	<div id="link_admin_off"><a href="#" class="linksbutton">Administrat&ouml;r</a></div>
	<div id="link_report_off"><a href="#" class="linksbutton">Intressent</a></div>
</div>
<div id="wrappersheet">
	<div id="wrappertop">
		<div id="sheet_top_l_corner"></div>
		<div id="sheet_top_static"></div>
		<div id="tab_on_l"></div>
		<div id="tab_on">Tidkort</div>
		<div id="tab_on_r"></div>
		<div id="tab_off_l"></div>		
    	<div id="tab_off"><a href="#" class="linksbutton">Egna rapporter</a></div>
		<div id="tab_off_r"></div>
		
    <div id="logout">Logga ut <img src="bilder/icon_logout.gif" width="16" height="21" /></div>
	</div>
	
	<div id="wrappermiddle">
		<div id="wrapperleft"></div>
		
    <div id="main"> 
      <div class="roundtop">
	   <div class="r1"></div>
	   <div class="r2"></div>
	   <div class="r3"></div>
	   <div class="r4"></div>
	 </div>
      <div class="content"> Innehållet i boxen här...
        <table width="75%" border="1" cellpadding="5" cellspacing="0">
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
        </table>  <br />
        <br />
		<br />
		<br />
      </div>
	 <div class="roundbottom">
	   <div class="r4"></div>
	   <div class="r3"></div>
	   <div class="r2"></div>
	   <div class="r1"></div>
	 </div>

     
	</div>	
	</div>
	
	<div id="wrapperbottom">
		<div id="sheet_bottom_l_corner"></div>
	</div>

</div>





</body>
</html>
    Code (markup):
    Anyone knows how to fix this? Would really appreciate it if someone could help me.
     
    Embla, Aug 16, 2006 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    Not tested.

    IE reserves a minimum height for empty block elements, equal to the line-height of the font. Try making the font-size for the empty divs 0.

    cheers,

    gary
     
    kk5st, Aug 16, 2006 IP
  3. Embla

    Embla Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hi Gary,

    Tanks for your reply! Unfortunatly it didn't work :(
    Any other suggestions?

    Ida
     
    Embla, Aug 17, 2006 IP
  4. Embla

    Embla Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Never mind. I fixed it :). Had missed a float:left.
     
    Embla, Aug 17, 2006 IP