s9y and the lovely Internet Explorer 7 :-(

[stm999999999]

hello,

the time has come and M$ make a new IE.

The IE7 does not like such hacks like "* html .sidebar_header" anymore, but we still need this annoying different css-codes because IE7 ist still not able to be standard-compliant.

for example, my blog has no left sidebar with the IE7, because the normal css-code does not work with IE7 and the workaround is no longer read by IE7

So, IE7 does not work with things like "* html" anymore the only way I see to give them their own code are the Conditional Comments. Looks nice but have a great disadvantage for s9y: It is based in HTML-comments, so we could not use it in the style.css of template!

They can only be used in the html-part, so - if s9y wants to support hte ie7 - we have to give the layouters a chance to make the ie7-related-css in a seperated style-ie.css and we must include this into the head-section of sy9 with Conditional Comments.

for myself I can add these in a html-head-nugget, but this is to individual and no choice for a template on sparatacus or even a site with a theme-changer.

[carl_galloway]

Hey dude,

I'm actually having a different experience from you, all my latest designs that I'm working on are fully cross-browser compatible between ff2, IE7 and Opera 9. I haven't had a single problem with IE7 not understanding the same html/css as ff2. In fact I'm finding its so great for design that I don't need * html styles anymore, and I've been able to get rid of the conditional IE only comments as well.

Can you let us all knowe which template/plugin is using code that causes problems so we can test this. Personally I'd like to get to a point where the Serendipity community doesn't have to worry about cross-browser problems, I might be dreaming but I thought IE7 might actually be part of the solution.

Carl

[garvinhicking]

Hi!

I always thought that IE would also parse those [IF] conditionals in the CSS files?!

Regards,
Garvin

[mattsches]

To my knowledge, conditional comments must be placed in the HTML code only, not in the CSS files.

[yellowled]

To my knowledge, conditional comments must be placed in the HTML code only, not in the CSS files.

How should they work in CSS files? They're included using HTML comments.

However: Is my shortsightedness getting worse or why can't I see why all this should be a problem in s9y templates?

YL

[garvinhicking]

Hi!

How should they work in CSS files? They're included using HTML comments.

I thought this:

Code: Select all

/* <!-- IF [IE] --> */
mytag {
  color: black;
}
/* <!--/IF--> */

Or something like that. Which would be valid CSS and valid HTML comments...?

Anyways, I never tried it, but I thought I read it somewhere

However: Is my shortsightedness getting worse or why can't I see why all this should be a problem in s9y templates?

I think this should be solved on a per-template basis, not globally by a "style-ie.css". I refuse to make that extra code branch just for IE. IMHO with IE7 everything should become better, not worse. *G*

Best regards,
Garvin

[yellowled]

I thought this:

Code: Select all

/* <!-- IF [IE] --> */
mytag {
  color: black;
}
/* <!--/IF--> */

Or something like that. Which would be valid CSS and valid HTML comments...?

Well, first of all the syntax is different

Code: Select all

<!--[if IE]>
<p>Welcome to Internet Explorer.</p>
<![endif]-->

See the MS workshop on conditional comments for details.

Second: I haven't tried it in CSS, but I can't imagine it would work because the concept of conditional comments is that all browsers but IE ignore the conditional comments - which wouldn't be the case if they're included in CSS comments, right?

I think this should be solved on a per-template basis, not globally by a "style-ie.css". I refuse to make that extra code branch just for IE. IMHO with IE7 everything should become better, not worse. *G*

'Should' being the operative word here

After all, I can't imagine a global 'style-ie.css' which would work with any template out of the box. The best approach is probably the following: Do your template, view it in IE, and if there's anything to fix use conditional comments for that.

Personally, I'd also vote not to support IE below 7 any longer, but that's just me being annoyed by IE

YL

[stm999999999]

I think this should be solved on a per-template basis, not globally by a "style-ie.css".

After all, I can't imagine a global 'style-ie.css' which would work with any template out of the box.

There should be a misunderstanding: I do not want a global style-ie.css. You are totaly right, its content is very template-specific.

But - In my scenario - we need a global function in s9y-files to include a style-ie.css, if there is such file in the choosen template!

[stm999999999]

I'm actually having a different experience from you, all my latest designs that I'm working on are fully cross-browser compatible between ff2, IE7 and Opera 9. I haven't had a single problem with IE7 not understanding the same html/css as ff2.

For my css IE7 is still a piece of cr***

Look at my blog

http://blog.stephan.manske-net.de

I make a html nugget with:

Code: Select all

 <!--[if IE]>
    <style type="text/css">
#left  {
left: 230px; /* RC width */
}

.ie-warning {
border: red 2px solid;
margin-top: 5px;
margin-left:20px;
margin-right:20px;
padding: 10px;
}
.serendipity_entryFooter {		/* stm: exchange the background with a border*/
    border: dashed 1px black;
}


</style>
  <![endif]-->

I put it only to the overview site, so you can see the different at every single arcticel page.

major problem: without the additional #left - left: the left sidebar will not appear in IE!

my normal code

Code: Select all

#left {
width: 230px; /* LC width */
right: 230px; /* LC width */
margin-left: -100%;
}

There are still more problems as you see when you compare it with FF or Opera: the textlinks in the article-footer are not shown well ...


another example, my new site shown in the showcase-section: http://joseph.test40038.test-account.com/ (joseph/joseph)

have a look at the grey navigation row on the top:

in every browser there is a great space between them and the image above.

normal css

Code: Select all

#content_container {
	background: #fff url({TEMPLATE_PATH}img/banner-test3.jpg) top left no-repeat;
	float: left;
	border: 2px solid #dcdcdc;
	padding: 125px 0 0 0;
	margin-left: 50px;
	width: 568px;
	font-size: 9pt;
}


.entry_navigation, .staticpage_navigation, .serendipity_gallery_navigation, .serendipityAuthorProfile, .serendipity_search {
	width:100%;
    margin: 0px;
    border: 1px dashed black;
    padding: 0px;
	margin-top: -20px;
	margin-bottom: 20px;
    background-color: #ededed;
	color: inherit;
    text-align: justify;
}

for the IE7 I still need this IE-corrections:

Code: Select all

* html #content_container {
	padding: 135px 0 0 0;
	margin-left: 25px;
}


* html .staticpage_navigation {
	margin-top: 0px;
}

[yellowled]

But - In my scenario - we need a global function in s9y-files to include a style-ie.css, if there is such file in the choosen template!

Again, I might be shortsighted - but all we really need is to include the style-ie.css in the index.tpl, which is achieved by a simple conditional comment ... right?

YL

[stm999999999]

hm, perhaps I thougt to complicated:

It is because s9y do not use the style.css directly but generate a serendipity.css from style.css and different plugin-css-sources.

So you should be right:

The generated serendipity.css is inserted in the index.tpl

Code: Select all

<head>
    <link rel="stylesheet" type="text/css" href="{$head_link_stylesheet}" />
</head>

so, ie-css must be inserted there, right?

Code: Select all

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="/templates/{$template}/style-ie.css" />
  <![endif]-->

[yellowled]

Code: Select all

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/templates/{$template}/style-ie.css" />
<![endif]-->

Something like

Code: Select all

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="{serendipity_getFile file="style-ie.css" />
<![endif]-->

should work. And thanks to the magic of smarty, even that code could probably be inserted only if style-ie.css exists. I don't know whether smarty is able to check whether a file exists, but if a template does have a style-ie.css, this could be done via a 'hidden' template option (i.e. an option users can not change in the admin panel) from v1.1 on. Then we could - probably - do something like this:

Code: Select all

{if $template_option.iestyles == 'true'}
[insert conditional comment from code snippet above]
{/if}

On the other hand, that might be a little over the top. After all, it would only save 3 lines of code in the index.tpl

YL

[stm999999999]

Code: Select all

href="/templates/{$template}/style-ie.css" />

Something like

Code: Select all

href="{serendipity_getFile file="style-ie.css" />

should work.

What is better in your code?

[yellowled]

What is better in your code?

To be honest, I have no idea whether it is better - this is just the code I adopted from other templates and have been using

YL

[garvinhicking]

Hi!

The code using 'getFile' is better, because it resolves the relative HTTP paths. People might have their template folders renamed, or symlinked or put in a subdirectory, which would otherwise create trouble if put via "/templates/X/" directly.

HTH,
GArvin