Another css question

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

0
  1. #1
    Hi I have this problem that I have to sort out.

    There is a block element in my design that contains a table that has a certain width.

    When the window isn't big enough for the table this happens in the different browsers:

    IE:
    The whole block jumps down and there is a huge space above. Annoying!

    FF:
    The block does not jump down but there is no scroll and the content is hidden for the viewer. I've tried overflow:scroll in the body but it just shows an "empty" scroll bar that is useless.

    I guess it does this because it's a liquid design but is there any way of forcing the page to scroll horizontally instead of pushing the block down, like when the design is all in tables?

    This is what it looks like in IE:

    [​IMG]

    I don't know if you need the code but here it is anyway:

    CSS
    

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;
	}
	
h1 { 	
	font-family:Verdana, Arial, Helvetica, sans-serif; 
	font-size:14px; 
	color:#003551;
	font-weight:bold;
	}
	
img{
	border-width:0px;
	}
/* ---------- LAYOUT ---------*/


/*---------"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 { /* Block for left links*/
	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 0 0 0px;
		height:46px;
		background: url(../bilder/blad_top.gif) repeat-x top left;
		float:left;
		}
	
		#sheet_top_left_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_left{
			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_right{
			background: url(../bilder/flik_on_h.gif) no-repeat;
			float:left;
			width:36px;
			height:46px;
		}
		
		#tab_off_left{
			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_right{
			background: url(../bilder/flik_off_h.gif) no-repeat;
			float:left;
			width:36px;
			height:46px;
		}

		#logout {
			float:right;
			width:100px;
			height:36px;
			font-family:Verdana, Arial, Helvetica, sans-serif; 
			font-size:12px; 
			font-weight:bold;
			color:#ffffff;
			padding-top:5px;
			padding-right:5px;
			}
/*---------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;
		}
				
		#name {margin-top:10px; padding-left:5px;}
				

		#main{ /*-------Innehåller tidkortet--------*/
			margin-right:0px;
			margin-left:20px;
			margin-top:10px;
			background-color:#bae1f3;	
			}
			
			/*---round  corners*/
		.roundtop {background: #E5F7FF; float:left; margin-right:0px;}
		.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_left_corner {
			background: url(../bilder/blad_ned_v_horn.gif) no-repeat top;
			float:left;
			width:16px;
			height:16px;
		}
    Code (markup):
    And the 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">Analytiker</a></div>
</div>
<div id="wrappersheet">
	<div id="wrappertop">
		<div id="sheet_top_left_corner"></div>
		<div id="sheet_top_static"></div>
		<div id="tab_on_left"></div>
		<div id="tab_on">Tidkort</div>
		<div id="tab_on_right"></div>
		<div id="tab_off_left"></div>		
    	<div id="tab_off"><a href="#" class="linksbutton">Egna rapporter</a></div>
		<div id="tab_off_right"></div>
		
    <div id="logout" ><a href="#" class="linkswhite">Logga ut</a> &nbsp; &nbsp;<img src="bilder/ikon_logout.gif" width="16" height="21" /></div>
	</div>
	
	<div id="wrappermiddle">
		<div id="wrapperleft"></div>
		<div id="name"> 
      <table width="97%" >
        <tr> 
          <td><h1>Sven Svensson</h1></td>
          <td><div align="right">2006-08-16</div></td>
        </tr>
      </table>
    </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"> 
       
<img src="bilder/tidkortet.gif" width="753" height="390" />
      </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_left_corner"></div>
	</div>
</div>
</body>
</html>
    Code (markup):
    Can anyone please help me. :)

    Ida
     
    Embla, Aug 17, 2006 IP