3px jog and borders

[janislanka]

OK, trying to make a website and following problems I have run into:

1) the problem is in 3px and image. For the central image, when I insert it, in IE it just breaks it and destroys the layout. I tried to fix that with 3px jog method, but it doesn't seem to fix it entirley...or maybe I have not applied it correctly?

One part works: image is in the layout; but now the red border has 3px extra on each side.

full sources: site and css

2) the yellow right side line (border) #content: When I made it as a 21px margin-right (as it should be), it just created mess. Any ideas what might be wrong here? This is the code

#content {
	float: right;
	width: 358px;
	height: 308px;
	margin: 0;
	margin-left: 0;
	padding: 0;
	border-right: solid 21px yellow;
	background-color: #536B97;
	background-image: url(content_bg.jpg);
	background-repeat: no-repeat;
	background-position: right bottom;
}
* html #content { 
	margin-left:-3px;
	width:379px; /*for ie5.x win */
	w\idth:358px; /*for ie6*/
}

[janislanka]

well, just wanted to let you know that i found the problem. I kind of split it to avoid direct problems and this is what it looks now:

#content {
	float: right;
	width: 357px;
	height: 308px;
	margin: 0;
	margin-left: 0;
	margin-right: 21px;
	padding: 0;
	background-color: #536B97;
	background-image: url(content_bg.jpg);
	background-repeat: no-repeat;
	background-position: right bottom;
	display: inline;
}

#content_info {
	color: #fff;
	width: 285px;
	padding: 35px 0 0 36px;
	text-align: justify;
}
* html #content_info { 
	width:321px; /*for ie5.x win */
	w\idth:285px; /*for ie6*/
	}

apperently display:inline does the trick - found that in FAQ section here

[Paul O'B]

Sorry I missed your post as I could have saved you some time

Ie has 2 problems with floats (2 main problems anyway). One is the 3 pixel jog which you knew about and the other is the double margin bug on the side of a float nearest the windows (or containers) edge.

The solution to the latter is display:inline as you found out Other browsers ignore display:inline on floats because floats cannot be anything other than display:block. However IE in its madness does something strange and behaves how it should have done in the first place.

The 3 pixel jog and the double margin bug are explained fully in the FAQ under the float thread for others who wish to look

Paul