Guys could you help I have this image on top of the avatar on user profile that uses this css
.profile_top_poster {
margin-top: -3px;
padding-left: 53px;
position: absolute;
}
Chrome and Firefox work great but on IE image padding is off how to make it work?????
http://letsforum.com/User-victor
This code seems to work but is it cool to use????
@media screen and (min-width:0\0) {
.profile_top_poster {
padding-left: 97px;
}
}
(2014-02-04, 12:51 AM)marcus123 Wrote: [ -> ]Guys could you help I have this image on top of the avatar on user profile that uses this css
.profile_top_poster {
margin-top: -3px;
padding-left: 53px;
position: absolute;
}
Chrome and Firefox work great but on IE image padding is off how to make it work?????
http://letsforum.com/User-victor
This code seems to work but is it cool to use????
@media screen and (min-width:0\0) {
.profile_top_poster {
padding-left: 97px;
}
}
Hi,
Try this, see if it works:
.profile_top_poster {
margin: -3px 50px 0 53px;
position: absolute;
}
Thanks for your help but unfortunately IE is not affected I don't understand why?
(2014-02-04, 01:30 AM)marcus123 Wrote: [ -> ]Thanks for your help but unfortunately IE is not affected I don't understand why?
Did you delete or comment out the override first?
@media screen and (min-width:0\0) {
.profile_top_poster {
padding-left: 97px;
}
}
Yes, your CSS works with Firefox and Chrome but on IE image stays in the middle if the avatar?
Did you check your code on IE?
Try using an HTML conditional to apply margin that will only show within IE.
<!--[if IE]>
<style type="text/css">
.profile_top_poster {
padding-left: 97px;
}
</style>
<![endif]-->
or the better version:
<!--[if IE]>
<style type="text/css">
.profile_top_poster {
padding: 0 0 0 97px;
}
</style>
<![endif]-->
(2014-02-04, 01:41 AM)marcus123 Wrote: [ -> ]Yes, your CSS works with Firefox and Chrome but on IE image stays in the middle if the avatar?
Did you check your code on IE?
I think I know what the problem is. This is only another guess, but remove align="right" from the td:
<td width="15%" valign="middle" align="right">
<span class="profile_top_poster"><img src="images/top_poster.png" ilo-full-src="http://letsforum.com/images/top_poster.png"></span>
<span class="post_avatar"><span class="post_avatar"><img height="100" width="100" alt="" src="./uploads/avatars/avatar_76.gif?dateline=1371235029" ilo-full-src="http://letsforum.com/uploads/avatars/avatar_76.gif?dateline=1371235029"></span></span></td>
This will move the entire avatar with the ribbon to the left, but it should show exactly the same on all browsers. I'm only guessing, but see if it works.
Ooooo I see what you're trying to do.
.profile_top_poster {
position: absolute;
top: 0;
right: 0;
}
align="right" was there by default I don't want to mess with default template settings!
HTML conditional doesn't work either.
Guys thanks very much for trying fixing this issue!
(2014-02-04, 01:51 AM)CorysRevenge Wrote: [ -> ]Ooooo I see what you're trying to do.
.profile_top_poster {
position: absolute;
top: 0;
right: 0;
}
The image has to be over the avatar!
Try:
.profile_top_poster {
position: absolute;
top: 0;
right: 0;
}