PDA

View Full Version : Which Versions of IE Cause CSS Probs?


stoneygossard
03-19-2008, 04:58 PM
Hi,

Can somebody please check out this url:

http://vansdirectwaterford.com

It looks fine in IE7 and Firefox. But I viewed it on an older PC in the local library today (not sure which version of IE) and it looked all askew with the text in the margins of the webpage.

Is there anything I can do to fix same?I'm presuming it's a CSS prob with older versions of IE?

Stoney

Cary
03-20-2008, 12:12 AM
I'm going to need to take some more time looking at this, but right off I can see you are using the wrong Doctype. It's okay to serve xhtml 1.0 as html, but this is not the case with xhtml 1.1 which should always be served as xhtml which is why it should never be used with pages intended for IE browsers, none of which understand xhtml served as xhtml.

You should switch to xhtml 1.0 transitional since you're using a <u> tag and fix your incomplete opening html tag and any validation errors.

Cary
03-20-2008, 12:34 AM
Okay, you should have the following html which drops the two empty paragraphs you had.

<div id="servicesDescription" >
<p><strong><cite>All makes and models supplied with Full Service, DOE and Warranty!</cite></strong></p>


Then change the style sheet with these modified rules:

#rightOfSlogan {
vertical-align: middle;
padding-left: 466px;
padding-top: 20px;
}
#servicesDescription {
text-align:center;
clear: both;
}
.holder {
background: url(img/bgholder.jpg) repeat-y;
padding: 0 32px;
height: 1%;
}

stoneygossard
03-20-2008, 10:31 AM
Thank you Cary,

I think that does the job. The only bit I had to take out was the "height: 1%" line as seen below. Why would you set the height of such a div to only 1%?When I took it out, the page looks perfect.

Thanks again.

SG





.holder {
background: url(img/bgholder.jpg) repeat-y;
padding: 0 32px;
height: 1%;
}

Cary
03-21-2008, 01:15 AM
I think that does the job. The only bit I had to take out was the "height: 1%" line as seen below. Why would you set the height of such a div to only 1%? When I took it out, the page looks perfect.

The 1% height fixes a display bug in IE6 which your page is still exhibiting. I don't know if it's the peekaboo bug, or the guillotine bug, or some other bug, but some of your page content doesn't display in IE6.

You've also introduced a new problem which is your Doctype is no longer a Doctype because it's invalid. (The W3C validator says your Doctype is missing.) This means browsers will display your page in quirks mode, and you really want to avoid that when IE is involved.

Go to the DW menu "Modify" > "Page Properties..." Then select the "Title/Encoding" category. Then set the Document Type to "XHTML 1.0 Transitional".

This should give you the following code for your Doctype and opening html tag:
<!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">

domedia
03-21-2008, 02:53 PM
Like Casy said, the height 1% is very useful for IE6 for a parent element which has floated elements. For firefox the same fix is overflow: hidden;

Cary
03-21-2008, 09:59 PM
For firefox the same fix is overflow: hidden;

Thanks for mentioning this. I thought I had seen this before but I couldn't remember where when I was trying to find it recently.