PDA

View Full Version : CSS IE content goes below the scrollbar


Sirisian
November 11th, 2008, 11:28 AM
I made a quick demo of what I mean here (http://www.webdevout.net/test?0S)

In FF the content is squished so that the scrollbar can be in the div. In IE the content in this example is under the div.

Any idea how to fix this?


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<style type="text/css">
ul {list-style:none;}
* { margin: 0; padding: 0; }
.clearboth { clear:both; }
#joblist
{
list-style:none;
}
#numberofjobs
{
width:100%;
height:20px;
line-height:20px;
background-color:#734A12;
margin-bottom:2px;
text-align:center;
vertical-align: bottom;
}
#numberofjobs h4
{
color:#FFFFFF;
}
#printerheader
{
width:100%;
height: 20px;
line-height:20px;
background-color:#734A12;
margin-bottom: 2px;
vertical-align: bottom;
}
#printerheader h4
{
float:left;
color:#FFFFFF;
margin-left: 10px;
}
#printerheader a
{
float:right;
color:#FFFFFF;
margin-right:10px;
text-decoration:none;
}
#printerheader a:hover
{
color:#EEEEEE;
text-decoration:underline;
}
#print
{
width:100%;
height:20px;
line-height: 20px;
vertical-align: bottom;
clear:both;
}
#print:hover
{
background-color:#bab0a0 !important;
}
#printold
{
width:100%;
height:20px;
line-height: 20px;
vertical-align: bottom;
clear:both;
}
#printold:hover
{
background-color:#fe5c5c !important;
}
#printtext
{
float:left;
color:#FFFFFF;
width:100px;
margin-left: 20px;
}
#size
{
float:left;
width:100px;
color:#FFFFFF;
}
#lifetime
{
float:left;
width:100px;
color:#FFFFFF;
}
#move
{
float:right;
text-align:right;
margin-right:10px;
color:#FFFFFF;
text-decoration:none;
}
#move:hover
{
color:#EEEEEE;
text-decoration:underline;
}
#remove
{
float:right;
text-align:right;
margin-right:10px;
color:#FFFFFF;
text-decoration:none;
}
#remove:hover
{
color:#EEEEEE;
text-decoration:underline;
}
</style>
</head>
<body>
<div style="overflow-x:hidden;overflow-y:scroll;width:500px;height:300px;background-color:#0000FF;">
<ul id="joblist">
<li id="numberofjobs"><h4>1 jobs pending.</h4></li>
<li id="printerheader">
<h4>RowAUCC (1)</h4>
<a href='javascript:RemoveAllFromClass("RowAUCC");'>Wipe Queue</a>
<a href='javascript:MoveAllFromClass("RowAUCC");'>Move All</a>
</li>
<li id="print" style="background-color: rgb(148, 134, 111);">
<h4 id="printtext">n5ohare</h4>
<h4 id="size">65.00 KiB</h4>
<h4 id="lifetime">4 seconds</h4>
<a href='javascript:Remove("1211420");' id="remove">Remove</a>
<a href='javascript:Move("1211420");' id="move">Move</a>
</li>
</ul>
</div>
</body>
</html>
Templarian
November 11th, 2008, 12:16 PM
Your mixing up "width:100%" and "display:block;"

On all your <li>'s classes/id's you need to change "width:100%" to "display:block;".


Edit:

Also that extra div is useless. Just add the width and height to the <ul> as it is already a container.

Also bad use of the h4 tag.
Sirisian
November 11th, 2008, 12:20 PM
OH! Thank you :) Not sure why I don't just ask you my questions in real life. Ah the wonder of the internet.