Why is UL reverse indenting in firefox, chrome, etc, but not in IE?

[Elyse Summers]

The site:

http://www.bradleyalanhart.com/index2.html

The context: When you start opening the flipmenu navigation in Firefox, the links open in a reverse indent cascading towrds the left (middle) of the page. Which, weirdly enough, is what I want. When you open it in Internet Explorer, it displays itself as a regular unordered list would.

ul/li style values have been set in both bahart2.css and flipmenu.js, both of which can be accessed from the page source.

The problem: I believe, lies in the fact that internet explorer is wrapping my longest line (under SCULPTURE > Forms revisited...) so it can display "properly" - and if I add the nowrap to it, instead of reversing like other browsers do it gives me a horizontal scrollbar.

So, how can I recreate this behavior in IE without fudging up how it looks in standard broswers? Is there a simple way to stop it from wrapping or is the issue something else entirely?

EDIT: Okay, adding the white-space:nowrap stops it from wrapping, but instead of reverse-indenting it it induces horizontal scrolling *headdesk* I really dislike button IE. Any help would be LOVED. Earlier post edited to reflect changes.

[Bryan Cheung]

Hi Elyse,

First off; in flipmenu.js line 57: "margin_rig ht" -I think you get it.

When looking in IE8 and opening the developer program(F12) I see that .flipMenu UL has a margin of 5px and not negative, same with the other stuff that needs to be negative.

And why the hell are you using js to write css, thats really nasty..

-B

[drhowarddrfine]

I'm not on my dev computer so I can't look but IE uses margin for list endents while FF uses padding. (or is it the other way?)

btw, you are using the transitional doctype. New web pages should always use strict.

[Elyse Summers]

@ Brian Cheung: Thanks so much for pointing that out :) I'll start from there and hopefully work it out. I'm letting the javascript write the CSS for a few reasons, but mainly I didn't have time to write an entire script for the the navigation myself with the billable hours I was given for this project (also, javascipt's not my forte) so I used a shareware that best suited my needs, and that's how it came. Of course I could have gone in and seen how those commands interact and removed those lines from the js and set them in my own CSS file instead, but that would require extra time that isn't in the client's budget and I'm not in the habit of working for free, even if it means work I'm not 100% pleased with. It's at the top of my list of things to correct once we're live and he has budget to come back and make fixes, but it's not priority right now :(

@ Drhowarddrfine I knew there was something screwy in the way they handled lists, I'll have to look further into it if that is the issue. I *am* coding in transitional - HTML 4.01 strict doesn't support iFrames, which are crucial to the site's design. Normally I would use Strict and use the object tag that is meant to replace iFrames, but iFrames will be standard in HTML 5 when it is released with the new seamless attribute, so why would I code this page in Strict when my iFrames are supported in Transitional and it will be an easier jump to HTML 5.0 this way later down the line?

[drhowarddrfine]

HTML 4.01 strict doesn't support iFrames

Says who? EDIT: Further clarification coming.

Normally I would use Strict and use the object tag that is meant to replace iFrames

It does not.

so why would I code this page in Strict when my iFrames are supported in Transitional and it will be an easier jump to HTML 5.0 this way later down the line?

The purpose of transitional is to allow "transition ing" of markup older than HTML 4.01 in new web documents so they won't get flagged as errors by the validator. The doctype does not prevent use of any standard HTML elements. Also, HTML5 is backwards compatible with HTML4.01 but, if anything, using transitional inhibits you from moving toward HTML5 for the fact that it only allows you to use elements that were deprecated years ago.

New web pages have NO reason to use the transitional doctype.

[drhowarddrfine]

I tripped myself up a bit when I said iframes are supported by the strict doctype. I mis-spoke when I really meant iframes are supported in HTML 4.01. However, iframes require the frameset doctype and neither strict nor transitional should validate. HOWEVER, much to my surprise, transtitional DOES validate iframes! And I don't know why!!

Further research is needed.

EDIT: Well, by golly, I looked a the loose.dtd and iframe is in there! Why? This has sent me into a tizzy!

[Elyse Summers]

Yeah, iFrames are super quirky, it's why I was so hesitant to use them in the first place. They caused me quite a few headaches before I really got the hang of them. It is weird but the iFrame parameters are supported in both Transitional and Frameset, it's why I couldn't create this page in Strict (http://www.w3schools.com/TAGS/tag_iframe.asp). That's also where I got the "using object to replace iframe" thing, since an iframe's attributes aren't supported in HTML4.01Strict or XHTML1.0 an object can be used to simulate an iframe.

[drhowarddrfine]

I'm trying one of my contacts. If he doesn't know, I have a few at the W3C and Opera.

[Death Slaught]

It's definitely the CSS created from your JavaScript code that's causing the problem.

Subscribing

Regards, Death

[Elyse Summers]

Thanks so much for all the pointers guys, got it worked out - yes, it was definitely in the javascript (thanks again!), for some reason it was writing differently (or more likely, ie was reading wrong) in the standard browsers vs ie. I removed the two lines

"ul.flipMenu { margin-top: " + flipTopMargin + "; margin-left: " + flipLeftMargin + "; " + (flipImages ? "" : "list-style-type: none;") + " }" +
	"ul.flipMenu ul, ul.flipMenu li { padding-top: " + flipVerticalPadding + "; margin-left: " + flipIndentation + "; margin_right: 0px; " + (flipImages ? "" : "list-style-type: none;") + " }"

and instead put their desired output straight into my css file

ul.flipMenu { margin-top: 5px; margin-left: -11px;  }ul.flipMenu ul, ul.flipMenu li { padding-top: 4px; margin-left: -11px; margin-right: 0px;  }li.flipFolderOpen { cursor: pointer; list-style-image: url(blank.gif); }li.flipFolderClosed { cursor: pointer; list-style-image: url(blank.gif); }

And voila - reproduced cross-browser.

And today I have learned my lesson - even good shared free scripts should be checked carefully for browser bugs in order to avoid silly mistakes like mine :)

[Death Slaught]

Awesome :) Could you do me a quick favor though?

Replace

isIE = (String(navigator.appVersion).indexOf("MSIE") > -1);
if (!isIE) flipIndentation = alterSize(flipIndentation, -16);
if (!isIE) flipLeftMargin = alterSize(flipLeftMargin, -16);

with

isIE = (String(navigator.appVersion).indexOf("MSIE") > -1);
if (!isIE){ flipIndentation = alterSize(flipIndentation, -16);}
if (!isIE){ flipLeftMargin = alterSize(flipLeftMargin, -16);}

and see if that fixes your original code.


Regards, Arkinder

[Bryan Cheung]

@Death, no, that should make no difference.

This is valid code:

if(thisIsValid)
 runSomeCode(withParameters);

And her code just puts it on 1 line, which is also valid.

[Death Slaught]

Exactly, it shouldn't make a different. But we're dealing with IE, which seems to be ignoring those lines.

Regards, Arkinder

[drhowarddrfine]

The only thing I've been able to find out so far about the iframe/doctype situation is that the spec writers wanted iframe to go away, so they left it out of the strict doctype. No one should be using transitional for new web pages and that would solve the issue, so they thought.

I'm trying to find more details on this.

[Elyse Summers]

Right. By my understanding, the object tag in HTML 4.01 Strict was meant to replace the functionality of the iFrame, and they would be phased out completely but... and that's where I'm at a loss, too. I can only guess that people continued to use iFrames despite this, or many complained about it, because they were added back into the standards for HTML 5 with a new "seamless" attribute to make it easier for them to appear as a natural part of the page flow.

@Arkinder I can definitely do that tomorrow when I get back into my office :). In the meantime if you don't want to wait, I have the original script before my workaround was applied saved at http://www.bradleyalanhart.com/flipmenu-original.js , feel free to grab it and test away as you please.