CSS float/clear positioning problem -...

Hello,

Am slowly making some progress following recent difficulties
with CSS.

At the moment things are finally looking the same on
different browsers EXCEPT the menu bar to the right of the movie:


http://www.notjustthenews.co.uk/page2_movies.html

Basically in Internet Explorer it's where I want it to be,
level with the top of the movie, but in Safari it drops down much
lower.

Is there anything I can do to stop this happening?



This is the CSS I'm using for the menu:

width: 300px;

height: 160px;

float: left;

margin-top: 40px;

margin-bottom: 0px;

margin-left: 85px;

display: block;

clear: none;



I was recommended using floats and clears, rather than
positioning things relatively. They worked with the other elements
on this page. In fact it's great because what you see in the design
view of dreamweaver is what you get on all the browsers...that is
with the exception of this problem.CSS float/clear positioning problem -...
I looked at the page in Safari (2.0.4), Win IE v6 and Firefox
(2.0.0.3) and the menu list is positioned pretty much the same in
all browsers.



You could try zeroing out all your margins and padding in a
global css style in the top of your css. This is a good idea as
browsers implement padding and margins differently and by zeroing
out the values you start without any odd spacing that you don't
want.



I use something like this in my style sheets:



html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form,
fieldset{

margin: 0;

padding: 0;

border: 0;

}



Regards



Nick Barling

www.barkingweb.com

cosmetic products