9 replies [Last post]
joel
Offline
newbie
Sweden
Last seen: 15 years 14 weeks ago
Sweden
Joined: 2004-09-08
Posts: 10
Points: 0

Hi everyone Smile

I have an issue keeping me awake at night....

I´ve been using Dan Cederholm's faux columns for a while now and its working very well in most browsers.... but not in IE.... *big surprise*

The problem often appears in the header with a 1px whitespace to the right...
I've tried to put the background in an outside div wider than the slightly container div without any luck though...

The article:
http//:www.alistapart/articles/fauxcolumns/


Here is html markup I often use

Example #1

 
<body> <!-- background in body as in Cederholms example --> 
<div id="container"> 
<div id="header"></div> 
<div id="content"></div> 
</div> 
</body> 


Example #2
 
<body>  
<div id="extrawrap"><!-- background in here to get rid of the 1px bug --> 
<div id="container"> 
<div id="header"></div> 
<div id="content"></div> 
</div> 
</div> 
</body>


Any thoughts about this technique and how to make it work in as many browsers as possible?
I personally try to avoid "browsersniffing" javascripts and multiple stylesheets for my projects, but sometimes you just don't have a choice... or do you?

Tell me your ideas and solutions in this matter Smile

Thanks in advance!

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 20 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

&quot;cederholms fauxcolumns&quot; and IE

Does the 1px space disappear and reappear as you change the size of your viewport? If so, set the body margins and padding to zero as the default 5 pixel left margin will be causing rounding errors as the browser tries to centre the background and content together.

Failing that, let us have a link to the page.

Life's a b*tch and then you die!

joel
Offline
newbie
Sweden
Last seen: 15 years 14 weeks ago
Sweden
Joined: 2004-09-08
Posts: 10
Points: 0

&quot;cederholms fauxcolumns&quot; and IE

yes, changing the viewport makes the 1px dissapear/reappear.

My personal site www.joelsundkvist.com shows this issue.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 20 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

&quot;cederholms fauxcolumns&quot; and IE

...and? Had you set the margins to zero before my post?

Life's a b*tch and then you die!

joel
Offline
newbie
Sweden
Last seen: 15 years 14 weeks ago
Sweden
Joined: 2004-09-08
Posts: 10
Points: 0

&quot;cederholms fauxcolumns&quot; and IE

here is my css:

	html, body {
			margin:0;
			padding:0;
			background: #f5f5f5 url(../gfx/wrap_bg.gif) repeat-y 50% 0;
			color:#666;
			font-family:"Trebuchet MS", Verdana, Helvetica, Sans-Serif;
			font-size:12px;
			font-weight:normal;
			line-height:19px;
			text-align:center;
		}


		#header {	
			margin:0;
			padding:0;
			height:150px;
			background:transparent url(../gfx/header.gif) no-repeat;
			color:transparent;
		}

	
	
		#wrap {
			margin:0 auto;
			padding:0;
			width:600px;
			text-align:left;
			background: transparent;
		}

Since I´m on a mac I cant really see what going on in MSIE...
You better tell me Wink

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 20 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

&quot;cederholms fauxcolumns&quot; and IE

I'm on a mac too so I'll ask again: is this code as it was when you first had the problem, or have you altered it following my post?

Life's a b*tch and then you die!

joel
Offline
newbie
Sweden
Last seen: 15 years 14 weeks ago
Sweden
Joined: 2004-09-08
Posts: 10
Points: 0

&quot;cederholms fauxcolumns&quot; and IE

Yes, this is the original code with no alterations in regards to your previous post. Sorry for my slow thinking... It´s getting late here in Sweden you know Wink

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 20 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

&quot;cederholms fauxcolumns&quot; and IE

In which case it must be the IE 1px Rounding Error ( http://www.positioniseverything.net/round-error.html ). So what are you positioning by units that are prone to rounding errors?

html, body {
margin:0;
padding:0;
background: #f5f5f5 url(../gfx/wrap_bg.gif) repeat-y 50% 0;

...there it is: your background image. Try using 'center' to position the image thus:

background: #f5f5f5 url(../gfx/wrap_bg.gif) repeat-y center;

If that doesn't work, at least you know what to focus your attention on Smile

Life's a b*tch and then you die!

joel
Offline
newbie
Sweden
Last seen: 15 years 14 weeks ago
Sweden
Joined: 2004-09-08
Posts: 10
Points: 0

&quot;cederholms fauxcolumns&quot; and IE

I´ve changed the position to center instead of 50% with no luck...

MSIE is a real pain in the *** Wink

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 20 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

&quot;cederholms fauxcolumns&quot; and IE

Well then, given how narrow your background image extends beyond your content, why not position your content inside a wider 'wrapper' div with your image as its background? Either that, or search for more info now you know what the problem is.

Life's a b*tch and then you die!