Jump to content

problems with div layout


Ida

Recommended Posts

Hi everyone!I'm pulling my hair here and I hope someone can help me. I'm having difficulties with layout using CSS. It looks almost OK in IE but in Firefox it looks terrible. I'm trying to get the page to strech from an absolute position at the left hand side, all the way out to the right hand side of the window. In other words it's both absolute positioned and liquid (understand me?) Here is the link anyway and you can see for you self My WebpageHowever in firefox the divs ends upp underneith eachother instead of beside eachother. I've used float:left but it doesn't help. Maybe it has something to do with width but i don't know how to fix it.Here is the html

<body><div id="tojlogo"></div><div id="link_anv_on">Användare</div><div id="link_admin_off"><a href="#" class="linksbutton">Administratör</a></div><div id="link_rapport_off"><a href="#" class="linksbutton">Intressent</a></div><div id="wrapper"><div id="wrapper_top">		<div id="blad_top_v_horn"></div>	<div id="blad_top_statisk"></div>	<div id="flik_on_v"></div>  	<div id="flik_on"><a href="#" class="linksbutton">Tidkort</a></div>	<div id="flik_on_h"></div>	<div id="flik_off_v"></div>	<div id="flik_off"><a href="#" class="linksbutton">Egna rapporter</a></div>	<div id="flik_off_h"></div></div><div id="wrapper_middle">	<div id="wrapper_left">      <div id="blad_v_anv_aktiv"></div>       </div>	<div id="wrapper_main"> <br>      <form name="form1" method="post" action="">        <table width="75%" height="217">          <tr>             <th width="8%" height="100" > </td>             <td width="92%" rowspan="5" valign="top" class="helg">sfghfdg</td>          </tr>          <tr>             <td height="27" class="vit"> </td>          </tr>          <tr>            <td height="32" class="vit"> </td>          </tr>          <tr>             <td height="23" class="vit"> </td>          </tr>          <tr>            <td height="23" class="vit"> </td>          </tr>        </table>        <p> </p>        <p>          <textarea name="textarea"></textarea>          <select>            <option>svenska</option>            <option>Engelska</option>          </select>        </p>      </form>    </div>	</div><div id="wrapper_bottom">	<div id="blad_ned_v_horn"></div>	  </div>  </div>	</body>

And here is the css:

body {	background:url(../bilder/bg.gif) repeat-x #2882A1;	background-attatchment:fixed;	scrollbar-face-color: #aacfe0;	scrollbar-highlight-color: #ffffff;	scrollbar-shadow-color: #ffffff;	scrollbar-3dlight-color: #ffffff;	scrollbar-darkshadow-color: #ffffff;	scrollbar-arrow-color: #ffffff;	scrollbar-track-color: #ffffff;	}	#informerlogo {	background:url(../bilder/logo.gif) no-repeat;	width:93px;	height:35px;	bottom:0px;	right:0px;	position:relative;	float:right;	left: 933px;	}/*----------- Tojlogo med gubbe i bakgrunden --------*/#tojlogo {	background:url(../bilder/logo_toj.gif) no-repeat;	width:151px;	height:315px;	position:absolute;	top:0px;	left:0px;}/* ------ Vänsterlänkar -------*/#link_anv_on {	position:absolute;		top:153px;	left:0px;	width:122px;	height:31px;	z-index: 1;	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_anv_off {	position:absolute;		top:153px;	left:0px;	width:122px;	height:31px;	z-index: 1;	background:url(../bilder/kn_anvandare_off.gif) no-repeat;}#link_admin_on{	position:absolute;		top:187px;	left:0px;	width:122px;	height:31px;	z-index: 1;	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 {	position:absolute;		top:187px;	left:0px;	width:122px;	height:31px;	z-index: 1;	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_rapport_on {	position:absolute;		top:221px;	left:0px;	width:122px;	height:31px;	z-index: 1;	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_rapport_off {	position:absolute;		top:221px;	left:0px;	width:122px;	height:31px;	z-index: 1;	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;}/*---------"Bladet"-----------*//*---------Box som innehåller hela "bladet"-------*/#wrapper {	position:absolute;	top:57px;	left:122px;	z-index: 2;	width:100%;	}/*--------innehåller topdelen-----*/	#wrapper_top {  height:42px;  width:100%;  background:url(../bilder/blad_top.gif) repeat-x;	}		#wrapperflikar{  height:46px;  float:left;  vertical-align:bottom;  }  #blad_top_v_horn {  	background:url(../bilder/blad_top_v_horn.gif) no-repeat;  	float:left;  	width:16px;  	height:46px;  }  #blad_top_statisk {  	background:url(../bilder/blad_top.gif) repeat-x;  	float:left;  	width:40px;  	height:46px;  }    #blad_top_dynamisk {  	background:url(../bilder/blad_top.gif) repeat-x;  	float:left;  	width:50%;  	height:46px;  }    #flik_on_v{  	background:url(../bilder/flik_on_v.gif) no-repeat;  	float:left;  	width:36px;  	height:46px;  }    #flik_on{  	background:url(../bilder/flik_on.gif) repeat-x;  	float:left;  	height:46px;  	padding-top:14px;  }    #flik_on_h{  	background:url(../bilder/flik_on_h.gif) no-repeat;  	float:left;  	width:36px;  	height:46px;  }    #flik_off_v{  	background:url(../bilder/flik_off_v.gif) no-repeat;  	float:left;  	width:36px;  	height:46px;  }    #flik_off{  	background:url(../bilder/flik_off.gif) repeat-x;  	float:left;  	height:46px;  	padding-top:14px;  }    #flik_off_h{  	background:url(../bilder/flik_off_h.gif) no-repeat;  	float:left;  	width:36px;  	height:46px;  }    #blad_top_h_horn {  	background:url(../bilder/blad_top_h_horn.gif) no-repeat;  	float:right;  	width:16px;  	height:46px;  	}	/*---------Innehåller hela mittendelen under topdelen*/		#wrapper_middle {    width:100%;    height:100%;	}	  	/*---------Innehåller vänsterkanten på bladet som ligger i wrapper_middle------*/	  #wrapper_left {  	width:16px;  	height:100%;  	background:url(../bilder/blad_v.gif) repeat-y;  	float:left;  }/*---------*/  	#blad_v_anv_aktiv {    background:url(../bilder/blad_v_anv_aktiv.gif) no-repeat;    width:16px;    height:264px;    }  	  	#blad_v {    background:url(../bilder/blad_v.gif) repeat-y;    width:16px;    height:100px;    }/*-------Innehåller tidkortet--------*/  	  #wrapper_main{  	background-color:#E5F7FF;  	float:left;  	margin:0px;  	padding:20px;  	vertical-align:top;  	clear: right;  	height:100%;  	width:99%;  	}  	/*------Innehåller högerkanten på bladet--------*/	#wrapper_right {  float:left;  width:16px;	}  #blad_h {  	background:url(../bilder/blad_h.gif) repeat-y;  	width:16px;  	float:right;  	height:100%  	}	#wrapper_bottom{  height:16px;  width:100%;  background:url(../bilder/blad_ned.gif) repeat-x top;  }    #blad_ned_v_horn {  	background:url(../bilder/blad_ned_v_horn.gif) no-repeat top;  	float:left;  	width:16px;  	height:16px;  }  #blad_ned {  	background:url(../bilder/blad_ned.gif) repeat-x top;  	float:left;  	height:16px;  	width:95%;}	  #blad_ned_h_horn {  	background:url(../bilder/blad_ned_h_horn.gif) no-repeat;  	float:right;  	width:16px;  	height:16px;  }

I would be so grateful if someone could help me with this.Thank you!

Link to comment
Share on other sites

I understand...What about not giving the menu imgs to divs but to the table tag?

<table border="0" cellspacing="0"><tr><td id="tojlogo"></td></tr><tr><td id="link_anv_on">Användare</tr></td><tr><td id="link_admin_off"><a href="#" class="linksbutton">Administratör</a></tr></td><tr><td id="link_rapport_off"><a href="#" class="linksbutton">Intressent</a></tr></td><tr><td id="wrapper"></tr></td><tr><td id="wrapper_top"></tr></td></table>

Link to comment
Share on other sites

I understand...What about not giving the menu imgs to divs but to the table tag?
<table border="0" cellspacing="0"><tr><td id="tojlogo"></td></tr><tr><td id="link_anv_on">Användare</tr></td><tr><td id="link_admin_off"><a href="#" class="linksbutton">Administratör</a></tr></td><tr><td id="link_rapport_off"><a href="#" class="linksbutton">Intressent</a></tr></td><tr><td id="wrapper"></tr></td><tr><td id="wrapper_top"></tr></td></table>

OK, I have now tried this but there is no difference. Still looks messy in Firefox. :)
Link to comment
Share on other sites

Try using relative values instead of absolute values.

Tanks for your help. I've tried this now and it looks almost good in FF but worse in IE, but I think i'm on the right track and I'll keep working on it. I might come back later if i can't fix it :)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...