Forum Moderators: not2easy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<HEAD>
<TITLE>example.net</TITLE>
<LINK REL="stylesheet" HREF="webpages/example.css" TYPE="text/css">
</HEAD>
<BODY>
<DIV ID="banner">
<IMG SRC="images/test_banner.gif"><BR>
<IMG SRC="images/test_home_tab.gif">
</DIV>
<DIV ID="main">
<DIV ID="right_navi">
<IMG SRC="images/test_navi_sidebar.gif">
</DIV>
<DIV ID="content">
<IMG SRC="images/test_content.gif">
</DIV>
<DIV ID="left_img">
<IMG SRC="images/test_left_sidebar.gif">
</DIV>
</DIV>
<DIV ID="bottom">
<IMG SRC="images/test_bottom.gif"><BR>
<IMG SRC="images/test_bottom_navi.gif">
</DIV>
</BODY>
</HTML>
And next is the code from my external CSS file:
BODY {
background: rgb(57,57,57);
width: 700px;
margin: 0px;
padding: 0px;
}
DIV#banner {
width: 700px;
height: 141px;
}
DIV#main {
width: 700px;
height: 572px;
}
DIV#left_img {
width: 7px;
float: right;
}
DIV#content {
width: 561px;
float: right;
font-family: "Tahoma", sans-serif;
color: rgb(256,256,256);
font-size: 10pt;
}
DIV#right_navi {
width: 132px;
float: right;
}
DIV#bottom {
width: 700px;
height: 88px;
font-family: "Tahoma", sans-serif;
color: rgb(256,256,256);
font-size: 10pt;
}
I'm really hoping there's a workaround this b/c I love CSS & want to be able to use it for something besides text formatting (I'm still pretty new to the CSS scene, so please bare with me). Any help would be very much welcome & appreciated. Thanks guys!
[edited by: tedster at 6:08 am (utc) on May 20, 2005]
[edit reason] use example.com [/edit]
and a warm welcome to these forums. ;)
Try removing the <BR> tags from the html file
and adding...
img {
display:block;
}
Also note that your page did not validate, so I modified it slightly...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>example.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="webpages/example.css" type="text/css"></head>
<body><div id="banner">
<img src="images/test_banner.gif" alt="">
<img src="images/test_home_tab.gif" alt="">
</div><div id="main">
<div id="right_navi">
<img src="images/test_navi_sidebar.gif" alt="">
</div><div id="content">
<img src="images/test_content.gif" alt="">
</div><div id="left_img">
<img src="images/test_left_sidebar.gif" alt="">
</div></div>
<div id="bottom">
<img src="images/test_bottom.gif" alt="">
<img src="images/test_bottom_navi.gif" alt="">
</div></body>
</html>
birdbrain
Later that night I found a "fix" for my problem, something called the "Star HTML Hack". The problem I was having had many names, including the "Three Pixel Float Gap", and the hack they gave (which is supposed to be compatible w/ IE5 & IE6, regardless of whether it's using Standard or Quirks model) did indeed fix the problem. Here's the additions I made to the code to make it work:
/*HIDE FROM MAC-IE\*/
* html DIV#banner {
width: 700px;
height: 141px;
margin-bottom: -4px;
}
* html DIV#main {
width: 700px;
height: 572px;
margin-bottom: -4px;
}
/*END HIDE*/
Strangely enough, my issue was actually a 4-pixel gap and not just 3 >_< Although this hack has worked for me (FF was unaffected, which is good b/c it always rendered fine), if you or anyone else has a better, more syntactically-sound way of fixing the problem I'd love to hear it as I'm a little uncomfortable with relying on half-a$$ed code bugs to fix my display problems.
Also, I noticed in your post that you said my webpage wasn't validated...what did you mean by that? How did you know it wasn't validated (simply from the exclusion of that one line you added, or did your browser tell you something?) I'm just curious so I know how to avoid the problem in the future. Also, why do you think that adding the DTD to my page (which I saw had worked for other ppl w/ similar problems to mine) didn't work for me? Sorry for all the questions. Thx a lot for your help!
P.S.- The code that you added, Birdbrain, was there supposed to be a closing quotations after the CONTENT="text/html" (instead of a semi-colon), and a opening quotations before the "ISO-8859-1" value of the CHARSET property? Just checking!
cheers,
gary
to validate your html code go to ...
http://validator.w3.org [validator.w3.org]
http://jigsaw.w3.org/css-validator [jigsaw.w3.org]
birdbrain
