#1
  1. How may I help?
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    At a crossroads where hacked and standard code meet.
    Posts
    445
    Rep Power
    27

    Negative Margins and Opera 9.5


    Does anyone know how to get this code to display correctly in Opera?
    HTML4STRICT Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=8">
    <style type="text/css">
    p {
    }
    .mouse {
     display: inline-block;
     padding: 6px;
     margin: -6px;
    }
    .mouse:hover {
     background: #888;
     border: 2px solid black;
     padding: 4px;
    }
    </style>
    </head>
    <body>
    <p>A <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span></p>
    </body>
    </html>
    I has attached some screenshots of my results. When I hover over an element on the right or left edge of the screen, the background and border that results clips because of my negative margins.
    Attached Images
    Like my answer? Click on the Scale Icon at the top of this box and give me some more rep points!

    Brian J. Fink
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    So why are you using the negative margins?

    Have you tried using position:relative?

    By the way, the X-UA-Compatible <meta> isn't needed. IE8 won't display like IE7 by default anymore.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. How may I help?
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    At a crossroads where hacked and standard code meet.
    Posts
    445
    Rep Power
    27
    To realign my hoverables with the rest of the document, so there's no extra space around them. It works on Firefox, IE and Safari, but Opera chokes.
    Like my answer? Click on the Scale Icon at the top of this box and give me some more rep points!

    Brian J. Fink
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    It seems to be a bug. I can't seem to find a workaround for it.

    Please report it.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. How may I help?
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    At a crossroads where hacked and standard code meet.
    Posts
    445
    Rep Power
    27
    Yeah, I just reported it to them the other day. Frustrating. It's been doing that in various forms since I've been testing with Opera, spanning several versions. The bug is very well hidden.
    Like my answer? Click on the Scale Icon at the top of this box and give me some more rep points!

    Brian J. Fink

IMN logo majestic logo threadwatch logo seochat tools logo