Jump to content

unexpected whitespace in IE6

Whether you're a seasoned veteran or a struggling beginner, Web Radiance is the web development and web design forum for you. You'll find answers to all your HTML, CSS, SEO, and Programming needs. Pull up a chair and stay awhile.

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

unexpected whitespace in IE6 Rate Topic: -----

#1 User is offline   sam 

  • W.R. Corporal
  • Group: Members
  • Posts: 117
  • Joined: 07-February 07
  • Gender:Male

Posted 26 February 2007 - 07:17 PM

Hey Everybody. I have this three column layout which looks fine in IE7 and Firefox but IE6 adds whitespace between the divs and I have no idea why. Can somebody please help me with this issue ? Thanks.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
* {
	text-decoration: none;
	border: none;
	margin: 0px;
	padding: 0px;
}
body, html	{
	height: 100%;
	width: 100%;
}
#wrap {
	width: 760px;
	height: 100%;
	margin-right: auto;
	margin-left: auto;
}
#left	{
	float: left;
	width: 10px;
	background: #FF0000;
	height: 100%;
}
#right	{
	float: right;
	width: 10px;
	background: #0000FF;
	height: 100%;
}
#center	{
	margin-left: 10px;
	margin-right: 10px;
	background: #00FF00;
	height: 100%;
}
-->
</style>
</head>

<body>
<div id="wrap">
	<div id="left"></div>
	<div id="right"></div>
	<div id="center"></div>
</div>
</body>
</html>

This post has been edited by sam: 26 February 2007 - 07:18 PM

0

#2 User is offline   marcamos 

  • W.R. General
  • Group: Administrators
  • Posts: 2,849
  • Joined: 04-April 06
  • Gender:Male
  • Location:Massachusetts - USA

Posted 26 February 2007 - 11:40 PM

I'm sure I could really help you here, but I'm on a mac and the only other computer in the house has IE7. Could you provide a screenshot? Otherwise, I'm afraid you might have to wait for another member to help you, who has IE6.
0

#3 User is offline   benbacardi 

  • Administrator
  • Group: Administrators
  • Posts: 1,140
  • Joined: 06-April 06
  • Gender:Male
  • Location:United Kingdom

Posted 27 February 2007 - 06:15 AM

I'm on Vista but i'll try booting up VMWare with XP to have a look!
Ben Cardy Web Design & Development
0

#4 User is offline   sam 

  • W.R. Corporal
  • Group: Members
  • Posts: 117
  • Joined: 07-February 07
  • Gender:Male

Posted 27 February 2007 - 01:57 PM

Here is the screen shot. Sorry it took me a while to get back.

Attached File(s)


This post has been edited by sam: 27 February 2007 - 01:59 PM

0

#5 User is offline   marcamos 

  • W.R. General
  • Group: Administrators
  • Posts: 2,849
  • Joined: 04-April 06
  • Gender:Male
  • Location:Massachusetts - USA

Posted 27 February 2007 - 02:31 PM

My only thoughts are:
  • It is IE6 improperly rendering the white space in your code, which can be tested by putting all of your <div>s on one line (in the code), or...
  • This is a shot in the dark, but maybe IE6 will act nicely if you put a tiny bit of content in the empty <div>s? Or...
  • You might have to employ an IE6 only style sheet with different margin values that IE6 will adhere to.

0

#6 User is offline   sam 

  • W.R. Corporal
  • Group: Members
  • Posts: 117
  • Joined: 07-February 07
  • Gender:Male

Posted 27 February 2007 - 06:10 PM

Marc, Unfortunately none of the proposed solutions worked. Apparently its a white space bug in IE6. I have seen many pages that mention this problem but haven't really come across one which gives a clear solution. Gosh ! IE6 is such a PITA. If only the people knew how bad a browser it is and move on to Firefox or IE 7 !
0

#7 User is offline   marcamos 

  • W.R. General
  • Group: Administrators
  • Posts: 2,849
  • Joined: 04-April 06
  • Gender:Male
  • Location:Massachusetts - USA

Posted 27 February 2007 - 09:53 PM

Oh there is certainly a fix for it; if you don't mind employing conditional comments in order to point a "special" style sheet at only IE6, we could whip that piece of junk into shape without harming the other browser's interpretations.
0

#8 User is offline   sam 

  • W.R. Corporal
  • Group: Members
  • Posts: 117
  • Joined: 07-February 07
  • Gender:Male

Posted 28 February 2007 - 12:10 AM

Marc... I don't mind attaching a special style sheet for IE6. The more I read up I realize that it is inevitable. Can you explain what you meant by special style sheet ? I understand you are probably talking about some special css rules. Can you please elaborate ?
0

#9 User is offline   benbacardi 

  • Administrator
  • Group: Administrators
  • Posts: 1,140
  • Joined: 06-April 06
  • Gender:Male
  • Location:United Kingdom

Posted 28 February 2007 - 03:19 AM

You can add this into your head:

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="styles/ie6_and_below.css" />
<![endif]-->


And only IE 6 and below will load that stylesheet
Ben Cardy Web Design & Development
0

#10 User is offline   marcamos 

  • W.R. General
  • Group: Administrators
  • Posts: 2,849
  • Joined: 04-April 06
  • Gender:Male
  • Location:Massachusetts - USA

Posted 28 February 2007 - 08:31 AM

Yup bencardi is right. To elaborate just a little more (in case it is needed): You add the code he displayed up in between the opening and closing head tags (<head> in here </head>), but be sure to put it below the existing CSS code elements.

That way the browser will read through and apply all of your regular CSS, and then afterwards, IE6 will also read through this special style sheet and further apply those values.

The syntax for the code bencardi made available, in English, goes like this: "Hey browser, if you are less than, or equal to internet explorer 6, then go ahead and use this stylesheet called ie6_and_below.css".

What ever values you put in that special style sheet will overrule those in the regular style sheet, and apply only to IE6.

In your case, since you're seeing white space, I would use that IE6 style sheet to change the margin values until the whitespace disappears.
0

#11 User is offline   sam 

  • W.R. Corporal
  • Group: Members
  • Posts: 117
  • Joined: 07-February 07
  • Gender:Male

Posted 02 March 2007 - 07:47 PM

Floating all the div's to one side left or right fixes the problem.
0

#12 User is offline   lwaxhaxnc 

  • W.R. Private
  • Group: Members
  • Posts: 14
  • Joined: 24-September 11

Posted 24 September 2011 - 01:20 PM

I have seen many pages that mention this problem but haven't really come across one which gives a clear solution. Gosh ! IE6 is such a PITA. :)
Locksmith Waxhaw NC
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users