No replies
aikanaro
Offline
Enthusiast
Last seen: 15 years 35 weeks ago
Joined: 2006-06-28
Posts: 78
Points: 0

Hi everyone

I'm in need of help regarding IE's proprietary extensions. I have a webpage developed to work in FF which, in IE, asks for the use of IE's proprietary extensions so as not to add too much unnecessary markup to the page. Proprietary extensions aren't a problem as they're going to be in a separate stylesheet just for IE6 and it's "brothers" (5.5, etc).

The problem is as follows: this page is made up of 3 vertical columns and a horizontal footer. All 3 columns have a minimum and maximum width and are supposed to have it's width change according to screen resolution whenever that measure's between the values I referred (so as to enable the page to be viewable for screen resolutions as low as 800x600 up to, at least, 1280x1024). Presently, in FF the page works great but in IE it only shows right at 800x600 or for resolutions greater or equal to 1280x1024. When between those values the columns' width don't work as expected or I'm doing something wrong.

So, I would like to ask for help understanding what's happening and/or fixing the problem.

XHTML:


page title












...




...






I've stripped the content of the columns to shorten the post.

And now for the corresponding CSS:

generic CSS:
/* =General Settings
-----------------------------------------------------------------------------*/
* {
margin: 0;
padding: 0;
}

/* =Layout
-----------------------------------------------------------------------------*/

/* =Screen areas --------------*/
div#pageContent {
min-width: 78em;
width: 100%;
}

div#navigationExtra {
float: left;
width: 25%;
}

div#navigation {
float: right;
margin-right: 8px;
max-width: 21.9em;
width: 96%;
}

div#contentArea {
float: left;
width: 75%;
}

div#mainContentExtra {
float: left;
width: 62%;
}

div#mainContent {
margin: 0 auto;
margin-bottom: 3.5em;
max-width: 50.5em;
width: 100%;
}

div#secondaryContentExtra {
float: left;
width: 36%;
}

div#secondaryContent {
float: left;
margin-left: 8px;
max-width: 21.3em;
width: 100%;
}

div#footer {
clear: both;
height: 4.5em;
width: 100%;
}

and IE's own CSS rules for the same elements:
/* =General Settings
-----------------------------------------------------------------------------*/
div#pageContent {
height: 1%;
width: expression(document.body.clientWidth < 780? "78em" : "auto");
}

/* =Layout
-----------------------------------------------------------------------------*/
div#navigation {
display: inline;
/*width: expression(document.documentElement.clientWidth < 800? "18.7em" :
document.documentElement.clientWidth > 1280? "21.9em" : "auto");*/
width: expression(document.body.clientWidth < 800? "18.7em" :
document.body.clientWidth > 1280? "21.9em" : "auto");
}

div#mainContent {
width: expression(document.body.clientWidth < 800? "36.2em" :
document.body.clientWidth > 1280? "50.8em" : "auto");
}

div#secondaryContent {
display: inline;
width: expression(document.body.clientWidth > 1280? "21.3em" : "100%");
}

Thanks in advance to anyone who might read this post and/or contribute with any thoughts.

"Mr. Hunt, this isn't mission difficult, it's mission impossible. "Difficult" should be a walk in the park for you." - Anthony Hopkins in Mission Impossible II