Does your web page look OK when viewed with Safari (Mac) or Firefox (Mac or Win), but when viewed with Internet Explorer 6 (Win) it has a horizontal scroll bar that you can't explain?
This problem vexed me for a while. I was sure my XHTML code wasn't to blame. Or was it? I came across the answer here:
Microsoft Internet Explorer 6 has a known issue that gives hundreds of web site designers and programmers quite a headache. Even though you are convinced that your page's content is small enough and there are no wrong or missing tags in your source code, IE6 adds a horizontal scroll bar to your page... if there is some code found on your page that is not found in [the DTD file], most browsers will ignore it. However, Internet Explorer 6 behaves in a very special way: it shows a horizontal scroll bar.
The simplest way to fix this is to change your DTD reference from this (for example):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">...to this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">The effect on IE6's rendering of your page is miraculous:
The price you pay for this? You will get a validation error: "no system id specified".
![[Photo of Bruce McKenzie]](data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7ABXRHVja3kAAQAEAAAAPAACAEIAAAAfAE8ATABZAE0AUABVAFMAIABEAEkARwBJAFQAQQBMACAAQwBBAE0ARQBSAEEAIAAgACAAIAAgACAAIAAgACAAAP/uAA5BZG9iZQBkwAAAAAH/2wCEAAYEBAQFBAYFBQYJBgUGCQsIBgYICwwKCgsKCgwQDAwMDAwMEAwODxAPDgwTExQUExMcGxsbHB8fHx8fHx8fHx8BBwcHDQwNGBAQGBoVERUaHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fH//AABEIAEAAQAMBEQACEQEDEQH/xABwAAACAgMBAQAAAAAAAAAAAAAGBwAFAwQIAQIBAQAAAAAAAAAAAAAAAAAAAAAQAAIBAwIEBAQEBwAAAAAAAAECAwARBCEFMVESBkGBEwdhoSIUccFCUrHRMsIjJAgRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AHPQeEgAsxAUC5J0AA8TQL3uz3s7W2RjBiE7llai0WkYI5t4+VAusr/obumRy0GNBCtzZAoI46XLdRoLLaP+is5ZIxuuFHJGTaUxAqQOYIP9tA3+2u6tm7jwvu9smEgFvViNutCeY/Ogt6CUEoFV70d45eJiy7JgN0ExhsuQG1y4uqX5AfUeegoEVJ27uYhaf0y1h1FT/WeZtQVrI6sVZSGHEEEEUHzQE/Znce79o79iZwDxQTFfWibRZImNjpQdZYuTDlY0WVA3VDOiyRtzVhcUGWglAhvcTGiye98+aYdRgk6Y1PAfQlj8qAlxNuwYsRYliRkdAJGsD16cSfjQDnc20YGIsbwx2E5ZXjOosB4X53oBqPatsjUhMWIA6n6QfG/E0Gj3ThtkbYZEF5MdvU+PTazfzoH/AO12YcvsXa3LdTIjRsePBif4GgK6CUCV91448Hup5mFhmpCyAeLH/GfmtBaifH23b4RlSgCNFS/EsQP0jiaAW7g37btxnhixJlkEQYnWxLHjpx0tQUO4bljYMQkmJu2iIvFiKCt2/fmzswwSrHFjyKVCkkuSRw5a0Dl9hpHHZ+RhuSWxMyRLHwHC3yoGTQSgVfvttwl2/CzVjLzwmyOOICnqI86Cr3zAz9z2zFOOQUCJIQukhJXWxOnCgEcPYA+4qIgy5ILfS7WsbWIN9dOVBk7r2TDkyDDKTHHCFkDpbQFR1c9NKDXw8TFhiT0bMlgUbQ+YsLedA1fZmJl2/dn6elHyVsbaEhTc0DFoJQV2+7RHumA2OyqzcVDcDfQg0CqO45Ox4Yws6EvmY8smOy3AACWKknW46WHCgAW7u9Tc5Z44HmdX9RSgvc3uTblyoMO9d0bnuAZ0w3glZemSQrcBQNbAigqdh3DIhzIscPfHlbpaM8BfxHKg6d9vMcQ9n7f9PSZA8jfHqc6nyoCOglBKBVe8uGmDJi70b/bTkQ5VhfpkUWRz+K6eVAqNuxMeKFpmROgsZYpiBcKdRflYUGtvW4PE6x+lFLG69Ss120+I0FBq4O2Ty5GLIzCObJlX0lFgFUMCzn9oUUHWu1LhptuNHhkHFjjVIiOSi1BtUEoJQA/us0c+xfYlOsveZ9LgKhVTr8eugRxwN0wAww1+6x/0xPo6fh+6gpTtG8ySSN9o69VyVsALHWwvQEW27dNj4K+ov+50MOu2q9WoW9A9vbOCeHtPGE5PW31WPhcX/OgK6D//2Q==)
I only have the the problem with one particluar website at present, and it's not just that there is a horizonatal scroll bar. The bar is there because the page is shown too wide for my screen.
I don't know if the suggested fix will have any effect. I'm not a techie, so now I have to find out where to find the DTD file and whether I feel it is something I ought to leave alone because I don't really know what I'm doing.
John, to edit the DTD reference you need to be able to edit the HTML that makes up a web page. If the page that is causing you trouble is not one that you can edit (i.e. because it's someone else's website) then you can't fix this bug yourself—but you could contact the webmaster and bring the problem to their attention.
You can check whether there is a DTD reference in any page by choosing "View source" (or similar) in your browser. This may not be the problem; it's also worth checking that the page uses valid mark-up. Failing this, you might have to increase your screen resolution if possible.
Thanks for posting this! I've been suffering through this problem for a really long time now. One other solution that I've heard about that works for some people (but didn't work for me 100% of the time) was to use the css property overflow-x:none;. Thanks again.
tnx, i¡ve been suffering too. The devil scroll.
lol
tnx again Bruce.
Matt.