Strange(?) Opera Floating

Posted by SkaveRat on Stack Overflow See other posts from Stack Overflow or by SkaveRat
Published on 2009-08-14T11:18:14Z Indexed on 2010/03/18 4:11 UTC
Read the original article Hit count: 285

Filed under:
|
|
|

I have some strange floating behaviour on opera (IE f's up completely different, but that's for later). I'm floating the i-icons to the right. It works nicely on Fx and WebKit, but opera shifts the icons down a bit. Anyone got an idea how this happenes?

CSS:

.dataRow {
	margin: 5px 0;
	clear:right;
}
.dataRow label{
    display: block;
    float:left;
    width: 160px;
    vertical-align: middle;
    font-size: 80%;
}
.dataGroup a img {
    border:0;float:right;
    position:relative;
    right:0;
}
.dataGroup a:hover {
    background:#EBEDC7;
    text-decoration:none;
}
.dataGroup a.tooltip span {
    display:none;
    padding:2px 3px;
    margin-top:20px;
    width:100px;
    font-size: 80%;
 }
.dataGroup a.tooltip:hover span {
    display:inline;
    position:absolute;
    border:1px solid #632D11;
    background:#C2BD6C;
    color:#fff;
}

HTML:

<fieldset class="dataGroup">
<div class="dataRow"><label>Foobar:</label> <input name="foobar" size="10" value="somedata" /> <a href="#" class="tooltip"><img src="/img/admin/information.png"/><span>Tooltip Info</span></a></div>
</fieldset>

FireFox

Webkit

Opera

© Stack Overflow or respective owner

Related posts about html

Related posts about css