IE conditional comments

[paulcj2]

I have developed a test page based on Andy Clarke's "Transcending CSS..." which works fine in FireFox 2, IE 7, but not so great in IE6. Instead of using traditional hacks, Andy recommends setting a specific set of rules by using "conditional comments" to target a specific version of IE as follows.

<link rel="stylesheet" type="text/css" href="layout.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ielegacy.css" />
<![endif]-->

I tried it with no luck at: http://www.clickbasics.com/2.0_Plan/...transcend_css/
Any thoughts, experience?

[Dan_A]

Add display:inline-block; in #content and img{vertical-align:bottom;}

[Paul O'B]

Hi,

I thought the question was about conditional comments but I don't see any in your page

Dan's fixed above will work but the real reason that the backgrounds is missing because you set the content div to be display:inline here:

* html .clear_children { display: inline;}/**/

Just removing that line will fix it for IE. It looks as though you have also left in place some partial clearing code but you don't have any floats to clear.

I'm not sure why you are absolutely placing one p tag on top of another in your footer. They are both occupying the same space.

You have absolutely placed your right column so make sure that is always a smaller height than the left column or the layout will break.

I also notice in firefox that on first visit the footer overlaps the content and is probably due to the fact that your images in the html don't have the height attribute.

Hope that helps

[paulcj2]

Thanks for the comments above. Before acting on any of them I thought I would get a better handle on the issues, by dropping back from the design in question to its prototype from Andy Clark's book Transcending CSS. I downloaded Prototyping_rev1 and loaded it in my test area here:
http://www.clickbasics.com/2.0_Plan/...v_1/proto.html
and am viewing it in Firefox v2.0.0.6

I'm stuck on the following things. I have contacted Andy about them, but will appreciate insights from anyone.

1) In the book (pg 160-162) Andy speaks of absolute positioning, yet in the prototype layout.css stylesheet, neither div#content_main nor div#content_sub contain position : absolute;
I wonder why that change was made?

2) If that is part of a revision, why then is Inman position clearing necessary to fix the footer?

3) Viewed in Internet Explorer v6 the right column takes on the color of the background instead of the content area (white). What bug in IE6 needs fixing?

4) Following Andy's suggestion on pg 32-33, I added conditional comment stylesheets ielayout.css, iecolors.css & ietypography.css. To test that this is woking, I changed the page background in iecolors.css to white. It made no difference. What am I not understanding? Are these not external style sheets? Or are conditional comments somehow made in the markup?

5) Should I get such a style sheet to work, what change would I make to get the right column to display the correct color for IE6?

6) In IE the copyright notice looks like it is displaying letters superimposed on each other. Why is this?

I will appreciate any help you can provide.

Paul C.

[Paul O'B]

Hi,

I think I already answered most of these questions!

1) It is absolute as you can see for the code here:

        <div id="content_sub" class="sc">

.pc,.sc { position : absolute; top: 0; left: 0; }

As you can see class .sc supplies the absolute positioning to that element.

2 and 3) As I said before there are no floats in the page so clearing is not necessary but the comments mention a bug in safari so maybe it was a fix for safari which I don't have to check but it sounds very unlikely to me.

The background in IE isn't showing because the element has been made display:inline here:

<div id="content" class="clear_children">

* html .clear_children { display: inline;}

Because it is display inline then the background doesn't follow nested block elements. Remove the clear_children class and the background will return.

4) As you don't have any conditional comments in the page I can't tell what you are doing wrong.

The stylesheets should follow the original stylesheets so don't call the ie specific stylesheet before you call the normal styles sheets otherwise they will be overwritten.

Here is a how you would usually use them.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS examples</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link href="main.css" rel="stylesheet" type="text/css" />
<!--[if IE ]>
<link href="iecss.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>

Of course you may have sheets for different versions of ie and you would just apply them taking into account normal cascade rules.

5) I anwsered that in my original post and in 2 and 3 above. Just remove the * html .clear_children { display: inline;} from the stylesheet as it is an IE only fix anyway. Or remove the clear_children class for the div.

6) I also answered this and its because you are absolutely placing one p on top of another.

In firefox the adjacent selector is used to move the first p tag off screen (god knows why!). IE6 doesn't understand the adjacent selector and therefore the absolute positioning on the pa tag places them on top of each other in IEe-///.

div#site_info h5 + p { 
text-indent : -9999px; }

To achieve the sametext-indext effect in ie6 you would need to add a class to the p tag:

e.g.

div#site_info p.move { 
text-indent : -9999px; }

 <p class="move">Beta until the cabbage has boiled</p>

All in all (from what you've shown me, as I don't have the book) this is a bit of a mess and not something I would like to promote

[paulcj2]

Paul O'B,
Thanks for all the care and time you took responding to my questions regarding the prototype from "Transcending CSS..."

Re:

All in all (from what you've shown me, as I don't have the book) this is a bit of a mess and not something I would like to promote

Can you point me to a similar prototype for a fixed width, centered, one column layout that you would feel comfortable with?

[Paul O'B]

Hi,

Well maybe I was a little harsh and of course I don't know what you changed from the original but I certainly wouldn't place the two middle columns absolutely anyway.

The reason is that you can never let the absolute column become any longer than the static column or the layout fails. This is to high a price to pay as you are unlikely to always keep that ratio throughout your website.

I would simply float both columns and if you need full length column backgrounds then use a repeating image on the parent.

e.g. similar to this:

http://www.pmob.co.uk/temp/2colblog.htm

an you point me to a similar prototype for a fixed width, centered, one column layout

Well theres not much that you need for a one column centred layout so you may as well build it form scratch.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
h1,p{margin:0 0 1em 0}
body{text-align:center}
#outer{
    width:760px;
    margin:auto;
    text-align:left;
    background:#ffffcc;
}
#left,#right{
    float:left;
    width:370px;
}
#right{float:right}
#footer{clear:both;background:red;}
h1{
    background:red;
    padding:20px 0;
}
</style>
</head>

<body>
<div id="outer">
    <h1>heading</h1>
    <div id="left"><p>Left</p></div>
    <div id="right"><p>Right</p></div>
    <div id="footer"><p>Footer</p></div>
</div>
</body>
</html>

You can then look into adding some reset css to establish some suitable defaults.

http://meyerweb.com/eric/thoughts/20...eset-reloaded/
http://developer.yahoo.com/yui/fonts/

It really is worth investing some time on these types of basics and then you can develop your own and it will make it easier for you to work problems out rather than digging through someone else's code.

[paulcj2]

Thanks Dan & Paul. I worked thru your suggestions and now have a better understanding. I still have questions, but will save them for new threads, as this one could fork off into a number of issues. The original theme was IE conditional comments. As your suggestions about how to handle the background worked, I have no need for such now. When the issue comes up again, I'll dig into it in the context of what needs fixing at the time.

Dan, thanks for the example of the one column fixed centered layout. I have posted it for my study at:
http://www.clickbasics.com/2.0_Plan/design/1col_fx_ctr/

Re placing the columns absolutely or floating them, I will start a new thread about this including Andy Clarke's reasoning for using absolute positioning rather than floats.

Thanks, again, for helping me work thru some css basics.