Skip to main content
Welcome guest. | Register | Login | Post

New piece of XHTML coming on GLM sites - help us test it

27 replies [Last post]
ariadacapo's picture
Offline
Joined: 2006-07-13

Hi everyone, we need some quick and easy help here.

Because new translations of GGL are coming the little translation bar with flags, on top of page, has to be renovated.

We have a working prototype up at
http://people.gnulinuxmatters.org/olivier/development/translation_bar/

We need feedback and testing under various browsers, especially Windows-based browsers.

In the details:
The new menu is entirely CSS-based. Under any normal browser, hovering the title should display the menu.
Under Internet Explorer 6, the behavior is emulated with a bit of JavaScript called SuckerFish:
- If JavaScript is activated, everything should work fine - see screenshot
- If JavaScript is not activated (likely - JS is a pain under IE6), the menu should degrade in a nice way - see screenshot

I have no access to a Windows computer; Please consider spending 5 minutes helping with any of the following:
- Testing under Windows / Firefox, especially Firefox2
- Testing under Windows / IE6
- Testing under Windows / IE7 (I'm dying for that one)
- Testing under Mac / Safari
- As well as with your usual browser.
Please report on how thing are going, and if things don't seem to be ok, please post/send us a screenshot. Long-lasting gratitude will follow.

Many thanks in advance,

Olivier.

Gustavo's picture
Offline
Joined: 2006-09-11
I think it looks better in

I think it looks better in Firefox than in Konqueror; please take a look at the attached screenshot. What if you set the translation bar to the upper right corner (0em from the left and from the top)?

On the other hand, what if you reduce the top margin of the main contents?

Cheers.

Bjwebb's picture
Offline
Joined: 2007-03-01
I have firefox 3 and ie 7

I have firefox 3 and ie 7 on windows (which I have for other members of my family). Firefox 3 looks fine, but in ie 7 the menubar items are too spaced out (see attactched screenshot).

Offline
Joined: 2007-08-07
I don't have access to an

I don't have access to an OS that should be tested, but I used BrowserShots.org to check something,
With javascript disabled in IE7.0 , it doesn't degrade
http://browsershots.org/screenshots/0c09afe0065657e1616e2e9219bebd07/

libervisco's picture
Offline
Joined: 2006-05-04
It looks good on Iceweasel

It looks good on Iceweasel 3 RC2, basically Firefox 3. EDIT: Just noticed that when you hover over anywhere at the top of the page, not just over the button, the menu will open. It's not a big deal perhaps, I just thought I'd point it out just in case.

To be able to more efficiently test in IE you could try ies4linux script which is a quick and easy way to get IE going on GNU/Linux. At least to me it's easier to do design modifications when I can test it myself immediately instead of relying on screenshots so it might help. EDIT: Looks like it also supports IE7.

And when it's done you can just remove it.

Oh and btw, the new method is pretty cool. Smiling

Cheers

Offline
Joined: 2007-09-10
It's working well under FF3

It's working well under FF3 in Ubuntu Intrepid.
US-Texas English? What's that? ^^

ariadacapo's picture
Offline
Joined: 2006-07-13
Gustavo wrote: I think it
Gustavo wrote:

I think it looks better in Firefox than in Konqueror; please take a look at the attached screenshot.

Is this Konqueror 3? In 4.0.3 this only happens at very low window width (~900px), which I think is unlikely to happen often.
The lack of rounded corners is inevitable. A valid and semantinc implementation would be so heavy that it would kill the point; I'm using the Mozilla-specific moz-border-radius CSS function.

Quote:

What if you set the translation bar to the upper right corner (0em from the left and from the top)?

This doesn't work (visually) on resolutions larger than 1600px. The menu is barely seen, and when found, looks out of place.
I found that only workable solution was to put it at the right of the main box, and since CSS doesn't accept variables (say: left: 50%+7.2em), it breaks at some extremes, as you found above.

Quote:

On the other hand, what if you reduce the top margin of the main contents?

Done, thanks!

ariadacapo's picture
Offline
Joined: 2006-07-13
Fantastic, thanks a

Fantastic, thanks a million.

I have tried to make a blind guess at fixing this (https://tracker.gnulinuxmatters.org/changeset/913), can you please have another look?

Another very important aspect is the appearing/disappearing behavior: is it pleasant, anything unexpected or that you wish would be improved?

Thanks again,

Olivier.

ariadacapo's picture
Offline
Joined: 2006-07-13
Hassan wrote: With
Hassan wrote:

With javascript disabled in IE7.0 , it doesn't degrade

Thank you for the screenshots, very interesting tool.
Unfortunately it cannot replace real-life testing for menus such as this... I need some hovering action. In particular, I'd like to see whether IE7 without JS handles the display of the menu or whether it's just "frozen".

It was also interesting to see Safari's rendering of the main graphic... I should defintiely get my hands on one of those.

ariadacapo's picture
Offline
Joined: 2006-07-13
Quote: Just noticed that
Quote:

Just noticed that when you hover over anywhere at the top of the page, not just over the button, the menu will open. It's not a big deal perhaps, I just thought I'd point it out just in case.

Thanks, this should be fixed now, except on IE6 where getting the correct behavior required this.
This is exactly the kind of remark that I am looking for, so anyone, don't hesitate to play with the thing. This includes increasing/decreasing font-size and window width.

About IEs4Linux: it's my favourite tool. A jewel. Sadly, IE7 does not load any page at all, under Hardy (used to work under Fedora Cool.

ariadacapo's picture
Offline
Joined: 2006-07-13
Intrepid? wow. I'd expect

Intrepid? wow. I'd expect FF4 alpha 1 though =)
Thanks for the feedback.

And about the US locale - I heard it's English-based but as it is spoken in movies, we just can't understand it over here =) No offense meant - This could well be Ayinglishe (French-style English =).

Gustavo's picture
Offline
Joined: 2006-09-11
ariadacapo wrote: Gustavo
ariadacapo wrote:
Gustavo wrote:

I think it looks better in Firefox than in Konqueror; please take a look at the attached screenshot.

Is this Konqueror 3? In 4.0.3 this only happens at very low window width (~900px), which I think is unlikely to happen often.

Yes, that's in Konqueror 3, with any resolution. I think it depends on the used font, not on what version of Konqueror you use.

ariadacapo wrote:
Quote:

What if you set the translation bar to the upper right corner (0em from the left and from the top)?

This doesn't work (visually) on resolutions larger than 1600px. The menu is barely seen, and when found, looks out of place.
I found that only workable solution was to put it at the right of the main box, and since CSS doesn't accept variables (say: left: 50%+7.2em), it breaks at some extremes, as you found above.

True.

By the way, what if you change
<div id="alt_lang">alternate languages</div> by <p id="alt_lang">alternate languages</p>?

libervisco's picture
Offline
Joined: 2006-05-04
Tried again on FF3 (this

Tried again on FF3 (this time Swiftweasel3) and zoomed in. I can zoom it 7 times (with ctrl-scroll) without the "alternate languages" starting to take up two lines. This is on 1280x1024 resolution. I think that's pretty good.

Also a little nitpick, but this is just in FF3 so I'm not sure how would that influence other browsers (like IE6), the menu could be a little more centered. I think just moving it 2 or 3 pixels to the right would do.

Same applies in konqueror 3.5.9.

Alternatively you could perhaps make the menu to have the exact same width as the "alternate languages" button, which would look pretty neat. Smiling

Cheers

a thing's picture
Offline
Joined: 2005-12-20
Texan English

Eh... I cannot recall any movies spoken in "Texan English". The state of Texas is known for speaking slaughtered American English (not that English is spoken very well in the rest of the country...) with a specific accent.

I would say how it works on Konqueror 4.1B2, but it has runaway memory usage and crashes when trying to use HTTP.

ariadacapo's picture
Offline
Joined: 2006-07-13
I'm in a rush at this

I'm in a rush at this moment so I cannot write much.

Just to say that development has resumed (after the very exhausting RMLL) and that it's close to completion.
I tried to take into account most remarks, a new design is available at the same address,

http://people.gnulinuxmatters.org/olivier/development/translation_bar/

It should work with IE6, IE7, FF2 and FF3, with and without javascript. Your testing, comments, etc would be extremely appreciated. I'll be back with more info and a commit to repository very soon. Thanks for your patience.

Olivier.

Gustavo's picture
Offline
Joined: 2006-09-11
Hi. It's broken under KDE3,

Hi.

It's broken under KDE3, as shown in the attached screenshot.

The problem has nothing to do with KDE 3/4, but with the font size, so I'd recommend that that box be widther.

Cheers!

ariadacapo's picture
Offline
Joined: 2006-07-13
So, the changes have been

So, the changes have been committed to the repository this morning.

Things are working better and better and the work is almost done. I just need help with testing under IE7.
I can view pages through IE7 [via ies4linux] but not zoom in or out, any help filling in the data below would be greatly appreciated.

I try to "benchmark" testing as follows:
note that increasing font size != zooming in most browsers.

window width 800px

  • Increase font size: +1
    Ff2: main menu breaks, translation menu shifted right, at +1 [no zoom]
    Ff3: main menu breaks, translation menu shifted right, at +1; zoom indifferent
    K-kde3: main menu breaks, translation menu shifted right, at +1
    K-kde4: main menu breaks, translation menu shifted right, at +1; zoom breaks everything
    Opera: translation menu shifted right, at +1 [zoom only]
    ie6-w/JS: whole site too large, slightly broken, but works.
    ie6-noJS: whole site too large, but works [elegantly degraded]
    ie7: ?
  • decrease font size: -2
    Ff2: breaks slightly at -2
    Ff3: ok
    K-kde3: ok
    K-kde4: ok
    Opera: ok
    ie6-w/JS: looks bad but works
    ie6-noJS: works
    ie7: ?

window width 1024px

  • Increase font size: +2
    Ff2: perfect [no zoom]
    Ff3: perfect, including zoom
    K-kde3: perfect [no zoom]
    K-kde4: main menu breaks, translation menu shifted right, at +2, zoom breaks everything
    Opera: ok [zoom only]
    ie6-w/JS: breaks at +2
    ie6-noJS: starts looking really bad at +2, but works.
    ie7: ?
  • decrease font size: -2
    Ff2: breaks slightly at -2
    Ff3: ok
    K-kde3: ok
    K-kde4: ok
    Opera: ok
    ie6-w/JS: ok
    ie6-noJS: ok
    ie7: ?

window width 1600px

  • Increase font size: +3
    Ff2:
    Ff3: perfect, including zoom
    K-kde3: perfect [no zoom]
    K-kde4: content starts breaking at +3; zoom breaks everything
    Opera: ok [zoom only]
    ie6-w/JS: ok [max +2]
    ie6-noJS: starts looking really bad at +2, but works.
    ie7: ?
  • decrease font size: -3
    Ff2:
    Ff3: ok
    K-kde3: ok
    K-kde4: break at at -3
    Opera: ok
    ie6-w/JS: ok [max -2]
    ie6-noJS: ok [max -2]
    ie7: ?

I hope someone can help out, since this new menu is the last bottleneck before we release two translations.

Cheers!

ariadacapo's picture
Offline
Joined: 2006-07-13
hi, thanks for that! I've

hi, thanks for that!

I've tried to fix it and now it should work a little better.

It appears that you are testing it at very narrow window sizes (less than 750px). This is quite an extreme case, if we want to support font scaling at this width, we just cannot have anything as fancy as a menu.
It'd help if you could include a screenshot of the full window width and indicate your font increase/decrease, in case you still encounter issues. Font rendering is a notorious issue when trying out different browsers.

cheers!

Olivier.

Gustavo's picture
Offline
Joined: 2006-09-11
Hello, Olivier. My window

Hello, Olivier.

My window is actually maximized, on a 1280x800 resolution. Anyways the result is exactly the same when the window has a width of ~700px.

Cheers!

ariadacapo's picture
Offline
Joined: 2006-07-13
ok thanks, is the problem

ok thanks, is the problem still present though? I cannot reproduce it now that the text font size has been reduced slightly.

Gustavo's picture
Offline
Joined: 2006-09-11
Hi. Yes, the problem is

Hi.

Yes, the problem is still present; the text doesn't seem to be small enough. I think it's better to increase the width of the box, don't you?

Cheers.

ariadacapo's picture
Offline
Joined: 2006-07-13
This is a head-banger. I

This is a head-banger. I don't understand why konqueror-kde3 renders the font to be as large as this. See my screenshot, showing top to bottom: Ff3, Kon-kde3, Kon-kde4 .

I can enlarge the box, but in other browsers it's already extremely large (It means I'd have to enlarge the drop-down menu, too). A larger box would also mean that things show out of place (entire menu too far at the right) at a window width higher than 800px.

I'm trying to work it out, but I'm not too successful at the moment - there is no Kon-kde3 specific stylesheet hack available.

Gustavo's picture
Offline
Joined: 2006-09-11
Hello, Olivier.It has

Hello, Olivier.

It has nothing to do with Konqueror, it depends on the font the browser uses for the family font you defined in the CSS. It will break in any browser that uses a font (slightly) bigger than you expect (a setting usually overridden by the user and/or the Linux distribution), even if the font belongs to the desired family font (in this case, "font-family: arial, helvetica, sans-serif").

You seem to be using Sans Serif, which is the default for K/Ubuntu. I use Bitstream Vera Sans. Try another font that belongs to the same family and whose characters are slightly bigger than Sans Serif, and you'll see how it'll break, in any browser.

The only solution is to increase the width of the box, or check the use of pixels instead of ems (I had a quick look into the main CSS, but couldn't find anything that may break the translation bar).

Cheers!

ariadacapo's picture
Offline
Joined: 2006-07-13
Ok, I understand. I've

Ok, I understand.
I've searched for an alternative solution for a long time but couldn't find any.
I would love to let the box decide of its own width, but this would prevent me from aligning it with the rest of the website (it's positioned "absolutely"). The whole menu looks a little wide on default Ubuntu machines now.

I just widened the box, could you please test it again and tell me whether it works now? thanks!

Olivier

PS: On Wednesday evening I should have access to an IE7 + Ff3 Windows PC, ensuring everything works.

Gustavo's picture
Offline
Joined: 2006-09-11
Bingo! It finally

Bingo! It finally works!

However, because of the new margin/padding settings, the earth image gets trimmed, as shown in the attached screenshot. :-/

ariadacapo's picture
Offline
Joined: 2006-07-13
pfffff.... I'm really sorry

pfffff.... I'm really sorry to have to walk you through this. It's all blind-testing, since I cannot reproduce the behavior of "your" Konqueror (even while forcing various fonts).

I've just made another try. Is this better? [try to increase/decrease font size too]

Thanks for your patience....

Olivier.

Gustavo's picture
Offline
Joined: 2006-09-11
Now everything is completely broken

Sorry, it's even worse than it was before: it displays the earth of the logo of Internet Explorer! Instead of the earth image you designed.

Nahh, congratulations, it finally works!

ariadacapo's picture
Offline