CSS and the dead "align" attribute

A

Andrew Cameron

Let me tell you a little story. Once upon a time, a man who was trying to
get valid XHTML and CSS found himself wanting to "center" his entire site.
Naughty.

So he tried "align: center;". "Ooh, centered stuff", said IE and Mozilla
Firebird. "Bad man!" said the W3C validator.

So he tried "<div style="margin: auto auto;">". "Ooh, centered stuff" sais
IE. "Good boy!" said W3C. "What does that mean?", asked Mozilla Firebird,
reportedly most compliant of the browsers, "I'll just left align this over
here, okay?". The man screamed, long and hard.

Then, he posted to alt.html for help. Please :eek:)
 
D

David Dorward

Andrew said:
Let me tell you a little story. Once upon a time, a man who was trying to
get valid XHTML and CSS found himself wanting to "center" his entire site.
Naughty.

Indeed, why aren't you making better use of the browser window? :)
So he tried "<div style="margin: auto auto;">". "Ooh, centered stuff"
sais IE. "Good boy!" said W3C. "What does that mean?", asked Mozilla
Firebird, reportedly most compliant of the browsers, "I'll just left align
this over here, okay?". The man screamed, long and hard.

http://dorward.me.uk/www/centre/

My guess is that you are setting the margins on the wrong element (and not
compensating for certain of MSIE's annoying bugs).
 
A

Andrew Cameron

David Dorward said:
Indeed, why aren't you making better use of the browser window? :)

Because it doesn't look the way I want when spaced out. I know, I know...
naughty, but I am trying to get it to look the same in as many browsers as
possible. :)
http://dorward.me.uk/www/centre/

My guess is that you are setting the margins on the wrong element (and not
compensating for certain of MSIE's annoying bugs).

I've read your page and I'm not sure that I am setting the wrong thing -
it's block, and I'm setting the <div> - also, and this is the crazy part -
IE is the only browser it works in! If I do a <div style="align:center;">
or <p style="align:center;"> then it works everywhere, but W3C tells me not
to. Maybe you can tell me?

I've got <body> then <div style="margin: auto auto"> then a bunch of <div>s
inside that which make up my page content (and all validate and look the way
I want), the <div>s are closed, then the <body> is closed. So all I'm
trying to do in centre the whole thing, and I was under the impression that
a <div> was the best way to go about it. Any ideas?

Thanks...
 
R

rf

Andrew Cameron said:
trying



I've read your page and...

<snippier>

The problem is that we have not read *your* page. One minutes perusal would
probably be enough for one of us to give you your answer :)

URL?

Cheers
Richard.
 
R

rf

Andrew Cameron said:

Get rid of the outermost div, the one where you have specified
style="margin: auto". This one, by default, has width: 100%; and the div
inside that, your #shell one is, by default, aligning to the left of it.

Apply margin: auto to the #shell div.

When playing with this stuff it pays to turn all borders on:
* {border: solid 2px green}

It makes things obvious. I have a user style sheet with this in it that I
can switch on just for this sort of thing.

Cheers
Richard.
 
A

Andrew Cameron

rf said:
Get rid of the outermost div, the one where you have specified
style="margin: auto". This one, by default, has width: 100%; and the div
inside that, your #shell one is, by default, aligning to the left of it.

Apply margin: auto to the #shell div.

Ahhh. Fantastic - thank you very much for the help.
When playing with this stuff it pays to turn all borders on:
* {border: solid 2px green}

Wow, that is helpful!
It makes things obvious. I have a user style sheet with this in it that I
can switch on just for this sort of thing.

Which browser allows you to do that?
 
D

David Dorward

Andrew said:
Which browser allows you to do that?

Opera I think...

But Mozilla has the DOM inspector, which displays the HTML in a tree form
and lets you find bits of HTML by clicking in the rendered document, and
flashes a border around a rendered element when you pick it in the tree
view. It also lets you look at what styles are being applied to each
element and change them on the fly.

http://grayrest.com/moz/evangelism/tutorials/dominspectortutorial.shtml
http://www.brownhen.com/DI.html
 
A

Andrew Cameron

EightNineThree said:
Gives 404 - 6:48am US EST

The problem has already been solved by someone else in the thread, so I
removed the directory to save on bandwidth. Thanks for trying to look,
though!
 
R

rf

Andrew Cameron said:
Ahhh. Fantastic - thank you very much for the help.

Crikey. A satisfied customer :)
Wow, that is helpful!


Which browser allows you to do that?

All of them. Well, all of then that conform to the spec. It *is* part of the
CSS spec:

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

IE - tools>internet options>general>accessibility>format documents using my
style sheet

I've forgotton the others :0)

Cheers
Richard.
 
R

rf

Andrew Cameron said:
The problem has already been solved by someone else in the thread, so I
removed the directory to save on bandwidth. Thanks for trying to look,
though!

Hmmm. Not a good idea Andrew. Spend a little bit of your bandwidth on the
other newbies/interested parties here, that's what the newsgroup is all
about. The discussion is interesting in itself and hopefully informative to
them. The subject site is much more valuable to them as the "picture" behind
the discussion. Help them out by leaving the evidence there for a while :)

When I wack up examples on my site I leave them there for at least a week or
so.

Cheers
Richard.
 
A

Andrew Cameron

rf said:
Hmmm. Not a good idea Andrew. Spend a little bit of your bandwidth on the
other newbies/interested parties here, that's what the newsgroup is all
about. The discussion is interesting in itself and hopefully informative to
them. The subject site is much more valuable to them as the "picture" behind
the discussion. Help them out by leaving the evidence there for a while
:)

I would do, but in this case "spending" bandwidth actually means cash out of
my pocket. Well, bandwidth out of the bandwidth I need for other things,
that I have already paid for.

Next time I post a link, I'll try to put it somewhere that doesn't require
me paying for it.
 
R

rf

:)

I would do, but in this case "spending" bandwidth actually means cash out of
my pocket. Well, bandwidth out of the bandwidth I need for other things,
that I have already paid for.

K.

How much bandwidth to you envisage from us though?
Next time I post a link, I'll try to put it somewhere that doesn't require
me paying for it.

How about here:
http://users.bigpond.net.au/rf/test/andrew/

It's the fixed version of course :)

Cheers
Richard.
"Got my hand on my heart, I know no better location..."

Er... down brucie.
 
A

Andrew Cameron

rf said:
so out

K.

How much bandwidth to you envisage from us though?

Well, looking at the logs, I've had 12 or so hits since I posted the
message. The first hit fixed the issue at a cost of, say, 45KB (including
JS rollover images). Not that much. Multiply by the number of times that
page was requested, and that's half a MB already. In 3 hours. At the risk
of sounding petty, I have re-uploaded it in the hope that it won't get too
much traffic. Allow me to explain why I am this paranoid...

In fact, one time (not at band camp) I posted an image to a popular message
board (not /.) and although the image was only 25KB, the server did 10MB of
traffic in about 15 minutes. Since then I've learned my lesson, and I have
no idea how many lurkers are in alt.html! :eek:)

Aww, you shouldn't have! The images didn't load for me, though. Also, the
design is rubbish! :)
Er... down brucie.

It's a quote from a song. Nothing to be concerned about ;o)
 
R

rf

Andrew Cameron said:
Aww, you shouldn't have! The images didn't load for me, though. Also, the
design is rubbish! :)

Of course the images didn't load. You are using javascript to achieve those
rollovers and my browser (I happened to be using IE) does not download such
things during a save>as and they give a 404. Sorry about that but that is
what you get when I publish an example on my site :)

Did you know that you could achieve the same rollover effect using pure CSS
and eliminate all of that javascript which 15% or so of your viewers have
turned off? brucie may just chirp in shortly with his very good examples of
how to do this.

The layout - I assume you mean the source - well, that's how IE saves it. It
saves it from the DOM, not the actual URL. Sorry for that :)

There we are, I've taken it down. However if you need any temporary space in
the future just let me know and I'll be happy to oblige.

Cheers
Richard.
 
A

Andrew Cameron

rf said:
Did you know that you could achieve the same rollover effect using pure CSS
and eliminate all of that javascript which 15% or so of your viewers have
turned off?

I did indeed, but was weighing up how many people had JS turned off compared
to how many don't have a CSS-compliant browser. I guessed that more people
had bad browsers. The only other problem with doing the JS rollovers is
that it doens't validate because "name" isn't a valid attribute of img, even
though every browser supports it. Would you recommend using CSS over JS
from a practical POV rather than a personal preference one?
The layout - I assume you mean the source - well, that's how IE saves it. It
saves it from the DOM, not the actual URL. Sorry for that :)

It was joke, actually... ;o)
There we are, I've taken it down. However if you need any temporary space in
the future just let me know and I'll be happy to oblige.

Thanks for the offer, but I think in future I'll think ahead before
uploading to any-old-where.
 
D

DU

Andrew said:
Let me tell you a little story. Once upon a time, a man who was trying to
get valid XHTML and CSS found himself wanting to "center" his entire site.
Naughty.

So he tried "align: center;". "Ooh, centered stuff", said IE and Mozilla
Firebird. "Bad man!" said the W3C validator.

So he tried "<div style="margin: auto auto;">". "Ooh, centered stuff" sais
IE. "Good boy!" said W3C. "What does that mean?", asked Mozilla Firebird,
reportedly most compliant of the browsers, "I'll just left align this over
here, okay?". The man screamed, long and hard.

Then, he posted to alt.html for help. Please :eek:)

.... and then he was told that

W3C CSS level 1
4 Formatting model
4.1.2 Horizontal formatting
"(...) if both 'margin-left' and 'margin-right' are 'auto', they will be
set to equal values. This will center the element inside its parent."
http://www.w3.org/TR/REC-CSS1#horizontal-formatting

W3C CSS level 2
10 Visual formatting model details
10.3.3 Block-level, non-replaced elements in normal flow
"If both 'margin-left' and 'margin-right' are 'auto', their computed
values are equal."
http://www.w3.org/TR/REC-CSS2/visudet.html#q6

and was forever thankful! :)

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html
 
R

rf

Andrew Cameron said:
I did indeed, but was weighing up how many people had JS turned off compared
to how many don't have a CSS-compliant browser. I guessed that more people
had bad browsers. The only other problem with doing the JS rollovers is
that it doens't validate because "name" isn't a valid attribute of img, even
though every browser supports it. Would you recommend using CSS over JS
from a practical POV rather than a personal preference one?

Personal preference: I would rather code and maintain two lines of CSS to
achieve a rollover effect than a bunch of javascript functions. I am a
professional C++ programmer and still find javascript a pain in the arse :)

Practical POV: A browser that does not support javascript will not be
supporting CSS anyway and probable vice versa.

I dont think it's a browser problem anyway. Those who do not support
javascript have it specifically turned off for security reasons. (I leave
javascript turned on but do not allow VB scripting or activeX controls to
run. The latter gets rid of most of those spinning flashing things. I also
turn off animated gif's for the same reason).

You will find whole organizations out there who filter javascript at the
firewall. I have never heard of anybody filtering CSS. CSS after all can't
actually "do" anything whereas javascript can.

The validation issue is up to you. Either validate or use javascript and the
name attribute :)

Cheers
Richard.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
474,078
Messages
2,570,572
Members
47,204
Latest member
MalorieSte

Latest Threads

Top