PDA

View Full Version : Problem With External Sheet & Tweeking Page


Vance
28 Feb 2009, 12:01 AM
I have a page that loads an external style sheet. The page looks fine in Opera,b ut needs to be tweek a bit to look right in IE7. So I put the tweeks in an external sheet called ie.css.

Each page of the site needs a bit more tweeking to get the right look in IE7 so I add these tweeks to the page themselves. However, I must be doing something wrong cause these final tweeks don't seem to be working.

What I am doing to each page is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CVP</title>
<link rel="stylesheet" type="text/css" href="cvp.css">
<meta name="copyright" content="&copy;2007 Creative Video Productions">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css">
<style type="text/css">
#left {height:1250px;}
#mid {height:1250px;}
#right {height:1250px;}
</style>
<![endif]-->
<style type="text/css">
#left {height:706px;}
#mid {height:695px;}
#right {height:695px;}


As you can see, about all I need to do is be able to adjust the height of the columns - mainly it looks like I only need to adjust the RIGHT column.

Am I doing this right? And if so, why won't the height of the columns change?

Thanks,
Vance
Wickham
28 Feb 2009, 04:02 AM
Browsers process logically from top to bottom, so they parse the main styleheet, then the IE conditional comment just for IE, then the style tags, then inline styles in the html markup, so IE will be using height: 695px for #right and so will Firefox and the others.

Put the IE conditional comment last so that the browser reaches it after all the other styles.

Firefox and the others will use the style tags instead of the main stylesheet and ignore the IE conditional comment wherever it is.