Moveable Type Stylesheet problems

January 19, 2005 7:32 AM

FireFox and CSS: I'm having difficulty getting my style sheets to behave the same way on different computers running the same browser. MI

I have this photoblog. I'm going to post the link here just so anyone who wants to look at the code can. I'll put it at the bottom so you can read the issue first and I dont' get accused of self linking.

I run MT for the blog but I've altered the style sheet significantly. I did most of this work on my laptop at work which runs FireFox 1.0 and Windows 2000. On this machine, my 'next' and 'previous' arrows and the comments link are lined up centered at the bottom of every photo. However, at my machine at home, which runs XP, the links are shoved to the left. On IE, they are fine on both machines. Is this just something I'm going to have accept about how FireFox interprets my 'position: absolute' statements, or is there something I'm missing?

It seems also that everytime I go back into the stylesheet to make changes, my pixel positions don't match up. For example, if I have something at top: 200 left: 50 and a week later I go in and I want to align a new element at exactly that location, the element will show up five or ten pixels off. Why is that?

blog here

posted by spicynuts to Computers & Internet (20 answers total)

The problem is in thinking that IE is fine and the other browsers are the "problem". (That is why I'm so intolerant of Microsoft and their way of ignoring standards... but don't get me started).

IE is the WORST browser in the world for a variety of reasons and anybody who codes CSS (according to all the rules) will tell you IE is the biggest problem out there. I would code for other browsers and then try to figure out ways to make them look right in IE, rather than the other way around.

First off, make sure you are using the correct DOCTYPE tag (first tag on the page) and understand the different modes your browser can render the page in (Quirks or Standards). 2nd: make sure your page validates according to the rules of CSS. (I recommend using FireFox as your web browser -thank me later- and installing the Web Developer extension. It puts a menubar in your FireFox browser that does LOTS of helpful stuff, but one is Validation of your CSS automatically)

Here are a few sites:
IE Bugs Exposed
http://www.quirksmode.org/
Ten CSS Tricks You May Not Know.

Also, you will find better answers for your CSS questions on a discussion list like css-discuss than a general forum like MeFi. Subscribe now!
posted by spock at 8:15 AM on January 19, 2005

This is another approach to making thing look right in Microsoft's brain-damaged browsers: http://virtuelvis.com/archives/2004/02/css-ie-only.
Haven't tried it yet, so can't vouch for how well it works.
posted by spock at 8:17 AM on January 19, 2005

Response by poster: Spock, as I said I used FireFox to code the whole thing. The problem is that FireFox renders the page differently depending on what machine I'm on.
posted by spicynuts at 8:31 AM on January 19, 2005

"Internet Explorer (IE) 5.x has a broken box model, incorrectly including padding and border in width and height property sizes. This often makes it necessary to set different lengths for that browser versus more conformant browsers.

There are two common methods for dealing with this issue: using the "box model hack" and using child selectors. Which one to use depends on whether IE 6 is in standards mode or quirks mode, determined by the DOCTYPE. In standards mode, IE 6 uses the W3C standard box model. In quirks mode, IE 6 uses the same broken box model as IE 5.x."

- from http://accessat.c-net.us/articles/hide-css_p3.html.

IE's Top 10 CSS Problems: http://archive.webstandards.org/css/winie/
posted by spock at 8:32 AM on January 19, 2005

As I said above. Validate first. When everything validates you can start working on browser-specific workarounds. When I validate your page it stops at the first error it finds, which is currently:
Please, validate your XML document first!
Line 93

Column 69

The element type "img" must be terminated by the matching end-tag "".

Keep validating and fixing problems till they are all gone (step 1)
posted by spock at 8:35 AM on January 19, 2005

inside the empty quotes above you should have seen this:
</img>
posted by spock at 8:36 AM on January 19, 2005

Response by poster: You have to end an img tag now? Damn, I am WAY behind the times.
posted by spicynuts at 9:13 AM on January 19, 2005

Instead of , just put the / at the end of your image tag: <img src="image.gif" />. That closes it.
posted by LeiaS at 9:21 AM on January 19, 2005

*Instead of </img>, that is.
posted by LeiaS at 9:22 AM on January 19, 2005

Also, DOM Inspector is your best friend when debugging CSS. Take a look at the "CSS Style Rules" for that section to see if you can determine why the browser is rendering the way it is.

I also recommend the Web Developer Extension for Firefox.
posted by LeiaS at 9:26 AM on January 19, 2005

Is anything else different between the two machines? Screen resolution? Otherwise, I'd try dumping the cache on both machines.
posted by yerfatma at 9:30 AM on January 19, 2005

You have to end an img tag now? Damn, I am WAY behind the times.

You do for the DOCTYPE you have specified. See DOCTYPE article linked to above.
posted by spock at 9:45 AM on January 19, 2005

You have to end an img tag now?

Yep. Just about every tag needs to be closed. And they say CSS reduces page bloat. Bah!

As for your question:

When I [refresh] the page, the < |> moves to the center. I'm using XP, Firefox 1.0.
posted by Civil_Disobedient at 12:14 PM on January 19, 2005

If you read Ten CSS Tricks You May Not Know, please read Ten CSS tricks — corrected and improved as well. The original article had many errors and omissions.
posted by o2b at 12:21 PM on January 19, 2005

And they say CSS reduces page bloat. Bah!

Civil_Disobediant: Are you seriously maintaining that CSS can not result in much more lightweight pages than without it?

Is there a way to put certain crank MeFi users on ignore?
posted by spock at 3:10 PM on January 19, 2005

Are you seriously maintaining that CSS can not result in much more lightweight pages than without it?

Of course it can, but it's not a foregone conclusion.

Is there a way to put certain crank MeFi users on ignore?

You could close your eyes, stick your fingers in your ears, and go "Na Na Na Na," if you like. People might think you look a little silly, however.
posted by Civil_Disobedient at 5:06 PM on January 19, 2005

And they say CSS reduces page bloat. Bah!

Not as silly as someone who makes a statement like the above.
posted by spock at 5:55 PM on January 19, 2005

Tell you what. You make a CSS page that centers text in the middle of the page (must flow). I'll use tables. Let's see who's page is smaller.
posted by Civil_Disobedient at 6:49 PM on January 19, 2005

Thank you for yet another sterling quote illustrating the way your mind attempts to simulate critical thinking. I admire your willingness to post such examples on the worldwide web. I will enjoy sharing it with others.
posted by spock at 5:55 AM on January 20, 2005

The only problem C_D, is that your code won't cache for every other page that uses the same interface. My browser needs to reload your table on every page. The CSS gets loaded once. As opposed to me on the weekend.
posted by yerfatma at 4:20 AM on January 21, 2005