1. Home
  2. Forums Index
  3. Browser Side / CSS 11:40 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

IE6 3px jog gap

         

yuza

5:08 pm on Nov 1, 2008 (gmt 0)

10+ Year Member



I'm working on my new site and been working on solving different problems. I've gotten great help from people in this forum.
I have a mac and can't check how internet explorer handles the new layout. I was able to get a sneak peak though I noticed there was a small problem with the top banner as it moves down when the browser windows size is smaller than the content. Any solutions to this?
Everything seems to work flawlessly with Safari and Firefox. Any Opera users here?

<snip>

Thank you for your time and help.

Here's the code: 


<?xml version="1.0" encoding="ISO-8859-1"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
 <head> 
 <title>untitled</title> 
 <style type="text/css"> 
 * { 
 padding:0; 
 margin:0; 
 } 
 body { 
 background-color: #FFFFFF; 
 } 
 #wrapper { 
 padding: 10px 
 } 
 #shame1, #shame2, #shame3, #shame4 { 
 background-color: #4c4640; 
 position: fixed; 
 } 
 #shame1, #shame3 { 
 height: 10px; 
 width: 100%; 
 } 
 #shame2, #shame4 { 
 width: 10px; 
 height: 100%; 
 } 
 #shame1 { 
 top:0; 
 } 
 #shame3 { 
 bottom:0; 
 } 
 #shame2 { 
 left:0; 
 top:0; 
 } 
 #shame4 { 
 right:0; 
 top:0; 
 } 
 
#left {
float:left;
height: 100%;
width: 101px;
text-align: left;
}
#topempty {
height: 43px;
width: 875px;
margin-left:101px;
text-align: left;
}
#topbanner {
height: 235px;
width: 875px;
margin-left:101px;
text-align: left;
}
#navigation {
width: 867px;
height:20px;
margin-left:107px;
font-color: #75706a;
text-align: left;
}
#content {
width: 860px;
font-color: #464646;
font-family: Verdana; 
font-size: 12px;
text-align: left;
margin-left:110px;
}
#footer {
width:875;
vertical-align: text-bottom;
margin-left:101px;
}
h1 {
margin: 0px;
padding: 0px;
color: 333333; 
font-family: Times; 
font-size: 17px; 
font-weight: regular;
}
h2 {
margin: 0px;
padding: 0px;
color: #464646; 
font-family: Times; 
font-size: 12px; 
font-weight: bold;
}
a { color:#75706a; font-family: Arial; font-size: 15px; text-decoration: none;}
a:link { color:#75706a; font-family: Arial; font-size: 15px; text-decoration: none;}
a:visited { color:#6cf7ef; font-family: Arial; font-size: 15px; text-decoration: none;}
a:active { color:#6cf7ef; font-family: Arial; font-size: 15px; text-decoration: none;}
a:hover { color: #6cf7ef; font-family: Arial; font-size: 15px; text-decoration: none;}
 </style> 
<!--[if IE 6]> 
 <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" 
 type="text/javascript"></script> 
 <style type="text/css"> 
 #shame1, #shame3 { 
 line-height: 1px; 
 font-size: 1px; 
 } 
 </style> 
<![endif]--> 
 </head> 
 <body> 
 <div id="wrapper"> 
<div id="left"><a href="index.html"><img src="layout-img/homelogo.jpg" width="101" height="92" border="0" ALT="Home Link"></a><img src="layout-img/leftgraphic.jpg" width="101" height="186" border="0" ALT="Left Graphic"></div>
<div id="topempty"></div>
<div id="topbanner"><img src="layout-img/topbanner.jpg" width="867" height="235" border="0" ALT="Top Banner Graphic"></div>
<div id="navigation">
<a href="biography.html">biography</a> <b>/</b>
<a href="fineart.html">fineart</a> <b>/</b>
<a href="design.html">design</a> <b>/</b>
<a href="photography.html">photography</a> <b>/</b>
<a href="contact.html">contact</a> <b>/</b>
<a href="blog.html">blog</a> <b>/</b>
</div>
<div id="content">
<p>This site is dedicated to art and design of Jussi Tarvaine, please enjoy.
This site is dedicated to art and design of Jussi Tarvaine, please enjoy.
This site is dedicated to art and design of Jussi Tarvaine, please enjoy.
This site is dedicated to art and design of Jussi Tarvaine, please enjoy.
This site is dedicated to art and design of Jussi Tarvaine, please enjoy.
This site is dedicated to art and design of Jussi Tarvaine, please enjoy.
This site is dedicated to art and design of Jussi Tarvaine, please enjoy.
This site is dedicated to art and design of Jussi Tarvaine, please enjoy.
This site is dedicated to art and design of Jussi Tarvaine, please enjoy.
This site is dedicated to art and design of Jussi Tarvaine, please enjoy.
This site is dedicated to art and design of Jussi Tarvaine, please enjoy.
This site is dedicated to art and design of Jussi Tarvaine, please enjoy.
This site is dedicated to art and design of Jussi Tarvaine, please enjoy.
This site is dedicated to art and design of Jussi Tarvaine, please enjoy.
This site is dedicated to art and design of Jussi Tarvaine, please enjoy.
This site is dedicated to art and design of Jussi Tarvaine, please enjoy.
This site is dedicated to art and design of Jussi Tarvaine, please enjoy.
This site is dedicated to art and design of Jussi Tarvaine, please enjoy.
This site is dedicated to art and design of Jussi Tarvaine, please enjoy.
This site is dedicated to art and design of Jussi Tarvaine, please enjoy.
This site is dedicated to art and design of Jussi Tarvaine, please enjoy.
This site is dedicated to art and design of Jussi Tarvaine, please enjoy.
This site is dedicated to art and design of Jussi Tarvaine, please enjoy.
This site is dedicated to art and design of Jussi Tarvaine, please enjoy.
This site is dedicated to art and design of Jussi Tarvaine, please enjoy.
This site is dedicated to art and design of Jussi Tarvaine, please enjoy.
This site is dedicated to art and design of Jussi Tarvaine, please enjoy.
This site is dedicated to art and design of Jussi Tarvaine, please enjoy.
This site is dedicated to art and design of Jussi Tarvaine, please enjoy.
This site is dedicated to art and design of Jussi Tarvaine, please enjoy.
This site is dedicated to art and design of Jussi Tarvaine, please enjoy.
This site is dedicated to art and design of Jussi Tarvaine, please enjoy.
This site is dedicated to art and design of Jussi Tarvaine, please enjoy.
This site is dedicated to art and design of Jussi Tarvaine, please enjoy.
</p>
<br>
<br>
<br>
</div>
<div id="footer"><img src="layout-img/bottombanner.jpg" width="875" height="42" border="0" ALT="footer"><br><br></div> 
 </div> 
 <div id="shame1"></div> 
 <div id="shame2"></div> 
 <div id="shame3"></div> 
 <div id="shame4"></div> 
 </body> 
</html>

[edited by: swa66 at 7:59 pm (utc) on Nov. 1, 2008]
[edit reason] no URLs please, see forum charter [/edit]

swa66

9:17 pm on Nov 5, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Your #left has a height of 100%, but it's parent hasn't set an explicit height: it won't do a thing. Similarly 
text-align: left;
should not be needed.

#topempty: I'd really not create divs to hold nothing, just add padding or margins on something else. Similarly 

text-align: left;
is useless: there's nothing inside and it's the default already.

#topbanner: text-align is getting boring, I'll stop nagging about it ;) 

margin-left:101px;
: got it: the left floated item is also 101px wide and IE has this bug called 3px jog.
It's particularly resistant to being fixed in this case.

As far as I know the 2 avenues normally used are -3px (negative) margin and/or giving "haslayout" (by applying 1% height or zoom:1 or so to it). I've not yet found the magic solution in this case (perhaps IE7.js is preventing the usual tricks from working. Alternatively: get a min-width going that prevents the page from being squeezed by a too narrow viewport.

E.g. 


#wrapper { 
  min-width: 1000px; 
}

Works around the problem. 

font-family: Verdana
: I'd add a few more fonts to the list, some systems might not have the Verdana font and will resort to some system font instead.

e.g. 

font-family: Verdana, Helvetica, Arial, sans-serif
will typically do better, and the generic font at the end should always kick in.

The same of course goes for 

font-family: Times;

The html: since you used the xhtml doctype, you need to stick to the stricter language. e.g. the alt attribute is forced to be lower case, not uppercase. Make sure your code validates; an image also needs to be self-contained [code]<img src="..." alt="..." /> (note the slash)

Validate your content:
[validator.w3.org...]
[jigsaw.w3.org...]

E.g:
font-color: isn't a valid property, it's likely you meant color:
width measurements different from 0 need a unit added (e.g. 875 -> 875px)
font-weight: regular; : I presume you meant normal ...

yuza

12:58 pm on Oct 30, 2008 (gmt 0)

10+ Year Member



System: The following message was spliced on to this thread from: http://www.webmasterworld.com/css/3776645.htm [webmasterworld.com] by swa66 - 9:24 pm on Nov. 5, 2008 (utc 0)

I have been working on this site and came up with two small problems. I mean I'm hoping small.

First problem is getting the white background to create a 10px border on the bottom like you can see on left, top and right. At the same time the footer must follow the bottom of the content element text like it is now. Similar effect for the border which is my reference can be found from <snip>(except it's made with Flash)
I thought using 100% height value in containerall element would've done this but it's not working. Any suggestions are very welcome.

Second problem is a few pixel vertical gap between the images homelogo.jpg and leftgraphic.jpg(left element). Any tips how to get a rid of this?

The website I'm working on can be found here: <snip>

HTML: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Yuza Creative</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<LINK REL="stylesheet" HREF="styles.css" TYPE="TEXT/CSS">
</head>
<body><div id="containerall">
<div id="container">
<div id="left"><a href="index.html"><img src="layout-img/homelogo.jpg" width="101" height="92" border="0" ALT="Home Link"></a><img src="layout-img/leftgraphic.jpg" width="101" height="186" border="0" ALT="Left Graphic"></div>
<div id="topempty"></div>
<div id="topbanner"><img src="layout-img/topbanner.jpg" width="928" height="235" border="0" ALT="Top Banner Graphic"></div>
<div id="navigation">
<a href="biography.html">biography</a> <b>/</b>
<a href="fineart.html">fineart</a> <b>/</b>
<a href="design.html">design</a> <b>/</b>
<a href="photography.html">photography</a> <b>/</b>
<a href="contact.html">contact</a> <b>/</b>
<a href="blog.html">blog</a> <b>/</b>
</div>
<div id="content">
<p>[small]<removed long repeating text>[/small]
</p>
<br>
<br>
<br>
</div>
<div id="footer"><img src="layout-img/bottombanner.jpg" width="934" height="42" border="0" ALT="footer"><br><br></div>
</div>
</div>
</body>
</html>

CSS: 

body {
background: #4c4640;
text-align: center; 
}
#containerall {
background: white;
width:100%;
}
#container {
background: white;
text-align: left;
width: 1045px;
}
#left {
float:left;
height: 100%;
width: 101px;
text-align: left;
}
#topempty {
height: 48px;
width: 928px;
margin-left:101px;
text-align: left;
}
#topbanner {
height: 235px;
width: 928px;
margin-left:101px;
text-align: left;
}
#navigation {
width: 928px;
height:20px;
margin-left:107px;
font-color: #75706a;
text-align: left;
}
#content {
width: 914px;
font-color: #464646;
font-family: Verdana; 
font-size: 12px;
text-align: left;
margin-left:110px;
}
#footer {
width:934;
vertical-align: text-bottom;
margin-left:101px;
}

[edited by: swa66 at 2:14 pm (utc) on Oct. 30, 2008]
[edit reason] no URLs please, see charter, removed long body text [/edit]

swa66

9:25 pm on Nov 5, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Since both problems are related: the 3px gap it seemed smart to keep it al in one discussion.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 11:40 pm May 1, 2026