Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jul 2005
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Can't get image positioned correctly in Firefox.

    I have a tricky little problem where I can't get an image where I want it in Firefox. I've put a litle red border round the white triangle image to show where the problem image is.

    The url is to look at is: http://aeromedicgroup.fresh-interact....uk/index.html

    In IE6, the image is positioned right up in the rh corner of the blue navbar, where I want it. But in Firefox, the image isn't positioned correctly but I don't know how to correct it.........

    Here's the CSS

    #cornerimage
    {
    padding:0;
    margin-right:0;
    float:right;
    border: solid 1px red;
    }


    has anyone got any ideas?

    Thanks.

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    margin-top:-3px;
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).

  • #3
    New Coder
    Join Date
    Jul 2005
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi, thanks for that.

    If I put it at margin-top:-4px;, then I do get the small image right in the corner, as desired. IE doesn't look quite as good now (although it's acceptable). Is there anything to make it look even better (without creating a different stylesheet for each browser) or do I just have to accept this compromise?

    Thanks again.

  • #4
    Regular Coder Pepe, the bull's Avatar
    Join Date
    Feb 2005
    Location
    Vancouver, WA
    Posts
    163
    Thanks
    1
    Thanked 16 Times in 16 Posts
    Code:
    #cornerimage img
    {
    padding-top:0;
    margin-right:0;
    margin-top:0;
    float:right;
    vertical-align:top;
    }
    Pepe, the bull

  • #5
    New Coder
    Join Date
    Jul 2005
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for your help you two.

    that code didn't quite work Pepe - but the fact your code was "tighter", (it had #cornerimage img) made me realise my code probably wasn't quite accurate enough for Firefox. So I just put the #cornerimage img in!

    Thanks.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •