On 19/06/2009, at 4:51 AM, JGardner wrote:
> Hello,
>
> I am looking for information regarding how opera and safari handle
> negative margins. I am working on a site - http://www.lauramcguire.com/
> which I used a negative margin to place the navigation at the top
> right of the web page. It works fine in I.E. and Firefox but does
> not show up in safari and opera. Any assistance is greatly
> appreciated.
>
> Thanks,
> Jennifer
>
Hi Jennifer -
The issue is not how negative margins are handled - all browsers are
applying it. The issue is where the element sits before the negative
margin is applied. In firefox the nav is clearing the image and in
opera/safari it isn't. That means that when you apply a negative
margin it puts it out of the viewport.
I don't know why firefox is making the span clear the image (anyone?
Bueller?) but here is a solution:
#nav { margin-top: 50px; float: right; width: 300px; /* IE needs
explicit width */ }
#logo { float: left; }
#content { clear: both; }
FWIW I would have another look at your markup as well. You are using
images for textual elements. Have a look into some image replacement
techniques (there are lots, just google). That way you can mark things
up structurally/semantically and then hide the text and display the
images as background images.
Cheers, Tim
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
