I'm having a problem with justify alignment of list items (<li>) in an ordered list (<ol>) in Opera. There are different spacings in front of the lines.
Opera version:
Version: 11.62
Build: 1347
Platform: Win32
System: Windows 7
Screenshots:
(reproduced at jsfiddle.com)
Test code:
http://jsfiddle.net/ySmJZ/
ol {
list-style: decimal;
margin: 16px 0px;
padding: 0px 0px 0px 40px;
text-align: justify;
}
It's a known bug in Opera (CORE-41499). There isn't really a workaround, except to avoid using text-align:justify.
Yes, this is a known bug in Opera (even in 12.01 (x86)), but there IS a workaround, written by deathshadow here:
http://my.opera.com/community/forums/topic.dml?id=1424852&t=1347118644&page=1#comment12696422
Citing:
"One workaround (until/if they fix it) is an extra SPAN or DIV inside the LI wrapping all the content set to display:inline-block; vertical-align:top;"
I tried it, and it really works (at least in Opera 12.01 (x86)):
http://jsfiddle.net/Sk8erPeter/ySmJZ/10/
BEFORE
AFTER
Related
I'm using the FB like box widget on my website. I noticed that bigger images published on FB are appearing distorted in the box.
I'm seeing that the css responsible for this is:
.uiScaledImageContainer img {
height: 100%;
min-height: 100%;
}
Is there a way I can force height: auto in my css?
Apparently anything I declare for this element in my sytlesheet is ignored, even using !important.
You can't edit the CSS in Facebook's iFrame.
I'm having the same issue but there is another bit of code that is overiding the "height:100%" with "height: auto" and i'm getting the same outcome. If I change the min-height to "auto" it seems to fix it.
The original code is:
.fan_box .uiStreamStory .uiStreamAttachments .photoRedesignAspect .img, .fan_box .uiStreamStory .uiStreamAttachments .photoRedesignCover .img, .fan_box .photoRedesign .img, .uiStreamStory .videoRedesign .uiVideoThumb img {
height: auto;
left: 0 !important;
width: 100%;
And
.uiScaledImageContainer img {
height: 100%; <!-- this is being overwritten -->
min-height: 100%;
position: relative;
Now we just need someone to update facebook's likebox.php.
Surprisingly, IE is the only browser that this isn't a problem. And for some reason firefox doesn't load the app altogether...
since nothing has changed until now here are some more details I found out to this problem:
It only appears to me on images that are in an album, not single
images that were uploaded in a post.
It appears to me in chrome browser and on iphone and android devices, not on firefox and
internet explorer.
Maybe that helps.
This CSS produce different results in latest browsers:
input {
border:1px solid #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
The radius size in IE is smaller:
How do I fix this?
The versions of IE till 8.0 doesnot support Border-radius as far as i know. So I used transparent PNG images which I have created instead of Div's which needs border-radius and also it solved the browser compatibility issues.
EDIT For IE9: you may be using quirks mode that's why it is not compatible.
Change the IE specific value by 1px,
border-radius: 4px; (instead of 3px)
My background-image transition is working fine in Chrome, but does nothing in Firefox. I am new to CSS3 transitions. Did research and my syntax seems to be correct. From what I have read FF should support this. I am on FF 12.0. How come this CSS3 transition does not work in Firefox.
No javascript. No workarounds. Just an explanation of why this is failing would be wonderful.
http://jsfiddle.net/VCdGt/3/
a.call_to_action
{
text-decoration: none;
display: block;
color: #232744;
font-size: 20px;
font-weight: bold;
height: 47px;
width: 185px;
overflow: hidden;
margin: 10px auto 15px auto;
text-align: center;
border: none;
background: yellow;
background-image: url(http://www.pslover.com/images/thumb/2751.jpg);
-webkit-transition: background-image .5s linear;
-moz-transition: background-image .5s linear;
}
a.call_to_action:hover {
background: orange;
background-image: url(http://www.tutorialdash.com/avatars/3b1f70c20325d8676ce1f56cb9b43f17.gif);
color: #4F4246;
}
Found the answer in the MDN docs.
http://oli.jp/2010/css-animatable-properties/#background-image
background-image
This is still a little up in the air, with “only gradients” in the
current Working Draft, no background-image at all in the current
Editor’s Draft, and “Animatable: no” for background-image in CSS
Backgrounds and Borders Module Level 3 Editor’s Draft. However,
support has appeared in Chrome 19 Canary, and this is something that
designers want. Until widespread support arrives this can be faked via
image sprites and background-position or opacity.'
At this time I have found that nobody actually supports gradients (Chrome 17, FF 12, IE9). Only Chrome supports background-image (that's why it doesn't work in FF for me).
It is 2014 and background-image property is still not animatable:
http://dev.w3.org/csswg/css-backgrounds/#background-image
Works fine in webkit but not in Firefox. It seems that the only way to make some animation is to use jQuery fallback for Firefox.
I was wondering if there is a way to apply a text gradient in Firefox? I can get it to work in Chrome and Safari and the code goes like:
h1 {
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#000000));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
text-transform: uppercase;
font: bold 4em "Lucida Grande", Lucida, Verdana, sans-serif;
}
But there doesn't seem to be anything out there for Mozilla.
Unfortunately, I think only WebKit-based browsers implement the text-fill-color property. As far as I'm aware, there is no workaround for Mozilla yet.
FireFox does now appear to support the webkit parameters, aliasing -webkit-background-clip as background-clip (webkit doesn't alias it, hence the most compatible way at present appears to be to use -webkit-backgroup-clip as both FF and WK understand it)
What I'm trying to accomplish is creating a gradient using only css... What I'm doing works in all browsers except firefox 3.5...here's the code:
#gradient {
color: #fff;
height:50px;
padding:0;
width:940px;
margin:0 auto;
background: -moz-linear-gradient(top, #CFE782 0%, #9BCB2A 2%,#5DA331 97%, #659635 100%);/* For Mozilla/Gecko (Firefox etc) */
}
I left out the background for the other browsers... SO here's my question...
Does anyone know why this is not working in Firefox 3.5 and what would work???
As far as I know, the reason why its not working is because -moz-linear-gradient was only introduced in Firefox 3.6.