IE6 Cuts off DIV on Resize

11/03/2008, 15h35

Greetings,

I'm having an issue that I'm sure is so simple to solve I just keep
overlooking it. I have some DIV's I've positioned absolutely, but if
I resize the browser until the scroll bars appear, it won't let me
scroll to the very left or right of my page (i.e. there's no margin
around my content). Any is appreciated!

Style Sheet:
body
{
margin-left: 0;
margin-top: 0;
margin-right: 0;
background-color: black;
font: 13px Georgia, serif;
color: #fe9900;
position: relative;
border-bottom: 25px black;
text-aligh: left;
}

div#header table
{
table-layout: fixed;
border-style: none;
padding: 0px;
border-collapse: collapse;
}

div#header td.corner
{
background-image: url('corner.bmp');
width: 80px;
height: 96px;
border-style: none;
padding: 0px;
background-repeat: no-repeat;
background-position: 0% 0%;
}

div#header td.bar
{
background-image: url('top-bar.bmp');
background-repeat: repeat-x;
height: 96px;
width: 100%;
border-style: none;
padding: 0px;
background-position: 25% 0%;
color: black;
font: bold italic 60px Verdana;
padding-top: 13px;
text-align: left;
padding-left: 25px;
white-space: nowrap;
}

div#image
{
position: absolute;
top: 125px;
left: 175px;
right: 50px;
width: 624px;
height: 295px;
border: solid 5px #FE9900;
background-image: url('Plant_Picture.jpg');
background-repeat: no-repeat;
background-position: top center;
}

div#body
{
position: absolute;
top: 125px;
left: 175px;
right: 25px;
width: 624px;
color: black;
background: #E5E6E6;
border: solid 5px #FE9900;
font: 13px Georgia, serif;
padding: 10px;
min-height: 295px;
}
* html div#body{height: 295px}

div#body h1
{
font: small-caps 16px Trebuchet MS, sans-serif;
margin-top: -5px;
margin-bottom: -2px;
}

div#nav
{
position: absolute;
top: 150px;
left: 0px;
width: 180px;
height: 200px;
font: small-caps 16px Trebuchet MS, sans-serif;
z-index: 100;
}

div#nav a
{
display: block;
text-align: center;
text-decoration: none;
font-weight: bold;
padding: 5px 10px;
margin: 0 0 2px;
border-width: 0;
color: black;
background: #e6e6e6;
border-right: solid 5px #e5f5FF;
}

div#nav a:hover
{
color: white;
background: #4d4d4d;
border-right: solid 5px #fe9900;
font-style: italic;
}

div#nav a span
{
display: none;
}

div#nav a:hover span
{
display: block;
position: absolute;
top: 150px;
left:0px;
width: 165px;
padding: 5px;
color: #fe9900;
background: black;
font: normal 11px Trebuchet MS, sans-serif;
}

div#footer
{
z-index: -1;
position: absolute;
background: black;
top: 450px;
left: 175px;
width: 624px;
margin-left: 5px;
margin-right: 5px;
}

div#footer h1
{
color: #e6e6e6;
font: bold italic 20px Verdana;
margin-bottom: -1px;
margin-top: -5px;
}

div#footer a
{
font: 13px Georgia, serif;
color: #e6e6e6;
text-decoration: none;
}

div.img
{
margin: 10px;
border: 1px solid black;
height: auto;
width: auto;
text-align: center;
float: left;
}

div.img img
{
display: inline;
margin: 3px;
border: 3px solid #fe9900;
}

div.img a:hover img
{
border: 10px solid red;
}

Page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Seguin: Lean Forward</title>
</head>

<body>
<div id="header">
<table>
<tr>
<td class="corner"></td>
<td class="bar">Seguin: Lean Forward</td>
</tr>
</table>
</div>

<div id="nav">
<a href="index.html">Home<span>Introduction & welcome page.</span></
a>
<a href="projects.html">Projects<span>Presentations & other info
about current projects.</span></a>
<a href="videos.html">Videos<span>Training & lessons-learned videos
from the production floor.</span></a>
<a href="pictures.html">Pictures<span>They say a thousand words</
span></a>
</div>

<div id='body'>
<p>
<h1>This is a headline</h1>
Now is the time for all good men to come to the aid of their
country. The quick red fox jumped over the
lazy brown dog. Now is the time for all good men to come to the
aid of their country. The quick red fox jumped over the
lazy brown dog. Now is the time for all good men to come to the
aid of their country. The quick red fox jumped over the
lazy brown dog. Now is the time for all good men to come to the
aid of their country. The quick red fox jumped over the
lazy brown dog.
</p>

<p>
<h1>This is another headline</h1>
Now is the time for all good men to come to the aid of their
country. The quick red fox jumped over the
lazy brown dog. Now is the time for all good men to come to the
aid of their country. The quick red fox jumped over the
lazy brown dog. Now is the time for all good men to come to the
aid of their country. The quick red fox jumped over the
lazy brown dog. Now is the time for all good men to come to the
aid of their country. The quick red fox jumped over the
lazy brown dog.
</p>

<p>
<h1>This is another headline</h1>
Now is the time for all good men to come to the aid of their
country. The quick red fox jumped over the
lazy brown dog. Now is the time for all good men to come to the
aid of their country. The quick red fox jumped over the
lazy brown dog. Now is the time for all good men to come to the
aid of their country. The quick red fox jumped over the
lazy brown dog. Now is the time for all good men to come to the
aid of their country. The quick red fox jumped over the
lazy brown dog.
</p>

<p>
<h1>This is another headline</h1>
Now is the time for all good men to come to the aid of their
country. The quick red fox jumped over the
lazy brown dog. Now is the time for all good men to come to the
aid of their country. The quick red fox jumped over the
lazy brown dog. Now is the time for all good men to come to the
aid of their country. The quick red fox jumped over the
lazy brown dog. Now is the time for all good men to come to the
aid of their country. The quick red fox jumped over the
lazy brown dog.
</p>
</div>

</body>

</html>

11/03/2008, 15h58

Michael_R_Banks wrote:

> I'm having an issue that I'm sure is so simple to solve I just keep
> overlooking it. I have some DIV's I've positioned absolutely, but if
> I resize the browser until the scroll bars appear, it won't let me
> scroll to the very left or right of my page (i.e. there's no margin
> around my content). Any is appreciated!

Perhaps you should fix the errors first?

> Style Sheet:
....

> text-aligh: left;

typo: text-align

> font: bold italic 60px Verdana;

Read this: http://k75s.home.att.net/fontsize.html

> div#body

Why not just: body
You cant wrap a div around body, as far as I know.

> * html div#body{height: 295px}

A body of only 295px high?

> font: small-caps 16px Trebuchet MS, sans-serif;

Font names with spaces in them require quotes.
font: small-caps 16px "Trebuchet MS", sans-serif;

> Page:
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://
> www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Reading your HTML, I see no reason to use a *frameset* doctype.
I would suggest you switch to HTML 4.01 Strict.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

> <body>

See? No <div> around <body>

> <div id="header">
> <table>

It appears you are abusing tables for layout.

Those are only a few of the errors and omissions easily noticeable in
your code. Post the URL to your page instead.

You are also engaging in an attempt at pixel precision. That never
works.

--
-bts
-Friends don't let friends drive Vista

11/03/2008, 16h29

"Beauregard T. Shagnasty" <a.nony.mous@example.invalid> writes:
<snip>
>> div#body
>
> Why not just: body
> You cant wrap a div around body, as far as I know.

That selects a div with id="body".

<snip>
I'd have looked at the problem myself if there had been a URL.

--
Ben.

11/03/2008, 17h44

Ben Bacarisse wrote:

> "Beauregard T. Shagnasty" writes:
> <snip>
>>> div#body
>>
>> Why not just: body
>> You cant wrap a div around body, as far as I know.
>
> That selects a div with id="body".

Oh yes, you are right. I misinterpreted that because the word "body" is
a very poor word choice for an id. The word "#wrapper" (for whole body)
seems to be popular, though. In the OP's case, "#content" might work in
place of "#body", at least with his usage.

> <snip>
> I'd have looked at the problem myself if there had been a URL.

That's why I didn't spend much time on it.

--
-bts
-Friends don't let friends drive Vista

11/03/2008, 20h17

Thanks for all the advice - I'm still pretty new to CSS. I would have
provided a URL, but the page is being hosted on the company intranet.
I'll make some of the updates and let you know.

11/03/2008, 15h35	#1
Michael_R_Banks Messages: n/a Hébergeur:	IE6 Cuts off DIV on Resize Greetings, I'm having an issue that I'm sure is so simple to solve I just keep overlooking it. I have some DIV's I've positioned absolutely, but if I resize the browser until the scroll bars appear, it won't let me scroll to the very left or right of my page (i.e. there's no margin around my content). Any is appreciated! Style Sheet: body { margin-left: 0; margin-top: 0; margin-right: 0; background-color: black; font: 13px Georgia, serif; color: #fe9900; position: relative; border-bottom: 25px black; text-aligh: left; } div#header table { table-layout: fixed; border-style: none; padding: 0px; border-collapse: collapse; } div#header td.corner { background-image: url('corner.bmp'); width: 80px; height: 96px; border-style: none; padding: 0px; background-repeat: no-repeat; background-position: 0% 0%; } div#header td.bar { background-image: url('top-bar.bmp'); background-repeat: repeat-x; height: 96px; width: 100%; border-style: none; padding: 0px; background-position: 25% 0%; color: black; font: bold italic 60px Verdana; padding-top: 13px; text-align: left; padding-left: 25px; white-space: nowrap; } div#image { position: absolute; top: 125px; left: 175px; right: 50px; width: 624px; height: 295px; border: solid 5px #FE9900; background-image: url('Plant_Picture.jpg'); background-repeat: no-repeat; background-position: top center; } div#body { position: absolute; top: 125px; left: 175px; right: 25px; width: 624px; color: black; background: #E5E6E6; border: solid 5px #FE9900; font: 13px Georgia, serif; padding: 10px; min-height: 295px; } * html div#body{height: 295px} div#body h1 { font: small-caps 16px Trebuchet MS, sans-serif; margin-top: -5px; margin-bottom: -2px; } div#nav { position: absolute; top: 150px; left: 0px; width: 180px; height: 200px; font: small-caps 16px Trebuchet MS, sans-serif; z-index: 100; } div#nav a { display: block; text-align: center; text-decoration: none; font-weight: bold; padding: 5px 10px; margin: 0 0 2px; border-width: 0; color: black; background: #e6e6e6; border-right: solid 5px #e5f5FF; } div#nav a:hover { color: white; background: #4d4d4d; border-right: solid 5px #fe9900; font-style: italic; } div#nav a span { display: none; } div#nav a:hover span { display: block; position: absolute; top: 150px; left:0px; width: 165px; padding: 5px; color: #fe9900; background: black; font: normal 11px Trebuchet MS, sans-serif; } div#footer { z-index: -1; position: absolute; background: black; top: 450px; left: 175px; width: 624px; margin-left: 5px; margin-right: 5px; } div#footer h1 { color: #e6e6e6; font: bold italic 20px Verdana; margin-bottom: -1px; margin-top: -5px; } div#footer a { font: 13px Georgia, serif; color: #e6e6e6; text-decoration: none; } div.img { margin: 10px; border: 1px solid black; height: auto; width: auto; text-align: center; float: left; } div.img img { display: inline; margin: 3px; border: 3px solid #fe9900; } div.img a:hover img { border: 10px solid red; } Page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <link rel="stylesheet" type="text/css" href="style.css" /> <title>Seguin: Lean Forward</title> </head> <body> <div id="header"> <table> <tr> <td class="corner"></td> <td class="bar">Seguin: Lean Forward</td> </tr> </table> </div> <div id="nav"> <a href="index.html">Home<span>Introduction & welcome page.</span></ a> <a href="projects.html">Projects<span>Presentations & other info about current projects.</span></a> <a href="videos.html">Videos<span>Training & lessons-learned videos from the production floor.</span></a> <a href="pictures.html">Pictures<span>They say a thousand words</ span></a> </div> <div id='body'> <p> <h1>This is a headline</h1> Now is the time for all good men to come to the aid of their country. The quick red fox jumped over the lazy brown dog. Now is the time for all good men to come to the aid of their country. The quick red fox jumped over the lazy brown dog. Now is the time for all good men to come to the aid of their country. The quick red fox jumped over the lazy brown dog. Now is the time for all good men to come to the aid of their country. The quick red fox jumped over the lazy brown dog. </p> <p> <h1>This is another headline</h1> Now is the time for all good men to come to the aid of their country. The quick red fox jumped over the lazy brown dog. Now is the time for all good men to come to the aid of their country. The quick red fox jumped over the lazy brown dog. Now is the time for all good men to come to the aid of their country. The quick red fox jumped over the lazy brown dog. Now is the time for all good men to come to the aid of their country. The quick red fox jumped over the lazy brown dog. </p> <p> <h1>This is another headline</h1> Now is the time for all good men to come to the aid of their country. The quick red fox jumped over the lazy brown dog. Now is the time for all good men to come to the aid of their country. The quick red fox jumped over the lazy brown dog. Now is the time for all good men to come to the aid of their country. The quick red fox jumped over the lazy brown dog. Now is the time for all good men to come to the aid of their country. The quick red fox jumped over the lazy brown dog. </p> <p> <h1>This is another headline</h1> Now is the time for all good men to come to the aid of their country. The quick red fox jumped over the lazy brown dog. Now is the time for all good men to come to the aid of their country. The quick red fox jumped over the lazy brown dog. Now is the time for all good men to come to the aid of their country. The quick red fox jumped over the lazy brown dog. Now is the time for all good men to come to the aid of their country. The quick red fox jumped over the lazy brown dog. </p> </div> </body> </html>

11/03/2008, 15h58	#2
Beauregard T. Shagnasty Messages: n/a Hébergeur:	Re: IE6 Cuts off DIV on Resize Michael_R_Banks wrote: > I'm having an issue that I'm sure is so simple to solve I just keep > overlooking it. I have some DIV's I've positioned absolutely, but if > I resize the browser until the scroll bars appear, it won't let me > scroll to the very left or right of my page (i.e. there's no margin > around my content). Any is appreciated! Perhaps you should fix the errors first? > Style Sheet: .... > text-aligh: left; typo: text-align > font: bold italic 60px Verdana; Read this: http://k75s.home.att.net/fontsize.html > div#body Why not just: body You cant wrap a div around body, as far as I know. > * html div#body{height: 295px} A body of only 295px high? > font: small-caps 16px Trebuchet MS, sans-serif; Font names with spaces in them require quotes. font: small-caps 16px "Trebuchet MS", sans-serif; > Page: > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http:// > www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Reading your HTML, I see no reason to use a frameset doctype. I would suggest you switch to HTML 4.01 Strict. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> > <body> See? No <div> around <body> > <div id="header"> > <table> It appears you are abusing tables for layout. Those are only a few of the errors and omissions easily noticeable in your code. Post the URL to your page instead. You are also engaging in an attempt at pixel precision. That never works. -- -bts -Friends don't let friends drive Vista

11/03/2008, 16h29	#3
Ben Bacarisse Messages: n/a Hébergeur:	Re: IE6 Cuts off DIV on Resize "Beauregard T. Shagnasty" <a.nony.mous@example.invalid> writes: <snip> >> div#body > > Why not just: body > You cant wrap a div around body, as far as I know. That selects a div with id="body". <snip> I'd have looked at the problem myself if there had been a URL. -- Ben.

11/03/2008, 20h17	#5
Michael_R_Banks Messages: n/a Hébergeur:	Re: IE6 Cuts off DIV on Resize Thanks for all the advice - I'm still pretty new to CSS. I would have provided a URL, but the page is being hosted on the company intranet. I'll make some of the updates and let you know.

11/03/2008, 17h44	#4
Beauregard T. Shagnasty Messages: n/a Hébergeur:	Re: IE6 Cuts off DIV on Resize Ben Bacarisse wrote: > "Beauregard T. Shagnasty" writes: > <snip> >>> div#body >> >> Why not just: body >> You cant wrap a div around body, as far as I know. > > That selects a div with id="body". Oh yes, you are right. I misinterpreted that because the word "body" is a very poor word choice for an id. The word "#wrapper" (for whole body) seems to be popular, though. In the OP's case, "#content" might work in place of "#body", at least with his usage. > <snip> > I'd have looked at the problem myself if there had been a URL. That's why I didn't spend much time on it. -- -bts -Friends don't let friends drive Vista

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email