15 replies [Last post]
Foobster
Foobster's picture
Offline
Regular
Sweden
Last seen: 12 years 27 weeks ago
Sweden
Timezone: GMT+1
Joined: 2007-03-01
Posts: 26
Points: 0

I've written some conditional CSS comments and put them in , but I can't seem to get it right (or the way I want).

This is my code:


I want to use the oldie sheats for IE 6, and the other pair for standard compliant browsers such as IE7 AND FF.

My main problem is that FF seems to read and implement all style sheats.

* What is wrong and how do I solve it?

* How do I get Firefox (and other non IE browsers) to ignore the "oldie"?

Kind regards,
Foobster

Foobster
Foobster's picture
Offline
Regular
Sweden
Last seen: 12 years 27 weeks ago
Sweden
Timezone: GMT+1
Joined: 2007-03-01
Posts: 26
Points: 0

A solution?

After even more searching I found something that might work...



What do you think of that solution? Will it render any problems that I'm currently not aware of?

I hope that I now can use totally separate CSS-files for the browsers I want to target, and that no browser implements more than I've specified.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

It looks like you are using

It looks like you are using the conditional comments incorrectly. The IE browsers you are targetting will see an HTML open comment immediately after the condition. Non-IE browser will see a close comment. So Non-IE browsers will read all the style sheets and IE will read none of them.

This is what I do. I don't have problem with Firefox or any other browser reading incorrect stylesheets.

Every browser reads the main stylesheets. Then different IE browsers get their own stylesheets which contain any extra styles or modifications. In reality, the IE7 style sheet only contains a trigger for hasLayout for page layout elements ( div, ul { zoom: 1; } ) and the IE6 style sheet only ends up a with a couple more rules than that whenever I need to use min-* dimension properties.

Foobster
Foobster's picture
Offline
Regular
Sweden
Last seen: 12 years 27 weeks ago
Sweden
Timezone: GMT+1
Joined: 2007-03-01
Posts: 26
Points: 0

Eluding the problem...

Thanks Chris. I can see how your solution works out when you know exactly what is causing errors and know what to put in different files. Unfortunately I'm not so good at CSS (or the quirks and bugs) yet. I'll read about the haslayout to see if it can help me.

I would very much like to have complete separate files for each (or not each) browser. It must be possible somehow?!

In the mean time I have two css files that appear to be working as I want. If there is no other way than the above suggested, what do I put in my files?

Before I went to bed yesterday, it all seemed fine in both browsers, and even my apparantly incorrect conditional comments worked as I want... I shouldn't have gone to bed.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Wanting a stylesheet for

Wanting a stylesheet for each browser would tend to suggest the wrong approach it's simply not necessary or possible in many cases.

I'm not even sure that that many individual stylesheets for IE is necessary as mainly IE related problems can be dealt with through one generic sheet.

As to what to put in them entirely depends on the problems you are running into and that need correcting for IE, that is hard to say in a general sense although Chris has explained how he uses hasLayout trigger zoom:1; in one of them.

Quirks and bugs are a matter of slowly getting familiar with it may take a bit of time,but we're here to help along the way.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Foobster
Foobster's picture
Offline
Regular
Sweden
Last seen: 12 years 27 weeks ago
Sweden
Timezone: GMT+1
Joined: 2007-03-01
Posts: 26
Points: 0

Here are my style sheats

Hi Hugo.

For the moment I'm not running into any specific problems that I know of. I have one CSS file for FF and one for IE6. Apparently that's not the best way to go, it might not even be possible.

I understand that conditional comments are a MS invention to make it possible to walk around their bugs, but it would be quite useful if I could somehow use them to target all, none or specific browsers.

If there is no other way than to use a generic style sheat for ALL browsers and additional data for IE6 and IE7 I need some help sorting it out.

Here are my menues:

IE6 http://www.mkvab.se/test/meny3.asp
FF http://www.mkvab.se/test/meny2.asp

Ok, work in progress and newbee warning:

/* --- Menu style for IE6 --- */

/* --- List properties --- */
ul {
font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
margin: 0;
padding: 0;

}

/* --- Main menu properties --- */
#nav li{
position: relative;
width: 130px;
list-style: none;
float: left;
cursor: default;
background-color: #000066;
}

/* --- Drop down container --- */
#nav li ul{
display: none;
padding: 0;
margin: 0;
position: absolute;
top: 24px;
left: 0;
/*float: left;*/
width: 110px;
border-color: #000066;
border-style: solid;
border-left: 1px;
border-right: 1px;
border-bottom: 1px;
border-top: 1px;
background-color: #9999cc;
}

/* ----- Items in dropdown container ----- */
#nav li li{
display: block;
width: 100%;
float: left;
border: 0;
background-color: transparent;
}

/* ----- Dropdown effect from JS ----- */
#nav li>ul {
top: auto;
left: auto;
}

#nav li:hover ul, #nav li.over ul {
display: block;
}

/* --- Main menu links --- */
#nav li a{
font-weight: bold;
margin: 3px 0;
text-align: center;
font-size: 14px;
text-decoration: none;
color: #9999cc;
display: block;
width: 100%;
}

#nav li a:visited{
color: #9999cc;
}

#nav li a:hover{
color: #ffff33;
text-decoration: underline;
}

#nav li a:active{
}


/* --- Sub menu links --- */
#nav li li a{
font-weight: normal;
text-align: left;
margin: 3px 10px;
font-size: 12px;
text-decoration: none;
color: #111111;
display: block;
width: 100%;
}

#nav li li a:visited{
color: #111111;
}


#nav li li a:hover{
font-weight: bold;
color: #000066;
text-decoration: underline;
}

#nav li li a:active{
text-decoration: none;
}

And the code for Firefox:

/* ----- Standard compliant css file, for FF and IE7 ----- */

/* --- List properties --- */
#nav{
font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
margin: 0;
padding: 0;
z-index: 10;
}

ul{
display: inline;
}

/* --- Main menu properties --- */
#nav li{
/*position: relative;*/
width: 130px;
list-style: none;
float: left;
cursor: default;
background-color: #000066;
}

/* --- Drop down container --- */
#nav li ul{
position: relative;
margin: 1px;
padding: 0;
display: none;
float: left;
width: 128px;
border-color: #000066;
border-style: solid;
border-left: 1px;
border-right: 1px;
border-bottom: 1px;
border-top: 1px;
background-color: #9999cc;

}

/* ----- Items in dropdown container ----- */
#nav li li{
border: 1px solid #000066;
display: block;
width: 120px;
float: left;
border: 0;
background-color: transparent;
}

/* ----- Dropdown effect from JS ----- */
#nav li>ul {
top: auto;
left: auto;
}

#nav li:hover ul, #nav li.over ul {
display: block;
}

/* --- Main menu links --- */
#nav ul a{
font-weight: bold;
margin: 3px 0;
text-align: center;
font-size: 14px;
text-decoration: none;
color: #9999cc;
display: block;
width: 100%;
}

#nav ul a:visited{
color: #9999cc;
}

#nav ul a:hover{
color: #ffff33;
text-decoration: underline;
}

#nav ul a:active{
}

/* --- Sub menu links --- */
#nav ul ul a{
font-weight: normal;
text-align: left;
margin: 4px 8px;
font-size: 12px;
text-decoration: none;
color: #111111;
display: block;
width: 100%;
}

#nav ul ul a:visited{
color: #111111;
}

#nav ul ul a:hover{
font-weight: bold;
color: #000066;
text-decoration: underline;
}

#nav ul ul a:active{
}

Foobster
Foobster's picture
Offline
Regular
Sweden
Last seen: 12 years 27 weeks ago
Sweden
Timezone: GMT+1
Joined: 2007-03-01
Posts: 26
Points: 0

the best way to style the links...

An observant reader might notice that I don't use the same tags for styling the links in the two sheats.

#nav ul ul a vs #nav li li a etc...

I've been experimenting to find the best solution. How should it be in this case? I assume you understand what effects I'm after - to use different styles for main and sub links.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

If you build your initial

If you build your initial style sheet against Firefox (or Opera or Safari) it is then relatively straight forward to make the few adjustments necessary for IE6.

Either of your rule selectors is ok. The main consideration is consistency. If you do things the same way, similar selectors, similar order, you will find it much easier to maintain your older CSS based sites.

Foobster
Foobster's picture
Offline
Regular
Sweden
Last seen: 12 years 27 weeks ago
Sweden
Timezone: GMT+1
Joined: 2007-03-01
Posts: 26
Points: 0

Ok, then I'll use #nav li li

Ok, then I'll use #nav li li a. Smile

Is it always so that IE6 needs something extra? I mean will there never be collisions of different tags?

I had some problems with obtaining a border around my dropdown in FF, so I solved that in a less conventional way. I can see how this becomes a problem in IE, but I've read and tried and not come up with a better way.

Can someone help me with my standard obidient css file so I have something to work from?

It feels kinda sad to destroy everything I have so far, since its very close to working.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

IE6 has a whole host of bugs

IE6 has a whole host of bugs and non-standard behaviour. Most of the bugs have easy solutions or work arounds. Once you become familiar with them, its easy to build your CSS taking those things into account. Other browsers do have bugs and non-standard behaviour, but they involve much more obscure effects - meaning its normally pretty easy to avoid them.

This is my basic IE6 stylesheet. For me, I rarely need to add anything to it - except for the mentioned height or width when the main stylesheet uses min-height.

/* * generic ie6 styles (also applicable to ie5) * CS:JD 2007-04-12 * * mostly triggers for hasLayout and fixes for absence of min-* & max-* properties * * behaviours to provide IE with *:hover and png alpha transparency support body { behavior: url(./js/csshover2.htc); } img { behavior: url(./js/pngbehavior.htc); }

*/

body { }
img { }
h1, h2, h3, h4, h5, h6, p { margin-top: 0; }

div, ul {
zoom: 1;
}

I build a page, testing against Firefox, in the expectation that with that small stylesheet, the page will work against IE.

I haven't looked at your dropdown border. In most cases, you'll find you've relied on some "feature" of IE6 that no other browser has. Then you "fix" the problem in the other browsers, when they were never broken. Its wrong-headed.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I've now looked. I take it

I've now looked. I take it the float:left is your solution?

IE6 automatically contains floats when the container hasLayout. Standards compliant browsers don't - which is correct. E.g. if you had a paragraph with a floated picture, standards compliant browsers can have several paragraphs run along side the picture while still keeping the picture in the content at the appropriate place. IE6 (with hasLayout) can't do that.

There are three main ways to contain a float.
- float the parent, which you've done. There is no harm in making this style visible to IE6.
- use overflow. overflow:hidden is probably the best way as now IE6 and other browsers are all (pretty much) behaving in the same manner. IE6 with hasLayout is very similar to other browsers with overflow - when no height dimension is specified. Again, IE6 can see this style and it causes no harm.
- have some cleared content after all the floats. See clearfix. IE6 can't see clearfix - so its safe to leave it in your main stylesheet.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Foobster at the moment you

Foobster at the moment you are likely making one of the classic errors when it comes to CSS and one of the reasons that there was/is always so much talk of hacks and workarounds; putting aside what are actually bugs or cross browser rendering problems i.e double margin bugs (IE6) in reality there are seldom the reasons that people think for needing 'hacks' it's actually one of the clearest indicators of someone not that conversant with the language they are using that you see the properties littered with hacks and adjustments, as you progress and get used to the problems you will find that they can be dealt with without hacks or needing too many targeted rules.

Very very often what happens is that people encounter a problem and are unaware that this is in fact due to not understanding a properties behaviour well enough, to get around the perceived problem some device is used but that then throws out another browser so that 'other' browser requires an adjustment and before you know anything you have spiralled out of control and lost control over what's happening.

Before deciding that a 'hack' or separate rule is required be sure that it's not in actual fact a misunderstanding of what's happening.

I realise this is not directly helpful but it's more an attitude to adopt to your coding always assume that you are in error first not the code or browser

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Foobster
Foobster's picture
Offline
Regular
Sweden
Last seen: 12 years 27 weeks ago
Sweden
Timezone: GMT+1
Joined: 2007-03-01
Posts: 26
Points: 0

Thank you for you answers.

Thank you for you answers.

I am starting to understand your philosophy, but for the moment it feels frustrating and uncomfortable. It seems as I have started from the very wrong end and made all possible errors. The most unfortunate problem is that I may not give up. My confidence is quite low at the moment, and this project is really destroying my summer.

Can you recommend some good sites or books, where I can find correct and good information about css?

I need to read about standard things, regarding lists, layouts and basic styles. I don't find the definitions helpful, since I'm not good enough to understand them. And I don't like all those sites that don't tell the whole truth...

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 3 years 3 weeks ago
Bournemouth
Timezone: GMT+1
Joined: 2007-05-31
Posts: 693
Points: 45

Richard and Judy will love it!

Ooooh! I love this question!

Foobster, I read through the following book from start to finish and then started using this site afterwards... and it all made sense. I'm still learning of course, you don't get really good until you've had plenty of practise, but my point is this book really helps. It also talks a lot about Web Standards and Accessibility and is funny to read, and designed for beginners. I know I sound like I'm trying to sell it to you, but I'm not, I'm just a big fan Smile

"Beginning CSS Web Development : From Novice to Professional" by Simon Collison

John

Have YOU said Hello yet?
The CSSCreator Hello Thread

Foobster
Foobster's picture
Offline
Regular
Sweden
Last seen: 12 years 27 weeks ago
Sweden
Timezone: GMT+1
Joined: 2007-03-01
Posts: 26
Points: 0

Thank you Burlster. I'll see

Thank you Burlster. I'll see if any more suggestions comes up. I have to order from Amazon, since those books can't be purchased in Sweden.

Foobster
Foobster's picture
Offline
Regular
Sweden
Last seen: 12 years 27 weeks ago
Sweden
Timezone: GMT+1
Joined: 2007-03-01
Posts: 26
Points: 0

FF ok. IE7 next....

I've now managed to make it look right in FF. Unfortunately (according to a friend) it does not behave in IE7.

I had hoped that very little and small things would be the problem, but something is amiss with the way the dropdown menu acts. It doesn't go on top, it pushes everything down instead.

I tried to implement the zoom declaration for IE7 in a separate sheat:

div, ul { zoom: 1;}

But I'm not sure the command is accepted/recognized. (It's coloured orange instead of green)

This is what it looks like now (FF friendly): http://www.mkvab.se/test/index.asp

It's totally wrecked in IE6, but I'll see how I can solve that tomorrow.

I wonder if there is something fundamentally wrong with my containers that causes the problem for IE7. I've coded them like so:

body { background-color: #888888; margin: 0; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; }

/*------ Layout ------*/
#active {
position: relative;

z-index: 0;
height: 640px;
margin-left: auto;
margin-right: auto;
width: 880px;
border: 1px solid black;
background-color: #f5f5f5;
}

#header {
position: relative;
z-index: 1;
vertical-align: text-bottom;
text-align: left;
width: auto;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
border: 1px solid black;
background-color: #ffffff;
min-height: 106px;

}

#contents {
position: absolute;
overflow: auto;
z-index: 0;
height: 500px;
margin: 10px;
width: 860px;
border: 1px solid black;
background-color: #ffffff;
text-align: left;
}

#footer {
height: 50px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
width: 500px;
border-top: 1px solid #707070;
}

I have to use absolute position, otherwise the dropdown pushes in FF.