CSS and XHTM 1.0 Trans

Forum Moderators: not2easy

Message Too Old, No Replies

CSS and XHTM 1.0 Trans

keyplyr

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

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;
}

appi2

12:03 pm on Jun 22, 2008 (gmt 0)

Your doc type is probably wrong and your in quirks mode.

4css

1:34 pm on Jun 22, 2008 (gmt 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?

keyplyr

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

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.

appi2

8:02 pm on Jun 22, 2008 (gmt 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.

keyplyr

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

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 :)