Hi!
I'm going to post the whole code right here, and I hope that somebody could help me figure out why the layout of the page gets mixed up in IE.
The problem is that everything that i marked red, (the different parts of the table) become pushed down and heavily spaced in internet explorer.
Are my floats ok? Have I build things the right way?
Thank you very much for any help!!
Code:... <style type="text/css"> <!-- body { font: 100% Verdana, Arial, Helvetica, sans-serif; background: #666666; margin: 0; padding: 0; text-align: center; color: #000000; } .twoColElsLtHdr #container { width: 1112px; background: #FFFFFF; border: 1px solid #000000; text-align: left; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; } .twoColElsLtHdr #header { padding: 0 0; background-color: #FFFFFF; } .twoColElsLtHdr #header h1 { margin: 0; padding: 0 0; } .twoColElsLtHdr #sidebar1 { float: left; width: 250px; padding-top: 0 px; padding-right: 0; padding-bottom: 15px; padding-left: 10px; background-color: #FFFFFF; } .twoColElsLtHdr #sidebar1 h3, .twoColElsLtHdr #sidebar1 p { margin-left: 15px; margin-right: 10px; } .twoColElsLtHdr #mainContent { margin: 0 0 0; width: 1100px } .twoColElsLtHdr #footer { padding: 0 10px; background:#DDDDDD; } .twoColElsLtHdr #footer p { margin: 0; padding: 10px 0; } .fltrt { float: right; margin-left: 8px; } .fltlft { float: left; margin-right: 8px; } .headlines { clear:both; height:0; font-size: 1px; line-height: 0px; } .style1 { color: #FFFFFF; font-weight: bold; font-size: 17px; } .style2 { color: #FFFFFF; font-weight: bold; font-size: 20px; text-decoration: underline; margin-left: 20px; } .topobject { color: #000000; font-weight: normal; font-size: 17px; text-align: left; margin-left: 20px; margin-right: 20px; } .list { color: #FFFFFF; font-size: 12px; margin-left: 10px; } .bodytext { color: #000000; font-size: 12px; margin-left: 20px; margin-right: 20px; } .hovers { color: #FFFFFF; font-weight: bold; font-size: 12px; margin-left: 10px; background-color:#FFCC33 } #scroll-pane { float:left;overflow:auto;width:420px;height:300px;position:relative;border:1px white;margin-left:10px;margin-bottom:35px;display:inline} #scroll-content { position:absolute; top:0; left:0; width: 420px; } .scroll-content-item {background-color:#fcfcfc;color:#003366;width:100px;height:100px;float:left;margin:10px;font-size:3em;line-height:96px;text-align:center;border:1px solid gray;display:inline;} #slider-wrap {float:left;background-color:black;width:10px;border:1px white;border-left:none;} #slider-vertical {position:relative;height:100%} .ui-slider-handle {width:10px;height:10px;margin:0 auto;background-color:white;display:block;position:absolute} input {font: 100% Verdana, Arial, Helvetica, sans-serif;} --> </style> <!--[if IE]> <style type="text/css"> /* place css fixes for all versions of IE in this conditional comment */ .twoColElsLtHdr #sidebar1 { padding-top: 15px; } .twoColElsLtHdr #mainContent { zoom: 1; padding-top: 15px; } /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */ </style> <![endif]--> </head> <body class="twoColElsLtHdr"> <div id="container"> <div id="header"><img src="Comp 1.gif" width="1100" height="261" align="middle" /> <!-- end #header --> </div> <div id="sidebar1"><table cellspacing="0" width="230"> <tr> <td style="background-image:url(images/shape_menu.jpg)" height="59"><p align="left" class="style1">home</p></td> </tr> <tr> <td height="5"> </td> </tr> <tr> <td style="background-image:url(images/shape_menu.jpg)" height="59"><p align="left" class="style1">information</p></td> </tr> <tr> <td height="5"> </td> </tr> <tr> <td style="background-image:url(images/shape_menu.jpg)" height="59"><p align="left" class="style1">accommodation</p></td> </tr> <tr> <td height="5"> </td> </tr> <tr> <td style="background-image:url(images/shape_menu.jpg)" height="59"><p align="left" class="style1">contact</p></td> </tr> <tr> <td height="5"> </td> </tr> <tr> <td style="background-image:url(images/shape_menu.jpg)" height="59"><p align="left" class="style1">blog</p></td> </tr> <tr> <td height="5"> </td> </tr> <tr> <td style="background-image:url(images/shape_menu.jpg)" height="59"><p align="left" class="style1">links</p></td> </tr> </table> <!-- end #sidebar1 --> </div> <div id="mainContent"><table cellpadding="0" cellspacing="0" border="0" width="840px"> <tr> <td height="7" style="background-image:url(images/shape_bg_topleft.jpg)"></td> <td style="background-image:url(images/shape_bg_middle.jpg)"></td> <td style="background-image:url(images/shape_bg_middle.jpg)"></td> <td style="background-image:url(images/shape_bg_middle.jpg)"></td> <td style="background-image:url(images/shape_bg_middle.jpg)"></td> <td style="background-image:url(images/shape_bg_topright.jpg)"></td> </tr> <tr> <td width="6" height="10" style="background-image:url(images/shape_bg_middle.jpg)"></td> <td height="10" width="144" style="background-image:url(images/shape_bg_middle.jpg)"><p align="left" class="style2">inner city</p></td> <td width="144" style="background-image:url(images/shape_bg_middle.jpg)"><p align="left" class="style2">old town</p></td> <td width="156" style="background-image:url(images/shape_bg_middle.jpg)"><p align="left" class="style2">suburbs</p></td> <td align="center" width="382" rowspan="2"><div id="info"><p class="topobject">Fatburs Brunnsgata Room - 211</p> <img src="211-1.jpg" width="340" height="242"> <p class="bodytext" align="left"> This is a nice and cosy 1,5-room apartment with a separate bed alcove. It's located at Hornstull, a well known and popular area at Sodermalm.<br> <br> You can also do some really nice shopping in the small shops in the neigbourhood and along the main street Hornsgatan.<br> <br> It's walking distance to Old Town and to the borough Kungsholmen. I can assure you that this apartment and this area is a really good choice! </p> </div><br class="headlines" /></td> <td width="8" style="background-image:url(images/shape_bg_middle.jpg)"></td> </tr> <tr> <td height="290" rowspan="2" style="background-image:url(images/shape_bg_middle.jpg)"></td> <td id=problem colspan="3" rowspan="2" valign="top" style="background-image:url(images/shape_bg_middle.jpg)"> <br> <div id="scroll-pane"> <div id="scroll-content"> <table border="0" cellspacing="10" cellpadding="0" id="table2" width="100%" align="left"> <tr> <td width="16%" align="left" class="list"><b>OBJECT</b></td> <td width="34%" align="left" class="list"><b>ADDRESS</b></td> <td width="17%" align="left" class="list"><b>ROOMS</b></td> <td width="12%" align="left" class="list"><b>BEDS</b></td> <td width="21%" align="left" class="list"><b>AREA</b></td> </tr> <?php $lang="en"; $con = mysql_connect("localhost","xx","xx"); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("stockholmbudget", $con); //för att ta från rätt tabell if ($lang=="sv") { $result = mysql_query("SELECT * FROM `lgh` WHERE `dold`='Nej' ORDER BY `objectnr`"); } else { $result = mysql_query("SELECT * FROM `lghen` WHERE `dold`='Nej' ORDER BY `objectnr`"); } $i = 0; while($row = mysql_fetch_array($result)) { $i++; $dold=$row['dold']; //if($i%2) //{ //$bg_color = "#CCCCCC"; //} //else { //$bg_color = "#FFFFFF"; //} $objectnr=$row['objectnr']; //för att endast få med innerstadsobjekt! if ($objectnr[0]=="2") { if ($dold=="Nej") { echo '<tr> <td class="list" width="15%" align="left"><a onmouseover="javascript:this.style.cursor=\'pointer\'">'.$row["objectnr"].'</a></td> <td class="list" width="34%" align="left"><a onmouseover="javascript:this.style.cursor=\'pointer\'">'.$row["adress_fejk"].'</a></td> <td class="list" width="10%" align="left">'.$row["antal_rum"].'</td> <td class="list" width="23%" align="left">'.$row["baddar"].'</td> <td class="list" width="15%" align="left">'.$row["omrade"].'</td> </tr>'; } } } ?> </table> </div> </div></td> <td rowspan="2" style="background-image:url(images/shape_bg_middle.jpg)"></td> </tr> <tr> <td align="right" valign="top"> <p class="bodytext"><a href="page2.php"><font color="#FF9900"><b>more information >></b></font></a> | <a href="version2.php"><font color="#FF9900"><b>version 2 >></b></font></a></p> </td> </tr> <tr> <td height="7" style="background-image:url(images/shape_bg_bottomleft.jpg)"></td> <td valign="top" colspan="3" style="background-image:url(images/shape_bg_middle.jpg)"></td> <td align="center" style="background-image:url(images/shape_bg_middle.jpg)" valign="top"></td> <td style="background-image:url(images/shape_bg_bottomright.jpg)"></td> </tr> </table> <!-- end #mainContent --> </div> <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="headlines" />...
Reply With Quote
Bookmarks