23 replies [Last post]
klaus
Offline
Enthusiast
Last seen: 17 years 5 days ago
Joined: 2004-11-28
Posts: 67
Points: 0

Hi guys,

I do appreciate your advise - however - the reason I changed and indeed started over was because the old design did not at all work in Opera and nobody had any comments or advise - so I started from scratch...

Now my page looks 100% the same in IE, Firefox, Safari and Opera with the sad exception of the color of the left and right nav not having the same color all the way down.

I don't really understand why you are all making this whole thing into a mystery - it is not like I am not trying to resolve it myself..

So my question is: Does anyone have any specific code they can recommend me using that does NOT involve graphics, faux columns solutions - as I did get it working on my old design - sadly the columns were not positioned the same across browsers in the old design and I hence started over....

Old:
http://www.ameinfo.com/x_ameinfo/

New:
http://www.ameinfo.com/z_ameinfo/

I have been reducing the css with more than 1 kb - and still looking the way I want it - so I have learned something..

Any specific code example that can resolve that last little bit of getting the two left and right hand nav colors to follow all the way to the end of the page would be really highly appreciated.

Merry Chrsitmas

Klaus

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 29 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Last call for help

Klaus - so far as I know, the best minds of CSS have not been able to get backgrounds of floated columns to extend to the bottom of the longest content - hence the faux columns workaround. While what you have come up "appears" to work, your relapse to absolute positioning has taken the columns positioned in that manner "out of the flow" and you have to hope that your mid-col is always the longest or else the side columns will slip below your footer, breaking the design. (To test this assertion, simply remove the majority of the content from <div id="mid-col-2"> - you will see the absolute columns sticking out below the footer)

If you really have an aversion to using the faux columns technique but want the appearance that the columns extend to the bottom, you can always return to tables for the primary layout (but that defeats the purpose of this exercise, doesn't it?). You will, of course, be forced to accept the left-to-right content sequencing imposed by table-based design as opposed to the flexibility of source-ordered columns.

It is your design, Klaus, and we can only provide advice and point out matters that give us concern.

On the niggly-bits side of things: You have chosen to use <br /><br /> instead of <p> for spacing your paragraphs - <p> is semantically the more correct and the basic styling for <p> can be changed so that it does not have a margin at the top. There are a few places where you are restating default properties like in: #top-section {position:relative; left:0; top:0;} - the left and top default to 0 anyhow - that whole section could be reduced to:
/* Layout */
#top-section,
#mid-section,
#bottom-section {
position:relative;
}
You have used Tony's .clearfix code but it is incomplete since the code required for IE is missing.

You are trying to juggle many, many things right now - it might be time to stop for a minute and pick up the one's you've dropped before adding any more :roll:

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

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

Re: Last call for help

klaus, I have to admit to being ever so slightly offended by some of your remarks Smile

klaus wrote:
and nobody had any comments or advise - so I started from scratch...


Klaus I spent a lot of my time as indeed did others working you through your design. To say that no one offered you advise even if you refer to the Opera problems is a bit of a slap in the face. The problems in Opera shouldn't have been that great that you had to do a complete redesign and even so you needed to still follow the basic advice given before.

klaus wrote:
I don't really understand why you are all making this whole thing into a mystery - it is not like I am not trying to resolve it myself..


We are not making the whole thing into a mystery , with the greatest of respect you seem to be struggling with some of the concepts we have endeavored to explain, hence my confusion at your reversion to using Absolute Positioning and it makes it very hard to help when we have to point these issues out to you. As DE says, you seem to have an aversion to the faux column technique yet it really is the only answer in these circumstances and is a tried and tested method used by many.

As DE has said this is your design at the end of the day we can only offer guidance and point you in the right direction, but cannot do the whole work for you.
We give our time and experience pro grata and whilst we endeavor as much as possible to help people it's essential that they pay careful attention to the advise given, which granted may not always be perfect but it usually will provide more than enough guidance to sort things out with.

Please listen to DE's advise and step back and take stock of things, and some of the advise that has been given in the previous topic , as you are probably closer than you believe to a working layout .

Lastly none of my comments in any way mean no help will be forthcoming it's just that it becomes difficult to have to re-iterate the same advice or solutions .
So please post back when you have got a few of the problems sorted out and we can check things over for you.

Merry Christmas Klaus,

Hugo.

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

klaus
Offline
Enthusiast
Last seen: 17 years 5 days ago
Joined: 2004-11-28
Posts: 67
Points: 0

Last call for help

Hi DE,

Thanks for your comprehensive reply - I added:

* html .clearfix {height: 1%;} (that was what you refered to right?) and also fixed up the:

#top-section, #mid-section, #bottom-section {position:relative;}

Nice one! (I should have spotted that one)

You are of course right - if the middle column is not the longest the design breaks Crying

I tried getting rid of absolute positioning but can't seem to make it work whn I have the mid content at the top of the HTML code - everything is being pushed down..

If I surender to the Faux solution - are you aware of a default structure I can use that works on all browers (ie header, 3 columns, and footer with fixed width left not centered)..

I tried most of these:
http://css-discuss.incutio.com/?page=ThreeColumnLayouts

But all of them seem to have som sore of down side..

I am ready to start over one more time to get it right - or if you suggest I go back to the old design /x_ameinfo/ and then try to figure a way of getting the mid content to the top of the code..

Cheers
Klaus

klaus
Offline
Enthusiast
Last seen: 17 years 5 days ago
Joined: 2004-11-28
Posts: 67
Points: 0

Last call for help

Hi Hugo,

Really sorry if I offended anyone that was certainly not the intention - I really do appreciate all your input which I also feel that I have not forgotten to mention in all my posts.

I am of course not asking you to do the work for me - but if my problems could be resolved by a line of code it would be great to get that line - but I take it that there is no simple fix.

Anyway - I'll go back to reading and trying - eventually I'll get it right and when I do I'll post it here.

Merry X-mas and once again my appologies to anyone feeling offended.

Klaus

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 29 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Last call for help

I must echo Hugo's sentiments a bit - you got tantalizingly close in the previous threads and then seemed to back away. This, in part, prompted me to post my comment on ordering priorities. I think Hugo and I see the priorities slightly differently than you do and that is causing some creative tension. You've responded in a very positive manner and everybody's cool so lets keep at this.

OK Klaus - I know you have been working hard so you get one real freebie from me. This is close but not perfect because there are a couple of small tweaks still needed . I have attached rewritten but only partially validated CSS/XHTML that (mostly) does the trick.

It does all your columns using position:relative; and applies a faux column effect (using a background served from my website - please d/l for your own use) to the body background. I did not change your HTML itself except apply the class="clearfix" to <div id="mid-section" class="clearfix"> and remove the long section of dummy text. (oh, and I had to remove the javascript references since I was using a javascript bookmarklet to edit the page) Everything else was done by manipulating the positioning of the source-ordered columns using positive and negative margins relative to where the previous float was situated.

I hope this will inspire you to reconsider your current approach. I did this entirely using the Edit HTML bookmarklet and the edit styles tool in the Firefox webdevelopment toolbar. Consequently, it has not been tested in other browsers.

I'd be happy to explain what I did after you have poured over the CSS a bit. The CSS is reordered now to put the positional ids first since they are most important and what we want to get to first in the CSS.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

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

Last call for help

Worry not Klaus, no real offence taken, hence the smiley face thingy at the end of the sentence. it was more by way of trying to explain the problems that we were facing in trying to help you.

Anyway DE has given you a very nice early christmas present there and if he is anything like as rushed at the moment as I am, was very kind of him.
A cursory look in FF and IE looks good and the code should give you a firm base to work on , but dissect it and work through what he has done with the CSS as it will help much in the long run.

Hugo.

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

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 29 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Last call for help

I was in a hurry and didn't post the tools links I intended.

EditHTML bookmarklet
EditCSS Bookmarklet
For info on what bookmarklets are and how to use use them check info from Bookmarklets.com or Subsimple , both of which have bookmarklets. In Firefox I actually keep my most used bookmarklets on my bookmarks toolbar for instant retrieval. I think the most commonly used one is the Ancestors Bookmarklet that tells you what styles are applied to the document object under your cursor. It allows you to quickly find the styles that need editing.

Firefox Webdevelopment Toolbar

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

klaus
Offline
Enthusiast
Last seen: 17 years 5 days ago
Joined: 2004-11-28
Posts: 67
Points: 0

Last call for help

David - you are a star!

I think I get it now - I'll be playing around with it a bit more to ensure I get it completely - I have however fixed it up now on:

http://www.ameinfo.com/z_ameinfo/ Wink

I noted that you used rgb values instead of ex #000; - are there any advantages to that? (I changed it back and fixed a few minor errors so now css and xhtml validates too).

I made a check using browsercam.com and here are the results:
http://www.browsercam.com/public.aspx?proj_id=122790

And here a quick overview/status (I'll update as I solve problems):

Problems:

Position of picture mid page:
Explorer 5.0 FIXED
Explorer 5.5 FIXED

Top left navigation styling: (background color/img missing?!)
Explorer 5.0 FIXED
Explorer 5.5 FIXED
Explorer 6.0 FIXED

Logo top position moved to right:
Konqueror 3.0.5 - Red Hat Linux 8. ...FIXED

Navigation position: (moved x pixels to right)
Opera 6.0 FIXED
Opera 7.0 FIXED
Opera 7.1 FIXED

Not compatible: (no css support)
Netscape 4.78
Explorer 4.0
Explorer 5.2 - Macintosh OSX 10.3 FIXED

WORKING AS EXPECTED:
Macintosh OSX 10.3
Mozilla 1.6
Netscape 7.0
Safari 1.2
Explorer 5.2

Red Hat Linux 8.0
Mozilla 1.6
Netscape 7.0
Konqueror 3.0.5

Windows 2000 and XP
AOL 9.0
Firefox 1.0
FireFox 1.0PR
Mozilla 1.7.3
Netscape 6.2
Netscape 7.0
Netscape 7.1
Opera 6.0
Opera 7.0
Opera 7.1

Thank you so much for your help - really made my day!

Cheers
Klaus

klaus
Offline
Enthusiast
Last seen: 17 years 5 days ago
Joined: 2004-11-28
Posts: 67
Points: 0

Last call for help

Update and status:

Opera 6.5, 7.0 and 7.1 fixed
Added padding:0; to the body and that did the trick..

Konqueror 3.0.5 fixed
added <div class="clearfix"> around text and the logo seperately - also works fine on other browsers

IE 5, 5.5, 6.0 fixed
added <div class="clearfix"> around the entire left nav - also works fine on other browsers

IE 5 Mac fixed
Added the hack4mac .clearfix {display: inline-block;} /* HideMac \*/ * html .clearfix {height: 1%;} .clearfix {display:block;} /* End Hack */ and added <div class="clearfix"> around right nav too Wink

Latest check: Updated
http://www.browsercam.com/public.aspx?proj_id=122933

Getting there Wink

Cheers
Klaus

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 29 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Last call for help

klaus wrote:
I noted that you used rgb values instead of ex #000; - are there any advantages to that?
That is simply an artifact of using the EditCSS feature of the Webeveloper toolbar - it outputs as RGB rather than Hex. I changed a couple to Hex but it was going to be too time consuming so left it for you Smile

There were also a couple of -moz-something additions that are also a byproduct of using the EditCSS tool that I left. Those annoyances don't really detract from the usefulness of being able to edit a live page.

I hope this also illustrates to you and anyone who has been following this thread that CSS has both an enormous range of capabilities and frustrations. Once you have properly formed XHTML with the major structural blocks having ids you can do one heck of a lot. You would never have been able to source order a table based layout, for example, without actually reordering the source.

I also have a confession to make. I have never personally used source-ordered columns or faux columns in any of my layouts. So it was with great trepidation that I actually tried rolling the two techniques together. I must say I am rather relieved that it worked O:)

I commend you for taking the effort to get this working in as many browsers as possible. One of the next steps should be to take the CSS embedded in your <head> section and move it into an external stylesheet that is @imported - that will hide it from the earlier browsers and they will at least see a usable page with the content at the top. It is too bad that it blows up on a couple of Mac browsers. I'm not sure what the Opera screen was all about because it works fine in Opera 7.5. One last trick to try is to wrap the entire page in a #wrapper {position:relative;width:768px;} - it will sometimes tame elements jumping out of place. Incidently, it could become the div with the faux background instead of the body. Remember that validation is important as well - it not only has to look good, it has to BE good.

Oh, I almost forgot. You need the Mac IE5-specific piece of .clearfix

 .floatcontainer{display: inline-block;}
/* Mark Hadley's fix for IE Mac */ 
/* Hides from IE Mac \*/ 
* html .floatcontainer {height: 1%;} 
.floatcontainer{display:block;} 
/* End Hack */ 
Be sure to check Tony's full explanation.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

klaus
Offline
Enthusiast
Last seen: 17 years 5 days ago
Joined: 2004-11-28
Posts: 67
Points: 0

Last call for help

Thanks for the tools for FireFox - it seems to end up as my default browser soon - just so much better than IE

I wrapped the whole page as you suggested - not much change but I guess it won't harm either - it did manage to contain the ie5 for Mac - though the page is still far from any good.

http://www.browsercam.com/public.aspx?proj_id=122835

As for the Mac fix - you you mean I should use it as:

 .claerfix{display: inline-block;} 
/* Mark Hadley's fix for IE Mac */ 
/* Hides from IE Mac \*/ 
* html .clearfix{height: 1%;} 
.clearfix{display:block;} 
/* End Hack */ 

or- should I insert a .floatcontainer somewhere in the HTML bit over and above the clearfix?

I noted that some of the browsers have a way small font - can you suggest a fix (ie have them download the Tahoma/Verdana as it seems they don't have it) or are there other ways? (Opera 6.0 on Mac for example as double line spacing)

Another strange thing I noticed is way the Konqueror 3.0.5 - Red Hat Linux 8. deals with:

.pgnav li {display: inline; background: url('/x/c.gif') no-repeat 5px 50%; margin: 2px -5px; padding: 2px 2px 2px 12px;}

It does not respect no-repeat and prints the arrow all over the place (as the only browser).

Otherwise yes I need to @import the css - just waiting till I have the code right as it is easier to edit in the page than in a seperate file.

- oh and of course both xhtml and css validates Wink

Cheers
Klaus

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 29 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Last call for help

Sorry - Tony's method has got a couple of names applied to it now in different places. I have my own variant I call .autoclear

 /*Tony's Float clearing technique.
    Just add class="autoclear" to the float container*/
    .autoclear:after { 
    content: "."; 
    display: block; 
    position:relative; /*this is added in mine so it works better with IE5.* */
    height: 0; 
    clear: both; 
    visibility:hidden; 
    }
    /* Mark Hadley's fix for IE Mac */ 
    .autoclear {
    display: inline-block;
    } 
    /* Hides from IE Mac \*/ 
    * html .autoclear {
    height: 1%;
    } 
    .autoclear {
    display:block;
    } 
    /* End Hack */ 
You might want to stick a bit of a background on the body (like http://www3.ns.sympatico.ca/d.elliott/demos/ameinfo.gif) and put the faux column background on your wrapper - it seems to need something - too much black for me. You could turn the logo sideways and make it a lot larger but keep it almost black on black. The problem with fixed width designs is what to do with the extra real estate.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

klaus
Offline
Enthusiast
Last seen: 17 years 5 days ago
Joined: 2004-11-28
Posts: 67
Points: 0

Last call for help

Thanks David - well I actually sell the empty space on the right so I need to keep it black.

A few things I have done now:

1. I have implemented the autoclear code (but named it clearfix so I did not have to change the code) - btw - display:inline-block; is not valid css - I got an error so changed it to display:inline; - is that ok?

2. I have replaced the top logo with a text link in case a browser does not support images and now loading the logo image via css (also nice for the heandheld version so I can shuffle logos as I please by loading another css) - Does it look right or is there a smarter/better way?

3. Added link in <head> to RSS feed - seems to make a difference in FireFox Wink - this will obviously be a dynamic link to the the current section once this all goes live one fine day.

4. Added a print.css - not yet that good - but on the case... guess my idea of a background image as logo is not so hot afterall as it does not show up on the print preview Sad perhaps I should stick to my XHTML printer friendly pages and not reply on a css for this?

5. my css is only 3.4kb - are there any advantages in having it as a seperate file? We use mod_gzip so 3.4 kb would hard make a difference - but in the Speed Report it appears that the fewer objects the better - any suggestions?

Any other sugegstions as to optimize the CSS or the page in general are welcomed.

Cheers
Klaus

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 29 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Last call for help

Display:inline-block; is a CSS2.1 working-document property that happens to have gotten an early implemention in IE. It will almost certainly be a part of future CSS so that you can have a text block box treated like inline images are currently. It doesn't validate by the current CSS standard, however. If validation is important you could hide the CSS in an IE conditional comment - perfectly legal. For a bit more info: http://www.webmasterworld.com/forum83/4640.htm . And to answer your question - it has to be inline-block to work in the target browser, IE Mac.

For your print stylesheet you should consider having only the content displaying - turn off your side columns, change the center to a full-width non-floating block, and add a text heading for your current masthead. The text heading would ordinarily be display:hidden except in the print or non-screen media. Take a look at my http://www.gov.ns.ca/health/policywatch/acu.html for an example of a three column design that prints only the center column in full page width.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

klaus
Offline
Enthusiast
Last seen: 17 years 5 days ago
Joined: 2004-11-28
Posts: 67
Points: 0

Last call for help

Hi David,

With the risk of pushing my luck here - It is my understanding that IE conditional comments can only be made for IE on Windows - it will not work on Mac - or am I missing something? I tried to use the comment in the css but then I got error in the validator..?

as in:
<!--[if IE]> code here <![endif]-->

Do you suggest I load the main CSS seperately - considering the small size (~3.3 kb) - I know that I would benefit from the CSS being cached - but it is also a http request so what is best/more effecient?

I have made a Print css and it works - well sort of:
I implemented it like:
<link rel="stylesheet" href="/x/p15.css" type="text/css" media="print" />

Assuming that it shall not be loaded unless a printer is looking at it?

For some reason the .about bit is not working out - the div does not respect the padding:10px; on the right side (top, left and bottom is fine) - any ideas?

By the way - managed to fix IE Mac, and IE 5/5.5 image position problems Wink -- even IE4.0 looks decent. For those interested if you are using background images then use " not single ' - IE for Mac ignores the URL if it is not in double quotes

http://www.browsercam.com/view.aspx?proj_id=122933

Cheers
Klaus

klaus
Offline
Enthusiast
Last seen: 17 years 5 days ago
Joined: 2004-11-28
Posts: 67
Points: 0

Last call for help

Hi Guys,

I noted that I indeed still have one absolute position left:
#mid-n {padding: 0; position: absolute; top: 0; left: 150px; width: 468px;}

Is there any way of placing this bit at the very top of the <div class=content> as it is physically placed at end of the page - but within the <div class=content>

I tired relative; top:0; but no luck - is it at all possible? (it would also help me push the <h1> down automatically instead of depending on pixels)

Cheers
Klaus

klaus
Offline
Enthusiast
Last seen: 17 years 5 days ago
Joined: 2004-11-28
Posts: 67
Points: 0

Last call for help

bump :oops:

Cheers
Klaus

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 17 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Last call for help

Quote:
I tried to use the comment in the css but then I got error in the validator..?

as in:
<!--[if IE]> code here <![endif]-->

You have to use it in an html portion of the code.

<style type="text/css">
  all sorts of stuff
</style>

<!--[if IE]>
<style type="text/css">
  stuff that overrides previous stuff only in IE
</style>
<![endif]-->

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

klaus
Offline
Enthusiast
Last seen: 17 years 5 days ago
Joined: 2004-11-28
Posts: 67
Points: 0

Last call for help

Thanks Gary - still causes css validator to give an error though

Cheers
Klaus

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 29 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Last call for help

Klaus

Sorry to not reply earlier - I have been on vacation.

As kk5st has stated you have to put your IE specific styles within the conditional comment block. The validator does not "see" the code within the block - I just checked the validator on a page with this trick and it is invisible to the validator.

If the validator is seeing it then the comment is not working as it is supposed to.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

klaus
Offline
Enthusiast
Last seen: 17 years 5 days ago
Joined: 2004-11-28
Posts: 67
Points: 0

Last call for help

Thanks David - tried it again in one line and now it works?!
- hope you had a good break Wink

<!--[if IE]><style type="text/css">.clearfix{display: inline-block;}</style><![endif]-->

By the way - any advantages to loading the CSS as an external file considering the fact that it is < 4kb and it would cost a http request

Cheers
Klaus

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 29 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Last call for help

The benefits of an external CSS file are in order of priority:

  1. Maintainability - update the site in one file. - if you have only a few pages - not a big deal but if you have a large site it can be prohibitive to change the embedded CSS in each file and that is part of what CSS was designed to prevent.
  2. You can hide the CSS from downlevel browsers using @import and other tricks that don't work on embedded styles
  3. Sure an external CSS is an extra request on the first page, but after that it is cached. All additional pages will be carrying 4kb of extra unnecessary weight. However, in terms of importance - this doesn't really sway the decision like the first two priorities do.

DE

[/]

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

klaus
Offline
Enthusiast
Last seen: 17 years 5 days ago
Joined: 2004-11-28
Posts: 67
Points: 0

Last call for help

Hi David,

Thanks for the tips - the way my site is built is that all pages are dynamic and hence all pages has the same "header" file where I can then chose to include the CSS or to import it from there. So maintainability wise it is the same for me.

I guess the search engines get quicker through the <head> bit as well if there is a link to a css and not the entire css embedded - the code certainly looks cleaner..

By the way - the <!--[if IE]> thingy was not a success - I managed to get the CSS Validator to ignore it and pass without errors - sadly Mac IE also ignored it :roll: - no further comments are needed I think...

Cheers
Klaus