Layout: "dead centre": what I am doing wrong?

started by Baffone on Apr 12, 2004 — RSS Feed

Baffone Baffone
Posts: 8

In a simple page I've just published (http://www.jdlc-consulting.com/) I used Joes' css to have the content centred (http://www.wpdfd.com/editorial/thebox/deadcentre1.html) but something went wrong. With Explorer (for Mac, at least) the content doesn't show up as supposed.
Any idea about what am I doing wrong?

Joe Gillespie Joe Gillespie
Posts: 528

Just another of those bugs in Explorer that you have to workaround, unfortunately.

You need to shorten the DOCTYPE to

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

In other words, leave out the dtd part. Then Explorer will play ball. Actually, this solves several of IE's other peculiarities too so any time IE is not doing what you expect, chop of its dtd!

Jhgowen Jhgowen
Posts: 2

I am trying to centre a heading, which is a large png, but unless I use the <center> tag, it remains resolutely at the left-hand side. I tested Safari's knowledge of the text-align property on your dead-centre page, which works fine, so I am wondering what else might be the problem.

Baxter Baxter
Posts: 157

Without seeing the code, it's hard to tell what's up, but I've found that you have to use text-align:center on a parent element to make it apply to photos.

Jhgowen Jhgowen
Posts: 2

well, I used the "dead center" code to force the title into the middle, but then my content moved up under the title, so I have added a transparent empty spacer div to move the content down.

I will try the "enclose in div" method, and see if that helps.

Inez Inez
Posts: 2

Forum said:
Just another of those bugs in Explorer that you have to workaround, unfortunately.

You need to shorten the DOCTYPE to

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

In other words, leave out the dtd part. Then Explorer will play ball. Actually, this solves several of IE's other peculiarities too so any time IE is not doing what you expect, chop of its dtd!


I'm no expert, so just asking; first, I see that the doctype isn't stating if it's transitional or strict, plus, with the URI removed isn't this putting the browser in quirks mode? If so, how safe a compromise is it? (I've been reding too much, now I'm totally confused about doctype/mode being able to even screw up CSS)

Thanks,
inez

Joe Gillespie Joe Gillespie
Posts: 528

Unfortunately, there is no right answer that works in every case. You have use quirks mode sometimes to make things work in quirky browsers. If that compromises another browser, then you have to make a choice - which one is more important?

Yes, quirks mode is unreliable, so is browser sniffing, so is Explorer (with Web Standards markup).

All I can say is that if you want near 100% reliability, don't play tricks, keep it simple.

Baxter Baxter
Posts: 157

I disagree. I think that quirks mode is far less reliable and predictable than standards mode, and deleting part of the doctype definitely puts it in quirks mode, as well as invalidating the doctype.

My advice is to put the browser in standards mode, then write it clean, following the standard. If it validates, and you understand what you're doing, you should be in pretty good shape.

Just my opinion, but quirks mode is too, um, quirky for me.

Joe Gillespie Joe Gillespie
Posts: 528

Yes, but the whole point was that standards mode didn't work for IE 5 (Mac), it gave the wrong result - and being the major browser on the Mac platform (still) it has to work, standards or not.

Inez Inez
Posts: 2

OI! While I love the "ideal" of CSS, it does seem that the more we try to  come up with something for everyone, the harder it all gets.  

I'm reading up and trying to glean what I can understand.  http://www.w3.org/International/articles/serving-xhtml/Overview.html

I a not a dedicated web designer, but do my best with what I've got. I'm from the print design world, so this all drives me insane. But I won't turn down client's web work when it falls in my lap.

Does it work with the DTD declaration/URI in PC versions of IE? I guess that would be the real choice one would have to make; whether to design for the majority (PC users) or try to be inclusive of Mac platform. I'm a devout Mac user, but...

Maybe I'll do my own web site in PDF  

thanks,
inez

Joe Gillespie Joe Gillespie
Posts: 528

Generally, you should try to stick to valid (W3C) CSS but there are a few exceptions. These are things you have to learn how to cope with - just as you have to cope with the differences in artwork for litho, gravure and flexography.

There was a time when IE5 (Mac) was state-of-the-art in CSS terms. Now it is the worst current browser (if indeed you could call it current because it has essentially been abandoned and won't be updated). But lots of Mac users still use it because it came with their Mac and works *most* of the time. It has some CSS quirks and some real bugs which you have to work around.

IE6 (PC) has quirks too - by that I mean deviations from W3C Standards behaviour.

Dealing with these differences is part of the job. Yes, it will drive you nuts sometimes but we are all in the same situation.

Wd Wd
Posts: 2

I've played around with these alternatives but I must be missing something. Mine is a little different because I am trying to center a jpg.  I'm looking at it with Win Mozilla and IE. http://www.wilderdesigns.us/wdhome/mosaico/

Joe Gillespie Joe Gillespie
Posts: 528

You are going to kick yourself! You have the height and width mixed up. The margin-top: -387px; should be -276 and the margin-left: -387

Wd Wd
Posts: 2

OUCH, It's the simplist problems that end up hurting the most. Thanks  

Nickro Nickro
Posts: 6

Being the rabid control freak that I am, these incompatibility issues are exactly the sort of reasons why I prefer Flash... you pretty much know how things are going to look and behave in any browser.

Dnabeast Dnabeast
Posts: 1

Is there any reason to use the 'dead centre' code when you're just aligning it horizonally. Is there a reason to not just put the margin: 5px auto

This puts your tag horizontally central.

Joe Gillespie Joe Gillespie
Posts: 528

No, you don't need it for horizonal centring. Making right and left hand margins auto will do that but some browsers also require that you wrap the whole page in <div align="center"> too.

Baxter Baxter
Posts: 157

Save yourself a div... put text-align center on the body instead.

IE (ahhh, stupid IE) requires the centering. All other browsers would work fine with your 5px auto example.

Remember, after you set the container to center, set the child back to left.

Joe Gillespie Joe Gillespie
Posts: 528

Save yourself a div... put text-align center on the body instead.


I know it's only a hack but, text-align: center is not intended for block level elements.

Baxter Baxter
Posts: 157

text-align: center won't work on anything BUT a block level  element, now will it? I mean, how are you going to center anything within an inline element?

Joe Gillespie Joe Gillespie
Posts: 528

Well, see what the W3C says...

http://www.w3.org/TR/REC-CSS2/text.html

"This property describes how inline content of a block is aligned."

Baxter Baxter
Posts: 157

I see what you're saying now...

One COULD argue that any content held within a container is inline to that container.

But I won't.

Whether you're centering from the <body> parent or creating a <div> parent and centering there, either way you're stuck breaking the letter, if not the spirit, of the specs, so yeah, it's a hack. So is IE. At least it validates, and putting the text-align command on the body saves one unneeded, non-semantic div.

Personally, I just wish IE would get it together on this (and png support, proper hover support, fixed backgrounds, etc., etc...).

Joe Gillespie Joe Gillespie
Posts: 528

Personally, I just wish IE would get it together on this (and png support, proper hover support, fixed backgrounds, etc., etc...).


...or everybody moved up to FireFox and it just withered and died!

When I was little, I wished and wished for a puppy dog. The nearest I got was half a bee called Eric!

Baxter Baxter
Posts: 157

Yes, but a fella has to have a dream, right?

You must login to reply