IE6's unwanted scrollbar

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Maugrim_The_Reaper
DevNet Master
Posts: 2704
Joined: Tue Nov 02, 2004 5:43 am
Location: Ireland

IE6's unwanted scrollbar

Post by Maugrim_The_Reaper »

Hi guys,

More fun with scrollbars and divs in Firefox and IE6... This time I put the example online. To my mind it's a bit messy (typical of stubborn persistence winning out over my lack of any design skills...;)).

http://game.patternsforphp.com/layout01.html

This one works as expected with Firefox. It almost works as expected under IE6 except the scrollbar (which does exist) is pushed off the right edge of the window. Anyone have a clue how to get that scrollbar back in place?
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

I didnt look at the code, but I do know that ie has the boxmodel problem... try giving it it's own stylesheet using conditional comments with a slightly smaller width for the element with the scroll bar...
User avatar
Maugrim_The_Reaper
DevNet Master
Posts: 2704
Joined: Tue Nov 02, 2004 5:43 am
Location: Ireland

Post by Maugrim_The_Reaper »

I'm adding solved to the topic title I think. It still leaves the page wider than the window, but the scrollbars can be moved with a simple:

Code: Select all

* html #pagecontainer {
	margin-right: 15px;
}
The * html is (as most people know) ignored by Mozilla.
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

A (semantically) better solution would be:

Code: Select all

<!--[if lt IE 7]>
      <style type="text/css">#pagecontainer {margin-right: 15px;}</style>
   <![endif]-->
That way you are 100% sure that no other browser EXCEPT ie (less than ie7, which probably fixed the bug you experienced) will use the style declarations...
User avatar
Maugrim_The_Reaper
DevNet Master
Posts: 2704
Joined: Tue Nov 02, 2004 5:43 am
Location: Ireland

Post by Maugrim_The_Reaper »

Thanks :).

Is it possible to put something like that into a CSS file rather than inline?
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

Yup, I usually have a css/iesucks.css file sitting on the server. Any time I come across an ie only problem, i fix it in the ie stylesheet... saves the "real" one from getting cluttered with hacks and other fluff (that will usually prevent validation)
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

nickvd wrote:Yup, I usually have a css/iesucks.css file sitting on the server. Any time I come across an ie only problem, i fix it in the ie stylesheet... saves the "real" one from getting cluttered with hacks and other fluff (that will usually prevent validation)
So you would use:

Code: Select all

<!--[if lt IE 7]>
   <link type="text/css" rel="stylesheet" href="css/ie.css" />
<![endif]-->
User avatar
Maugrim_The_Reaper
DevNet Master
Posts: 2704
Joined: Tue Nov 02, 2004 5:43 am
Location: Ireland

Post by Maugrim_The_Reaper »

Thanks, nickvd. :)
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

np :D
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Post by daedalus__ »

Gj, maug:D
Post Reply