My picture moves below navigation?

[mumford]

Hi

Could someone help me with this please http://www.pjlocums.co.uk/new/

You will see that in IE the main pic slips under the navigation, is this the box model dillema, I don't think it is.

Also the last navigation item when viewed in Firefox the border at the top is 1px bigger, I have heard about a rounding off bug, but can't seem to get it too work in this case.

Anyone have any ideas for my 2 questions!
Thank you

[ronaldb66]

I don't know about the border thing (don't have FF around), but you image being pushed down does seem to be caused by the left floated menu; although the numbers add up and you avoided box model issues, I suspect it to be some sort of a roundoff error.

You could try to narrow the menu one or two pxs, or take some off of your image. By the way: it would probably be preferable to implement it as a background image.

[mumford]

Thanks but......If I do that then it will look odd in the other browsers

any other suggestions?

[ronaldb66]

First sort the problem out; then worry about the pixel-perfect look.
I asked you to do so to see if that indeed was the cause; if it is not, we'll need to think again.

[mumford]

Hi

I did try what you said but that did not work here is an example of where I am at the mo

http://www.pjlocums.co.uk/new/index-test.htm

I put the image in a div as a background image and floated that div right.

But I know need the image the grey on the left) to align with the top of the left hand menu.

But when I add margin-top to the div, i get differing results in the browsers.
Am I making hard work of this!!, there must be a simpler way of what I am trying to achieve.!!

[mumford]

Okay take 2!

This is what I have now http://www.pjlocums.co.uk/new/index2.htm

When viewed in Netscape the pic does not line up with the bottom of the menu.

This is becoming a right mess, for such an easy layout here is what I am trying to achieve http://www.pjlocums.co.uk/new/layout.jpg

I could really do with some help!!

[ronaldb66]

You could adjust the height of the div that's holding the image to match up with the menu and attach the image bottom right, but you might be better off with a different grouping of elements.

In image of the desired end result you supplied, there's a strong relation visible between the menu and the header image (the one with the people); if these need to be fixed on a common base line, it might be better to place the menu in a page-wide container and align it to the left, while the background image (people and tag line) sits bottom right in this container.
You'll need to provide ample height on the menu container to prevent the top row of heads being severed.

On top of the menu container, both logo and nav bar could sit in a header container which again spans the page width.

[mumford]

Thanks for your patience and help, I will try it and let you know if I have any problems, I think I may have already tried that though!