Safari only float issue

[equinesites]

Hello,

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">
<li>
<a href="index.html">Home</a></li>
<li>
<a href="#">Services</a>
<ul>
<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>
</ul>
</li>
<li>
<a href="quotes.html">Quotes</a></li>
<li>
<a href="contact.html">Contact</a></li>
<li>
<a href="#">About</a>
<ul>
<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>
</li>
</ul>
</div>
</div>
----------------------------------------------------------

Code:

ul.dropmenu {
float: left;
padding: 0px;
display:block;
height:30px;
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!

[SuzyUK]

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

<p>

and

<img..

and how you're aligning the elements inside the menu itself, i.e.

display: inline

or

floated <li>'s

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

[alt131]

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.

[equinesites]

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!

[alt131]

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 :)