# Iphone css problem ?



## Mikesw15 (Jan 27, 2011)

I'm having major problems with CSS background image and iPhone/iPad for some reason it won't fix it only repeats the once does anyone have a solution ? The web page is www.missinginks.co.uk


----------



## sobeit (Nov 11, 2007)

I dont think it is just an iphone problem the page does not even look good in firefox or chrome. try checking the css The W3C Markup Validation Service


----------



## Laxer (Dec 28, 2010)

Your css for the body seems clean, i will inspect it more if you can't solve the problem more with what sobeit suggested.

Also, Page looks fine for me in IE8,FF3.XX, and Chrome.

Didn't check safari or opera.


----------



## sobeit (Nov 11, 2007)

the problem I saw is the layout of the text and the pictures. There was no padding in the columns and everything seemed to run together. The only thing that was making it easy to separate the text was the background coloring of the text. . 

I pulled out my iphone and yes, the problem is related. I do not know enough about css to help with the iphone but you may have to create a different page for it without the background and direct those who is using mobile phones to it. That is what I had to do with the different sites I do in wordpress.

how to direct visitors to mobile website page - Google Search


----------



## Laxer (Dec 28, 2010)

I too noticed the padding issue.

I went ahead and opened it up in opera off my phone and it looks fine.

I will have a closer look at the css if you request that i do so.


Have a look at this: Mobile Safari Background Image Scaling Quirk :: Blog and Portfolio of Peter Epp

I will go check to make sure your background image is rendered correctly.

Edit: Image seems fine, i was able to cut it down by about 70% tho without loosing any quality.


----------



## Mikesw15 (Jan 27, 2011)

If I add padding to the table it leaves a different colour background ?


----------



## Mikesw15 (Jan 27, 2011)

Laxer said:


> I too noticed the padding issue.
> 
> I went ahead and opened it up in opera off my phone and it looks fine.
> 
> ...


If you wouldn't mind that would be very kind of you thank you


----------



## Laxer (Dec 28, 2010)

The css seems fine, it might be worth your while to reset the browser defaults.

I suggest adding the following line to your css:


```
table table td{
padding:10px;
}
```
You could also cut down a lot of lines by removing the font family from many of the classes and add them to the body.

conclusion without reset browser defaults:

```
@charset "utf-8";

body {
	padding: 0px;
	margin: 0px;
	width: 100%;
	display: table;
	background-attachment: fixed;
	background-image: url(images/background.jpg);
	background-repeat: no-repeat;
	background-position: center top;
        font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
}


.tablebg {
	background-color: #BFC6BA;
}

.mainbg {
	background-repeat: repeat;
	background-attachment: fixed;
	background-image: url(images/maintablebg.jpg);
} 
.sidetbbg {
	background-repeat: repeat;
	background-attachment: fixed;
	background-image: url(images/sidetablebgtop.jpg);
}

.textheader {
	font-size: 14px;
	font-weight: bold;
}
.textheaderwhite {
	font-size: 14px;
	font-weight: bold;
	color: #FFF;
}

.textmain {
	font-weight: bold;
	color: #FFF;
}
.textmainblack {
	font-weight: bold;
	color: #000;
}

.textmaingreen {
	font-weight: bold;
	color: #749F41;
}

table table td{
        padding:10px;
}
```


----------

