Forum Moderators: not2easy
there is line 329 in enclosed file:
[PHP]<td width="366"><img src="index_files/homepage_mainimage2.gif" width="366" height="303"></td> [/PHP]
Need this image completely on the left without small space as you can se if you open in IE. Strange that in Mozilla it works without problem.
If I add sample text xyyxy in line 311 it will have white space between left menu (text xyyxy) and image homepage_mainimage2.gif
I kindly aks you to send me what I have to change that it will work.
Enclosed is complete file.
Regards:confused:
[PHP]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Testing page</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
* {
margin:0;
padding: 0;
}
#wrapper {
width: 771px;
margin: 0 auto;
font-size: 80%;
color: #54628a;
line-height: 1.5em;
text-align: left;
}
#header {
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #FF9300;
top: 36px;
}
#logo {
background-repeat: no-repeat;
height: 56px;
top: 0px;
right: 0px;
width: 120px;
}
#navbar {
background-image: url(index_files/index_bar.gif);
background-repeat: repeat-x;
height: 20px;
width: 771px;
}
#midbar {
width: 771px;
top: 50px;
background-repeat: repeat-x;
background-image: url(index_files/index_bar.gif);
height: 17px;
}
#holderdiv {
padding-right: 10px;
padding-left: 10px;
margin-right: 0px;
width: 180px;
background-color: #FEEAB7;
}
.leftcoldiv {
margin: 10px 0px;
border: 1px solid #323c5a;
background-color: #FFFFFF;
width: 100%;
}
.leftcoldivlight {
margin: 10px 0px;
border: 1px solid #323c5a;
background-color: #f5f7ff;
width: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
text-align: left;
font-size: 100%;
padding-top: 20px;
padding-bottom: 20px;
background-image: url(index_files/fondo2.GIF);
background-position: left;
}
p {
}
.leftcoldiv p {
margin: 5px 0;
padding: 5;
color: #323c5a;
font-size: 90%;
line-height: 1.3em;
}
.leftcoldivlight p {
margin: 5px 0;
padding: 5;
color: #323c5a;
font-size: 90%;
line-height: 1.3em;
}
.leftcoldiv h2 {
margin: 0;
background-color: #98a5cb;
color: #000000;
font-size: 120%;
padding: 1px 5px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #323c5a;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #bec6df;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.leftcoldiv h3 {
margin: 0;
background-color: #ff9300;
color: #000000;
font-size: 120%;
padding: 1px 5px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #323c5a;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #fec16f;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.leftcoldivlight h4 {
margin: 0;
color: #000000;
font-size: 120%;
padding: 1px 5px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #323c5a;
background-image: url(index_files/index_h4bg.gif);
background-repeat: repeat-x;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #f5f7ff;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
font-size: 130%;
margin: 0px;
color: #000000;
padding-top: 6px;
padding-left: 10px;
font-family: Arial, Helvetica, sans-serif;
}
h2 {
font-size: 120%;
color: #000000;
margin-top: 4px;
margin-bottom: 2px;
}
ol {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 25px;
color: #54628a;
}
ul {
margin-top: 0px;
margin-bottom: 0px;
color: #54628a;
font-size: 80%;
font-weight: normal;
list-style-type: disc;
list-style-image: url(index_files/index_bullet.gif);
}
a:link {
color: #ff9300;
}
a:visited {
color: #ff9300;
}
a:link:hover {
color: #ffffff;
}
.divider {
border-top-width: 1px;
border-top-style: solid;
border-top-color: #54628a;
}
.left {
float: left;
}
.right {
float: right;
}
.footer {
font-size: 75%;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #ff9300;
background-image: url(index_files/index_bar.gif);
background-repeat: repeat-x;
width: 771px;
text-align: center;
padding-top: 4px;
padding-bottom: 8px;
color: #FEEAB7;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #98a5cb;
border-left-color: #98a5cb;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #54628a;
}
#rightcoldiv {
background-color: #FFFFFF;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 200px;
padding-bottom: 10px;
padding-top: 10px;
}
.coldiv2
{
background-color:#FFFFFF;
border-top: 1px solid #E6D3A8;
color: #000000;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #E6D3A8;
background-position: top;
}
}
.coldiv h1{
margin: 8px 0 10px;
background-color: #faf9f5;/*themecolour3;*/
border-top: 1px solid #E6D3A8;
border-bottom: 1px solid #E6D3A8;
padding: 1px 0px 3px 0px;
color: #000000;
}
.style1 {
vertical-align:top;
font-size: 14px;
font-weight: bold;
color: #D26200;
}
-->
</style>
</head>
<body leftmargin="0" topmargin="0" border=1>
<div id="wrapper">
<div id="header"><table width="770" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top"><div align="right"><img src="index_files/Banner_772_px.jpg" /></td>
<td valign="top"><div align="left"><img src="index_files/Banner772_pxlogo.jpg" width="297" height="113"/></td>
</tr>
</table>
</div>
<div id="midbar">
<div align="center" >
</div>
</div>
<div class="left" id="holderdiv">
xyyxy
<div>
</div>
</div>
<!--start of right-hand column content-->
<div id="rightcoldiv">
<div class="coldiv2">
<table width="566" height="39" cellpadding="5" cellspacing="0">
<tr>
<td width="366"><img src="index_files/homepage_mainimage2.gif" width="366" height="303"></td>
<td width="198"><table width="195" height="298">
<tr>
<td width="10" height="298"> </td>
<td width="160" valign="top"><p class="style1">Welcome</p>
<p></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</td>
<td width="9"> </td>
</tr>
</table></td>
</tr>
</table>
</div>
</div>
<!-- -->
<div style="clear: both;"></div>
<div class="footer">
<span></span>
</div>
</div>
</body>
</html>
[/PHP]
The first thing that comes to mind though is that IE (not sure about FF) leaves a transparent border on the IMG by default, regardless if you've specified one or not.
Try adding 'border: 0;' to your CSS * declaration.
trying to figure out which is best way to fix it for your page..
1. as you're already using a table to set up the rightmost two columns could you simply incorporate the left column into the same table?
2. deal with IE6 and below slightly differently
remove the margin from the right column IE6 and below don't really need it (it will affect backgrounds though), and then put a negative 3px margin on the left column so the right column moves over a bit
something like..
<!--[if lt IE 7]>
<style type="text/css" media="screen">
#holderdiv {margin-right: -3px;}
#rightcoldiv {margin: 0;}
</style>
<![endif]-->
not sure how that will affect your backgrounds though so let us know if neither solution is of any use..
Suzy
I see how the solution works, but could you elaborate on the problem?
I recently wrote [webmasterworld.com] that:
It only ever does happen if a width or height is declared on the margined div. The width and height give the div "layout" or set hasLayout to true which is when IE's float model goes quirky (apparently not IE7 though)
the above is not strictly true (but is the usual scenario) - toplisek's code is a case in point of the other scenario so let me admit my sins and rephrase..
it (a gap) happens when the margined div has hasLayout set to true OR it happens when any element, contained by the margined div and sitting directly beside the float, gains layout :o - If the element contained by the margined div sitting directly beside the float, does not have layout there is still a jog, but it's an inline text jog, which might not be so noticeable. ...you got all that, right? if not there's a code sample below ;)
In toplisek's code the margined div (#rightcoldiv ) does not have 'Layout' but the image and table it contains do, and they both sit right next to the float (#holderdiv and .left).. both an image and a table always have layout regardless
Elements which always have layout:
- <body>
- <img>
- <input>
- <table>
- <td>
- <iframe>
- <hr>
- <marquee>
actually on looking at the answer that rogersf gives in post #2 on the linked thread, I wonder if that would also be the easiest answer here - float both the left and right divs - because this is a fixed width scenario too, this would require that both divs are cleared but there is already a clearing div in the code or simply setting the #wrapper to
overflow: autofloating both divs stops the 3px jogs being triggered in the first place, and leads to the not so well known rule of thumb.. if you use floats, float everything!
below is a small example of the case above showing both the float jog (gap) and the text jog (text indentation)
the float everything solution is also in this code if you remove the margin (from #right) and put in the float/width
Also this example is deliberately in quirks mode so you can see what's happening if you're using IE7 (and that's why I removed the padding to a separate div)
<!-- -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Testing page</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
font-size: 100%;
padding-top: 20px;
padding-bottom: 20px;
}#wrapper {
width: 771px; /* ie contain floats */
margin: 0 auto;
font-size: 80%;
color: #000;
line-height: 1.5em;
text-align: left;
background: #ffc; /* pale yellow */
overflow: auto; /* to contain floats */
}#left {
background-color: #eee; /* light grey */
float: left;
width: 200px;
}#right {
background: #f00; /* red */
padding: 10px 0;margin: 0 0 0 200px; /* remove this and uncomment float and width below */
/*
float: left;
width: 571px;
*/
}.pad {padding: 0 10px;}
</style>
</head>
<body>
<div id="wrapper">
<div id="left"><div class="pad">xyyxy<br />xyxyxy<br />xyxyxy<br />xyxyxy</div></div>
<div id="right">
<div style="background: #fff;">element no layout = no float jog but there is a 3px text jog</div>
<br />
<div style="width: 366px; background: #fff;">element with layout and next to float = float jog</div>
<br />
<div style="width: 366px; background: #fff;">element with layout and NOT next to float = no float jog, no text jog</div>
</div>
</div>
</body>
</html>
dunno if that helps or not, Dabrowski..
Suzy
[edited by: SuzyUK at 1:56 pm (utc) on April 5, 2007]
But at least I know now why I sometimes get an inexplicable gap!
I think last time I had an DIV with width floated left, containing an IMG aligned right.
Next to it I had a table with a background colour the same as the IMG border, and no matter what I did there was always a gap, I thought it was 2px but this was the issue by the sounds of it!
Thanks again.
