Background appearing in IE, Chrome but not Firefox or Safari - help! :D

Hello!

I resolved the issue mentioned in the top description, BUT, I also noticed that when I view this site on the iphone part of the left navigation area is cut off.

Any idea how I can prevent this while also keeping the page centered in a full-sized browser?

http://triggs.avisualvoice.com

Thank you!
Lynette

What happens if you put this is the <head> section of each page?

<meta name="viewport" content="width=device-width; initial-scale=1.0">

Hi Ralph,

thank you for your suggestion. I just now saw your response, and in the mean time, I had adjusted “page” in the css and it now shows ok …in safari/iphone. I also modified the background width.
However, on the monitor, chrome and IE show that it is now pushed to the right a bit (probably a result of my above adjusting).

Do you think I should undo the “page” change and/or try your suggestion above? I’m not sure how to go about this now :slight_smile:

Thank you,
Lynette

Hm, unfortunately, having position: absolute on your inner divs makes it very difficult to control your layout. Never use position: absolute for major part of your layout like this. Any element with pos: abs is taken out of the “flow” of the page, and ignores other elements. So if you add content, for example, your footer won’t move down, which it should do naturally.

So to really fix this layout, your firstly need to remove position: absolute from all those divs.