The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> IE 6 Formatting (Scroll Bars), Vertical good, horizontal bad!
jwfree
post Nov 29 2006, 12:05 AM
Post #1





Group: Members
Posts: 5
Joined: 28-November 06
Member No.: 1,148



I hope this is not a double post. I never saw the previous one show up, please delete if this is the case!

I was helping a friend with a simple frames site layout when we came across an annoying little problem. In IE 6, the longer pages have a horizontal scroll bar! I have viewed it in Opera, IE 7, and Firefox and they all look fine. The site is http://www.anesthesiaexperts.com. An example would be the "Overview" link on the left side. The vertical scrolling bar is fine, it is just the horizontal one that is annoying us! Any help is appreciated!

Jared

This post has been edited by Jared Humphrey: Nov 29 2006, 12:07 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Peter1968
post Nov 29 2006, 01:44 AM
Post #2


Serious Coder
*****

Group: Members
Posts: 448
Joined: 23-September 06
Member No.: 213



My suggestion is to dispense with frames altogether. Your pages have a bunch of antiquated (and in places, contradictory) code in them, like
CODE

<!--
.style1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
-->
</style>
</head>

<body>
<p align="center" class="style1" style="line-height: 200%"><font size="4">
Overview</font></p>
<p align="left" class="style1" style="line-height: 200%"><font size="2">


You specify a font size in pixels, give it a CSS class and all, then go ahead and do the 1996 thing by using font tags to alter text size.

That, by itself, is a recipe for browser inconsistencies.

Frames have their own problems.
http://www.useit.com/alertbox/9612.html A 10 year old page that is still very much valid.

My suggestion is to remake that site using simple CSS columns. The link below gives you ideas on how to achieve this, in ways that'll appear constant on nearly all browsers, including IE 6.0

http://www.bluerobot.com/web/layouts/layout1.html

It's far easier to make and maintain a website that adheres to standards than one that isn't, believe it or not. At the very least, it'll eliminate most of the browser appearance dramas that you are experiencing.

I know I haven't answered your question that way you probably want it, but maybe my little homily will make clear a greater and more efficient way of doing things.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jwfree
post Nov 29 2006, 05:22 AM
Post #3





Group: Members
Posts: 5
Joined: 28-November 06
Member No.: 1,148



Thank you for the fast response! Your suggestion sounds great. The only thing is that The doctor was very happy to have it done and I'm not sure how thrilled he would be if he had to wait awhile to have it redone sad.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 29 2006, 07:35 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 19,778
Joined: 9-August 06
Member No.: 6



The horizontal scrollbar in frames is a bug with scrolling="auto" in IE6. If you instead use scrolling="yes" it works as it should do with auto. Figure that. This is also the often recommended solution. I don't like it because it puts scrollbars on in other browsers, so you just move the problem from IE6 to innocent browsers.

I think this is much better. Put this inside HEAD of the framed document.

CODE
<!--[if IE 6]>
<style type="text/css">
html    { overflow-x: hidden}
body    { padding-right: 1em }
</style>
<![endif]-->


'overflow-x' is a (formerly) proprietary IE property. It controls the overflow horizontally only. There's also a overflow-y property. The reason it should be hidden from other browsers is that it has made its way to CSS 3, a future version of CSS. Some browsers may support it already and if not they will in the future. You can hide the whole thing with Microsoft's also proprietary, but oh so useful, conditional comments.

It depends on if your doctype triggers Quirks or Standards mode if you should apply the overflow-x to BODY or HTML. You use Standards Mode, so HTML it is for you. The 'padding-right' is so the text won't be cut off. You can change it's value to your liking. For total control you should also use 'margin: 0' for BODY, but since this targets one single browser the margin will always be the same so it doesn't matter really.

'overerflow-x' at ms
http://msdn.microsoft.com/library/default....s/overflowx.asp
'overerflow-x' in CSS 3
http://www.w3.org/TR/css3-box/#the-overflow-x
Conditional comments
http://msdn.microsoft.com/library/default....comment_ovw.asp
Doctype switching
http://hsivonen.iki.fi/doctype/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 29 2006, 09:34 AM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 19,778
Joined: 9-August 06
Member No.: 6



Oh, I should add that the framed page should be fully resizable, as yours is, for this to be good idea. If the framed page contains something that's wider than the iframe it could be cut off. smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 29 2006, 11:17 AM
Post #6


.
********

Group: WDG Moderators
Posts: 8,828
Joined: 10-August 06
Member No.: 7



How about using this instead?

CODE
<!--[if IE 6]>
<style type="text/css">
html{
overflow-y: scroll;
}
</style>
<![endif]-->


For me it removes the hor. scroll but does not cut off content when you need to scroll horizontally.

BTW is the bug fixed in IE7?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 29 2006, 11:28 AM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 19,778
Joined: 9-August 06
Member No.: 6



If that works it's better. IE7? Don't know, I pretend it doesn't exist.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 29 2006, 11:40 AM
Post #8


.
********

Group: WDG Moderators
Posts: 8,828
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Nov 29 2006, 05:28 PM) *

IE7? Don't know, I pretend it doesn't exist.

In that case:

CODE
<!--[if IE]>
<style type="text/css">
html{
overflow-y: scroll;
}
</style>
<![endif]-->
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jwfree
post Nov 29 2006, 12:21 PM
Post #9





Group: Members
Posts: 5
Joined: 28-November 06
Member No.: 1,148



QUOTE(pandy @ Nov 29 2006, 06:35 AM) *

The horizontal scrollbar in frames is a bug with scrolling="auto" in IE6. If you instead use scrolling="yes" it works as it should do with auto. Figure that. This is also the often recommended solution. I don't like it because it puts scrollbars on in other browsers, so you just move the problem from IE6 to innocent browsers.

I think this is much better. Put this inside HEAD of the framed document.

CODE
<!--[if IE 6]>
<style type="text/css">
html    { overflow-x: hidden}
body    { padding-right: 1em }
</style>
<![endif]-->



I hope this question doesn't make your brain explode but do I insert that in the "overview.htm" page or the actual frames code in the index.htm? I tried inserting it into the frames code and it did not appear to work.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 29 2006, 12:29 PM
Post #10


.
********

Group: WDG Moderators
Posts: 8,828
Joined: 10-August 06
Member No.: 7



If you use the SCROLLING=YES attribute it's added to the frameset file's FRAME tags.

If you use the CSS solution it must be used in all framed pages. If you also use the "conditional comments" to hide it from non-IE browsers you must add them in framed pages, but without the conditional comments you could put the CSS in an external style sheet. Personally I don't think this will do any harm to non-IE browsers, so the conditional comments shouldn't be necessary:

CODE
html{
overflow-y: scroll;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 29 2006, 12:37 PM
Post #11


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 19,778
Joined: 9-August 06
Member No.: 6



In the framed page, the one that's shown in the frame, not the frameset page.

But use Christian's, it's simpler so it's better. At least if you know the framed page will always be longer than the frame. Otherwise you'll get an unnecessary vertical scrollbar.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jwfree
post Nov 29 2006, 01:04 PM
Post #12





Group: Members
Posts: 5
Joined: 28-November 06
Member No.: 1,148



I just wanted to say thank you to Peter1968, pandy, and Christian J! All the help was appreciated and the problem is now fixed!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th July 2021 - 12:31 PM