www.webdeveloper.com
Results 1 to 2 of 2

Thread: Weird look only in IE

  1. #1
    Join Date
    Mar 2008
    Posts
    54

    Weird look only in IE

    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 &gt;&gt;</b></font></a> | <a href="version2.php"><font color="#FF9900"><b>version 2 &gt;&gt;</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" />...
    /Lorkan

  2. #2
    Join Date
    Jul 2006
    Posts
    207
    It would help us a lot if we could see a link to your site. I tested your coding out and it was very messy, I don't think it was the way you wanted it to be.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles