WordPress.org

Support

Support » How-To and Troubleshooting » Using “margin-left” – different results in Opera and FF.

Using “margin-left” – different results in Opera and FF.

  • Hello.

    I’ve made a mouseover-effect on two of my links, to show up a picture over my header.
    The picture that pops up, has to be perfectly over another picture that already is in the header.
    To do this, I used the “margin-left”-command.

    After lots of trying and failing, I found the right value.

    At least for Firefox and IE.

    When trying it out in Opera 8/9, it has moved off a few pixels to the right.

    How come, and how do I fix this?

    The mouseOver-technique I used, was the one I found at:
    http://www.meyerweb.com/eric/css/edge/popups/demo2.html

Viewing 7 replies - 1 through 7 (of 7 total)
  • It picks up the CSS file perfectly, but because of different float behaviors, Opera will display it differently. There are seeming differences between how browsers will display different CSS rules.

    It seems Opera has an issue for a lot of folks with their templates. I’ve yet to see it resolved…maybe someone will correct me?

    Thanks a lot for the answer!

    I really hope there’s a way to fix this. It’s just a matter of a few pixels.
    Is there a better way to do this, rather than using the “margin-left” to adjust the mouseOver-picture?

    I am aiming to not use Javascript, that’s the reason for why I used the above-mentioned method.

    I guess just experiment – something like:
    margin: 0 -3px;
    margin: left -3px;

    Ok I’ve fumbled around with your suggestion, not giving any good results, unfortunately.

    I’ll post the code, so you can perhaps guide me through this.

    This code is in my header.php, with my link:
    <li class="page_item"><div class="guy"><a href="?page_id=15">About Us<img src="images/hover_guy.jpg"></a></div>

    And this code is in my CSS-file:
    #navcontainer ul li.page_item div.guy a:hover img<br />
    {<br />
    position: absolute;<br />
    top: 10px;<br />
    margin-left: 212px !important ;<br />
    height: 197px;<br />
    width: 159px;<br />
    }

    Any suggestions?

    I’m sorry that I’m bumping this, but I have yet to find a solution to this problem.

    If you need more info (f.x. more code) to look at, please tell me.

    I really hope to find out of this, but need some help.

    I’ve been experimenting, also and can’t get Opera to behave, Sorry.
    Anyone else?

    I can’t seem to fix this problem. IE and FF handles it just the way it should, while Opera moves the two images a few pixels to the right.

    Check it yourself at the page godownunder.net – and hover over About Us and Guestbook.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Using “margin-left” – different results in Opera and FF.’ is closed to new replies.
Skip to toolbar