2005

vexen

Vexen Crabtree's Live Journal

Sociology, Theology, Anti-Religion and Exploration: Forcing Humanity Forwards


Previous Entry Share Next Entry
2005
vexen

LJ Still Broken & Firefox

LJ is still broken and I can't reply or do other things that require me to be logged in. Something to do with cookies. It is affecting thousands of accounts. Especially mine. Also whatever change they made to the cookies (something techincal), the fault is only affecting IE.

So I've installed Firefox browser, but it's a hassle loading a non-default browser so I won't be on LJ much until they've fixed it.

This does mean of course that I'm now redoing the HTML & CSS on all webpages so that things look normal in Firefox. It does some obscure funny stuff with some of my CSS: Some of the stuff it does is just incomprehensibly dumb. But, I looked at my stats on www.vexen.co.uk for the last month, and 17% of my visitors use Firefox, so I'm doing it anyway.

To long-term Firefox users & in particular uptodate developers like Makali... any advise on Firefox compatibility? I.e., typical things it can't do, or that I should look out for?

Actually, it's not that Firefox does obscure things to CSS - it's that IE does funny things to CSS and HTML. Properly-coded CSS and 4.0-compliant HTML works perfectly in all browsers except IE, which has a whole load of nasty little quirks.

All browsers have quirks and oddities in their displaying of markup. It's just that I know IEs quirks off by heart and instinctively know how to get around them.

I don't know Firefoxes quirks yet, so that's what I'm asking for, in advance, to save confusion. If you tell me it has none, I won't believe you!

Failing that then it would be interesting to hear a few tales of things that work in IE (although they perhaps shouldn't) that don't in Firefox!

For example on a SPAN element I've been unable to set a width, at all, that Firefox accepts. It always trims it to text width - not 25% of the holding box width, nor even 190px. I had to convert some SPANs to DIVs to do it... was that because IE shouldn't allow SPAN to have set widths, or was it because Firefox doesn't implement SPANs, etc?

It's worse and more complicated than you think. There's three ways you can develop cross-browser:
1. Tables and as little CSS as possible for positioning and sizes and stuff. This is the easy way out that most people take.
2. Don't set a doctype and accept that different browsers have their own quirks (some of them emulated so they don't act different to older versions). You can deal with this by not dealing with it - design flexibly to allow browsers to do some things differently. The designers at the office hate this approach, but then they would, because they like pushing pixels.
3. Set an HTML doctype at the top of your files, which will put IE 6, Mozilla (Firefox etc), Opera and Safari all into "standards compliant" or "strict" mode. The drawback is that IE 5.5 doesn't do this, but anyone still using 5.5 probably has a dead computer by now, given the amount of unpatched security flaws still extant on this unsupported browser. :) TheCounter.com's global stats (which I use to judge the "lowest common denominator" of web users) says that more people use Firefox than IE 5.5 (6% vs 4%) so it might be time to just drop them. To be sure, your site will still work with IE5.5, but the layout may be fucked in exotic ways. The good news is that putting IE into standards mode with a doctype makes it behave rather more like Firefox without any further work.

The reason you can't set widths on <spans> is that they're displayed as inline objects, not as block objects. Blocks are things like paragraphs, unordered lists, and divs, while inlines are plain text, strong, and link tags. CSS 2 introduced quite a lot of styling to inline tags - you can set padding and borders on them, for example, but if you want something to have a defined width, it's probably a block and ought to be treated like one. (Actually, it might not be - it could be a button, for example, and you could just put padding and a border on it to make it look like one, rather than giving it a width, especially since a width in pixels won't look pretty if you increase the font size).

Most of the “uber web-design bloggers” like Zeldman, Mezzoblue, and Stop Design all say that the easiest way to develop for standards is to do all your work in Firefox or Safari to start with, and THEN bolt on additional stylesheet rules for IE fixes, since that's the one causing all the errors and sooner or later it'll go away (IE 7's in public beta already). Developing any other way will leave you with IE baggage that's hard to understand and maintain.

So: use a doctype, develop in firefox, get it looking just right. At this point you can be fairly sure that it'll look and act the same on almost every modern browser other than IE. It's worth checking, but you won't spend much time tweaking stuff there. Then switch to IE and write another stylesheet to overwrite/rewrite the CSS rules so that it works in that browser. There are several ways to make only IE read those rules, and probably the most forward-looking one is the MS conditional comment that Dean Edwards uses to include his "IE7" patch. (If you're lazy, you can just use this clever patch to make IE 5.5 and 6 act like Firefox and the other browsers, but it's quite a bit slower than doing it properly because it basically replaces IE's CSS parser with its own, written in pure javascript :)

A conditional comment looks like:
<!-- fixes for IE 6 -->
<!--[if lt IE 7]>
<link rel="stylesheet" href="iefixes.css" type="text/css">
<![endif]-->

Thanks for all that, you're a star :-)

I could do with having a week to Firefox-ify my domains... I'm just whizzing through and making sure the overall apperance of everything is acceptable. Differences in apperance don't bother me; my personal sites are functional rather than well designed.

The only browser I am used to compatibilizing sites to was Netscape, that's how long it's been!

I quite like the idea of different browsers displaying the information in (slightly) different ways, just as long as the information does get displayed. I also like the idea of user-customised stylesheets, even if it does screw up all the web-designers hard work :)

CSS 2.0 hasn't properly been released yet, has it, or am I thinking of CSS 3.0?

Re: firefox, ie and others

mattlazycat

2006-02-09 05:32 am (UTC)

2.0's been out a long long while, and 3's in sort of working-draft stage right now. The current is 2.1 :)

Check out QuirksMode.org for lots of excellent information on how IE differs from other browsers and what you can do to compensate. Final piece of advice is to be wary of CSS hacks/filters - that is, things you use to have some browsers pick up one CSS rule while another sees a different rule. This is the most common way to get IE to behave differently, and stuff like this shows up everywhere. The fact is that if IE 5.5 and 6 are the only ones misbehaving, then using IE 5.5/6-specific conditional comments is cleaner and won't come back to haunt you the next time you tweak or redesign your sites.

Good luck - if you have any specific problems, feel free to pester me. I might not get back to you immediately, but I can usually figure something out between myself and my colleagues.

OK, got one thing I can't fix, so far. My /religion/ pages have a Top bar, Content DIV, Foot bar (containing text) and a Bottom Bar (containing buttons). They are all set to a width of 780px. The footer (light blue background) has padding in order to bring the text away from the edges.

The CSS:

/* BANNERS */
div.top,div.title,div.BottomBar,div.Content,div.Foot{width:780px;clear:both;margin-left:1em}

div.Foot{background:#223344;padding:1em 2em 1em 2em;margin:0em 1em 0em 1em}



On IE this works, and all elements are the right width. In Firefox, the Padding of the Foot DIV appears in addition to the width. How do I get the Foot to be 780px, if the padding is increasing it? There are no contained boxes forcing the width out.

I've tried converting it all to pixel measurements, but, then the other elements don't quite match up due to their various borders.

An example page is on http://www.vexen.co.uk/religion/index.html (compare IE 6 where it is 'normal' to Firefox, where the blue footer is extended).

I've uploaded a half-designed site now... oh dear!

This is the DOCTYPE thing I was telling you about - IE doesn't follow the CSS box model, which means that when you give a width, it does that width and then adds the padding, whereas the specification (which is what most other browsers follow) says "the content must be this wide" and then adds borders and padding. IE 6 behaves properly if you specify a doctype, IE 5.5 doesn't at all. So you can either use an IE-only stylesheet and give a special width for that browser, or you can tell IE 6 to go to strict mode by using a doctype. An HTML 4 Transitional doctype looks like:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">


You put it before the HTML tag in your documents. The alternative to write an IE stylesheet with just the changes you need to make it work, and put it in the conditional comment I showed you in an earlier post. :)

I'm at home, and therefore without a PC right now, so I can't do you a proper example fix, but if you like I can have a bash at it on my lunchbreak on Monday. :)

You know I'd forgotten that width should be content-width. The question is, how do you limit total width?

I basically need to do a calculation:

div.Foot{width:780px-2em}

So that the padding then takes up the 1em on the left and one on the right, and therefore it matches the widths of the top & bottom portions that have no margin.

Without that calculation, is it impossible to use ems, then? That'd be a shame, they're brilliantly useful for keeping good-looking spacing between columns & edges proportional with font-size.

It is something dead simple & standard that I'm trying to do... is it just that I need to stop trying to use ems?

In this instance, you'll have to use pixels for padding - it's a pain in the arse, true, but that's CSS for you :) You can and should use ems for lots of things (especially line-height (line spacing, if you're a normal person :) where using pixels might make lines overlap if the font size is too big), but in this case you can't. Sorry!

Slimelight

(Anonymous)

2006-02-05 05:31 pm (UTC)

Hey

This is totally unreleated to this message, but I was wondering if you could tell me somthing about Slimelight and getting in...Can i not get in unless someone whos a memeber and doesnt already have 2 guests lets me come in with them? (I know i have to pay as well)

cheers! (email moodyhah@hotmail.com, dont know if you contact me another way) Helen :)

Various places (LJ user info and netgoth) tell me it's your birthday today.

Happy Birthday!



Oh, and while I'm pretty familiar with a few quirks in Firefox, I know very little of IE's quirks, so can't help out I'm afraid.

I was reading netgoth.org.uk and noticed it was your birthday... So HAPPY BIRTHDAY!!!

Hope you had a wonderful birthday!

Also, as far as the LJ thing, a friend of mine could not get it to work, and ultimately downgraded to a free account. When he did that, his problems with LJ disappeared. I have no idea why the problems seem to effect paid accounts more than free ones.

Its been a very long time since I have been on LJ. I also found out from LJ that the 9th was your birthday.

Still coming over on the 16th (ie, tonight?) it'd be good to see you both. Give CJ a yell if you get a chance? xx

Re: Off topic totally

vexen

2006-02-16 03:40 pm (UTC)

Our flight from Ger is at 9pm, I'll ask Sam when she gets in from work (1730hrs ish), expect a reply around then!

Re: Off topic totally

vexen

2006-02-16 04:45 pm (UTC)

We're arriving at Gatwick at 21:30, and plan is to get to the Dev for drinks!

You got Sam's number? Mine is (UK) 07812 048684, give us a ring once we're in the UK if you want.

You are viewing vexen