Way to Target Only IE 6/7 in css?

HTML & CSS
1

Hi - is there a way to target only IE 6+7 in the css?

I’m using this for my sub-headers:

.leafh2 {
float:left;
width:100%;
background:transparent url(…/imgpg/leaf25.gif) no-repeat scroll 25% 50%;
margin:14px 0 25px;
}
.leafh2 h2 {
float:right;
width:45%;
background:#e5ffbf;
padding:12px 10px;
font:bold 1.3em Helvetica,sans-serif; color:#f00251;
text-align:center; vertical-align:middle;
position:relative;
}

Which gives 2 cm above + below the h2 in FF, IE8, Opera etc. But in IE 6+7 it gives only 1cm or less. So I need to increase the margin or padding, I’m not sure which, in the css just for IE 6/7.

See: http://www.greensmoothie.com/test/eat/back.php

It’s probably the <table> causing the problem. I’m wondering if I shouldn’t just take the plunge and delete the <table>'s altogether on those old pages. Switch to the .txtbox used on my new pages… at
http://www.greensmoothie.com/1gs/

Seeing’s I’m now messing with the sub-headers, why not just mess with the whole thing…

Thank you! - Val

2

Hi Paul - oh that green dot is so cool, thank you! I can choose any color dot <li class=“red”> depending on how I’d like the list to stand out :slight_smile: Mostly I’ll stay with black dots so as to avoid too many span’s.

>No you don’t

I surrender. I changed it to <ul>. I actually didn’t know I was writing 2 line breaks, I thought I was telling the browser to do a hard-return within a paragraph.

Thanks again for the cool colorful dots, and the radius links - Val

3

Thanks Oddz - I didn’t know the + for IE7.

Hi Paul - thank you for doctype feedback :slight_smile: I’ll leave tables as is for now because they’re all so different…

Now IE6 is not recognizing line height when I use an image. See:

http://www.greensmoothie.com/1gs/blend/energy.php

Pls scroll to bottom of text box where instead of <ul> I sometimes use a green dot (dotmid.gif) so you’ll see:

“[green dot] Is it ORGANIC – no pesticides, no GMO’s?”

If you check that in IE6, it squashes the lines close together. IE7 is ok. I use that green dot often so would be grateful for an IE6 css fix for dotmid.gif.

thank you! - Val

4

Hi Paul - wow I’d never have thought of that in a million years! During the night I thought that maybe table p {} would be the answer.

Netscape Composer 4.7 never closed its <p>'s so I have an entire site of <p>'s with no </p>'s! It’ll be easy to close only those that precede a table.

I’m SO ecstatic there’s no more tables except for the comparison data tables and the images - and one day after the new site is up, I’ll switch all images to those floats with percentages John + you gave me - http://www.sitepoint.com/forums/showthread.php?t=667351.

Can I upgrade to a later doctype yet? Or is this kind of stuff still -//W3C//DTD HTML 4.01 Transitional//EN -

<table BORDER=0 CELLSPACING=10 CELLPADDING=10 COLS=2 WIDTH=“100%” >
<tr>
<td ALIGN=CENTER VALIGN=CENTER ROWSPAN=“3” WIDTH=“25%”><img SRC…></td>
<td COLSPAN=“2” WIDTH=“75%”>

thank you! - Val

5

While that’s usually true it’s also not always the case. Sometimes even if things are all done correctly ie just does her own thing. And then usually you can simply move things around and/or change the positioning method and make all happy but once again there are those rare times that ie just won’t behave. I don’t like throwing in an ie hack. It’s almost an admittance of failure. But I have on more than one occasion. In the past I’ve spent upwards of an hour or two just trying to make ie happy with one thing or another. Afterwich I finally said “that’s it - I’m done - ie CSS it is!”.

6

Hi Val,

You haven’t closed your p element so the table is sitting inside a p element and the font-size gets compounded because of the nested p element in the table (as the p element is set to .88em). So effectively you have a p element at .88em and then a nested p element at .88em which gives you 88% of 88% which makes for a smaller font. It’s invalid to nest p elements so other browsers ignore it.

Make sure you close the p element before the table starts.


<p>I was amazed the first time I ran a frozen banana through my Samson Juicer
                &ndash; it has the taste and texture of real vanilla ice-cream.&nbs[B]p;</p>[/B]
7

Which is why I advocate using a medium sized reset – and why I say that if you have to target IE to use different margins or paddings from everyone else there’s something fundamentally flawed elsewhere in the page.

8

Hi - thank you! So many little things to remember…

Paul, you’re gonna kill me… I took the plunge and am deleting the <table>'s altogether on those old pages!

I’m so dumb I never realized it’s so easy to delete tables… I simply tell an old page to use the new css (the one I use for new wordpress pages), delete its tables, and everything displays perfectly… after 2 years of writing 2 lots of css…

EXCEPT for IE 6/7 - I’m keeping images in <tables> and IE6/7 display a smaller font size in a <table> even though I have:

table {font-size:100%}

See: http://www.greensmoothie.com/test/juice/desserts.php

you’ll see IE 6/7 reduce the font sizes within <table>. That “all the ways to target” looks so complex! Is there a simple fix here?

thank you for your kind help - Val

9

Hi,

You don’t need to target IE for this as you have just forgotten to set the default margins. IE7 and under don’t apply top margins by default to elements like p and h2 etc.

You haven’t set the default bottom margin either so they will still be different. All you need to do is set the right margin.:slight_smile:


p{margin:0 0 1em}
.leafh2 h2{margin:25px 0}
10

IE6: * html [selector]
IE7: *+html [selector]

If you must, of course.

11

You can use the asterisk hack to target IE6/7. There are certainly browser differences and it does not mean you are doing something wrong
http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml

12

You could use a conditional statement

<!–[if lt IE 8 ]>
link to IE specific stylesheet here
<![endif]–>

13

Hi Paul - thank you so much for trying. Ah flowers to IE6 ignoring line-height with <br>'s! I often need to start just a new <br /> and not a <p> or <ul>. I don’t see anything unsemantic in that - <p><br /></p>? If it’s ok in a word-processor, why not in a web page?

Ideally, is there any way to define in the css that I want the dot to be green not black in <ul>s? I don’t mind in <ol>s if the number is black, but in <ul>'s I’d love green dots. It would save time on loading a greendot.gif.

Every other major browser - chrome, safari, opera, FF, IE7+8 - displays the line-height with a <br>. So I’ve decided not to change <br />greendot.gif. IE6 will be dead in a year, and meanwhile those few using it can see lousy line-height.

I see all browsers now display css3’s border-radius except FF + IE8! FF still requires -moz-border-radius. Slowly we get what we want… I’m guessing the order is still TL,TR,BR,BL.

>Use a class should you later decide to change the padding to 15px and the margin to 35px

I can’t, remember I’m using this double-div float for side-by-side image-image, and text-image (with captions) - http://www.sitepoint.com/forums/showthread.php?t=667351. Each one is unique so I need to define what I want in the div’s themselves, not the css. See http://www.greensmoothie.com/1gs/ where there’s 3 of them on one page (6 divs in 3 containers), each one totally different in presentation. Now multiply that by nearly 100 pages!

I know <div class=“flft lft w50 grbord p20”> <float left, text-align left, width 50%, green border, padding 20px> in http://www.greensmoothie.com/1gs/ (defining the “Become Young Again!” box to the right of the wheatgrass image) looks like a HUGE no-no to any serious css scholar, but hey, it works for me, and my headmistress told me I was the “subversive element in the school.”

Thank you for letting me know I can delete the w100 when I have clearfix :slight_smile:

best, Val

14

Unfortunately, there’s nothing you can do for IE6 here because you can’t style the break when it’s inside the p element. It’s just impossible (not to mention non-semantic).

The break just creates a line-break but no line-height rules are taken into effect. That’s why you should never use breaks to make space and instead use a list for this with proper block elements for each row.

I’ve tried everything I can think of and nothing works so you’ll just have to code it properly.

Regarding the clearing of floats then its only IE7 and under that need “haslayout” in order to clear floats which can be done width a dimension (like width:100%). If you are using the “clearfix” method then haslayout is already provided in that routine by another haslayout trigger instead so the width is not needed.

As an aside I know you are converting an old page but you have to be careful with doing things like this.


<div class="clearfix [B]ptop10 mrm25[/B]">

That’s starting to look like presentational attributes again which we were tying to get rid of. Use a class that would make sense should you later decide to change the padding to 15px and the margin to 35px. Otherwise you will have a class called ptop10 but you are applying 15px padding top and it just would be very confusing. The class should be more generic but still describe the elements use.

e.g.
class=“warning”
color:red;

and not:
class=“red”
color:red;

15

Ah, one more question for that page. I thought when I float 2 boxes next to each other, I must have a container of width 100% (w100) so as to enclose its floats.

But I found on this page (http://www.greensmoothie.com/1gs/blend/energy.php) at the top of textbox where I have that image of mom at 81, I had to delete w100 in order to reduce the right margin - .mrm25 {margin-right: -25px}

It’s working without w100. Does clearfix take care of containing the 2 floats? Is one of them (w100 or clearfix) always redundant? I don’t need both?

I thought I should check on this because I just discovered when I want a wider area in textbox for 2 images floated next to each other, I can just reduce left + right margins. That way I over-ride the 62px in .txtbox {padding:25px 62px}

thanks! - Val

16

<table BORDER=0 CELLSPACING=10 CELLPADDING=10 COLS=2 WIDTH=“100%” >
<tr>
<td ALIGN=CENTER VALIGN=CENTER ROWSPAN=“3” WIDTH=“25%”><img SRC…></td>
<td COLSPAN=“2” WIDTH=“75%”>

If you have loads of stuff like that in our page leave it at transitional until you tidy it all up. Most presentational attributes are deprecated in strict and is CSS’s job anyway.

Converting old sites is usually more time consuming than starting from scratch because you are always making sacrifices to the way things have been coded originally.

You can tidy those table up though by removing the deprecated attributes and then declaring the widths and presentation through css.


<table class="test">
<tr>
<td rowspan="3"><img src=...></td>
<td colspan="2"> etc..................




table.test {
    margin:10px 0;
    padding:0;
    border-collapse:collapse;
    width:100%;
}
.test td{
    padding:5px;
    vertical-align:top;
}
17

For me using IE conditionals or targeting hacks (like * html), unless it’s to implement outright mission componants like min/max-width/height, means you’re doing something horribly wrong.

The ‘worst’ hacks you should be resorting to on the majority of layouts is display:inline on floats, and you only need that if you are using margin (in which case, use padding) – and of course the various haslayout triggers (oh noes). If that’s the worst you end up having to use it’s generally far better than bloating out the markup with the conditional comment bull or using * html hacks on feeding different dimensions/paddings/margins.

… and that’s where bad/broken methodologies really tend to stand out, is with dimensions/padding/margins. There is NO reason to EVER need to be sending each browser different values on that other than using the wrong techniques for page building.

But as a rule of thumb I avoid declaring width/height the same time as padding, wherever possible I use padding instead of margin to avoid differences in collapse, and I’m willing to throw out layout ideas if they prove more complicated than is necessary… even if it means kicking the dumbass artist who thinks they know something about web design because they can draw a pretty psd right square in the nerts.

18

morning, here are all the ways to target ie http://www.visibilityinherit.com/code/target-ie.php

19

No you don’t :slight_smile: Either you’ve finished the paragraph or you haven’t.

The only times you’d really need break would be in a poem, or an address or in a form.

The rest of the time they would be paragraphs or similar.

I don’t see anything unsemantic in that - <p><br /></p>? If it’s ok in a word-processor, why not in a web page?

Any unnecessary element is unsemantic :slight_smile: The p creates the line break and you can set the margin exactly so the break is a waste of space and has no semantic value. Elements in html have meaning and can’t be compared to any printed medium. :slight_smile:

Ideally, is there any way to define in the css that I want the dot to be green not black in <ul>s? I don’t mind in <ol>s if the number is black, but in <ul>'s I’d love green dots. It would save time on loading a greendot.gif.

Not unless you have a span wrapped arouynd the text like so.


<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul {
    list-style:disc;
    margin:0 0 10px 20px;
    padding:0;
}
li{color:green}
li span {color:black}
</style>
</head>
<body>
<ul>
    <li><span>test</span></li>
</ul>
</body>
</html>

Every other major browser - chrome, safari, opera, FF, IE7+8 - displays the line-height with a <br>. So I’ve decided not to change <br />greendot.gif. IE6 will be dead in a year, and meanwhile those few using it can see lousy line-height.

Well the correct answer would be to use the correct code but as that would be too much work for you then it’s no great hardship that IE6 users get smaller line-height as its still readable and usable.

I see all browsers now display css3’s border-radius except FF + IE8! FF still requires -moz-border-radius. Slowly we get what we want… I’m guessing the order is still TL,TR,BR,BL.

That’s basically it but it’s slightly more complicated if you define the horizontal and vertical radius.

You can use a generator here to save working them all out.

The nightly version of Firefox supports border-raius (without pre-fix) so it shouldn’t be long before it’s fully released.