Web Design Forums

JiRaffe · 08-03-2004, 09:26

i know, i know, old news.

i've been trying to put some div's on a page so that i can have some scrollable content (i know, unfashionable). but i am experiencing problems with IE. it adds padding to the outside of the div, thereby making a horizontal scrollbar appear. i can overcome this problem by putting 20px padding on the right hand side of the Div, but then it's too wide on Safari etc...

so, i'm tempted to use an iFrame. I'm also thinking that maybe this would make it easier for somebody to update the content as they would only have to change the separate page which has the iFrames content on. is this a bad idea. should i steer well clear of iFrames? what is the browser support for them? i set one up and it seemed to work ok on IE mac/pc and safari mac.

Bill Posters · 08-03-2004, 09:33

my vote goes to scrolling div with php 'included' content

fwiw™…

Quote:

Originally Posted by me@elsewhere

Quick fix:
Nest the content on the iframe page inside a div that is at least 16px (+ padding) narrower than the dimensions you've set for the iframe.

Long (definitive?) answer:
The issue is that scrollbars, when needed, are created 'within' the set dimensions of a div/frame/iframe/page.
If content is too tall, then side scrollbars are created.
This effectively reduces the usable width by the width of the scrollbar [16px].
If any non-wrapping or block level content is unable to fit within the new, narrower width, then bottom scrollbars will also be created.

One solution is to ensure that all non-wrapping and block-level content within the div/iframe/… is at least 16px narrower than the div/iframe/…
This will mean that, if a side scrollbar is created automatically by the browser due to excessive height, the content will not be effected by the loss of 16px to its right - and the bottom scrollbar will not be created.
If the div/iframe/… contains only un-padded, wrapping elements such as tags, this simply means not setting an explicit width for them*.
Any non-wrapping elements such as <img> will need to be at least 16px narrower than the div/iframe/… if the side scrollbar is likely to be created.
(* Whilst a without padding will wrap ok and not cause a bottom scrollbar, the use of padding within forceably widen the and cause bottom scrollbars. If a bottom scrollbar is created you will need to specify a width for the that is at least (16px + padding-left value + padding-right value) less than the width of the parent element.)

e.g.

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>Test</title>
	<style type="text/css">

	div.one, div.two {
	margin: 0 0 5px 0;
	overflow: auto;
	height: 100px;
	width: 200px;
	background: #fcf;
	}

	div.one p, div.two p {
	padding: 3px;
	margin: 0;
	}

	div.one p {
	width: 178px;
	}

	</style>
</head>
<body>

<div class="one">

	<p>It's part design problem and part browser problem, but while it persists you may find it useful to get in the habit of nesting all scrolling content inside a further div with a width set to guarantee that it will not occupy the 16px that may be used by the creation of a side scrollbar.</p>

</div>

<div class="two">

	<p>It's part design problem and part browser problem, but while it persists you may find it useful to get in the habit of nesting all scrolling content inside a further div with a width set to guarantee that it will not occupy the 16px that may be used by the creation of a side scrollbar.</p>

</div>

</body>
</html>

The above code should demonstrate that the problem occurs in MSIE (intermittently, in some cases), but not other browsers.
There are actually some proprietory fixes for MSIE5.5+ by way of the MS overflow-x and overflow-y CSS extensions.
However, if/when the problem can be prevented without the use of non-standard css/markup, imho, it's best to do so.

-

Sorry for the epic, but I thought that this was such a commonly-encountered problem that it warranted (something like) a definitive post about it, so that those experiencing the problem might understand what's causing it and how best to avoid it in the first place.

I hope it helped (someone

)

Stickman · 08-03-2004, 09:35

iframes

JiRaffe · 08-03-2004, 09:39

cheers bill. from that mountain of text i managed to extract the nugget of info i needed.

setting the width of the tag is what i should have been doing, bypassing the need for right padding. no need for dem dastardly iFrames now.

08-03-2004, 09:26	#1 (permalink)
JiRaffe Ur mother's ur brother? Join Date: Jun 2003 Location: Liverpool Posts: 913	iFrames Vs div's i know, i know, old news. i've been trying to put some div's on a page so that i can have some scrollable content (i know, unfashionable). but i am experiencing problems with IE. it adds padding to the outside of the div, thereby making a horizontal scrollbar appear. i can overcome this problem by putting 20px padding on the right hand side of the Div, but then it's too wide on Safari etc... so, i'm tempted to use an iFrame. I'm also thinking that maybe this would make it easier for somebody to update the content as they would only have to change the separate page which has the iFrames content on. is this a bad idea. should i steer well clear of iFrames? what is the browser support for them? i set one up and it seemed to work ok on IE mac/pc and safari mac. __________________ ::: TC Magazine :::

08-03-2004, 09:39	#4 (permalink)
JiRaffe Ur mother's ur brother? Join Date: Jun 2003 Location: Liverpool Posts: 913	cheers bill. from that mountain of text i managed to extract the nugget of info i needed. setting the width of the <p> tag is what i should have been doing, bypassing the need for right padding. no need for dem dastardly iFrames now. __________________ ::: TC Magazine :::

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

08-03-2004, 09:35	#3 (permalink)
Stickman Dr. Lucien Sanchez Join Date: Mar 2003 Location: UK Posts: 5,624	iframes

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)