Accessify Forum: Accessibility, validation and IE CSS hacks

22 Sep 2005 03:30 pm

P: 11

Hi All,

I'm creating a website to conform to Level 2 compliance with a fixed footer containing 6 or so links. I knew beforehand that IE6 doesn't support 'position:fixed; for my footer so I've had to implement a couple of hacks to hide code from Macs etc. but this then leads to invalid CSS.

What's the view on this? Are CSS hacks OK to use even though they render your CSS invalid? The client is happy as their footer now sticks to the bottom of the viewport in all browsers (untested in Safari). Does it impact on the accessibility of the site? I'm quite (quietly) confident that the site will conform to Level 2 compliance.

Any ideas would be appreciated,
Brett

PS. Here's the homepage code

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="pageContainer">
<div id="contain-all">
<div id="topContainer">

</div>
<div id="leftNavContainer">

</div>
<div id="content">
<h1>What is a Co-op?</h1>
A co-operative is a jointly-owned enterprise formed to meet the common
economic, social and cultural needs of its members.<br />
In short, co-ops are businesses that provide what their members want and
they are controlled democratically by those members.<br />
<img src="images/arrow.gif" alt="" /> <a href="#">Find out more on what
is a co-op.</a>
<h1>About Midlands Co-op</h1>
The Midlands Co-operative Society Limited is the largest independent retailer
in the Midlands and the third largest co-operative in the country. As a
co-operative, it is firmly rooted in the community in which it trades;
it's employees come from that community; virtually all its members live
and work in the Midlands; its profits are put back into the business or
are shared with its members and stakeholders, so these stay mainly in the
Midlands. That is just one of the differences between a co-operative and
a plc.<br />
<img src="images/arrow.gif" alt="" /> <a href="#">More about our history.</a>
<p>Today, Midlands Co-op is a modern, forward-looking organisation employing
some 7,600 staff and with a turnover in excess of £574 million. Our principal
areas of activity are Retail - food and non-food; Travel;Funeral Services
and Transport. We also have a substatial investment property portfolio.<br />
<img src="images/arrow.gif" alt="" /> <a href="#">Go to our website.</a></p>
<h1>Membership Benefits</h1>
<p>Be a share owner of Midlands Co-op, have your say, vote in our elections
and apply for the Midlands Co-op Members Card.<br />
<img src="images/arrow.gif" alt="" /> <a href="#">Find out how to join.</a> </p>
<p> </p>
<p> </p>
</div>
<div id="homepageImage"></div>
<div id="bannersContainer">
<div id="banners"> <a href="#"><img src="" alt="" width="155" height="35" border="0" /></a> <a href="#"><img src="" alt="" width="155" height="155" border="0" /></a> <a href="#"><img src="" alt="" width="155" height="35" border="0" /></a> <a href="#"><img src="" alt="" width="155" height="35" border="0" /></a> <a href="#"><img src="" alt="" width="155" height="155" border="0" /></a> <a href="#"><img src="" alt="" width="155" height="35" border="0" /></a></div>
</div>
</div>
<div id="footer">
<div id="footer-inner"><a href="/index.asp">home</a> | <a href="http://www.midlandsco-op.com/aboutus">about us</a> | <a href="contactus.asp">contact
us</a> | <a href="sitemap.asp">sitemap</a> | <a href="links.asp">links</a> | <a href="faq.asp">faq</a> | <a href="accessibility.asp">accessibility</a></div>
</div>
</div>
</body>
</html>

and the CSS

Code:

/* CSS Document */

body {
font-family: Arial, sans-serif;
font-size:70%;
color:#666666;
margin:0px;
}

html, body{
height:100%;padding:0
}

* html, * html body{
overflow:hidden;
padding:50px 0;
margin:-50px 0;
padd\ing:0;
ma\rgin:0;
}

a:link {
color:#0066FF;
text-decoration:none;
}

a:hover {
color:#0066FF;
text-decoration:underline;
}

img {
border:none;
}

h1 {
font-family:Arial, sans-serif;
font-size:120%;
color:#000066;
font-weight:bold;
display:block;
}

h2 {
font-family:Arial, sans-serif;
font-size:105%;
color:#666666;
font-weight:bold;
display:block;
}

ul {list-style-type:square; }

#topNav {
display:inline;
}

#topNav a{
background-image:url(../images/arrow.gif);
background-position:5px 2px;
background-repeat:no-repeat;
padding-bottom:10px;
padding-left:19px;
padding-right:16px;
color:#333333;
text-decoration:none;
}

#topNav a:hover{
color:#333333;
text-decoration:underline;
}

#leftNavMain {
border-left: 1px solid #666666;
border-right: 1px solid #666666;
background-color:#A8E2FF;
color:#333333;
width:153px;
}

#leftNavMain a{
background-image:url(../images/arrow.gif);
background-position:8px 5px;
background-repeat:no-repeat;
text-decoration:none;
color:#333333;
display:block;
padding-left:23px;
padding-top:4px;
padding-bottom:4px;
border-bottom: 1px solid #666666;
}

#leftNavMain a:hover {
text-decoration:underline;
}

#leftNavSub {
border-left: 1px solid #666666;
border-right: 1px solid #666666;
background-color:#000099;
color:#FFFFFF;
width:153px;
}

#leftNavSub a{
background-image:url(../images/arrow.gif);
background-position:8px 5px;
background-repeat:no-repeat;
text-decoration:none;
color:#FFFFFF;
display:block;
padding-left:23px;
padding-top:4px;
padding-bottom:4px;
border-bottom: 1px solid #666666;
}

#leftNavSub a:hover {
text-decoration:underline;
}

/********* container styles *********/

* html #pageContainer {
overflow:auto;
height:99.9%;
voice-family: "\"}\""; voice-family:inherit;
}

* html #contain-all{
position:absolute;
overflow:auto;
width:100%;
height:100%;
z-index:1;
}

#topContainer {
top:0px;
width:960px;
height:130px;
}

#leftNavContainer {
width:54px;
height:auto;
}

#bannersContainer {
height:auto;
width:155px;
}

/********* form and related tag styles *********/

form {
margin: 0px;
padding: 0px;
}

input, textarea{
font-family: Verdana,sans-serif;
}

textarea {
font-size:100%;
}

#search {

padding-left:4px;
padding-top:4px;
height:45px;
width:149px;
border:1px solid #333333;
background-color:#F5F5F5;
}

/*************** spacer *************/

.leftNavSpacer {
height:13px;
width:155px;
border-bottom:1px solid #666666;
}

.leftNavSpacerWhite {
height:13px;
width:155px;
}

#content {
position:absolute;
width:380px;
left:165px;
top: 146px;
}

#homepageImage {
position:absolute;
background-image:url(../images/homepage_main.jpg);
background-repeat:no-repeat;
width:230px;
height:370px;
left:560px;
top: 146px;
}

#banners {
position:absolute;
width:155px;
left:803px;
top: 146px;
}

#banners img, #banners a {
display:block;
padding-bottom:5px;
}

#footer-inner {
height:30px;
background-image:url(../images/footer.gif);
color:#FFFFFF;
padding-top:8px;
padding-left:165px;
letter-spacing:0.1em;
}

#footer-inner a{
height:30px;
background-image:url(../images/footer.gif);
color:#FFFFFF;
text-transform:uppercase;
text-decoration:none;
letter-spacing:normal;

}

#footer-inner a:hover{
height:30px;
background-image:url(../images/footer.gif);
color:#FFFFFF;
text-transform:uppercase;
text-decoration:underline;
letter-spacing:normal;
}

/* mac hide - reduce page to allow the scrollbar to remain visible \*/
** html #footer-inner {margin-right:0px;}
/* end hide*/

#footer{
position:absolute;
bottom:0;
width:960px;
height:30px;
z-index:999;
}

html>body #footer{position:fixed}/* for moz/opera and others*/

Share:

Accessify Forum - Discuss Website Accessibility

Currently Online

Accessibility, validation and IE CSS hacks