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

2 answers

2
points

Why are you both floating the icons and positioning them relatively to the right? Which one works by itself? Also, are you using a CSS reset?

On a side note, you shouldn't use display: none; to hide the tooltip, but rather:

text-indent: -9999px;

or

position: absolute;
top: -9999px;
left: -9999px;

This is for accessibility reasons. Screenreaders (and search engines, for that matter) sometimes ignore elements that have display: none; applied to them. In this case, the user wouldn't know where the link would take them.

Answered almost 8 years ago by Mads Kjaer
-1
points

Yes, I'm using rest-code. The position:relative was a relict of old code. Deleting it didn't do anything.

My solution: Floating the <.input>s to the left

Answered almost 8 years ago by SkaveRat