Welcome to WebmasterWorld Guest from 23.20.79.227

Forum Moderators: not2easy

Message Too Old, No Replies

CSS and XHTM 1.0 Trans

     
11:06 am on Jun 22, 2008 (gmt 0)

Moderator from US 

WebmasterWorld Administrator keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:6406
votes: 100


This is where I suspect the issue is. It validates as does the XHTML mark-up. The page displays perfect in FF, but IE only displays the background image.

When I remove the background from the style sheet, IE just displays a white page. Removing the HTML portion does noting either.

I use this same CSS config on other sites in HTML with no issues for IE. Is this CSS not compatible with XHTML 1.0? What needs to be changed? Thanks.


html {
background-color:#fff;
}
body {
color:#000;
border:1px solid #000;
max-width:1060px;
min-width:960px;
margin:0 auto;
padding:0;
background: url(http://www.example.com/images/example.jpg) repeat;
}
12:03 pm on June 22, 2008 (gmt 0)

Preferred Member

10+ Year Member

joined:Aug 17, 2005
posts:432
votes: 0


Your doc type is probably wrong and your in quirks mode.
1:34 pm on June 22, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 23, 2004
posts: 728
votes: 0


Hi keypler,
You stated that your xhtml validates, did you try to validate your css?

Also, can you post your doctype to make sure that it is correct?

Next question, are you using a transitional or strict xhtml?

5:22 pm on June 22, 2008 (gmt 0)

Moderator from US 

WebmasterWorld Administrator keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:6406
votes: 100


Both CSS and XHTML validate.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

However, if I remove the DTDs, IE still can't display. I also remove .htaccess and no joy. I'm stumped.

8:02 pm on June 22, 2008 (gmt 0)

Preferred Member

10+ Year Member

joined:Aug 17, 2005
posts:432
votes: 0


Right I think I understand more now ;)

Look at this, it should look the same in all browsers.
I've used a 1px red gif for the background change it to whatevers handy.

#########

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html {
background-color:#ccc;
}
body {
color:#000;
border:1px solid #000;
max-width:1060px;
min-width:960px;
margin:0 auto;
padding:0;
background: url(1px-red.gif) repeat;
}
</style>
</head>

<body>
<div>hello world</div>
<p>hello</p>
</body>
</html>

###########

Is that how you expected it to look?
Or did you think the whole background would be red?

The css
html {
background-color:#ccc;
}

will overide the

body {
background: url(1px-red.gif) repeat;
}

If you ripped out the doctype of that example above you will notice it now looks different in IE.

2:48 am on June 23, 2008 (gmt 0)

Moderator from US 

WebmasterWorld Administrator keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:6406
votes: 100


Follow-up: Took about 10 hours, but problem now solved.

One by one I removed lines of CSS, nope all CSS good. Then I moved to the mark-up code and line by line I removed and tested.

It was a closing script tag syntax issue that FF supported and IE didn't, even though the tag validated.

Amazing how good it feels after it's all over :)