Menu
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>
[COLOR=”red”]<td height=”10″ width=”144″ style=”background-image:url(images/shape_bg_middle.jpg)”><p align=”left” class=”style2″>inner city</p></td>[/COLOR]
<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>
[COLOR=”Red”] <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>[/COLOR]
<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” />…