cssway:
my blog about cascading stylesheets, web standards,
and Freeway 4 Pro.
Centering Pages in Explorer 5.5
When you choose to center-align your pages, Freeway properly uses the auto setting on the side margins. This works in modern browsers, but breaks most notably in the Windows IE 5.5 browser. This is due to IE 5.5. not having a clue what auto means. There is however a flaw in IE 5.5 that can be exploited to force that paleolithic browser to do our bidding again. It goes like this:
First, we define the body element with the attribute text-align and a value of center. This is the hack, and will center all our text, and the page along with it. One way to do this is to create a new tag style – named body in the Tag field of the Edit Styles window. When you’ve done that, select the Align attribute from the Paragraph section and choose the centered button.
Sometimes Freeway doesn’t seem inclined to follow through when the only attribute of a style is the Align attribute. One way to trick Freeway into publishing a style it thinks isn’t really needed is to duplicate that attribute in the Extended style portion of the Edit Style window.
Press the Extended button to open the extended attributes for this style. Create a new attribute with the name text-align and give it a value of center. This mirrors what we have already done through the main Edit window. Since Freeway cannot know what we have added here, it cannot decide if the style is needed or not and should publish it for sure.
This will now fool IE 5.5 into centering the page in the browser window. However, all our non-aligned text is now centered too. We need a fix to counter the hack.
We could go item by item and create new styles to re-align our text, but there is an easier way to put it all back to rights. On a Freeway page, all text is placed in containers of one sort or another. Whether your page is layered (divs) or not (tables), Freeway 4 writes at least one div element to enclose the whole page (PageDiv). So instead of writing styles for every text element, we can just target that div with a style that should re-align our text to left. Granted it will also target every other div on the page, but that first one is what will really count. We can do it like this:
Just like we did for the hack, now create a new tag style named div in the Tag field and set its paragraph alignment to left. Mirror this in the Extended attributes like we did previously. The successful result of this is all non-aligned text should align left, which is the normal state of things. Any other text that we have aligned differently should not be affected.
Another Approach…
After describing this method in some detail, I should let you know there is a shorter, easier way to do accomplish this same thing. But don’t get upset — if I had told it to you about it straight away then you’d have had no fun in learning why it works.
Instead of writing these new styles into the common stylesheet when we only need to apply them to people using IE5.x, what I like to do is to wrap them in a conditional comment, like so:
<!--[if lt IE 6]>
<style type="text/css">
body { text-align: center; }
div { text-align: left; }
</style>
<![endif]-->
Conditional Comments are a way of distinguishing between versions of Internet Explorer — as far as I know, conditional comments only work with Internet Explorer. By inserting this conditional comment into the Before /HEAD section of the menu Page » HTML Markup… we are adding the styles defined within only to versions of IE less than (lt) 6 — essentially 5.5 and below. Version 6 and 7 shall ignore it altogether.
I also usually add a slightly smaller base font-size attribute to the body style, as IE 5.x seems to me to make fonts much larger than necessary.
Centering within Elements
If your page is not centered, but you have used the margin:auto setting to center an item within another item, the same principle applies, only in a different way.
Instead of applying the hack to the body of the page, you must apply it to the containing element of the auto centered item. If the containing item is a div/box then select it and open the menu Item » Extended… Choose the <DIV Style> pane and create the attribute text-align with a value of center. Then go to the item being centered and apply a paragraph alignment value of left. How that is done will depend on the kind of item it is. If it is another div, then use the same extended method only applying a value of left.
Finding the proper containing element is sometimes a challenge. In the case of margin:auto centered items on width-flexible pages, I would create a style that targeted the div tag with the text-align:center setting, then create a tag style for the text-align:left correction and name it div div. Yes, that’s div followed by a space followed by another div. What this method does is correctly target the invisible Freeway-generated PageDiv for the hack, and then all of it’s descendant divs with the correction.
26.03.2007. 15:34
This article hasn't been commented yet.