Page 1 of 1

Big problem with a css/php page in IE7

Posted: Wed Mar 04, 2009 11:58 pm
by GovernorAndy
Hi,

I am the webmaster for a student organization in Sweden and recently did a small resdesign of their website. Personally, I always use Mozilla Firefox so this was also the browser I used for testing during the designing. Everything looked fine and when I made the new design public I got many angry letter about the site "not working". I came to the conclusion that these people has been using IE to look at the page so I fired IE up at typed in the URL.

CHAOS! :banghead:

Nothing worked. The menu's been cut off, the sponsors doesn't show and the main content is placed totally wrong.

That's how it is and my problem is that I have no idea what so ever on how to fix it since I am pretty new to CSS/PHP.

I have enclosed the index.php and the index.css in a .zip-file so that you can look at it and perhaps tell me what's wrong and hopefully also how to fix this problem.

Oh, and the adress for the site is: http://www.jf-umea.se (fire it up in both Firefox and IE to see the difference).

Regards,
GovernorAndy

Re: Big problem with a css/php page in IE7

Posted: Thu Mar 05, 2009 12:11 am
by JAB Creations
First and foremost validate the page first...
http://validator.w3.org/check?verbose=1 ... umea.se%2F

Two errors...not bad but this is why I serve everything as application/xhtml+xml where supported.

Are you using simple CSS1 floats or CSS2 positioning? I don't really see anything in need of positioning...this looks like a layout IE4 and Opera 4 could handle (if the white sidebar on the right is simply a background-image that is).

Code: Select all

#left {background-color: #f00; float: left; width: 20%;}#content {background-color: #0f0; float: left; width: 60%;}#right {background-color: #00f; float: left; width: 20%;}
Try that for a layout in IE and Firefox...it should work with three simple divisible elements. The top-right portion if you're not using a background-image will be a little tricky...you could use positioning then though at that point there shouldn't be any difference between IE7 and Firefox I don't imagine.

Re: Big problem with a css/php page in IE7

Posted: Thu Mar 05, 2009 12:26 am
by GovernorAndy
JAB Creations wrote:Are you using simple CSS1 floats or CSS2 positioning? I don't really see anything in need of positioning...this looks like a layout IE4 and Opera 4 could handle (if the white sidebar on the right is simply a background-image that is).
I have no idea, sorry.
JAB Creations wrote:

Code: Select all

#left {background-color: #f00; float: left; width: 20%;}#content {background-color: #0f0; float: left; width: 60%;}#right {background-color: #00f; float: left; width: 20%;}
Try that for a layout in IE and Firefox...it should work with three simple divisible elements. The top-right portion if you're not using a background-image will be a little tricky...you could use positioning then though at that point there shouldn't be any difference between IE7 and Firefox I don't imagine.
I am using a background image and I resized it recently to try something that didn't work. So the white border on the right is simply the space which the background image do not cover.

How do I implement that CSS-code into my design? Does it go in the .css-file? Where?

Sorry for all the questions, but as I said, I am totally new to this thing.

Re: Big problem with a css/php page in IE7

Posted: Thu Mar 05, 2009 8:02 pm
by JAB Creations
Fair enough...

Here is a full fledged template I use for testing...

Code: Select all

<?php header("content-type:application/xhtml+xml;");
echo '<?xml version="1.0" encoding="UTF-8"?>'."\n";?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>XMLHttpRequest: responseXML Example</title>
<meta name="description"   content="in3d.eu  - PROGRAMMING by Kostas Zotos. XMLHttpRequest: responseXML Example. Download the Full working example: Html, JavaScript and the Server Script (PHP)" />
<meta name="Keywords" content="XML HttpRequest, responseXML, AJAX, php, Dynamic web pages, download, complete, example" />
<meta name="robots"  content="Index" />
<script type="text/javascript">
//<![CDATA[
// JavaScript code for quick editing goes here.
//]]>
</script>
<style type="text/css">
/* CSS comments, insert CSS code here */
#left {background-color: #f00; float: left; width: 20%;}
#content {background-color: #0f0; float: left; width: 60%;}
#right {background-color: #00f; float: left; width: 20%;}
</style>
</head>
 
<body>
 
<div id="left">left</div>
<div id="content">content</div>
<div id="right">right</div>
 
</body>
</html>

...of course you'll want to link to an external file for all your pages instead of having to update each page manually. So once you get done testing and want to implement something one step closer to a live environment implement the link element as follows replacing the style element...

Code: Select all

<link href="themes/style.css" media="screen" rel="stylesheet" type="text/css" />
...and obviously just move your CSS code to that file.

IE won't support application/xhtml+xml but you should never use IE until you've tested all other browsers. Once you get this working in Firefox/Opera/Safari then see my the fix IE without hacks (IECCSS) link in my signature. You'll be well on your way if you get all the dots connected. :)

Re: Big problem with a css/php page in IE7

Posted: Fri Mar 06, 2009 1:42 am
by GovernorAndy
Thank you so very much! I will go through this very carefully this weekend and hopefully get everything to work.