CSS ‘sliding doors’: positioning the tabs
A lot has been written on styling html lists to make them look pretty, a good example being Douglas Bowman’s ‘Sliding Doors‘ articles on alistapart.com.
However, I’ve still not managed to master it. Either I have problems with floated elements or IE doesn’t style the tabs properly (IE6, at any rate).
I finally got it to work across browsers the other day, and promptly deleted the files (by accident). I shall try to recreate it and post the results here. In the meantime, here’s what I (think) I did.
Float issues
Block elements that should have come below the tabs were sitting to the right of them instead.
I think this was solved by setting an element to display:block – and I think that element was a – but I’ll post more when I’ve tried again.
IE style issues
IE6 was losing the top border off the tabs, and apparently adding a bottom margin.
It seems that relative positioning was the answer here. While the list’s containing div was absolutely positioned, IE stubbornly refused to play ball; as soon as I positioned it relatively, IE stopped sulking.
- Created
div#headerwith its height in pixels (in which I would put such things as blog title and the navigation tabs) and set this toposition:relative; - Set the list’s containing
divtoposition:relative, and set top to force it into its preferred position; - Everything else in
div#headerwas positioned absolutely, so as not to interfere with the flow of the document.
vCard
Email
Audioboo
Delicious
Flickr
Google
Last.FM
LinkedIn
Tumblr
Twitter