Branding for SharePoint on Mobile

Question

I've managed to create a very basic CSS for my SharePoint site and added some CSS queries to manage the CSS being loaded when on a mobile device.

My issue is that thought it renders the HTML setup properly, it doesn't render my background images nor borders on some occations.

I've used this site to check which CSS selectors and attributes works on specific phones (I'm aiming for iPhone only at the moment since that's the only phone I'm able to check my site on for now).

The image files are .PNG and doesn't render at all. Neither does the basic CSS attribute Border. All other core.css styles gets rendered as they should.

Clip out of my CSS. (This is my navigation)

/*  TOP NAVIGATION  */

.menu-horizontal A.static{
    float: none;
}

.s4-tn UL.root > LI.static > .menu-item:first-child{
    display:none;
}

.menu-horizontal UL.root > LI.static > UL.static > LI.static > .menu-item{
    background-image: url('/Style Library/Images/dummy.png');
    background-position: center top;
    background-repeat: no-repeat;
    border: solid 1px black;
    margin: 1px;
    padding: 34px 0px 3px 0px;
    text-align: center;
    width: 95px;
}

.menu .menu-item{
    display: inline-block;
}

The dummy.png doesn't get rendered, but gosearch15.png (which is a standard sharepoint search icon) gets rendered normally. How come?

Answer 1

I found out why. It's because of the differences between how browsers render HTML and so it differentiates on mobile devices as well.

So where there might be a <li> in IE, there's a <span> in Safari etc.

Answer 2

Try to add !important to the relevant CSS directives like this:

background-image: url('/Style Library/Images/dummy.png') !important;
background-position: center top !important;
background-repeat: no-repeat !important;
border: solid 1px black !important;

Sometimes it works for me