10 replies [Last post]
nanu
Offline
Regular
Last seen: 13 years 51 weeks ago
Joined: 2007-04-12
Posts: 11
Points: 0

I'm working on a site and created a CSS stylesheet that works correctly in IE7 and Firefox, but it had some issues in IE6 so I created a modified style sheet that will get the site to display properly in IE6. Now I want to take my first file and add a conditional statement in the head that will cause the IE6 stylesheet to be used if the user's browser is IE6, otherwise if it is IE7 or FF to use the original stylesheet.

The following is the code that I put in the head:

but for some reason it doesn't work.

I also tried:

I've heard that you can code conditional statements in the CSS stylesheet file, but I've also read that it is best to put it in the head. I also haven't been able to find any sites that describe "how" you would put it in the CSS file.

Any help would be very appreciated Smile

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 23 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

The second method should

The second method should work. I use the style @import method, like this:

@import url(includes/css/CSS4.css);

It must be in the head.

nanu
Offline
Regular
Last seen: 13 years 51 weeks ago
Joined: 2007-04-12
Posts: 11
Points: 0

I was so hopeful...but I

I was so hopeful...but I must have something else wrong. But I can't figure out what it is! Puzzled If I take out the conditional statement and direct the html file to the CSS4.css stylesheet only...bingo it looks perfect. If I put in the conditional statement it breaks..but what is really puzzling is that if I have the html file with just the CSS3.css stylesheet it breaks differently than it does if the file has the conditional statement. Weird!

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 23 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Post up your full css and

Post up your full css and html for us to see then

nanu
Offline
Regular
Last seen: 13 years 51 weeks ago
Joined: 2007-04-12
Posts: 11
Points: 0

Here is the html

Here is the html file:

shadow border test


Greeby Companies, Inc.











This text box can contain revolving or static text.



Greeby Companies, Inc. serves as Owner's Representative to commercial real estate developers, corporations and institutional real estate investors, providing Development Management, Project Management and Tenant Coordination services for new construction, expansion or renovation projects. Since 1978, we have opened more than 300 million SF of commercial space.


Our national team of senior Owner's Representatives gives us unparalleled depth of resources and experience and enables us to provide immediate, local expertise to any commercial project. Our team is comprised of top-notch professionals experienced in a wide-range of commercial developments and backed by the full resources of The Greeby Companies, Inc.


Serving Real Estate Owners and Developers Since 1978





and here is the CSS stylesheet for IE6:

/* CSS Document */

html, body {
height:100%;
margin-top:0;
margin-left:auto;
margin-right:auto;
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}

* html #container #content {
height: 100%;
}

/* Layout Areas START */

#container {
width: 760px;
padding-bottom: 10px;
margin-left:auto;
margin-right:auto;
}

#header {
width:742px;
height:76px;
left:10px;
top:9px;
z-index:20;
margin-left:auto;
margin-right:auto;
}


#headerlogo {
float:left;
width:268px;
height:64px;
top:0px;
margin-left:9px;
padding:0px;
}

#headerimages {
float:right;
width:238px;
height:76px;
margin:0px;
padding:0;
}

#navbar {
position:relative;
width:742px;
height:21px;
left:9px;
top:0;
padding:0;
}

#content {
margin-left:20px;
margin-right:20px;
padding-top:20px;
clear:both; /*needed to clear the header*/
}

#leftfloatcontent {
float:left;
width:377px;
height:254px;
left:9px;
top:142px;
margin-top:20px;/*little off in ie6?*/
margin-right:15px;
}

#leftfloatimage1 {
position:relative;
float:left;
width:115px;
height:145px;
left:0;
top:0;
margin-bottom:8px;
border:solid 1px #36386f;
}

#leftfloatimage2 {
position:relative;
float:right;
width:251px;
height:254px;
left:0;
top:0;
border:solid 1px #36386f;
}

#leftfloattextcontainer {
position:static;
width:115px;
height:101px;
left:0;
top:153px;
background-color:#7382b6;
clear:left;
}

#leftfloattext {
position:relative;
width:101px;
height:86px;
left:7px;
top:8px;
overflow:auto;
}

#tagline {
float:inherit;
width:742px;
height:32px;
left:9px;
}

#footer {
position:relative;
width: 760px;
height: 53px;
left:-11px;/*added as a fix for IE6*/
margin-left:auto;
margin-right:auto;
padding:0;
}

#footercontent {
width:742px;
height:45px;
left:0;
top:438px;
margin:0;
padding:0;
}

#footer_linksandcopyright {
float:left;
width:312px;
height:43px;
top:0;
margin-left:10px;/*changed from 20px to 10px for IE6*/
}

#footer_logos {
float:left;
width:120px;
height:43px;
padding:0;
}

#footer_address {
float:right;
width:239px;
height:43px;
top:0;
margin-right:10px;/*changed from 20px to 10px for IE6*/
margin-left:0;
}

/* Layout Areas END */


/*Text Styles START */

.bodytext {
font-size:12px;
line-height:20px;
}

.floattext {
color:#FFFFFF;
font-size:12px;
line-height:13px;
}

.footerlinks {
font-size:9px;
line-height:12px;
padding-left:0px;
color:#242662;
text-decoration:none;
}

.footertext {
font-size:8px;
line-height:12px;
color:#242662;
}

/*Text Styles END*/


/*Hyperlink text styles START*/

a {
color:#242662;
text-decoration:none;
}

a:visited {
color:#242662;
text-decoration:none;
}

a:hover {
color:#242662;
text-decoration:underline;
}

a:active {
color:#242662;
text-decoration:none;
border:none;
}

.footertext a {
color:#242662;
}

.footertext a:visited {
color:#242662;
}

.footertext a:hover {
color:#242662;
text-decoration:underline;
}

.footertext a:active {
color:#242662;
text-decoration:none;
border:none;
}

/*Hyperlink text styles END*/

Now the CSS file that works in both IE7 and FF:
/* CSS Document */

html, body {
height:100%;
margin-top:0;
margin-left:auto;
margin-right:auto;
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}

* html #container #content {
height: 100%;
}

/* Layout Areas START */

#container {
width: 760px;
padding-bottom: 10px;
margin-left:auto;
margin-right:auto;
}

#header {
width:742px;
height:76px;
left:10px;
top:9px;
z-index:20;
margin-left:auto;
margin-right:auto;
}


#headerlogo {
float:left;
width:268px;
height:64px;
top:0px;
margin-left:9px;
padding:0px;
}

#headerimages {
float:right;
width:238px;
height:76px;
margin:0px;
padding:0;
}

#navbar {
position:relative;
width:742px;
height:21px;
left:9px;
top:0;
padding:0;
}

#content {
margin-left:20px;
margin-right:20px;
padding-top:20px;
clear:both; /*needed to clear the header*/
}

#leftfloatcontent {
float:left;
width:377px;
height:254px;
left:9px;
top:142px;
margin-top:20px;/*little off in ie6?*/
margin-right:15px;
}

#leftfloatimage1 {
position:relative;
float:left;
width:115px;
height:145px;
left:0;
top:0;
margin-bottom:8px;
border:solid 1px #36386f;
}

#leftfloatimage2 {
position:relative;
float:right;
width:251px;
height:254px;
left:0;
top:0;
border:solid 1px #36386f;
}

#leftfloattextcontainer {
position:static;
width:115px;
height:101px;
left:0;
top:153px;
background-color:#7382b6;
clear:left;
}

#leftfloattext {
position:relative;
width:101px;
height:86px;
left:7px;
top:8px;
overflow:auto;
}

#tagline {
float:inherit;
width:742px;
height:32px;
left:9px;
}

#footer {
position:relative;
width: 760px;
height: 53px;
margin-left:auto;
margin-right:auto;
padding:0;
}

#footercontent {
width:742px;
height:45px;
left:0;
top:438px;
margin:0;
padding:0;
}

#footer_linksandcopyright {
float:left;
width:312px;
height:43px;
top:0;
margin-left:20px;
}

#footer_logos {
float:left;
width:120px;
height:43px;
padding:0;
}

#footer_address {
float:right;
width:239px;
height:43px;
top:0;
margin-right:20px;
margin-left:0;
}

/* Layout Areas END */


/*Text Styles START */

.bodytext {
font-size:12px;
line-height:20px;
}

.floattext {
color:#FFFFFF;
font-size:12px;
line-height:13px;
}

.footerlinks {
font-size:9px;
line-height:12px;
padding-left:0px;
color:#242662;
text-decoration:none;
}

.footertext {
font-size:8px;
line-height:12px;
color:#242662;
}

/*Text Styles END*/


/*Hyperlink text styles START*/

a {
color:#242662;
text-decoration:none;
}

a:visited {
color:#242662;
text-decoration:none;
}

a:hover {
color:#242662;
text-decoration:underline;
}

a:active {
color:#242662;
text-decoration:none;
border:none;
}

.footertext a {
color:#242662;
}

.footertext a:visited {
color:#242662;
}

.footertext a:hover {
color:#242662;
text-decoration:underline;
}

.footertext a:active {
color:#242662;
text-decoration:none;
border:none;
}

/*Hyperlink text styles END*/

As you can see the differences between the two are minor. (the IE6 Css is commented as to changes made)

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 23 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi It isn't normal nor

Hi

It isn't normal nor advisable to have a full file for the conditional bit.

Only have the bits that are different in the IE6 version and load it after the main one, which IE6 will see anyway.

Can you quickly re-edit your html to include the conditional comment and chop the ie6 css right down to bare minimum.

nanu
Offline
Regular
Last seen: 13 years 51 weeks ago
Joined: 2007-04-12
Posts: 11
Points: 0

here is the html with

here is the html with conditional statement:

shadow border test

@import
url(includes/css/CSS4b.css);


Greeby Companies, Inc.











This text box can contain revolving or static text.



Greeby Companies, Inc. serves as Owner's Representative to commercial real estate developers, corporations and institutional real estate investors, providing Development Management, Project Management and Tenant Coordination services for new construction, expansion or renovation projects. Since 1978, we have opened more than 300 million SF of commercial space.


Our national team of senior Owner's Representatives gives us unparalleled depth of resources and experience and enables us to provide immediate, local expertise to any commercial project. Our team is comprised of top-notch professionals experienced in a wide-range of commercial developments and backed by the full resources of The Greeby Companies, Inc.


Serving Real Estate Owners and Developers Since 1978





and here is the revised/edited CSS file:

/* CSS Document */

#headerlogo {
margin-left:9px;
}

#footer {
left:-11px;
}


#footer_linksandcopyright {
margin-left:10px;
}


#footer_address {
margin-right:10px;
margin-left:0;
}

nanu
Offline
Regular
Last seen: 13 years 51 weeks ago
Joined: 2007-04-12
Posts: 11
Points: 0

I'll be checking in first

I'll be checking in first thing in the morning. Thanks for all your help so far. This forum is one of the best!

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 23 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

I think I am beginning to

I think I am beginning to see the problem.

You have used top and left quite a bit.

But you haven't used position:absolute

So you can't use top and left.

Use margin-top and margin-left

You may ahve to use position:relative as well to kick IE into action.

Why not abandon the IE6 stylesheet altogether, do those changes to the main stylesheet, get it about right and then let me know if IE6 is still misbehaving?

And don't forget about IE's behaviour on collapsing margins.

nanu
Offline
Regular
Last seen: 13 years 51 weeks ago
Joined: 2007-04-12
Posts: 11
Points: 0

thanks ClevaTreva...I'll try

thanks ClevaTreva...I'll try it first thing and let you know.

nanu
Offline
Regular
Last seen: 13 years 51 weeks ago
Joined: 2007-04-12
Posts: 11
Points: 0

Sucess ClevaTreva! Thank

Sucess ClevaTreva! :thumbsup:
Thank you for all your help. I made modifications like you suggested and now ie6, ie7 and ff are all working of the same stylesheet. I'm so excited! I still have work to do on the menu and buttons, but I am very encouraged at this point. Thanks again. You were a great help!