I just came across an article about how to write CSS only visible to Safari 3.0 and Opera 9. It saved my life so I thought I’d share the love! It was especially useful to me while trying to use ‘display: inline;’ to create a horizonal nav out of an unordered list <ul>. It turns out Safari and Opera would prefer to see ‘display: inline-block;’ instead, which the other browsers don’t like at all. Now before you go test this, I will say that the only reason ‘display: inline;’ wasn’t working for me in Safari/Opera is because I’m trying to throw a background-color behind each list item <li> and pad it so that the color flows around the outside. Safari/Opera wouldn’t let me pad the list items unless they were set to inline-block.
Subscribe to
Have you tried doing this on your list elements:
list-style-position:outside;
list-style-type:none;
list-style:none;
display:block;
You can add background and a float and it will do whatever you need it to do. Remember, ul is a block level element by default, so changing it have inline aspects is going to give you unpredictable results in m,any agents, thus the hack.
If you are looking for a very good Safari CSS Hack, I would try this site:
http://www.giantisland.com/Resources/LitePacificHackforSafariAndIE7.aspx
For opera:
@media screen and (min-width: 10px){
.yourstyle {
color: red;
}
}