CODEWITHSUNDEEP
htmlcsscss-floatopera
SkaveRat
SkaveRat

Reputation: 2282

Strange(?) Opera Floating

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 http://img197.imageshack.us/img197/3269/webkit.jpg

Opera http://img41.imageshack.us/img41/112/operaf.jpg

Upvotes: 4

Views: 1083

Answers (3)

Stephan Muller
Stephan Muller

Reputation: 27600

The only way to fix this is have the floating image before the input in your HTML. Unfortunately, Opera still puts a float:right on a new line when it's declared after the element it should float next to.

http://bytes.com/topic/html-css/answers/587691-float-right-goes-next-line

Upvotes: 1

Morten Bergfall
Morten Bergfall

Reputation: 2316

If you use the pseudo selector :after, like so :

.dataRow:after 
{      
    content: ".";  
    display: block;  
    height: 0;  
    clear: both;  
    visibility: hidden;
}

That should fix Opera, and of the top of my head, I believe IE8 also supports :after.

Shamelessly borrowed from Position is everything

Upvotes: 1

Akoi Meexx
Akoi Meexx

Reputation: 777

Are you using any css reset code? Off the top of my head it seems like you're getting extra padding on some of your basic elements.

Just for kicks and giggles, try removing the padding and margins on all of your elements inside dataGroup, before setting them manually.

.dataGroup *
{
    margin: 0px;
    padding: 0px;
}
...
.dataRow...

Upvotes: 0

Related Questions