26th August 2008
IE6 is broken.
#menu ul.level2 li {
display: block;
}
#menu ul.level2 li a {
display: block;
float: none;
border: 1px solid transparent; /* Stops the box from jittering on hover */
margin: 0.25em 0px;
padding: 0.3em 0.6em;
background: transparent;
color: #666666;
font-weight: normal;
}
#menu ul.level2 li a:hover {
background: #f36e45 url(../images/menu-level2-bg-hover.gif) left top repeat-x;
color: #ffffff;
border: 1px solid #f2683d;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
2 major problems. There is a large margin on the bottom of my list items, and there is a funny dark grey border around each list item. So why these 2 bugs?
Grey Border
The grey border is caused by IE6′s failiure to render transparent borders. It instead falls back to the color property (which in this case is set to #666666).
This is the first place on my site where I need to render something differently in IE6 to other browsers. There are 2 ways of doing this:
- Use the famous ‘* html’ hack. IE has a mysterious wrapper around the html tag (god only knows why!).
- Include another stylesheet for IE6
For a site of this size, the sensible option was to include a separate stylesheet for IE and below. The stylesheet should only render in IE5 and 6 because of the @import hack (hides the stylesheet from all v4 browsers):
<!--[if lt IE 7]>
<mce:style type="text/css" media="screen"><! @import "style/ie6.css"; -->
<!--[endif]-->
To fix the border, we set the border color to a color we’ll never use within the element or on any of it’s children – pink is usually a good bet. We then apply the Microsoft CSS filter property to that color to make it transparent.
#menu ul.level2 li a {
border-color: pink;
filter: chroma(color = pink);
}
Tags: CSS, IE6, Internet Explorer
21st August 2008
Ok, so I’m getting into my site now. The wrapper is in place, and I’m moving on to the menu:
As you can see, this isn’t your ordinary set of tabs and is causing a number of problems for browsers.
Rounded Corners
The problem with this menu is that it’s got a curved highlight hover. There are 4 different ways to curve boxes:
1. Nifty Corners:
Uses JavaScript to insert <b> 1px in height and reducing in width.
PROS: Scalable, Works on all browsers
CONS: Doesn’t support borders, Fixed Radius
2. Background image
Have a single fixed image appear in the background.
PROS: Fast loading speed, Works on all browsers, Supports borders, Flexible radius
CONS: Isn’t scalable
3. Positioned Spans
Have 4 span blocks load up inside the list item. The blocks are given a background image and are then absolutely positioned into the 4 corners.
PROS: Scalable, Adjustable radius, Supports borders
CONS: Slow loading speed, Doesn’t work well on IE6
4. CSS 3
Use the new CSS 3 rounded corner properties:
- -webkit-border-radius (safari)
- -moz-border-radius (firefox 3)
PROS: Fast loading speed, Scalable, Adjustable radius, Supports borders
CONS: Doesn’t work on IE and old browsers
In the end I took the CSS 3 option. The lack of curvy corners didn’t make it look dirty as it would on sites that are totally curvy.
Tags: CSS, CSS Positioning, CSS3, JavaScript
20th August 2008
Over the next few months I’ll be working on a project that involves coding the frontend of a website.
The first thing I consider is what level of accessibility is the site going to follow and at what cost. I always write a site to adhere to a strict xhtml standard:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
Why? If I don’t follow a standard then what am I actually following. There isn’t any extra effort in doing things by the book so why avoid it?
The next thing is browser compatabily. I think that a website should be available to as large an audience as possible. Unfortunately this means using hacks – there is no way around it. The browsers as of today that I want to support are:
- Firefox 1.0+
- Internet Explorer 6.0+
- Safari 1.0+
- Opera 9.0+
Throughout this project there will be lots of stumbling blocks regarding browser compatability – how these are overcome will be explained in future posts.