Jump to content

IE Conditional Comments not working?


Spock

Recommended Posts

I've spent hours on this, but no luck. Here's the site (temporary link):

 

http://home.comcast.net/~nenjers/portfolio/teachers/teachers1.html

 

I'm just tweaking the CSS for the Teachers page of the Portfolio section for now. Once it works, I'll add the changes to the other sections.

 

Here's the story:

[1] I created the site in Dreamweaver CS3 on a Mac. It worked perfectly in Safari, Firefox and Opera on a Mac, and Firefox on the PC. IE7 killed it on a PC. (In IE7, the horizontal unordered lists of thumbnails on the portfolio pages displayed diagonally, which destroyed the page layout.)

 

[2] Today I figured out how to fix the CSS to work in IE6 & IE7, but that killed it in all the other browsers.

 

[3] It seems like the solution to this is a conditional comment for IE, but for the life of me I can't get the code right. Here's what I have:

 

------------------------------------------------------

 

 

 

 

 

 

 

 

-------------------------------------------------------

If anyone has any advice on what I'm doing wrong, I would TOTALLY appreciate it!!! I'm feeling so stuck. Thank you, and happy holidays to you all!

Link to comment
Share on other sites

Hi, thanks for the response! I guess I'm confused. The page needs all three of these style sheets to render correctly in non-IE browsers. (These sheets are reused in various combinations throughout the site, so I can't just combine them into one.) There are things that need to be different in each sheet for IE. Right now, my conditional IE style sheets are complete style sheets, not just the parts that are different, that should override the regular sheets if the person is using IE. Is that the problem? Should I link the regular style sheets, then conditionally add one sheet per page with just the changes? I'm fairly new to CSS (this is only my second big site using it), and I'm completely new to the world of conditional comments, so I'm confused. Thanks so much for your help! Happy holidays!

Link to comment
Share on other sites

Hi, thanks for the response! I guess I'm confused. The page needs all three of these style sheets to render correctly in non-IE browsers. (These sheets are reused in various combinations throughout the site, so I can't just combine them into one.)

 

Yes you can.

All of your pages should run off of the same style sheet.

 

Only use an additional style sheet to make browser corrections like for IE

 

 

Is that the problem? Should I link the regular style sheet{edit}, then conditionally add one sheet {edit} with just the changes?

 

Well, it will help if not fix it. Make those changes then come back and let us know what happens. :D

Link to comment
Share on other sites

I guess I'm confused again, sorry. My teacher told us to use multiple style sheets to help keep things organized. This site is 40-odd pages, with 11 style sheets. If I combined those all into one sheet, it would be insanely long. Would that be ok? What about the places where a more detailed setting overrides a general setting, such as #mainContent for the photo portfolio pages being a different size than #mainContent for the generic pages? Maybe I'm too new to CSS and don't understand this yet. Thanks again!

Link to comment
Share on other sites

I'll start by saying I have done almost the exact same gallery on numerous occasions with slightly different code. Only once have I needed a conditional comment for it and that was background alignment specific, and I use a No JS version. If you would like to have an idea of the code variation I use check my graphics page (sadly neglected but the code is good), my Layout CSS, and for the colour/effect aspect any colour sheet I use.

 

For anyone taking a peek... If you think 3 or even 6 style sheets is a lot... Throw in a style sheet changer. ;):P

 

It is not necessarily "wrong" to have style sheets split. Often you will find that a site splits colour/overall look/theme from structural, and "special" pages have an additional one with IE modifications having their own as well. This is likely closer to what your teacher meant. I am going to try to take you back to the basics so you get less confused, and so editing your site design or layout or special pages becomes a faster and easier experience instead of trying to figure out which style sheet to change, and then again which one to adjust for IE, etc.

 

I need to make sure you know this important piece of info: The LAST style sheet listed will OVERRIDE any before them. With one exception. If you used the "?important" attribute to change it.

 

I am also going to make the assumption you know that a class (written as .classname) can be used as many times as you want on a HTML page, while an ID (written as #idname) is only used once on a HTML page BUT I am putting it here as others may stumble on this in future searches.

 

That said...

 

We'll begin:

 

Firstly: The length of your CSS... The length of your CSS files will load top down. So if it is a background attribute or body attribute obviously it will be placed near the top. Image loading will also cause load times to vary so we keep them "smaller"... HOWEVER... Cascading Style Sheets purely that. Styling.

 

The HTML code is NOT affected with regard to load time. So the code it's self should be loading, and would produce an unstyled version of your site before the page load would suffer drastically.

 

If your code was heavy (meaning unused, extraneous code), or the images that are loading through the style sheet or in page are heavy file sizes then that would slow your site. From what I see you are using smaller file sizes so it is not an issue.

 

I will also say I have a client with a site that has over 80 pages of content, and very specific needs. A good place to take a look at how long a style sheet could be without affecting load time adversely would be to go to a CMS like Drupal and look at a base theme like Zen. They are very long, well commented, and load fast as they are not file size heavy.

 

 

 

Secondly: The conditional IE Style Sheets: You do not need full style sheets. You only need to add the CSS classes/IDs that you need to "adjust". Unless you are using the same name for a style on multiple style sheets you should only need 1 IE style sheet (version permitting). All of the adjustments should be done on the same style sheet to keep you from accidentally having contradicting code.

 

 

An example of what I mean is (and I was copying from a site with a longer list of style sheets and editing to what you need):

 

 

 

You can get version specific with multiple sheets for IE based on that but most times you do not need to with positioning issues if you can allow for a 4-8 pixel variance from my own experiences (IE 7 has changed some of that but if you are not already adjusting for that it is not needed).

 

 

 

Honestly... At this point I can't even begin to back track which sheet is affecting which because there are duplications of code that are not needed, etc. and these can over ride things so one COULD end up fixingit in A, breaking it in B, fixing it in C and breaking it in D if they were listed in that order. I think this is causing confusion for you on your end as well.

 

 

 

Now I will break this down for you:

 

--- This is how your site looks unstyled if someone was to print it. This is where you turn off all images/backgrounds/colours, etc. etc.

 

Often you would see things like this:

.classname {

color: #000;

background-color: transparent !important;

background-image: none !important;

}

 

Class name is often things like:

.wrapper or .page or .content OR #wrapper or #page or #content

 

And you would condense the style sheet with combining like styles as Eric said when he put this in:

 

 

#home #whatever {

color:#000;

}

 

 

This is where you define the font types, sizes, etc. This is where you would edit your p, h1, h2, h3 attributes... Not the colour per say. The sizing, text decoration, margins, etc. Because essentially these are the same for the whole site and when they are NOT the same they would have an individually styled class.

 

Example:

 

p{

margin: 10px;

font-weight:bold;}

 

And your code can be condensed with things like this:

ul, ul ul, ul ol,

ol ol, ol ul,

{

margin: 0;

}

- IF they share the same attribute.

 

It should also contain the links in this order:

 

a:link

{ text-decoration:none;

color: #999999;

}

 

a:visited

{ text-decoration:none;

color: #383636;

}

 

a:hover,

a:focus

{ text-decoration:underline;

color: #666666;

}

 

a:active

{text-decoration:underline;

color: #000000;

}

 

- Colour can be applied here for the site wide link colours and then if a new class/set of colours is needed for an exceptional circumstance it should be added to the "appearances" style sheet.

 

Interesting quirks to note about HTML elements and which often solves IE issues:

 

Almost all modern browsers use a 16px default font size. Specifying the font-size and line-height in ems (relative to the 16px default font) allows the user to resize the font in the browser and produces the most consistent results across different browsers.

 

If you were running into problems you would apply the following attribute to the HTML elements page:

 

body

{

font-size: 100%; /* Fixes exaggerated text resizing in IE6 and IE7 */

}

 

http://www.alistapart.com/articles/howtosizetextincss - Font size information and rendering of browser information can be found here.

 

 

 

This is where you put your CSS that pertains to your columns, and positioning of content on the page. If you want your menu in the left column, and floated there then this is where you do it. If you want to define your content width, or inner content width. This is where.

 

 

 

Your gallery is a unique circumstance and would be suited to its own CSS so that would be here. It is exactly as you have it.

 

 

This is where you apply your images, your colours, your special classes for links/text/html attributes, miscellaneous classes used through the site, etc.

 

 

 

One style sheet. All modifications. Denote it by classes, and only put in the classes/modifications needed. If IE needs different positioning, margins, or padding then do it here but do not include classes you have not had to adjust as that is already read in the previous CSS. You are simply making an amendment to one browsers incorrect rendering.

 

 

 

Yes... I know making the new blank CSS files and copying the code into the appropriate CSS files and then double checking against duplication will take you an hour or two but I promise... it is worth it. Your style sheets look like they have fairly clean code. They just need to be organized well for the hierarchy.

Link to comment
Share on other sites

Wonderful post, SLS. Chapter and verse of what I was trying to say!

 

I will add too that using comments in your CSS can help keep things organized as well.

 

For example:

 


/*[start] link section for home page*/

a:link
 {    text-decoration:none;
   color: #999999;
 }

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

 a:hover,
 a:focus
 {    text-decoration:underline;
   color: #666666;
 }

 a:active
 {text-decoration:underline;
   color: #000000;
 }

/*[end] link section for home page*/

Link to comment
Share on other sites

i tried to set a back round image with,

 

 

body {

 

background-color: #FFFFFF;

background-image: images/backround.jpg;

background-repeat: no-repeat;

background-position: right bottom;

background-attachment: fixed;

 

}

it worked at first but then I made a change somewhere in the css body and now there is no backround image. the change was not in the image directory so it should be ok but i can't figure out how to get it working again.

Link to comment
Share on other sites

dragdan... If you could please post the full CSS in a new thread we can properly address it there and it will be much easier to figure out why it is missing.

 

S

 

 

 

Good Add JBall. Maybe I'll do a new thread or check if we have one to add it to with tidbits like my post and yours. I think this confuses many who are learning or even adapting.

 

S

Link to comment
Share on other sites

Good Add JBall. Maybe I'll do a new thread or check if we have one to add it to with tidbits like my post and yours. I think this confuses many who are learning or even adapting.

 

S

 

 

Earlier this year someone had posted an organized css layout template of sorts....

 

I wish I could remember who that was so I could give kudos. I want to say it was Shelfimage. But, I could be wrong on that. Nonetheless, I still have the original code he/she posted.

 

And here it is:

 

 


@charset "utf-8";
/* CSS Document */

/* ---------------------------------------------
Screen Stylesheet for http://www.DomainName.com
Updated: 01/01/07
author: Your Name
website: http://YourWebSite.com
-------------------------------------------------
>> ::COLORS::

>> ::TOC::
Resets
Defaults
Typography
Forms
Tables
Template
Links
Menus
Global Classes
Content

------------------------------------------------- */

/* ---------- ::Resets:: --------------------- */
body, address, blockquote, dl, ol, ul, li, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre {
margin:0;
padding:0;
}
fieldset, table {
border:none;
}
/* ---------- ::Document Defaults:: ---------- */
html {
font-size:100.01%;
height: 101%;
}
body {
margin:0 auto;
height:100%;
font:62.5%/1.8em Tahoma,Geneva,Arial,Helvetica,'MS Sans Serif',sans-serif;
background-color:#FDFDFD;
color:#333;
}
/* ---------- ::Typography:: ----------------- */
blockquote, address, pre {
margin:.5em 2em;
}
blockquote, p, li {
padding:0 0 .4em 0;
}
h1, h2, h3, h4, h5, h6, p {
margin:1em 0;
}
h1 {
font-size:2em;
}
h2 {
font-size:1.6em;
}
h3 {
font-size:1.4em;
}
p, li {
font-size:1.2em;
}
/* ---------- ::Forms:: ---------------------- */
input, label {
vertical-align:middle;
}
label {
cursor:pointer;
}
input, select, textarea {
font-size:1.2em;
font-family:inherit;
font-size:inherit;
}
input, textarea {
padding:.2em;
}
/* ---------- ::Tables:: --------------------- */
table {
table-layout:fixed;
word-wrap:break-word;
overflow:hidden;
}
/* ---------- ::Template:: ------------------- */
#wrap {
margin:0 auto;
}
#middle {
}
#left {
}
#right {
}
#footer {
}
/* ---------- ::Links:: ---------------------- */
a {
text-decoration:underline;
}
a:visited {
text-decoration:underline;
}
a:active, a:focus, a:hover {
text-decoration:none;
}
a img {
border:none;
}
/* ---------- ::Menus:: ---------------------- */
/* ::Main Menu:: */
ul#nav {
}
#nav li {
}
#nav li a {
}
#nav li a:active, #nav li a:focus, #nav li a:hover {
}
/* ::Footer Menu:: */
#footer ul {
}
#footer li {
}
#footer li a {
}
#footer li a:active, #footer li a:focus, #footer li a:hover {
}
/* ---------- ::Global Classes:: ------------- */
.center {
text-align:center;
}
.clear {
clear:both;
padding:0;
margin:0;
line-height:normal;
}
.floatleft {
float:left;
}
.floatright {
float:right;
}
.hidden {
display:none;
visibility:hidden;
}
.inline {
display:inline;
}
.small {
font-size:10px;
font-weight:normal;
}
.large {
font-size:20px;
font-weight:bold;
}
/* ---------- ::Content/Pages:: -------------- */

/* /// specific page rules here /// */

Link to comment
Share on other sites

P.S. Great memory JBall!

 

Oh, thanks!

 

I can honestly say that handy tid bit has saved me hours of homework. :D

 

 

Last week was finals at school. Our final project for Web Scripting was to design a web site.

 

Please don't poke too much fun... :rolleyes:

 

I only had a week and homework from another class ( Posted on my blog if you want to see it)

 

And before you ask, everything that is silly was a required element. Like the splash page. Yeah, I know... a splash page. I am filled with shame. But, the code is good and by adapting shelf's template I cruised right through the code.

 

Got an A to boot. :D

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...