Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Safari only float issue



10:22 pm on Jul 8, 2011 (gmt 0)


On my site, I have a drop down menu, and in the div with it are a logo floating left, and text <p> set to float right. Works great in Firefox and IE8 ( I still need to test in older IE) but in Safari the menu slides too far up. Here is my code and the relevant (I think) CSS styles:

<div id="header">
<div id="headcontent"><p class="headernos">555-555-1234</p><img src="gfx/logo.jpg" class="floatleft" />

<ul id="nav-one" class="dropmenu css-only">
<a href="index.html">Home</a></li>
<a href="#">Services</a>
<li><a href="business.html">Business Insurance</a></li>
<li><a href="personal.html">Personal Insurance</a></li>
<li><a href="health.html">Health Insurance</a></li>
<li><a href="payroll.html">Payroll Services</a></li>
<li><a href="riskmanagement.html">Risk Management</a></li>
<li><a href="payment.html">Make a Payment</a></li>
<a href="quotes.html">Quotes</a></li>
<a href="contact.html">Contact</a></li>
<a href="#">About</a>
<li><a href="company.html">The Company</a></li>
<li><a href="staff.html">Our Staff</a></li>
<li><a href="companies.html">Companies We Represent</a></li>
<li><a href="directions.html">Directions</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="employment.html">Employment</a></li>



ul.dropmenu {
float: left;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
margin-top: 2px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 130px;
background-color: transparent;
#headcontent {
width: 1000px;
margin-right: auto;
margin-left: auto;
height: 150px;
.headernos {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #003366;
float: right;
margin-top: 60px;

Thanks for any help!


9:51 am on Jul 9, 2011 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Hi equinesites, and Welcome.

I don't think that's enough of the CSS code to be able to help without a guess or 2 ;) - e.g. is the menu horizontal or vertical.

It would really help to see all the code for everything inside the header including what margins etc you have on the floated
and how you're aligning the elements inside the menu itself, i.e.
display: inline
floated <li>'s

Oh, and could you give the dimensions of the logo.jpg


3:07 pm on Jul 9, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member

HI equinesites, and welcome to WebmasterWorld :).

Thanks for posting a code sample, and while Suzy is right that some more information would help pin-point the exact issue, before adding more code, it sounds as if this may be an issue with floats. Recalling that per the recommendations, an element that Floats (9.5) [w3.org] is shifted left/right along the same line. Subject to the clear property, if there is not enough room for all the elements to fit on one line, the float will "drop" down to the next line until it can fit in the allowed width.

In this case you have the <p> floating right of the next element which is the logo image. <img> is itself floating left of the next element which is <ul>. As there is no element following the ul, the float is redundant. That means that if all the elements were narrow enough to fit on a single line they would appear, from left to right as <img> <p> <ul>. However, you have said that in Safari the <ul> "slides too far up". That makes it sound as if ie8 and ff are "dropping" the <ul> to a lower line, while Safari is calculating there is enough room for the <ul> to be drawn on the same line so that it appears to have slid "upwards".

I'm not seeing a difference between ie8, ff 4 and winsafari5 on the provided code and can't see any reason winsafari would calculate the dimensions differently, so there may be something else in the code affecting this. However, as you want browsers to position the items according to whether they "fit" within the total 1000px width of #header, plus be able to lay out the page correctly without waiting for the image to download, it is good practise to set widths on your elements. That will also help problem-solve as you can adjust the widths to see if that is what is causing the layout difference. Also, try applying a clear (9.5.2) [w3.org] as well.

And of course, post back with more information if that doesn't provide any clues.


6:55 pm on Jul 9, 2011 (gmt 0)

Thanks, guys. ALT131, looks like assigning a width to the horizontal menu remedied the issue. I had not thought it through in those terms. So glad to find this forum - thanks so much for your help!


12:03 pm on Jul 13, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member

Fantastic equinesites, pleased you have a solution, and thanks for letting us know what it was.

... and now you've found us, don't forget to set your sticky preferences to notify you when new posts are made to the forum - and join in :)

Featured Threads

Hot Threads This Week

Hot Threads This Month