473,226 Members | 1,600 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,226 software developers and data experts.

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
Mar 17 '06 #1
1 2147
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

Mar 18 '06 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Florian Brucker | last post by:
Hi! I've got a problem with float & clear. Take this example code: <div style=" width:100px; height:100px; background-color:#FF0000; float:left; margin:10px;"></div> <span...
7
by: Doc | last post by:
I've read in a couple of different places including the archives of this forum that html doesn't allow you to precisely dictate the position of an image, but I found this command (again in the...
2
by: pei_world | last post by:
Hi I want to create a image with multiple layers on top. the background color of each layer should be transparent except the last one, hence I can only see the drawed items on such layers. can...
16
by: Walker | last post by:
I have a span containing two words. Eg. <span>Avant Garde</span> Using CSS, I pad the text to the right and assign a background-image. Eg. span { padding: 0 3px 0 11px; background:...
6
by: jaredh | last post by:
so, i'm trying to style my links to have a little tiny image to the right of the image. i added some padding on the right and applied the background image in CSS. problem is, if the link...
1
by: Viken Karaguesian | last post by:
Hello everyone, I have a slight problem that I can't seem to solve. I'm not sure if it's a CSS problem, HTML problem or simply an IE-6 bug. I chose this forum as I suspect the fix may be with...
3
by: hzgt9b | last post by:
I want a page with a centered div containing two rows. Top row has an image and some text. The bottom row needs to have three columns. I'd love to have the 1st column set to a fixed width then have...
3
by: helraizer1 | last post by:
Hey folks, yet again. if ($back == "m") //$back is a value pulled from a db; that works perfectly. { $wid = $rowing; $hei = $rowing; createthumb("660x240background2.gif", "./user/" ....
1
by: donpro | last post by:
Hi, I'm creating a template paging sing pure CSS and all looks good except the footer which I am having problems with. 1) When I space out each of the FOUR DIVS at 25%, it wraps in IE. I...
1
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.