PDA

View Full Version : Problem with huge horizontal margin being created in IE



Saurdo
Apr 10th, 2007, 03:12 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Dir list</title>
<style type="text/css">
.title {
font-family: 'Trebuchet MS', Verdana, Sans-Serif;
letter-spacing: -1px;
font-size: 17px;
font-weight: bold;
padding-left: 5px;
}

.title strong {
width: 20%;
float: right;
text-align:right;
cursor:hand;
cursor:pointer;
}

.title em {
margin-right: 100px;
float: right;
text-align:right;
cursor:hand;
cursor:pointer;
}

body{
color: #fff;
background-color: #000;
margin-top: 0px;
text-align: center;
}
.main {
position: relative;
margin-left: auto;
margin-right: auto;
width: 90%;
background-color: #333;
color: #fff;
border: 2px solid #fff;
border-top-width: 0px;
}
.currentfolder {
width: 100%;
background-color: #888;
border-bottom: 1px solid #fff;
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
font-size: 18px;
font-family: "Lucida Grande", Tahoma, Arial, sans-serif;
font-weight: bold;
}

.images, .files, .folders{
padding: 10px;
}

.test {
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
width: 85%;
}
.image{
width: 200 px;
height: 100 px;
float: left;
text-align: center;
padding: 6px;
border: 1px #fff solid;
margin: 6px 6px 6px 6px;
}

.image img {
border: 1px solid #fff;
width: 200px;
height: 100px;
}

.files, .folders{
border-bottom: 1px solid #fff;
padding-bottom: 15px;
font-size: 14px;
font-family: "Lucida Grande", Tahoma, Arial, sans-serif;
text-align: left;
background-color: #333;}

.b {
border: 1px #380 dotted;
border-left-width: 0px;
border-right-width: 0px;
background-color: #555;
color: #fff;
}

.w {
background-color: #444;
color: #fff;
}

.folders_list a {
text-align:left;
display:block;
padding: 2px 5px 2px 5px;}

.folders_list a strong {
width: 20%;
float: right;
text-align:right;
cursor:hand;
cursor:pointer;
}

.folders_list a em {
margin-right: 100px;
float: right;
text-align:right;
cursor:hand;
cursor:pointer;
}

.files_list a {
text-align:left;
display:block;
padding: 2px 5px 2px 5px;}

.files_list a strong {
width: 20%;
float: right;
text-align:right;
cursor:hand;
cursor:pointer;
}

.files_list a em {
margin-right: 100px;
float: right;
text-align:right;
cursor:hand;
cursor:pointer;
}
</style>
</head>
<body>
<div class="main">
<div class="currentfolder">
Current Folder Text goes HERE!
</div>
<div class="folders">
<div><div class="title"><strong>Date:</strong> <em>Files & Folders:</em>Folders:</div></div>
<div class="folders_list">
<div><a class="w"><strong>strong</strong> <em> em</em> nothing</a></div>
<div><a class="b"><strong>test strong</strong> <em>test em</em> test nothing</a></div>
<div><a class="w"><strong>test strong</strong> <em>test em</em> test nothing</a></div>
<div><a class="b"><strong>test strong</strong> <em>test em</em> test nothing</a></div>
<div><a class="w"><strong>test strong</strong> <em>test em</em> test nothing</a></div>
<div><a class="b"><strong>test strong</strong> <em>test em</em> test nothing</a></div>
<div><a class="w"><strong>test strong</strong> <em>test em</em> test nothing</a></div>
</div>
</div>

<div class="files">
<div><div class="title"><strong>Date:</strong> <em> Size:</em> Name:</div></div>
<div class="files_list">
<div><a class="w"><strong>strong</strong> <em> em</em> nothing</a></div>
<div><a class="b"><strong>test strong</strong> <em>test em</em> test nothing</a></div>
<div><a class="w"><strong>test strong</strong> <em>test em</em> test nothing</a></div>
<div><a class="b"><strong>test strong</strong> <em>test em</em> test nothing</a></div>
<div><a class="w"><strong>test strong</strong> <em>test em</em> test nothing</a></div>
<div><a class="b"><strong>test strong</strong> <em>test em</em> test nothing</a></div>
<div><a class="w"><strong>test strong</strong> <em>test em</em> test nothing</a></div>
</div>
</div>

<div class="test">
<div class="images">

<div class="image"><img src="image.png" alt="image"><br>testingly</div>
<div class="image"><img src="image.png" alt="image"><br>testingly</div>
<div class="image"><img src="image.png" alt="image"><br>testingly</div>
<div class="image"><img src="image.png" alt="image"><br>testingly</div>
<div class="image"><img src="image.png" alt="image"><br>testingly</div>
<div class="image"><img src="image.png" alt="image"><br>testingly</div>
<div class="image"><img src="image.png" alt="image"><br>testingly</div>
<div class="image"><img src="image.png" alt="image"><br>testingly</div>
<div class="image"><img src="image.png" alt="image"><br>testingly</div>
<div class="image"><img src="image.png" alt="image"><br>testingly</div>
<div class="image"><img src="image.png" alt="image"><br>testingly</div>
<div class="image"><img src="image.png" alt="image"><br>testingly</div>
<div class="image"><img src="image.png" alt="image"><br>testingly</div>
<div class="image"><img src="image.png" alt="image"><br>testingly</div>
<div class="image"><img src="image.png" alt="image"><br>testingly</div>
<div class="image"><img src="image.png" alt="image"><br>testingly</div>
<div class="image"><img src="image.png" alt="image"><br>testingly</div>
<div class="image"><img src="image.png" alt="image"><br>testingly</div>
<div class="image"><img src="image.png" alt="image"><br>testingly</div>
<div class="image"><img src="image.png" alt="image"><br>testingly</div>
<div class="image"><img src="image.png" alt="image"><br>testingly</div>
<div class="image"><img src="image.png" alt="image"><br>testingly</div>
<div class="image"><img src="image.png" alt="image"><br>testingly</div>
<div class="image"><img src="image.png" alt="image"><br>testingly</div>
<div class="image"><img src="image.png" alt="image"><br>testingly</div>
</div>
</div>
<div style="clear:left;"></div>
</div>
<div style="text-align: center;">Saurdo's!</div>
</body>
</html>


Take a look at the live example: http://saurdo.com/test/dirlist.html

I know that the block display list at the top the top is causing it, but i don't know why. IE is the only browser it does it in.

koyama
Apr 10th, 2007, 03:47 AM
IE is the only browser it does it in.
Please tell us what version of IE you are seing this in? There are currently two versions of Internet Explorer that are widespread: version 6 and 7.

As a side issue, it appears that your page contains tabular data. A table element would perhaps be more suitable to hold this data instead of div elements.

Saurdo
Apr 10th, 2007, 04:24 AM
It does it in IE7 I haven't tested it in IE6.

I was just using an example from something similar to this but perhaps they should be using tables as well. It'd probably be significantly css and html code as well.

koyama
Apr 10th, 2007, 05:12 AM
This is the IE7 Right-floated text scrollbar bug (http://www.ookii.org/misc/scrollbarbug.html)

From your code:


.title em {
margin-right: 100px;
float: right;
text-align:right;
cursor:hand;
cursor:pointer;
}
As long as you know what is causing this bug to appear you can deal with it. Possible solutions may be to not use italics for the above element, set an explicit width for the element, or use html {overflow-x: hidden}.

I would still recommend that you consider using a table element. (You would not have to deal with this bug either)