Hi there,
I am redeveloping my site to use CSS and have come up against a problem. The
page I'm working on is at
http://staging.proscenia.co.uk/revis...20version.html
and the stylesheet at http://staging.proscenia.co.uk/projectpage.css
To create the navigation bar, I have styled the <A> tags to use a background
image and text positioning to create a scalable button look (previously
these were all pre-generated images). This allows the HTML simply to consist
of <A>link</A><A>link 2</A> etc.
However, I have come up against a problem with this in IE6. When it draws
the first button on the navbar it "wraps" the image. It is almost like it is
repeating the image and starting it from 3 or 4px to the left of the button.
This is despite explicitly setting no-repeat and background image position.
The other buttons on the bar draw fine.
In case it miraculously works in other people's IE6, what I am seeing is
----- --
| |
| |
----- --
|
|
|
instead of the correct image which is as below
-------
| |
| |
-------
|
|
|
It works fine in Opera and NN7.1 and both the CSS and HTML validate. I can't
find any reference by googling or usenet to a similar problem. I'm at a
loss!
Any tips would be most welcome.
Regards
Andrew Coulton