Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I'm having some issues with a Joomla template I'm coding. I think it's because of overflow which I applied to avoid floating issues but not sure at all.

First of all, the page gets a scroll bar on the X axis on Chrome. Working good at IE and Firefox though. The weirdest part is that if you change the window size or just open the Dev tools, it fixes itself... I know I could do something like:

body { overflow-x: hidden; }

But I think I shouldn't need it.

Also (and I think it's really related) it's really weird on iOS Mobile Safari and Chrome...

Screenshot

What's wrong?

http://www.reconstrucciondeaccidentes.es/web/

share|improve this question
Well, this is difficult to debug. All attempts at debugging fix the problem... – thirtydot Jul 12 '12 at 16:00
Yep, I tried for more than a day and I finally surrendered... :( – Antonio Laguna Jul 12 '12 at 16:04
1  
It's easier for you because you can change the source. You need to narrow down the source of the problem. Firstly, try disabling JavaScript in your browser. If the problem is gone, you know it was caused by JavaScript. Enable JavaScript, and narrow down the scripts to find out which one it is. If the problem is still there with JavaScript disabled, follow the process I just described except with your CSS. Either remove all CSS and add back small parts at a time, or keep all CSS and remove small parts at a time. – thirtydot Jul 12 '12 at 16:08
I'd also try removing each block of html, i.e. header, footer etc - one at a time then refresh in Chrome and see if it's a particuular block of html that's causing the scrollbar to appear. – Billy Moat Jul 12 '12 at 16:11
@thirtydot took your advice and just with the header, the second issue appears... – Antonio Laguna Jul 12 '12 at 17:14

1 Answer

up vote 1 down vote accepted

Mobile Safari assumes a page as being 980px wide. As yours is 990px, the header appears to be sitting outside of the viewport.

You can stop Safari from assuming a 980px page width (which accomodates the majority of sites built for desktop browsers) by putting the following in your :

<meta name="viewport" content="width=990" />

share|improve this answer
Ian, thankyou very much. You're THE man! It works like a charm. Didn't know about that :D – Antonio Laguna Jul 13 '12 at 5:32

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.