PDA

View Full Version : ie brokes my tabs :D



luke83
5 Nov 2006, 5:10 AM
i posted here 'cause i think it's my error in coding, not a bug..

so..
in ff all works perfectly,but if u view this page in ie:

http://fantaluke.net/sc/test/test.htm

u can see it brokes te tabs:

http://img222.imageshack.us/img222/3528/1yu5.gif
http://img212.imageshack.us/img212/281/2ta5.gif

the tabs are centred, not lefted and not spaced

some suggest?

jack.slocum
5 Nov 2006, 1:23 PM
You have a couple text-align:center in your css. My guess is one of them is comflicting. Try removing them one by one and seeing which one causes the tabs to shift back left. Then modify the rule that needs text-align center to a more targeted selector.

shadyaidy
6 Nov 2006, 9:26 AM
I'm sure it's the doctype - I need the XHTML doctype in my projects to make them layout properly.

In the vanilla examples provided, adding a doctype breaks the presentation as shown above, and without the doctype the presentation is as it's supposed to be.

This is in IE6, I have not tried the examples with a doctype in IE7 or FF

Keep up the good work Jack - I wrote my own layout manager some time ago. It sucked but I carried on using it because until now there was nothing better out there. Your JS knowledge is awe-inspiring.

jbowman
6 Nov 2006, 9:30 AM
I wonder if using strict is what's causing my problems with the basicdialog buttons, I'll have to check that out.

Edit: nope that wasn't it

etfb
6 Nov 2006, 10:14 PM
I'm getting a definite bug caused by IE's box model - with a doctype, IE renders the tabs too wide, and messes them up; without a doctype, it's fine. Firefox is OK either way. It's odd, because I'd expect Firefox to render it using the IE box model if there's no doctype. The only explanation I can think of is that it's something odd in the IE-specific code somewhere. I'm investigating (I came here, in fact, to see if Jack had already posted a fix).

jack.slocum
7 Nov 2006, 3:31 AM
etfb that could be similar to a problem I found in IE7 with BasicDialog recently fixed. I will look into it.

jack.slocum
7 Nov 2006, 3:37 AM
I just added doctype strict to my feed viewer example locally and it worked as expected. Also the tabs example page (http://www.jackslocum.com/blog/examples/tabs.htm) is doctype strict. I can't seem to get the problem. Can someone post a link?

etfb
7 Nov 2006, 12:48 PM
The problem I was having was in Example6 of the yui-ext stuff -- the pretty blue Visual-Studio-esque page layout using tabs and the PropsGrid. I'll follow the other links and see if there are changes that make it work better.

Incidentally, I had a lot of trouble getting that example loaded up on my own system; I eventually used wget to download all the files, and had to do some jiggery-pokery with Perl to make it go grab all the image files it used. Is there any chance you could bundle future examples as a .zip or .gz file so people like me can fiddle with them without placing extra load on your server? I always feel guilty about using wget, because it doesn't seem to have much of a difference in its settings between "useless" and "download the entire internet".

etfb
7 Nov 2006, 3:21 PM
The problem exists in the tab demo you linked to, viewed in IE6 on WinXP/SP2. The tabs are too wide, and the line beneath them (the top of the text boxes) is missing. Works fine in IE6 without a doctype, or in Firefox with and without. That suggests it's in an IE-specific * html {} or _property declaration, one that gets ignored by modern browsers. I'll rummage around in my local copy and see if I can find the cause...

jack.slocum
7 Nov 2006, 4:02 PM
I found it. It was specific to IE6 strict mode was not being detected as content-box! Yikes! I will have a new build up later tonight. Check the links, the tabs should work now as expected.

etfb
7 Nov 2006, 4:09 PM
Oh good. I'd exhausted the possibilities of hacking the CSS and was about to try to find a copy of yui-ext*.js with indentation and spacing so I could figure out where the width="" calculation was happening so I could put in an extra property to handle the possibility of a weird box-model calculation. Letting you do it sounds like a much better idea!

(Checking...) The demo looks good, and (... rummage rummage...) the new yui-ext*.js works nicely with my local copy of everything else too. Thanks!

jack.slocum
7 Nov 2006, 4:11 PM
The error resulted from me thinking ie6 + strict mode was still border-box. It wasn't, it is content-box w3c style. So widths and heights weren't getting box model adjusted and were all whack. What a monster bug.

etfb
7 Nov 2006, 4:15 PM
Fair enough. I'm a fairly experienced CSS "programmer", but I always make sure to use strict doctype at all times because I don't want to triple my workload. I advise doing the same, and then when people have problems, get them to check their doctypes and validate their HTML and their CSS before they report any bugs. There's no reason to use quirks mode any more.

jack.slocum
7 Nov 2006, 4:17 PM
Personally, I am old school, I never use a doctype. :)

etfb
7 Nov 2006, 4:21 PM
Hey, it's your leisure time. I agree with Larry Wall: Laziness Is A Virtue.

BTW thanks for your quick work. We're hoping to use this stuff in a projected new release of our (commercial) software. I expect I'll be able to convince The Powers That Be that a certain ?xpr?$$ion of gratitud? is appropriate...

jack.slocum
7 Nov 2006, 4:32 PM
Sounds good to me.

BTW, I decided to go ahead and put up a beta 4.