[Solved]What is correct way to add conditional coment

[jasnick]

Using 1.10.3 and latest modules

I need to add a conditional comment (or whatever) to make IE9 display Album lightbox image in the correct place. It is far too low in IE, not nicely in the middle as in FX.

The file in question is "modules/Album/templates/db/default/default.css" and the bit I need to change is
#TB_window {
position: fixed;
background: #ffffff;
z-index: 102;
color: #000000;
display: none;
border: 4px solid #525252;
text-align: left;
top: 50%;
left: 50%;
}

If I change it to "top: 10%" for IE9 it looks OK.

In CMSMS, what do I do and where do I do it?

Thanks

[SimonJ]

Using 1.10.3 and latest modules

I need to add a conditional comment (or whatever) to make IE9 display Album lightbox image in the correct place. It is far too low in IE, not nicely in the middle as in FX.

The file in question is "modules/Album/templates/db/default/default.css" and the bit I need to change is
#TB_window {
position: fixed;
background: #ffffff;
z-index: 102;
color: #000000;
display: none;
border: 4px solid #525252;
text-align: left;
top: 50%;
left: 50%;
}

If I change it to "top: 10%" for IE9 it looks OK.

In CMSMS, what do I do and where do I do it?

Thanks

You need another stylesheet for ie9 and an if statement in your template.

http://css-tricks.com/how-to-create-an- ... tylesheet/

[jasnick]

Thanks SimonJ - I'm not sure if I am tying everything together correctly.I added this to the template:

<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="ie9.css">
<![endif]-->

The ie9.css is the site css plus the adjusted code for #TB_window.
Is that the way to do it?

The result of all that is: FX now showing only half the image - up way too high now and IE is OK. This is on Windows7. So it seems as if not only IE9 is being targetted.

On a test computer with XP/IE7, both FX and IE show the image way too high.

If I remove the conditional comment from the template, XP/IE7 shows both FX and IE7 perfectly. On Windows7, FX is fine but IE9 shows the image way too LOW which is what I was trying to correct originally.

Obviously I am not doing this correctly.

[SimonJ]

The ie9.css should only have the extra code, not all the site code as that is still read by everything.

It should do what you need, if not try this http://blogs.msdn.com/b/ie/archive/2010 ... opers.aspx

[jasnick]

The ie9.css should only have the extra code, not all the site code as that is still read by everything.

Thanks SimonJ

Have fixed that. Do I attach it to the template as I would any other stylesheet, because when I do that, it fixes IE9 but breaks FX. FX takes on the style I have done for IE9.

Is this absolutely correct for the template:

<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="ie9.css">
<![endif]-->

or should it be more like:

<link rel="stylesheet" type="text/css" href="http://site.org/tmp/cache/stylesheet_7a ... 3543.css"/>
How do I tell the ID for each stylesheet?

Test computer: XP: IE7 and FX both OK.

[SimonJ]

I am not sure about attaching it, you will need someone with more experience to answer that. Linking to an actual file should work.

So the

<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="ie9.css">
<![endif]-->

Should do assuming the file is in the right place.

[Dr.CSS]

If you create a stylesheet in the default way, layout > stylesheets, then you can call it in your conditional statement using...

<!--[if IE 9]>
{cms_stylesheet name='ie9'}
<![endif]-->

[jasnick]

Thank you Dr.CSS - one again to the rescue!

I see I was calling the stylesheet incorrectly!

Thank you!