sweep wrote:
[color=blue]
> 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
>
>[/color]
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
IE6 Background Image "wraps" problem
