treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Forums

Illustration by Nick Sirotich

I have display:inline but my float still breaks in IE!

  • brianatlarge
    Permalink to comment #
    Website:
    http://studentseatfree.com/search.php

    I have a skyscraper ad on the right side of the page. It looks right in FF but in IE I can't get it to go over to the middle under the box ad.

    HTML:

    <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">
    <html>

    	<head>
    		<title>SEF Search Results</title>
    		<meta http-equiv=\"Content-type\" content=\"text/html; charset=UTF-8\">
    		<link rel=StyleSheet href=\"main_style.css\" type=\"text/css\">
    		<script src=\"jquery.js\" type=\"text/javascript\"></script>
      <script type=\"text/javascript\"> 
      $(document).ready(function()
      {
    	//for div
    	 $(\"table.contentbox:even\").css(\"background-color\", \"#f2fef2\");
    	  $(\"table.contentbox:odd\").css(\"background-color\", \"#daf2c8\");
      });
      </script>

    	</head>
    	<body>
    	<div class=\"back1\"> 
    		<div class=\"back2\">

    	<div class=\"everything\">
    		
    	<div class=\"searchbox\"></div>
    	
    	<form class=\"searchformbox\" action=\"search.php?search_query=&amp;sort_type=restaurant_name\" method=GET>
    	<div class=\"sort-area\">
    		Sort by: <select name=\"sort_type\">

    			<option value=restaurant_name selected>Restaurant Name
    			<option value=restaurant_type>Restaurant Type
    			<option value=discount_type>Discount Type
    		</select>
    		<input type=submit value=\"Sort\"></div>
    	<div class=\"search-area\">
    		<input type=text name=search_query value=\"\">
    		<input type=submit value=\"Search\"></div>
    		
    	</form>
    	
    	<div class=\"logobox\"><a href=\"index.php\"><img src=\"images/newlogo.jpg\"></img></a></div>

    	<div class=\"adtopbox\"><a href=\"http://www.studentseatfree.com/advertise/\"><img src=\"http://www.studentseatfree.com/images/ads/sefbanner.jpg\"></a></div><div style=\"clear:both\">
    	<div class=\"refine\">
    		<div style=\"float:left; display:inline;\">
    			<div class=\"cssnav\"><a href=\"#\" title=\"Discounts\"><img src=\"images/button.jpg\" alt=\"Discounts\" /><span>Discounts</span></a></div>
    			<div class=\"cssnav\"><a href=\"#\" title=\"Special Deals\"><img src=\"images/button.jpg\" alt=\"Special Deals\" /><span>Special Deals</span></a></div>
    		</div>
    	</div>
    	<div style=\"clear:both\"></div>

    	
    	<div class=\"adbox\"><a href=\"http://www.studentseatfree.com/advertise/\"><img src=\"http://www.studentseatfree.com/images/ads/sefmedium.jpg\"></a></div>
    	<div class=\"skyscraper\"><a href=\"http://www.studentseatfree.com/advertise/\"><img src=\"http://www.studentseatfree.com/images/ads/sefskyscraper.jpg\"></a></div>
    	<div class=\"results\">
    	&lt;&nbsp;1 &gt;	
    	&nbsp;<a href=search.php>All Listings</a><br>
    	</div>
    	
    	
    	
    	<br>
    	
    		<table class=\"contentbox\" border=0 cellspacing=\"5\" onmouseover=\"this.style.backgroundColor='#fee393'; this.style.cursor='pointer';\" onclick=\"window.location.href=''\" onmouseout=\"\">

    			<tr>
    				<td class=\"restname\" colspan=3 width=\"400px\">Caliente Grille</td>
    				<td><a target=\"_new\" href=\"http://maps.google.com/maps?f=q&amp;hl=en&amp;q=Caliente+Grille%2C+3319+Hardy+St%2C+Hattiesburg%2C+MS+39402&amp;ie=UTF8&amp;iwloc=addr\">View map</a></td>
    			</tr>
    			<tr>
    				<td width=\"100px\"><img src=\"http://www.studentseatfree.com/images/logos/wendys.jpg\"></img></td>
    				<td width=\"10px\">&nbsp;</td>
    				<td class=\"description\" width=\"300px\">2 for $10 on Tuesdays</td>

    			</tr>
    		</table>

    	<br>
    	
    		<table class=\"contentbox\" border=0 cellspacing=\"5\" onmouseover=\"this.style.backgroundColor='#fee393'; this.style.cursor='pointer';\" onclick=\"window.location.href=''\" onmouseout=\"\">
    			<tr>
    				<td class=\"restname\" colspan=3 width=\"400px\">Grand China Buffet</td>
    				<td><a target=\"_new\" href=\"http://maps.google.com/maps?f=q&amp;hl=en&amp;q=Grand+China+Buffet%2C+560+Weathersby+Rd%2C+Hattiesburg%2C+MS+39402&amp;ie=UTF8&amp;iwloc=addr\">View map</a></td>

    			</tr>
    			<tr>
    				<td width=\"100px\"><img src=\"http://www.studentseatfree.com/images/logos/wendys.jpg\"></img></td>
    				<td width=\"10px\">&nbsp;</td>
    				<td class=\"description\" width=\"300px\">10% Discount</td>
    			</tr>
    		</table>

    	<br>

    	
    		<table class=\"contentbox\" border=0 cellspacing=\"5\" onmouseover=\"this.style.backgroundColor='#fee393'; this.style.cursor='pointer';\" onclick=\"window.location.href=''\" onmouseout=\"\">
    			<tr>
    				<td class=\"restname\" colspan=3 width=\"400px\">Little Tokyo</td>
    				<td><a target=\"_new\" href=\"http://maps.google.com/maps?f=q&amp;hl=en&amp;q=Little+Tokyo%2C+3800+Hardy+St%2C+Hattiesburg%2C+MS+39402&amp;ie=UTF8&amp;iwloc=addr\">View map</a></td>
    			</tr>
    			<tr>
    				<td width=\"100px\"><img src=\"http://www.studentseatfree.com/images/logos/wendys.jpg\"></img></td>
    				<td width=\"10px\">&nbsp;</td>

    				<td class=\"description\" width=\"300px\">10% Discount</td>
    			</tr>
    		</table>

    	<br>
    	
    		<table class=\"contentbox\" border=0 cellspacing=\"5\" onmouseover=\"this.style.backgroundColor='#fee393'; this.style.cursor='pointer';\" onclick=\"window.location.href=''\" onmouseout=\"\">
    			<tr>
    				<td class=\"restname\" colspan=3 width=\"400px\">Spicy Pickle</td>

    				<td><a target=\"_new\" href=\"http://maps.google.com/maps?f=q&amp;hl=en&amp;q=Spicy+Pickle%2C+6156+US+Highway+98%2C+Hattiesburg%2C+MS+39402&amp;ie=UTF8&amp;iwloc=addr\">View map</a></td>
    			</tr>
    			<tr>
    				<td width=\"100px\"><img src=\"http://www.studentseatfree.com/images/logos/wendys.jpg\"></img></td>
    				<td width=\"10px\">&nbsp;</td>
    				<td class=\"description\" width=\"300px\">10% Discount</td>
    			</tr>
    		</table>

    		
    	
    	<div class=\"clear\"></div>

    	<div id=\"footer\">
    				<span id=\"footer_text\">
    					&copy; Copyright 2008 StuckPixel Studio LLC &amp; Jaree Marketing LLC<br>
    					All Rights Reserved<br>

    					Hattiesburg, MS
    				</span>
    				<div style=\"float: right;\">
    					<p>
    						<a href=\"http://validator.w3.org/check?uri=referer\">
    							<img src=\"http://www.w3.org/Icons/valid-xhtml10\" alt=\"Valid XHTML 1.0 Strict\" height=\"31\" width=\"88\">
    						</a>
    					</p>
    				</div>

    			</div>

    	</div>
    	</div>
    	</div>
    	<script type=\"text/javascript\">
    var gaJsHost = ((\"https:\" == document.location.protocol) ? \"https://ssl.\" : \"http://www.\");
    document.write(unescape(\"%3Cscript src='\" + gaJsHost + \"google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E\"));
    </script>
    <script type=\"text/javascript\">
    var pageTracker = _gat._getTracker(\"UA-5202505-1\");
    pageTracker._trackPageview();
    </script>
    	</body>
    </html>



    CSS:

    * { margin: 0; padding: 0; }

    img, div { behavior: url(iepngfix.htc) }

    body
    {
    font-family: Helvetica, Arial, Verdana, sans-serif;
    font-size:12px;

    }

    .back1
    {
    background:url(images/back1.jpg);
    background-position: left top;
    background-repeat:no-repeat;
    }

    .back2
    {
    background:url(images/back2.jpg);
    background-position: right bottom;
    background-repeat:no-repeat;
    }

    .searchbox
    {
    background:url(images/topgreen.png);
    background-repeat:no-repeat;
    margin:0px auto;
    height:30px;
    width:999px;
    }

    .everything
    {
    background:url(images/bg.png);
    background-position: center top;
    background-repeat:repeat-y;
    margin:0px auto;
    width:999px;
    display:block;

    }

    .villiesflyer
    {
    background:url(images/villiesflyer.jpg);
    background-repeat:no-repeat;
    margin:0px auto;
    height:1241px;
    min-height:1241px;
    width:959px;
    }


    .searchformbox
    {
    margin-top:-27px;
    margin-left:30px;
    }

    .sort-area 
    {
    float:left;
    width:300px;
    display:inline;
    }

    .search-area 
    {
    float:right;
    width:270px;
    display:inline;
    }

    .logobox
    {
    width:175px;
    min-height:135px;
    height:135px;
    margin-left:30px;
    margin-right:10px;
    margin-top:29px;
    float:left;
    display:inline;
    clear:both;
    }

    .adtopbox
    {
    background-repeat:no-repeat;
    width:730px;
    min-height:90px;
    height:90px;
    margin-left:200px;
    margin-top:-114px;
    padding-right:65px;
    float:right;
    display:inline;
    }

    .adbox
    {
    width:300px;
    min-height:250px;
    height:250px;
    float:right;
    margin-right:70px;
    margin-top:15px;
    display:inline;
    }


    .skyscraper
    {
    float:right;
    margin-right:-225px;
    display:inline;
    width:160px;
    min-height:600px;
    height:600px;
    margin-top:294px;
    }

    .contentbox
    {
    width:560px;
    min-height:100px;
    padding: 5px;
    background-position: left top;
    margin-left:30px;
    }

    .comingsoon
    {
    background:url(images/comingsoon.jpg);
    background-repeat:no-repeat;
    margin:0px auto;
    height:600px;
    width:960px;
    }


    .description
    {font-size:16px;
    }

    .results 
    {
    margin-left:30px;
    }

    .resultspadding 
    {
    padding:5px;
    }

    .restname
    {
    font-family: Helvetica, Arial, Verdana, sans-serif;
    font-size:20px;
    font-weight:bold;
    }

    .floatleft {
    float: left;
    margin: 0px 10px 10px 0px;
    }

    .refine
    {
    background-color:#eeeeee;
    min-height:35px;
    height:35px;
    width:890px;
    padding:5px;
    margin-left:30px;
    margin-top:60px;
    background-position: center top;

    }

    /*Footer*/

    #footer {
    padding:10px 0px 70px 10px;
    color:#0c0c0c;
    width:951px;
    background-color:#daf2c8;
    font-size:9px;
    text-align: left;
    line-height:12px;
    margin:35px auto 0px;
    }

    #footer img {
    float:left;
    margin-right:10px;
    }

    #footer span {
    display:block;
    float:left;
    width:300px;
    }

    #footer a {
    color:#9e8292;
    text-decoration:none;
    }

    /*end footer*/

    img {border:none}

    div.clear { clear: both; }

    .boxlink
    {
    color:#000000;
    text-decoration:none;
    }

    /*advertise page*/

    h1.adheader {color:#446a31; line-height: 30px;}
    h1.advertise {color:#446a31; font-size:70px; font-weight:bold; margin-top:60px;}

    .adintro
    {
    font-size:14px;
    width:450px;
    margin-left: 30px;
    padding-top: 20px;
    line-height:20px;
    float:left;
    display:inline;
    }

    .adpoints
    {
    font-size:14px;
    width:450px;
    margin-top:25px;
    padding-top: 20px;
    margin-right:25px;
    line-height:20px;
    float:right;
    display:inline;
    }

    .adsizes
    {
    width:450px;
    height:369px;
    min-height:369;
    margin-right:40px;
    float:right;
    display:inline;
    }

    #form1 {width:640px;}

    .contact_form
    {
    margin:0px auto;
    width:640px;
    padding:15px;
    }

    /*advertise page over*/



    /*navigation*/

    .cssnav
    {
    position: relative;
    font-family:  helvetica, arial, sans-serif;
    background: url(images/buttonoff.jpg) no-repeat;
    white-space: nowrap;
    display: inline;
    width: 144px;
    height: 35px;
    margin: 0;
    line-height: 35px;
    padding: 26px 0px 0px 0px;
    }

    .cssnav a
    {
    display: inline;
    color: black;
    font-size: 18px;
    font-weight:bold;
    width: 144px;
    height: 35px;
    color: black;
    text-decoration: none;
    }

    .cssnav img
    {
    width: 144px;
    height: 35px;
    border: 0
    }

    * html a:hover
    {
    visibility:visible
    }

    .cssnav a:hover img
    {
    visibility:hidden
    }

    .cssnav span
    {
    position: absolute;
    left: 0px;
    margin-top: 0px;
    width:144px;
    height:35px;
    padding: 0px;
    color: black;
    cursor: pointer;
    text-align:center;
    vertical-align:middle;
    line-height: 35px;
    } 
    /* navigation over */


    Thanks.
  • daGUY
    Permalink to comment #
    Didn't look at the site, but you can't declare "display: inline" on a float because a float is inherently a block-level element. Floating any element will turn it into a block, even if it's inline by default (like a span).
Add a Comment