Appearance of tabs under IE

Appearance of tabs under IE

بواسطة - Martin Dougiamas
عدد الردود: 12
صورة Core developers صورة Documentation writers صورة Moodle HQ صورة Particularly helpful Moodlers صورة Plugin developers صورة Testers

Can someone look into a little CSS problem for me?

Why does IE6 show a gap of a couple pixels on either side of the tabs?  (the top image is in Firefox, the bottom one is IE6)

المرفق tabs.gif
متوسط التقييمات: -
رداً على Martin Dougiamas

Re: Appearance of tabs under IE

بواسطة - Martin Dougiamas
صورة Core developers صورة Documentation writers صورة Moodle HQ صورة Particularly helpful Moodlers صورة Plugin developers صورة Testers
After way too much time-wasting, I fixed the gap, but now the text is set too high in the tab ...

Surely someone else wants to fix this for us  ابتسامة كبير
رداً على Martin Dougiamas

Re: Appearance of tabs under IE

بواسطة - John Papaioannou
OK, it looks fine to me now. smile

Can I use this opportunity to complain about the non-CSS-mentality of the whole tab system? If my mother were to see me working with tabs implemented as two nested tables, she would take my keyboard away for a week. wink

PS: I think the graphics need to gain some height. Increasing the text size leaves blanks at the bottom of the tabs, and it shouldn't.
رداً على John Papaioannou

Re: Appearance of tabs under IE

بواسطة - Martin Dougiamas
صورة Core developers صورة Documentation writers صورة Moodle HQ صورة Particularly helpful Moodlers صورة Plugin developers صورة Testers
Thanks, Jon! Looks much better now on IE and Safari موافق , but now Firefox has the problems حزين. See below ...

We tried at first using plain lists instead of tables but it always broke too easy. All the examples we could find were specifically hardcoded to particular situations, and have trouble with arbitrary number or sizes or styles of tabs as we have. The second table is to allow multi-rows of tabs. If someone can show me a way to make flexible tabs like this work on all major browsers I would be pleased to be rid of the tables!
المرفق tabs.png
رداً على Martin Dougiamas

Re: Appearance of tabs under IE

بواسطة - John Papaioannou
Looks just fine with Firefox and standard theme for me... maybe it's some change that isn't merged into the moodleorange theme?

I admit that the first try I had with the tabs was to see if I could build them from a list instead of a table. However, I concluded that it's not possible to have tabs a) from a list, b) with as much eye candy as now, c) working identically across all browsers and d) with pure CSS. The issue could benefit from some discussion though, especially if Urs participates.

Unfortunately at this time I 'm swamped with exams coming up in a couple of days, so I don't have much time to spare. sad

Edit: (I just had a flash) The graphics! Give them some extra height!
المرفق moodletabs.png
رداً على John Papaioannou

Re: Appearance of tabs under IE

بواسطة - Martin Dougiamas
صورة Core developers صورة Documentation writers صورة Moodle HQ صورة Particularly helpful Moodlers صورة Plugin developers صورة Testers
Aha!  Brilliant - it's the font size on Firefox!

I've reduced the size (for everyone) and it works everywhere now!

THANKS JON!!!  موافق  موافق  موافق

I owe you a big dinner when I come the UK next month!
رداً على Martin Dougiamas

Re: Appearance of tabs under IE

بواسطة - John Papaioannou
You obviously have no idea what kind of money good food costs around here. But let's look at the bright side: it is likely that you will receive this information when fully sated and hopefully in an emotionally pleasant state. tongueout
رداً على John Papaioannou

Re: Appearance of tabs under IE

بواسطة - Samuli Karevaara
Some "bad mouths" would say that you would have to import the "good food" to UK ممدود اللسان But beer is good there!
رداً على Samuli Karevaara

Re: Appearance of tabs under IE

بواسطة - John Papaioannou
In fact I am already importing as much good food as I can carry on each trip. big grin

However, it's true that for beers you can hardly do better than coming over to the "island" (Greek student slang wink).
رداً على John Papaioannou

Re: Appearance of tabs under IE

بواسطة - Urs Hunkler
صورة Core developers

Hi Jon and Martin,

"The issue could benefit from some discussion though, especially if Urs participates."

Somehow I participate in the tab discussion - silent here in the forums but active by trying to find a working solution.

I think the technique doesn't play that big role - the Moodle implementation is quite ok. The bigger challenge is to incorporate the tabs into the page. Tabs visualize layers lying one on another - so they communicate best when the page gives the imagination of "sheets" lying on another. The second tab row is especially tricky, because the whole picture should suggest two groups of sheets. The upper tabs need a baseline with the same length as the lower ones, otherwise they are buttons. They only have somehow the same visual appearance as the tabs.

For this tabbed page appearance the Moodle pages must be specially prepared. I did not find a satisfying solution yet حزين You can see the actual state of my work in the theme "orangewhite".

Urs

رداً على Urs Hunkler

Re: Appearance of tabs under IE

بواسطة - Urs Hunkler
صورة Core developers

I'll show you the new state of my tab work. The header part is looking quite well now - the impression of layered sheet levels works.

The active tab is visually flat with the active level and the other ones in the bottom row lie on the second level. The active tab of the second row is visually flat with the second level and the other ones lie on the third level.

To get the tab metaphor all-inclusive well the area sides should be included ...

Urs


[Urs CSS]

المرفق tabs_2005_04_05.png