Freepages-Help-L Archives

Archiver > Freepages-Help > 2009-01 > 1231271730

From: "Barry Carlson" <>
Subject: Re: [FreeHelp] IE 6 hacks
Date: Wed, 7 Jan 2009 08:55:30 +1300
References: <><BLU149-W832D7C3C300F9A38F21D49E4E00@phx.gbl><BC2C38D3578C47648F0664FF1E5490DC@BERT><BLU149-W81442F0574BF10B2CC2B39E4E00@phx.gbl><8F1963CD95A34979AAE7065529E56F6F@BERT><0F7BC407B1554D24AD38FE4271160DA7@BERT><6DE2CA77812E4CF496747F910A336A79@BERT><A9EBCCFB343B438ABBE05FBE20DAE1D5@BERT><BLU149-W57EA0EC3CC1BEF0498F779E4DE0@phx.gbl>

On Tuesday, January 06, 2009 2:37 PM (UTC+13)
Cindy wrote:-

I tried these suggestions from you with some good results:

>to restore the margin above #container, the following will
trigger the hasLayout in IE6 and below:-
span style="display: block; clear: both"></span>
<div id="container">
THAT worked

> if you add #container to a:link, e.g. #container a:link {font-weight:
> bold;}
the style will no longer affect the Freepages bottom banner font.>>
THAT affected the style of the links in my Records page menus, removing the
background, but when I changed to #container a {font-weight: bold;} it
worked and removed the bold on the Freepages links without affecting my
other links

> *html #navigation li a {
> margin-bottom:-1.5em; /* IE6 and below */
> }>>
THAT worked to remove the gaps between the links in the records menu.
Hooray, that was the worst problem. But in IE 6, the bottom border on the
menu is now gone. The top border and all the borders in between the menu
sections are still OK, and the bottom border remains OK in IE 5.5 and 5.1
and in IE 7.0 and 8.0.

> *html #container {
> width:832px; /* IE5.x sees 832px and IE6 sees 800px; */
> width /**/:/**/ 800px; /* IE6 sees 800px */
> }>>
THIS fixed the float problem in the header in 5.5, but not 5.1
> *html #userContentFP {
> text-align:center; /* Centers #container IE5.x */
> text-align /**/:/**/ left;
> } THIS did not center the container in 5.5 and 5.1

Perhaps I entered something wrong in my stylesheet?

Here is the Records page:

I think I am happy with most of it now, but am willing to try something
else. I did not try all the conditional styles, will one of them center the
container in 5.1?

The Conditional Comments are the safest to use, as they are only recognised
by the IE browsers and the W3C validator doesn't see them. The CSS hacks
work on the basis of known flaws in browsers and the W3C CSS validator
(jigsaw) will often identify them as not valid CSS. In that respect the CSS
hacks will have no detrimental effects when rendering your page as they
should only be recognised by the targetted browser(s).

Dealing with the CSS attached to:-
which is

I have come up the following hacks to correct rendering in IE6, IE5.5 and
IE5.01 and in doing so have corrected some errors in the hacks I sent

Starting at the top of the page -

1... Restore top-margin above #container

<span style="display:block;clear:both;"></span>

Triggers 'hasLayout' in the IE browsers (a complicated IE only problem) and
all other browsers parse it and apply it with no ill affects.

2... Restore correct width of #container in IE5.x (a padding /border
issue) -

* html #container {
width:832px; /* Targets IE5.x */
w\idth:800px; /* Targets IE6 */

Works on the basis that * html is recognised by IE6 and earlier versions.
The width:832px; is read by them all, but IE6 doesn't apply it because it
ignores the 'escape' inserted in the second w\idth:800px; and applies the
last value. IE5.x don't understand "w\idth" and the declaration is dropped.

3... Center #container in IE5.x (margin:0 auto; not recognised) -

*html #userContentFP {
text-align:center; /* Targets IE5.x */
t/ext-align:left; /* Targets IE6 */

Uses the Freepages #userContentFP div to apply the IE only application of
the inline style text-align:center; to a block element. Works on the same
basis as #2, though the second declaration for IE6 can be left out as IE6
will recenter itself with the margin:0 auto; declaration.

4... Remove gaps between lines in the Records Menu -

*html #navigation li a {
margin-bottom:-1.5em; /* IE6 and earlier */

Removes the excess space between lines - all 3 IE browsers.

5... Fix bottom border in menu - IE6

Add the following line to the Menu List -

<li id="navigationheader></li>

The following styles will restore the bottom border -

* html #navigationheader {/* Bottom line IE6 and IE5.5 */
display:none; /* IE5.01 only */
display/**/:block; /* IE6 and IE5.5 */
padding-top: 0.4em;
padding-bottom: 0.4em;
border-left: 1px solid #708090; /*the dark gray blue*/
border-right: 1px solid #708090;/*the dark gray blue*/
background-color: #708090;/*the dark gray blue*/

Works by using display:none; to target all browsers. IE6 and IE5.5
recognise display/**/:block; and render the inserted border.

6... Render correct size of font in #footer

The IE5.x browsers don't recognise font-size:small; - the easiest remedy
is -

#footer {

Which covers ALL browsers.

7... Restore Freepages Bottom Banner font-weight to normal -

#container a {

Which you have determined works best for you.

I trust the above covers the problems noted. Backward compatibility is
becoming a bigger problem with ever changing standards.


This thread: