It looks the way I like in chrome and safari. but it looks very strange in firefox. It appears to be cut off.I wonder if there is better way of archiving the same results as in chrome and safari for this other than use an actual image of square box. Any ideas? Hacks?
http://jsfiddle.net/vf6gh/
.square {
border:1px solid #0C6DBE;
background-color:#4293D9;
padding:5px;
}
<img class="square"></img>
Firefox applies some CSS to broken <img> tags:
img:-moz-broken:before,
input:-moz-broken:before,
img:-moz-user-disabled:before,
input:-moz-user-disabled:before,
img:-moz-loading:before,
input:-moz-loading:before,
applet:-moz-empty-except-children-with-localname(param):-moz-broken:before,
applet:-moz-empty-except-children-with-localname(param):-moz-user-disabled:before {
content: -moz-alt-content !important;
unicode-bidi: -moz-isolate;
}
If you're really planning to use <img> to simply show an square as you want, rethink it. Those tags were not made for this, and Firefox is a proof of this.
For knowledge: user-agent CSS marked with !important cannot be overriden.
Related
I know about:
#-moz-document url-prefix()
But how about the inverse? Specifically, I'm having an issue with some mobile devices adding a border radius to text input elements which I don't want. If I set border-radius: 0 Firefox renders it like this:
Which just looks terrible. I'd just like to be able to apply a rule to everything but not Firefox since it seems to be very picky about messing with form element styles.
Is this what you're looking for perhaps? I use this reset for webkit browsers that add that border-radius, this does not affect FF:
input[type="text"] {
-webkit-border-radius: 0; }
I'm debugging this site and trying to sort out some issues that arise in Internet Explorer (big surprise).
I'm adding a sub-title to several links as follows:
.subtitle a:after {
content:"The Subtitle Here";
}
On all modern browsers (and IE9) the content is center aligned because the container uses text-align:center;. However, in IE8 "The Subtitle Here" is flushed left.
Is there any way to control that with CSS?
Thanks.
Turns out you can do it easily:
I added another style rule that targets the added content...
.subtitle a:after {
text-align:center;
}
I guess IE9 and other browsers inherit the text-align property for :after content but IE8 doesn't. IE always keeps it interesting...
text-align:center
didn't work for me. This is how i got it fixed in IE8. (I have a seperate style sheet for IE8)
.printIcon:after {
content: "Print" !important;
text-align: center !important;
margin-top: 25px !important;
position:relative !important;
left:25px !important;
}
Hope this helps someone.
Neither of the answers above worked for me because of an underlying issue I had. Apparently IE8 does not support ::after, I changed it to :after and it worked just as intended.
Worth checking for!
I have this css to put an icon after each external link:
a[target="_blank"]:after {
background: url("images/external_icon.png") 0 0 no-repeat;
border: 0 none;
content: "";
padding: 0 14px 0 0;
}
If I would to change to :before instead, the icon will appear in front of the link instead. So far, so good.
But in my right-to-left version of the site, while using direction: rtl;, the icon still appears to the right of the element, instead of being "flipped" to the other side. Changing to a :before will still make the icon appear to the right of the element.
Is this a known FF bug? Is there any other solution?
(Works fine in Chrome)
Ok, so I found a solution. Make it inline-block instead.
display: inline-block;
height: 13px;
width: 13px;
Simple solution, but getting there isn't aslways as easy.
I still feel like the css from the question might be a browser bug?
The Firefox behavior seems to be correct: the rendering of the :after should be the same as the rendering of an empty span with those styles inserted at the end of the a[target="_blank"]. If you try that, you get identical behavior in Chrome and Firefox, and it matches the Firefox behavior for :after.
You may want to file a WebKit bug, though.
For some reason, I have some problem with my CSS positioning on a social networking sharing tray on my site..
The even odder aspect of the problem is that it's only showing up in IE and FF..
I've tried playing with the CSS properties in FireBugg, but to no avail.
The link is here:
http://www.marioplanet.com/index.asp
The look in FF and IE makes the icons look all jumbled, while in Safari and Chrome, you can see that they are all lined up properly.
Could anyone help explain this odd phenomenon?
Try add this rule, it's image border when I view it in FF.
a.trayIcon img { border: 0px; }
I changed line 85 in default.css:
#facebookicon, #youtubeicon {
margin-left: 22.5px;
}
to
#facebookicon, #youtubeicon {
margin-left: 17px;
}
and it looks like chrome.
Although it is not good practice, I am looking for a CSS hack to target Palm webOS.
The problem is that Safari 3+ is awesome, and I can do some things like gradient background animations on text, but only in Safari.
Right now I use #media screen and (-webkit-min-device-pixel-ratio:0) {} and it works like a charm, no Opera, Firefox, or whatever, because if I set the background to the image as I do in Safari they will all be ruined.
But Palm's browser is based on webkit, and it uses the rules inside, and Palm's browser doesn't support text backgrounds so all I get is the image moving, no text.
I would prefer a CSS hack, but if need be a Javascript one will do.
Easiest way I've ever foundof targeting browsers is the CSS Browser Selector plugin. You have one CSS file and tell it to target browsers with a selector like
.ie .myelement div
{
border: 1px #ccc solid;
}
.webkit .myelement div
{
border: 1px #f0f dashed;
}
Works great for me!
Hope it helps you out.