PDA

View Full Version : Anyone using Opera?



Alimonster
01-12-2002, 09:32 PM
Hi folks. I'm in the process of updating my site's design to use CSS 2 and XHTML 1, which means that it's too much for most browsers. It renders fine in Mozilla 1.2 (and I'd assume 1+ as well...). I know that IE6 doesn't display it correctly due to broken CSS2 support (missing position: fixed + a few other things like CSS 2 pseudo selectors).

If anyone has Opera, could they try the site and let me know how it looks? Here are a couple of pictures for reference:

http://www.alistairkeys.co.uk/images/newweb1.png
http://www.alistairkeys.co.uk/images/newweb2.png

Any comments on the design are much appreciated (I'll be adding a little more flavour to the pages later). New site design is here (http://www.alistairkeys.co.uk/test/welcome.shtml). I've only done one level deep, so don't expect any uploaded content yet (lots of 404s exist). I'll also be adding different images for the "about" page and sorting out how to present the tips.

My current plan is to have a special mozilla-only site design (the one you just saw). However, I may allow Opera users access to it too if it looks fine. IE gets on my nerves sometimes, so IE users will get the same ol' bland design.

Any comments?

TheLion
01-12-2002, 09:38 PM
Maybe a silly question on my part, but why are you using CSS 2 ?

I must admit I have no knowledge of the new features it has over CSS 1, but what of those do you need?

A simple solution to your problem might be a combination of CSS 1 and CSS 2, just check which browser is running and determine which CSS script to use...

Alimonster
01-12-2002, 09:50 PM
Maybe a silly question on my part, but why are you using CSS 2 ?

Simple: I got *really* annoyed with my site recently. I intended to fiddle with the design a bit, changing the table layout. It worked fine under Mozilla. I had to hack it a little to get IE6 to display it fine. I then checked it under IE5 the next day and saw that it looked like a complete mess... so I wrote some javascript to give the old design layout to IE5. Once all that had been done, I noticed a little glitch had been introduced at the bottom of the page under Mozilla! GRR!

Next, I tried to write a little javascipt to show/hide some stuff in the sidebar. This worked fine under IE5 + 6 but left ugly artifacts under Mozilla. I then wrote some javascript to only do the show/hide under IE.

At this point, I said AAAAARRRRRGGHH!

Browsers really annoy me. I decided to write a latest-tech page and *let the browsers catch up* rather than using any ugly hacks. To be frank, if I have to write another hack then *someone will get hurt.*

CSS2 selectors are cool. Also, it has features for media, meaning it should be much easier to make the tutorials printer-friendly (I've not done that yet since the tutorials haven't been uploaded).

I really don't mind if only Mozilla users get to see the new design. It would be a nice bonus if it displays under Opera, though I don't expect it to.

Besides, I just felt like a redesign. That's reason enough.

TheLion
02-12-2002, 08:18 AM
The Biggest problem with Mozilla is I think is that it impersonates Internet Explorer. It's about the only browser my website doesn't support, because it does this. So if you do a check for the browser your Mozilla browser will be seen as an Internet Explorer browser and therefor will get to chew on stuff that it doesn't know.

I agree with you, I worked as a trainee in a webdesign/hosting company for a while and I really learned a lot about HTML, JavaScript, ASP, CSS and stuff, but you have to use a lot of workaround and strange stuff before it works and I always have trouble making my website compatible with a lot of screen resolutions. :( When I'm working on websites I always think: "Why can't I do this in Delphi, it would work if I could!" ;)

Not long ago I had the same urge for a redesign of my website, so I decided to become smart and get out those JavaApplets which didn't work in IE anyway, so I did everything I needed to do and the code was perfect, but it looked really really ugly, however I didn't found a reason. It turned out that the silly browser didn't take the time to load the images, so I had to write a big chunk of code (with hacks for other browsers) to preload the images, so I could finally do my thing! :) Now it works fine, but it only really looks good in IE and maybe Netscape 6/7 (never tried that).

So all I say is: Good luck! :twisted:

Traveler
02-12-2002, 09:39 AM
The new design is quite nice. Though, personally I like the old one more. Can't really say why, I thinks is it colors :?

Anyway, I looked through the code and the first thing I noticed were all the layers. Why not tables instead? It's much easier (well, at least I think so). Layers can be quite a pain in the xxx if you use javascript. Especially if you want it to work under every browser. Another problem that happens quite often is wrong positioning. In IE5.5 the space between the text and the menu is about 3~5 pixel, where in Info section the three boxes are located at the far right of the screen.

Second, I saw you use <span> quite often, however, this tag does not work with netscape. A (nested) layer should help here. If you decide to change the whole layer thing into a table, you probably won't have to use span at all.

Alimonster
02-12-2002, 10:56 AM
The new design is quite nice. Though, personally I like the old one more. Can't really say why, I thinks is it colors :?
Hmm, okay... :? Maybe it would help if I fixed up some of the layout issues in earlier browsers first! (I have IE5.5 at work here, so I've been able to *hopefully* make it look a little more acceptable without breaking other browsers...)


Anyway, I looked through the code and the first thing I noticed were all the layers. Why not tables instead? It's much easier (well, at least I think so). Layers can be quite a pain in the xxx if you use javascript. Especially if you want it to work under every browser.
I don't! :D I want it to work under CSS 2 compliant browsers - which means just Mozilla at the mo (perhaps Opera will get close, not sure yet). There are far too many potential hacks otherwise. This is my "pet project" - a totally standard compliant site design. I'm not going to hack it, but instead will just wait for the browsers to catch up. I'm not uglifying my HTML to cater for broken browers any more! The only hack I have so far is the javascript for browsers that don't supply css2 selectors in the about page (meaning, IE).


Another problem that happens quite often is wrong positioning. In IE5.5 the space between the text and the menu is about 3~5 pixel, where in Info section the three boxes are located at the far right of the screen.
Yeah, IE5 actually does a surprisingly good job given its broken CSS 1 (!)implementation (actually, it gets the sidebar more correct than IE6!). I spotted that about box thing but I'm not sure yet why it happens [note: I think I've fixed it now...].


Second, I saw you use <span> quite often, however, this tag does not work with netscape. A (nested) layer should help here. If you decide to change the whole layer thing into a table, you probably won't have to use span at all.
Bear in mind that there is a fundamental difference in the meaning of the span vs div tags - the span tag creates an inline element while the div tag creates a block element. Of course, you can override this default in css, though that swiftly becomes a pain in the butt. (Side note: unless you mean Netscape 7, though I'd guess that it would support it due to its Mozilla heritage...).

However, there's a pretty big advantage of not using tables except for genuinely tabular data (rather than layout) - you get complete separation of content from presentation. This means that in future, I'll be able to write different stylesheets and switch between them. This will not only let me modify the colours/fonts but also the *positioning!* :)

Btw, here's an interesting thing: I set the border style to "dotted." Under IE, it looks like it's "dashed" instead (which was *not* my intention!). I'm very surprised at this - it seems to be that dotted should be the simplest thing in the world to support! (Draw one pixel, don't draw, draw, don't draw...). See the previous pics and note that it looks better with dotted, rather than dashed, borders.

It's not my intention to make it viewable under earlier browsers (meaning <= IE6). I'll redirect dependent on the browser when they hit the title page, you see - some people will get the old design, while some people will get the new one.

Alimonster
02-12-2002, 11:08 AM
Oh, and before I forget - if you want your site in the links page but can't see it there, then let me know and I'll add it! :wink:

TheLion
02-12-2002, 11:48 AM
I never used the <SPAN> tag before, however I do use the <CODE> tag, I don't know the difference but I think they are more or less the same and <CODE> is supported under netscape (4.75 and up)... :) So if anyone knows the exact difference, SUPRISE ME! ;)

About the dot and the dashed stuff, I noticed that once before too, don't remember with what anymore, but I had the same problem it was shown dashed and not dotted (or a combination of both)... :( M$ ! :)

Finally, If you want I would like it very much to have a link to my website on yours... At least I think that's what you mean???

TheLion
02-12-2002, 11:49 AM
*Deleted*

Traveler
02-12-2002, 11:54 AM
I checked your site again and it looks much better now. :)

I even downloaded mozilla to see what the difference would be, but it all looks the same to me now.



I don't! I want it to work under CSS 2 compliant browsers - which means just Mozilla at the mo (perhaps Opera will get close, not sure yet).

I'm curious, the majority still uses internet explorer. With NS as a good second. Why would you not make your browsers compliant with that browser first?

Alimonster
02-12-2002, 12:13 PM
I checked your site again and it looks much better now. :)

I even downloaded mozilla to see what the difference would be, but it all looks the same to me now.
The main difference is the sidebar, which behaves correctly when scrolled (i.e., it doesn't move at all). Scroll the ]I'm curious, the majority still uses internet explorer. With NS as a good second. Why would you not make your browsers compliant with that browser first?[/quote]
IE isn't compliant with standards (though it's getting better). If I have a choice between creating a compliant page against a standard or a compliant page against a browser, I'll choose the standard and say "tough luck" to those with bad browsers. After all, it's not as if the other users don't get to see a page - they'll be shown the old, using-tables-for-layout version.

Btw, the margin thing you noted is because IE5's box model is broken (yes, I'm using that word a lot today). IE6 gets it right except for some pages with a certain XML doctype, where it reverts to the old, wrong box model of IE5.

As I said before, the new design is a bonus for those with compliant browers. Nothing more.

Sly
02-12-2002, 11:22 PM
Plain HTML rules!

Sorry, that's the old school in me coming out. :)

Useless Hacker
03-12-2002, 10:32 AM
I mainly use Opera at home, so I'll probably look this evening.

Alimonster
03-12-2002, 10:39 AM
I mainly use Opera at home, so I'll probably look this evening.
Cheers! :) I need to know if it displays correctly before bunging more stuff up there...

Traveler
03-12-2002, 01:28 PM
I too have been quite busy working on my new website the last couple of weeks and while placing the links today, I was wondering. do you have a name or theme for your website? Or is it simply Alistair Keys' website?

Alimonster
03-12-2002, 01:54 PM
"Alistair's World" or "Alistair Keys' World" will do fine. I don't mind very much what it's called as long as it's not too insulting, such as some muppet says stupid things on this site (http://www.alistairkeys.co.uk) :P

Am I right in calling your site "A Gameprogrammer's Journey"? (Btw, just noticed that your site has a lovely new design too! Blimey, everyone's at it :!:)

Traveler
03-12-2002, 02:15 PM
Alistair Keys' World it is :)


Btw, just noticed that your site has a lovely new design too!

Thanks :D
It's still far from ready I'm afraid, it's taking far more time than expected :( HTML is one thing, wait till you see php :)

Anyway's, you're correct about the name. Though I would like to see another description if that's ok. Because the tutorial isn't exactly the first game I wrote in DelphiX.

"A website about the journey of Delphi Gameprogrammer", something like that, would fit the description better.
[/quote][/code]

Alimonster
03-12-2002, 02:26 PM
How about "A Delphi Gameprogrammer's Odyssey"? It's shorter, slightly more pretentious :P and it fits the bill nicely:


entries found for odyssey.
odA¬?ysA¬?sey ( P ) Pronunciation Key (d-s)
n. pl. odA¬?ysA¬?seys

An extended adventurous voyage or trip.
An intellectual or spiritual quest: an odyssey of discovery

Yes/no?

Traveler
03-12-2002, 02:34 PM
Damn you're good :D :shock:

It would mean a few changes is design, but nothing I can't handle.

Though, I do think I'll leave 'Delphi' out. I think it sounds better that way, don't you think?

Alimonster
03-12-2002, 02:59 PM
Excellent. Now, if I can just get Slashdot renamed to "Dirty Penguin Huggers Anonymous" then my work will be finished... 8)

Useless Hacker
04-12-2002, 08:49 PM
I looked at your site in Opera. Screenshot here (http://www.mike-trim.co.uk/alimonster.png).

It's definately better than Internet Explorer. The side bar stays fixed, but there is a small border round the page which there isn't in Mozilla or IE. The dotted border shows up as dots, though they are a slightly different spacing to Mozilla.

Alimonster
04-12-2002, 09:00 PM
Guess I'll end up with a mozilla + opera site after all :). That description sounds rather encouraging. I'm downloading the Opera 7 beta right now...

Cheers!

Useless Hacker
18-12-2002, 10:07 PM
I had a look at your site under Konqueror in Linux. The results (http://www.wtrim.freeserve.co.uk/alimonster.png) were not encouraging... The Linux version of Mozilla works fine though.

Alimonster
19-12-2002, 08:53 AM
ROFL! Some of the display errors are totally bizarre! All of the icons there use position: relative w/ the same left position. They should all be starting from the same relative position, though perhaps it's to do with having a smaller font, who knows. :roll: I'll investigate.

A few questions: does the left bar stay fixed under Konquerer? Does it display the neato extra thing when you move the mouse over a leftbar link? Does Mozilla under Linux display the neato extra things over the leftbar links?

[EDIT: Actually, I meant that the divs use position: relative w/ the same left position. The imgs should be contained within them and there's absolutely no reason why they should appear as in the picture, thinking about it for a minute. Why the heck is Konquerer not respecting my CSS wishes? :evil: Sigh, I guess I might have to use absolute positions, which should be unnecessary for that page dammit!]

Useless Hacker
19-12-2002, 01:42 PM
A few questions: does the left bar stay fixed under Konquerer? Does it display the neato extra thing when you move the mouse over a leftbar ]
I'm not sure about the left bar thing. The mouse over thing doesn't work in Konqueror but it does in Mozilla. To be honest, I should not worry too much about compatibility with Konqueror, since anyone can just use Mozilla.