IE Frustration (currpted character??)

[Fleetwood Mac]

I'm having massive amounts of trouble having IE display my site properly.

There is supposed to be a 10px separation between the header and the content. This works fine on Safari, FF, Opera.... everything but IE. In Internet Eliminator, the separation is nearly twice the size it should be.

I took a look at the view source in Safari and IE and they have one difference. On IE some sort of corrupted or uninterruptible character is shown before the content table (Yeah, I'm using a table. Whatevs.) I attached a screenshot from IE (first) and Safari (second) for your viewing pleasure.

I checked the master files and there is no character where the screwed up one is. This spot is where the content is included into page using PHP. Here's the code I'm using:

<?php
// Get page. Meow!!
if (isset($_GET['page'])) {
	$body = $_GET['page'].'.php';
}else{
	$body = 'main.php';
}// Starting page content. Eat a pineapple.
?>

And this in the where the content goes:

<?php include ($body); ?>

 

[l33r0y]

WHat text editor are you using? Could be a rouge CR or LF

I'd suggest editing in something that can view hidden characters.


Oh and I'd recommend you ditch tables and start learning to use DIV tags

 

[Fleetwood Mac]

TextEdit has severed me well for years (*shrug*). I'll take suggestions though.

The thing is I wrote everything myself. I'm not sure how this could have happened. Could the problem be server-side? Is it possible the bad character is being served to all browsers and repaired/ignored by most?

I should have mentioned I know how to use a div. It turns out that a table was better suited in this case. Regardless, this has nothing to do the problem.

 

[angelwatt]

A free text editor that can let you view invisible characters is TextWrangler. Like l33r0y said, this looks like there might be carriage return (CR) or line feed (LF) problem that Windows is having spats about. Are the pages being hosted on a Mac or Windows or Linux machine?

Also, if you could show the code where this is being created it might shed some light. This might not even be the culprit, it could be a CSS related issue since IE doesn't implement CSS the same way as other browsers.

 

[jonnylink]

textwrangler is great, definitely better than textedit.

But I would bet that isn't the issue. IE measures things differently, they have a different idea about how big a pixel is and how things like padding should affect the size of an element.

Seeing your css would definitely help.

 

[Fleetwood Mac]

TextWrangler didn't show any invisible characters.

Also, if you could show the code where this is being created it might shed some light. This might not even be the culprit, it could be a CSS related issue since IE doesn't implement CSS the same way as other browsers.

The code where what is being created? I posted the PHP that includes the content into the rest of the page, need anything else?

Here's the css.

body {
	text-align: justify;
	color: #333333;
	background: #EFEFEF url('../images/content.gif') top center no-repeat;
	font-size: 11px;
	font-family: Verdana, Helvetica, Sans-Serif;
	margin: 0px;
	padding: 0px;
	}

.tables {
	width: 100%;
}

.verticlalsep {
	width: 10px;
}

.horizontalsep {
	height: 10px;
}

#container {
	background: url('../images/content.gif') top center repeat-y;
	width: 1000px;
	margin: auto auto;
	padding: 0px;
}

#containerfoot {
	background: url('../images/contentfoot.gif') top center repeat-y;
	width: 1000px;
	height: 10px;
	margin: auto auto;
	padding: 0px;
}
	
img {
	border: none;
	}

#wrap {
	text-align: justify;
	color: #333333;
	font-size: 12px;
	font-family: Verdana, Helvetica, Sans-Serif;
	margin: 0px auto 0px;
	padding: 0px;
	}

#content {
	width: 960px;
	margin: 10px auto 0px;
	padding: 0px;
	}

 

[angelwatt]

TextWrangler didn't show any invisible characters.

The code where what is being created? I posted the PHP that includes the content into the rest of the page, need anything else?

The code I was referring to was where the table tags are being created. The code you showed mentions a main.php. Are the tables created by PHP or are they in a HTML file, etc.

For TextWrangler to show invisible characters you have to tell it to show them ... just in case you missed that step.

As far as the CSS, IE tends to give more space around tables so you may need to add some more style attributes. Perhaps mess around with the margins and padding for the tables.

 

[Fleetwood Mac]

The code I was referring to was where the table tags are being created. The code you showed mentions a main.php. Are the tables created by PHP or are they in a HTML file, etc.

For TextWrangler to show invisible characters you have to tell it to show them ... just in case you missed that step.

As far as the CSS, IE tends to give more space around tables so you may need to add some more style attributes. Perhaps mess around with the margins and padding for the tables.

Tables are hard-coded. Told TextWrangler to show hidden characters. Tried loads of CSS voodoo to no avail.

I know IE is choking on the character in displaying it as a break or something, but I have no idea where its coming from. I copied the character in Parallels and tried to paste into OS X, but it nothing showed.

I'm going to upload the site to another server to see if its something server-side causing the issue.

 

[jonnylink]

TextWrangler didn't show any invisible characters.

Try zapping gremlins (from the top menu Text-> Zap Gremlins)

It's tough with tables, and not seeing the surrounding code doesn't help. What does the code around the header and content look like? Also, which version on IE is this looking wrong in? Just one? IE7 tends to conform better than IE6. I don't even bother with IE5.5 anymore.

without seeing how the code looks between the header and content I'd guess that you could try doing something like adding

td, tr {margin:0;padding:0;}

to your css and see what that does. Then you'll see if any of the browsers are adding padding or margins to the cells differently. You could also try measuring in em's which I've had better luck with in these sort of situations. Try something like

.verticlalsep {width:0.8em;}
.horizontalsep {height:0.8em;}

if you post the code and let me know the version of IE I could play with it for a few minutes and see if I can offer any more advice.