opera web browser and CSS vs all other browsers

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
malcolmboston
DevNet Resident
Posts: 1826
Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK

opera web browser and CSS vs all other browsers

Post 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
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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>
malcolmboston
DevNet Resident
Posts: 1826
Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK

Post 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?
Unipus
Forum Contributor
Posts: 409
Joined: Tue Aug 26, 2003 2:06 pm
Location: Los Angeles, CA

Post 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.
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post 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.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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.
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

Post 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
User avatar
twigletmac
Her Royal Site Adminness
Posts: 5371
Joined: Tue Apr 23, 2002 2:21 am
Location: Essex, UK

Post 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
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post 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.
malcolmboston
DevNet Resident
Posts: 1826
Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK

Post 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
malcolmboston
DevNet Resident
Posts: 1826
Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK

Post 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
User avatar
no_memories
Forum Contributor
Posts: 145
Joined: Sun Feb 01, 2004 7:12 pm
Location: New York City

Post 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.
Post Reply