IE6 Background Image "wraps" problem

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

sweep wrote:

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


Andrew,

First, it fails exactly as you describe on my system. I don't know why.
IE is sometimes very creative... I played around trying to change the
symptom, but without success.

BUT, I was unable to alter the font size in IE; I confirmed that this is
because you have sized the fonts in terms of pixels. On the other hand,
when I resize the text in Firefox, the layout quickly comes apart.
Perhaps if you rework it to be a bit more flexible with regard to text
size, the other problem will go away. Perhaps not.

Chris Beall