Ida Posted June 30, 2006 Share Posted June 30, 2006 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 More sharing options...
aleksanteri Posted June 30, 2006 Share Posted June 30, 2006 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 More sharing options...
Ida Posted July 3, 2006 Author Share Posted July 3, 2006 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> <{POST_SNAPBACK}> OK, I have now tried this but there is no difference. Still looks messy in Firefox. Link to comment Share on other sites More sharing options...
aleksanteri Posted July 3, 2006 Share Posted July 3, 2006 Try using relative values instead of absolute values. Link to comment Share on other sites More sharing options...
Ida Posted July 4, 2006 Author Share Posted July 4, 2006 Try using relative values instead of absolute values.<{POST_SNAPBACK}> 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now