Question on deferring CSS expressions until after doc loaded

[Guest]

Hi all...

I'm using CSS expressions to dynamically position DIVs on-screen,
using code like:

left:expression(document.body.clientWidth/2 - ckid_div_content.offsetWidth/2);

where ckid_div_content is a DIV containing (uh) some content.
The trouble I'm having is that when the doc is first loaded, I get
an error dialog stating that ckid_div_content isn't defined. Interestingly,
after that I can refresh (F5) the screen, but the error dialog doesn't
appear, which seems like a wierd cached-document interaction.

Now I know that in a <script> block you can set the DEFER attribute,
but <style> doesn't have this attribute, so how can I defer
recalculation of the expression until the DIV is loaded?

Regards,
mvsmith

 

[Nicholas]

All of the below make up one list of reasons not to use
expressions in CSS. IMHO, it is simply pushing things too
far. You don't know what other kind of weird interactions
you're going to get on different browsers.

 

[Murray]

Other browsers don't support them at all, as far as I know....

 

[Murray]

What is it you are trying to center?

 

[Jon Spivey]

Hi,
I don't think you need expressions for this - assuming you have a doctype
on your page something like this
<style type="text/css">
#yourDiv{
margin: 0 auto;
width:300px;
}
</style>
<div id="yourDiv">
stuff
</div>

You may or may not want to handle IE5 - if you do post back

 

[Guest]

I have a content DIV containing a IFRAME that I want centered horizontally,
but I want the DIV's top 100px from the top of the window, and its
bottom 0px from the bottom. Using expressions to set centered, top,
and bottom properties.

Additionally, I've set up a little navigation dashboard that contains top,
scrolldown, scrollup, and back buttons, all in a DIV that hugs the
aforementioned content DIV on the right, top-aligned. Using expressions
for this, too.

I _love_ expressions, because they give me a level of control over
placement I can enact much more quickly than fussing, tweaking, and
babysitting HTML attributes.

In this case, it means I can center the content DIV without caring about the
dimensions of the dashboard DIV. I played with centered TABLEs and DIVs
for hours, and just couldn't get fine enough control.

By the way, I think I just thought of an answer to my question. Rather
than use expressions for IDed elements in CSS, I can either redefine the
expression in an _onload handler, or convert everything to recalc
on the resize event, without using expressions. Would this latter method
be more successful with other browsers?

Thanks, guys...
mvsmith

 

[Guest]

Hi,
Jon, thanks! The margin:auto rule hadn't registered...but there it is
in the CSS ref!

I had been messing with the align="center" attribute, and just not
getting what I wanted.

Regarding your comment on IE5, do I take from that that IE5
doesn't support auto?

Regards,
mvsmith

 

[Murray]

YOu need to kick IE5 in the rear to make it work -

body { text-align:center; }
#wrapper { text-align:left; }

Now you can center stuff - just wrap the whole page in the #wrapper....