Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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?

share|improve this question
    
What if you try /Style%20Library/Images/dummy.png ? Does that url actually point to somwhere? –  Janis Veinbergs Oct 31 '11 at 14:54
    
@JanisVeinbergs Yes, that points to the image –  Daniel Ziga Oct 31 '11 at 14:57
add comment

2 Answers

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

share|improve this answer
add comment
up vote 0 down vote accepted

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.

share|improve this answer
    
Cross Browser can get really tricky: I use some of the tools shown here to help: 1stwebdesigner.com/design/tools-browser-compatibility-check –  Louise van der Bijl Nov 8 '11 at 9:51
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.