HTML & IE6

[Chris]

I'm making a menu using divs. Works fine with FireFox but on IE6 I get a black like (as if the height was not set to 0) caused by the nested div image.

Code: [Select]

function beginMenu($img)
{
echo'<div><img src=images/mt.png>';
echo"<div style=\"position:relative; left:12; top:-16; height:0;\" ><img src=images/$img.png></div>";
echo'</div><div class=menu>';
}

function endMenu()
{
echo'</div><div><img src=images/mb.png></div>';
}
How to make it work on IE6?

[ST-Mike]

Admins have ignored my deletion request - if you're not going to delete my account then don't have the option there please.

[jannesiera]

I completely agree with ST-Mike. Too much of your time goes to a crappy old version of a still pretty crappy browser. You could spent it so much better .

[Marek]

According to Statcounter.com, IE6 market share still hovers between 10 and 20 percent. But that's globally. In a relatively tech-savvy group like the web-game-playing demographic, it's probably much lower, so I think it's safe to forsake IE6. It just costs too much time and frustration to cater to it.

That being said, what are you using the positioning for? Do you really need it?

[Nox]

in IE6 "height"="min-height"
overflow(-x|-y): hidden solves many problems there though it's not so nice way

I'm not sure I should support dropping support it, though I'd love to... for my own projects I mostly do from now on
Out country's major web statistic site shows from 5.5(movie, hw related) up to 13.5(government, cities related)%...I'm a bit surprised, I thought it would be higher

Btw. for menu would be more appropriate "menu" tag, since we have it, why not use it
and to continue with nitpicking... why no space after echo and not quotes around tag attribute values plus I'm not sure what the image is but wouldn't it fit better in css?

[jannesiera]

Just out off curiosity, why are you echoing all that stuff? I'm not very experienced in building websites yet but one of the things I learned is that it's not very clean. Why don't you do something like this? (I assume you have your reasons, but I'd like to know what they are. The same for not using css for the <img src=images/mt.png>.)

<!-- Menu -->
<div>
   <img src="<?php echo $img_path1 ?>" />
   <div style="position:relative; left:12; top:-16; height:0;" ><img src="<?php echo $img_path2 ?>" /></div>
</div>

<div class=menu></div>

<div>
   <img src="<?php echo $img_path3 ?>" />
</div>

[Chris]

in IE6 "height"="min-height"
overflow(-x|-y): hidden solves many problems there though it's not so nice way

 "height"="min-height" does not work. What did you mean by "overflow(-x|-y)"? What is it and how to use it?

Drop support for IE6 Tongue Youtube is doing it, all will follow and all will upgrade to IE7 or 8 soon. You didn't support IE5 when IE7 came out did you? So why bother with IE6 when IE8 is out?

You mean I should *lose* some players? This very idea is crazy My lust for players if way, way too high to even consider 5% or 10% drop

As for YouTube, they are Google property, they are on war with Microsoft, they would do a lot to destroy IE. It is in their interest. I'm much more peaceful and I'm not on vendetta with Microsoft, at least not until they try to enter my marker share of browser games. But it is unlikely since Gates is too smart to add me as an enemy when he has a war with Google going on already

Just out off curiosity, why are you echoing all that stuff? I'm not very experienced in building websites yet but one of the things I learned is that it's not very clean. Why don't you do something like this? (I assume you have your reasons, but I'd like to know what they are. The same for not using css for the <img src=images/mt.png>.)

Your example had 10 lines, my had 4. How much scrolling it saves? (I'm not kidding here, I spend like 5-10% of dev time trying to find the part of code I need).
Similar with CSS, separate file during early dev stage means I had to grab mouse, activate CSS editor, click the proper place on it, next after editing click save and return to my txt editor. When I put CSS on txt file I can skip all these steps, in addition I can edit/save everything using keyboard alone! Once ready everything can go to CSS (if justified, sometimes the game is too poorly performing to justify optimisation), like the class=menu part (which was used because I knew there will be no problems with this part).


Can I assume, if the HTML/CSS works with both IE6 & FF, will it work with all other major browsers/versions?

[Nox]

Sorry, I meant - IE6 understands "height" property the same way other browsers understand "min-height" so if you specify height: 0; but add some content there, it will make it longer to fit -> so use either overflow: hidden or overflow-y: hidden (IE-only) or in different cases (not this one) overflow-x: hidden

When optimizing for IE6 these three are actually immensly useful and often magicly solves many mysterious issues

Can I assume, if the HTML/CSS works with both IE6 & FF, will it work with all other major browsers/versions?

Mostly yes, but of course it's never sure.... I have recently some issues regarding line-height property etc. .... but fortunately it's often possible to change general css so that all draws it the same as currently it's not really possible to distinguish browsers except IE...it was possible to at least make separate file for Opera by using "text/whatever" instead of "text/css" in the link tag, but it doesn't work for a long time anymore

[JGadrow]

I also wish we would drop support for IE6. It's not about a "war with Microsoft" as much as it's about making our lives as web developers easier while encouraging users to utilize better technologies to render their web pages. However, in many cases it's still a necessary evil. For a project that I'm working on, 80% of the site users are still on IE6! That's very disheartening but we do what we must.

With that said, it's very likely an issue with IE's "hasLayout" rendering sense. Read a little about IE's hasLayout property and you'll see where a large portion of IE's rendering issues come from. This is why setting a height as Nox suggested seems to magically fix things: it triggers the hasLayout property.

[jannesiera]

Okay, Chris, thanks for the response. I find it a bit weird how you are to lazy to do css, but try to support IE6. It's your choice off course .

"height"="min-height" does not work.

This was also funny btw .

[die4me]

lol just give up on ie all together it is a bad browser that is not getting much better