Title: Iphone CSS Last modified: August 20, 2016 --- # Iphone CSS * [Bare](https://wordpress.org/support/users/bare/) * (@bare) * [14 years, 11 months ago](https://wordpress.org/support/topic/iphone-css/) * I run a tech help site here: * [http://tech.bareasschoppers.com/](http://tech.bareasschoppers.com/) * I cobbled the theme together by modifying Kubrick and it works well across most of the big browsers. I honestly didn’t try to make it compatible with everything out there because it may have taken me an eternity. * It has recently come to my attention that I have, what I believe to be, a simple css problem when viewing the site in Safari on the Iphone. For some reason the entire site loads properly (as far as I can tell) except the background color for the sidebar and the “main” area will not load. This causes me to have black text on a black background. * Can anyone tell me if this is a simple fix in my existing CSS or do I need to add a separate css stylesheet for the Iphone browser? * Any help is greatly appreciated!!! Viewing 8 replies - 1 through 8 (of 8 total) * [Peter Hardy-vanDoorn](https://wordpress.org/support/users/petervandoorn/) * (@petervandoorn) * [14 years, 11 months ago](https://wordpress.org/support/topic/iphone-css/#post-2155007) * What’s happening is that the background of these two areas is being coloured using an image that is failing to load. I have come across this problem on iOS devices before and haven’t been able to get to the bottom of why! * But, it’s easy to fix! Just add these to your style.css file: * `background: white;` to #content at line 286 * and * `background: #CCC;` to #sidebar at line 875 * Hope that helps * Peter * Thread Starter [Bare](https://wordpress.org/support/users/bare/) * (@bare) * [14 years, 11 months ago](https://wordpress.org/support/topic/iphone-css/#post-2155189) * Peter, I can’t thank you enough for helping me figure that out – I do have one problem though, that I’m hoping you can also help me solve with this change. When I made the changes you specify it does fix my problem on the Iphone and the backgrounds become colored. The problem I have is that it also affects my live site. The site really looks the same EXCEPT I have a 1px vertical black line that divides the sidebar from the content on the right – making the code changes you specify covers up that black line. Any idea why that happens or how I can resolve that one problem? * For now I commented out the changes you mentioned on my stylesheet to prevent the problem, but am very interested in fixing this if you can help me with that one last problem. * Thanks so much for your help so far and for any additional insight you can provide. * Thread Starter [Bare](https://wordpress.org/support/users/bare/) * (@bare) * [14 years, 11 months ago](https://wordpress.org/support/topic/iphone-css/#post-2155192) * OK, I remember this now… I apologize, it took me months to build this site figuring out one problem at a time. I now remember that the line is made by a repeating background image (as you figured out). I was forced to do this instead of just using the “colors” because otherwise I could not figure out how to make the sidebar and content area both end at the same spot on the page. What was happening prior was the color would end wherever the shorter column ended – so if an article was long then the sidebar would end short and vice-versa. * I am able to add the sidebar color you mention and the site doesn’t change, so now I’m trying to figure out how to also include the content color without overwriting my 1px black line. * Thanks again if you can help. * Thread Starter [Bare](https://wordpress.org/support/users/bare/) * (@bare) * [14 years, 11 months ago](https://wordpress.org/support/topic/iphone-css/#post-2155201) * OK, not sure if this was the easy way to do this but I got it done… I actually added an entirely separate stylesheet for the Iphone. I added a call to it in the header.php and the only css in the entire sheet is the * `background: white;` * that you originally said to add to #content at line 286. * It seems like a lot of work to fix the problem, but at least it’s fixed (as far as I can tell). * Thanks for the insight into the problem, without your help I would never have figured this out. I mean, I still can’t figure out where the black background was coming from – I have the backgrounds set to default to those colors but something on the Iphone was overwriting that css. * [Peter Hardy-vanDoorn](https://wordpress.org/support/users/petervandoorn/) * (@petervandoorn) * [14 years, 11 months ago](https://wordpress.org/support/topic/iphone-css/#post-2155228) * Like I said – I have seen other sites (and, indeed, my own) that won’t load the background image on an iPhone or an iPad. I’ve cheecked and rechecked and the CSS is perfectly fine, so it’s not that. * I personally think that it might be a memory problem – your background image is 1px tall, so it might be that the iOS safari browser is choking having to draw that 1000 times vertically! Perhaps if you make the background image 10px tall, it might make a difference? * Your black background is defined on the body definition at line 269 of styles. css, BTW. * Happy to have been of help. * Peter * Thread Starter [Bare](https://wordpress.org/support/users/bare/) * (@bare) * [14 years, 11 months ago](https://wordpress.org/support/topic/iphone-css/#post-2155230) * I was always under the impression that the smaller filesize you can get for a tiled image was better? I thought that’s why tiled images were so often used ( besides scalability) because it is quick and easy for a browser to grab the small image and repeat it? My impression could certainly be incorrect. * As for your mention of the black background style on line 269, I experimented with that… It actually changes the font color, not the background color. If you look on line 556 of my stylesheet it is the css for my “content-wrapper” which is a div that wraps the sidebar and the main content. The style on line 556 is what calls my background image, and I have that set to default to white, obviously the image just covers that (or it’s supposed to). This is why I believe something else is at play here, but don’t know what. Firebug doesn’t show any other color css, and if I just delete the image (using firebug) then the page still shows properly – just using the backing colors setup in my stylesheet. * I still think it’s a problem with the Iphone’s Safari interpreting the css improperly. The site even works properly in Safari on my desktop, so it’s just the Iphone version itself. :/ * Thanks again for the help! * [Peter Hardy-vanDoorn](https://wordpress.org/support/users/petervandoorn/) * (@petervandoorn) * [14 years, 11 months ago](https://wordpress.org/support/topic/iphone-css/#post-2155233) * I think the “smaller-the-better” rule for background patterns is a left-over from the days of dial-up modems. The thing about the iPhone is that it actually doesn’t have a huge amount of memory to run apps in (compared to a desktop PC) so, if it’s having to repeat a graphic 1000 times, it must (to my mind) use more memory than having to repeat it 100 times. I might be wrong, but that seams as reasonable assumption! * Your body declaration that starts at line 269 contains this little gem: * `background: #000000 url('images/bgcolor.gif');` * which sets both the background colour to black and loads a background image which is a very subtle striped pattern that, to my eyes, just looks like a solid black! Perhaps its this background image which is using too much memory, so why not try removing that? * Peter * Thread Starter [Bare](https://wordpress.org/support/users/bare/) * (@bare) * [14 years, 11 months ago](https://wordpress.org/support/topic/iphone-css/#post-2155256) * Oh, I see what you’re seeing now. I was using Firebug to specifically isolate just the content “frame” and it was only showing `color:333333;` I didn’t think about the layering as I was focused on the sidebar and content, not the background behind them. Without getting into the super details of the loop and all, the layers I have for the page are the background, a div that wraps both the sidebar and the content, and then obviously the sidebar and content themselves. I’m assuming you see all this as well. With that said, shouldn’t the specific styles applied to the sidebar and content be the “top layer” and therefore supersede everything else? I mean, obviously this must be the case because the site works on almost everything I try it on EXCEPT the Iphone. * I do hear what you’re saying though, I obviously already know that the 1px tall image that sits behind the sidebar/content doesn’t load and I did notice that it appeared the striped background image wasn’t loading either – but it was tough to tell for sure. So perhaps you’re onto something here with the tiling image being the issue. I’ll fool with it and see what happens. * Thanks again! Viewing 8 replies - 1 through 8 (of 8 total) The topic ‘Iphone CSS’ is closed to new replies. * 8 replies * 2 participants * Last reply from: [Bare](https://wordpress.org/support/users/bare/) * Last activity: [14 years, 11 months ago](https://wordpress.org/support/topic/iphone-css/#post-2155256) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics