Floating image doesn't float next to the menu bar

I tried to float an image next to the menu bar (inline list). It shows properly in all the other browsers except IE. I’m using IE7 to test and the menu bar ends up to be way lower than the menu bar. Can anybody tell me how to fix it?

You can click here to see the page.

Does the same thing in Chrome, FWIW. (OK in FF, IE9, and IE8.)

Hi dawnfu, Welcome to SitePoint :slight_smile:

Can anybody tell me how to fix it?
As a general rule floats should come before the element they need to sit beside in the source order. It’s not a problem with most modern browsers but older versions of IE (and chrome) need the floats to come first.

The image in question should really be a background image since it is not actual content. Set up a new div called #logo and hook the image to it as a BG. Then float that div and bring it before your menu in the source order. You can also loose the div on your menu and apply the ID directly to the UL.

Like this -

<div id="container">
    [COLOR=Blue][B]<div id="logo"></div>[/B]
    [B]<ul id="topmenu">[/B][/COLOR]
        <li>Home</li>
        <li><a href="webuy.html">What We Buy</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="faqs.html">FAQs</a></li>
        <li><a href="contact.html">Contact Us</a></li>
        <li><img src="http://www.sitepoint.com/forums/images/phone_number.png" /></li>
    [COLOR=Blue][B]</ul>[/B][/COLOR]
</div>
[B]#logo[/B] {
    float:left;
    width:250px;
    height:62px;
    background:url(images/logo.png);
}

I’d argue that while yes the IMAGE shouldn’t be in the content, the text the image represents should be… you’ve got an obvious heading, and no heading tag or text for it. This is further compounded by using line-breaks to do padding’s job, an H1/H2 pairing that doesn’t look like the start of two separate content sections and as such shouldn’t even be separate heading tags, (neither from a content perspective actually appear to be headings since they are not the start of subsections!), div around your UL’s for no fathomable reason… Tranny doctype saying you’re in transition from 1997 to 1998, (which assuming you are building a NEW page isn’t exactly a good thing)… no media type on the CSS LINK… I could go on and on.

As I’ve said several times, CSS is only as good as the markup it’s applied to, so first you need to clean up your HTML. If I was coding that page the markup would probably be more like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Sell your used, unwanted or surplus telecom equipment to Resale Technologies.
</title>

</head><body>

<div id="pageWrapper">
	<h1>
		Resale<br />
		Technologies
		<span><!-- image replacement --></span>
	</h1>
	
	<ul id="mainMenu">
		<li class="current"><a href="\\">Home</a></li>
		<li><a href="webuy.html">What We Buy</a></li>
		<li><a href="about.html">About Us</a></li>
		<li><a href="faqs.html">FAQs</a></li>
		<li><a href="contact.html">Contact Us</a></li>
		<li class="phone">
			214-493-2100
			<span><!-- image replacement --></span>
		</li>
	</ul>
	
	<p class="homeHeader">
		<strong>Unparalleled service is assured!</strong><br />
		Selling your used, unwanted or surplus telecom equipment?<br />
		<a href="#" class="button"><span>Contact Us Now!</span></a>
	<!-- #homeHeader --></p>
	
	<div class="phoneBanner"></div>
	
	<p>
		Resale Technologies is a nationwide buyer of used telephone and networking equipment, including IP products.  We offer competitive pricing on all makes and models of business phone systems, as well as data and networking components.  Whether you are a small business or a major corporation - and whether you have a few surplus items or are replacing your complete telecom system - we make it easy for you to earn money by selling your old equipment.  We offer convenient removal of your equipment, courteous service and prompt payment.
	</p><p>
		We buy telephone and networking equipment by Avaya/Nortel, Cisco, NEC, ShoreTel, Polycom and Toshiba, as well as other popular brands.   From complete phone systems, circuit boards and individual phones to routers, switches and servers, we provide the opportunity for you to recognize additional revenue from your unwanted telecom equipment easily and conveniently.
	</p>
	
	<div id="footer">
		&copy; 2011 Resale Technologies, LLC. All rights reserved. Disclaimer: Resale Technologies LLC has no affiliation with any manufacturers or brand names listed on this website.  All logos and trademarks are the property of their respective owners.
	<!-- #footer --></div>
	
<!-- #pageWrapper --></div>

</body></html>

If insomnia kicks in, I’ll belt out the CSS to make that work.

… and here it is:
Sell your used, unwanted or surplus telecom equipment to Resale Technologies.

as with all my examples the directory:
Index of /for_others/dawnfu

is unlocked for easy access to the bits and pieces.

Thanks, Rayzur! I will give it a try. :slight_smile: