Page 1 of 1

opera web browser and CSS vs all other browsers

Posted: Sat Apr 10, 2004 3:53 am
by malcolmboston
i know theres another topic about all this but its locked so could'nt add my current "problems" to it

i was wondering, this is one of my first times of using CSS for pretty much everything including layout, and now i realise why i didnt

now i have several web browsers installed on my machine, IE6, Mozilla, Opera etc with the exception of netscape (dont ask)

now im using DIV's for pretty much everything because im using a CSS "theme system" whereas you decide what CSS file to use and it moves the divs around (it was a client requirement)

now i have major problems with this, we all know the "poor" implementation of web standards and how much of a nightmare it makes our jobs.

Now i use Studio MX, Zend Development Studio, Photoshop CS mainly to do web-design and programming now when i designed this site in dreamweaver it appears EXACTLY as it does in IE6.0 (imho the best browser, firebird a close second) however when i open it in opera seriously the site is a complete mess, this ONLY happens in opera, this is happening with most of my sites 99% are minor glitches that a standard user would never notice but this is major.

I also have problems with DHTML menus in opera but thats another story altogether.......

does this happen to anyone else?
is IE incorporated in the way i mentioned to Dreamweaver MX?
why does opera render it completly different to everything else?

why has'nt opera been scrapped!?!?!?!

im not "hopping" on the bandwagon with the other topic, im seriously wondering if people have experienced this, sorry if ive reopened a flamefest

Mal

Posted: Sat Apr 10, 2004 8:27 am
by feyd
I've had a similar experience with it. It's been a while since I last fired up Opera, so I don't know anything about current issues, but previously, I think it was the extremely strict approach to the DOM that made it an unnecessary pain. I remember having to strip out functionality because of it too. Quite annoying.

ps, I'd have to agree with you on IE6 being the best browser, followed close by Firefox.
<flamesuit on>

Posted: Sat Apr 10, 2004 10:16 am
by malcolmboston
well ive been coding in HTML since, well, for a very long time and i know my coding is impeccable, opera just seems to like to annoy me to death.

I just dont understand why opera screws everything up whilst over browsers work pretty much exactly the same.

opera renders the following CSS tags completely wrong (what ive noticed so far)
margin +0px (for the actual browser window, this takes away the white space between the scrollbar and the actual site)
div positioning is constantly off, i reckon they have a completely different system of measurements for them (i always use pixel based measurements for everything)

these are just a few, i also noticed background image attribute in CSS doesnt seem to work properly

it just annoys me that i can create a technically brilliant site, for it not to work in one lousy browser that around 2-3% of the population use!!!

what should i do?

make the opera users suffer the consequences of using such a bad browser or what?

Posted: Sat Apr 10, 2004 3:31 pm
by Unipus
If it's seriously just Opera, then yes, ditch it and move on. But before you make that assumption, I would check the site thoroughly in FireFox, Safari, and NS6+, because I think it's pretty rare for something to *only* go wrong in Opera while IE handles it fine. (unless we are talking about DOM issues).

Secondly, stop using Dreamweaver preview mode, and stop designing for IE first. You'll save yourself a lot of time down the road this way.

Posted: Sun Apr 11, 2004 12:15 am
by Roja
feyd wrote: ps, I'd have to agree with you on IE6 being the best browser, followed close by Firefox.
<flamesuit on>
*cough* Alpha 24-bit PNG's. *cough*

Best? It can't even do what it ADVERTISES it does, let alone what everyone else does.

Posted: Sun Apr 11, 2004 1:00 am
by feyd
the problem I have with png's is they are often, at least in the ones I've worked with, larger than their counter-parts. Sure, 8-bit alpha channels would be nice to use at times. Everytime I've run into that situation, I can easily substitute a jpeg or gif in it's place with little noticable difference.

I don't know about others, but I can't find a reference to Microsoft saying they are 32-bit png compliant. 24-bit yes.. 24-bit doesn't include an alpha channel normally.

now this says that ie does support it.. although not inlined with img tags.. guess what, it works.

Posted: Sun Apr 11, 2004 9:59 am
by m3rajk
netscape 7+ is just a variation on mozilla, you don't need it. mozilla 6 has the css3 prelims included
ie claims to support more than it does and has dozens of noted coookie issues and implimentation variations, if it's working in mozilla it should be w3c compliant.

find out what your client wants: w3c compliance or ie compliance

Posted: Sun Apr 11, 2004 10:00 am
by twigletmac
Opera has, in the past, given serious headaches with underscores in class names (which aren't allowed in the W3C specs), good to make sure that you aren't using any in your CSS.

Mac

Posted: Sun Apr 11, 2004 10:29 pm
by Roja
feyd wrote:the problem I have with png's is they are often, at least in the ones I've worked with, larger than their counter-parts.
They can be, but you are most likely either:

- Using photoshop (Horrible compression algorithm for png's)
- Not using a png crusher (dozens of them available)

In either case, there is an obvious solution. For my online game, the difference between GIF and PNG was a net savings of over 20%.
feyd wrote: Sure, 8-bit alpha channels would be nice to use at times. Everytime I've run into that situation, I can easily substitute a jpeg or gif in it's place with little noticable difference.
jpegs are lossy - png isnt. gif is (*still*!) patent-encumbered, and poor technology - png isnt.

Proper tools for the job.
feyd wrote: I don't know about others, but I can't find a reference to Microsoft saying they are 32-bit png compliant. 24-bit yes.. 24-bit doesn't include an alpha channel normally.
Yes 24-bit does. In fact, from the png homepage:
both grayscale and RGB PNGs can have 16-bit samples--that is, 16-bit and 48-bit pixels, respectively--and both can also have an alpha channel for transparency information. Thus an 8-bit grayscale image or a 24-bit RGB image may contain an 8-bit alpha channel, for a total of 16 or 32 bits per pixel; while a 16-bit grayscale image or a 48-bit RGB image may contain a 16-bit alpha channel, for a total of 32 or 64 bits per pixel. However, when tools occasionally mention PNG32, they are invariably referring to 32-bit RGB+alpha (RGBA), not 32-bit gray+alpha. (Few tools support both reading and writing of images with 16-bit samples; such images are typically used only in science, medicine, and the film industry.)
As to microsoft's 'support' of PNG's..
feyd wrote: now this says that ie does support it.. although not inlined with img tags.. guess what, it works.
It doesn't say that it supports it. It shows how to workaround their bug - with a non-standard, non-html-compliant set of ActiveX controls.

When IE5 came out, they announced support for PNG. In the years that have followed, they have consistently evaded questions regarding when they will properly support it. Not surprising since they didnt even write the code - they hired an external company to.

Posted: Tue Apr 13, 2004 4:41 am
by malcolmboston
twigletmac wrote:Opera has, in the past, given serious headaches with underscores in class names (which aren't allowed in the W3C specs), good to make sure that you aren't using any in your CSS.

Mac
no, i didnt know of this rule but im not using them in my CSS styles rather using thisstyle-div

Posted: Tue Apr 13, 2004 4:46 am
by malcolmboston
i believe i may know what a "few of the problems are"

ok, i have this in my css

Code: Select all

body &#123;
margin +0px;
&#125;
this takes away the browser whitespace on either side, i reckon this is the reason a few divs are a few pixels off (opera ignores top and bottom margin btw, stupid browser)

also opera seems to like drawing a nice border in my banner section (which is not referred to in ANY html or css as it appears on no other browser (even konqueror, not really a browser, diplays my page correctly).

I would like to get it working perfectly, mozilla and other browsers are around 1-3px off on positioning of the divs, so its not really a problem.

Mal

Posted: Sun Apr 18, 2004 9:24 pm
by no_memories
Opera needs a padding declaration to have no white space in the body. To understand Opera 7, you really need to study the W3C CSS 2 specifications to the letter.

Code: Select all

body {
margin: 0;
padding: 0; /* be kind to Opera */
}
Opera 7 is "generally" more CSS compliant than all other browsers. But this doesn't mean it's perfect. CSS is a whole different ball game when it comes to layout than tables, but once you get the hang of it, it's really nice to work with.