Re: [WSG] Background image in li not showing in IE
Cole wrote: I've got a small background icon that I've hooked to a few li's. Displays as planned in FF, but doesn't display at all in IE6.
Any ideas how I can fix this in IE?not sure if youve solved this by now but often i find if you specify a background colour (instead of transparent), IE will play along nicely.
so instead of :li.signInOptions {background: transparent url(../../admin/i/info.jpg) 0 5px no-repeat}try
li.signInOptions {background: #fff url(../../admin/i/info.jpg) 0 5px no-repeat}
of course, then thats a pain if you have a background image that needs to sit on varying background colours. you may end up needing to feed specific colours to certain uses, eg...
#nav li.signInOptions {background-color:#ccc}
...if the li's needed to sit within a navigation area that has a background of #ccc
the other thing to try when IE isnt displaying a background image is to specify a width on the li.
hth,
pete ottery
Re: [WSG] Background image in li not showing in IE
Thanks for all the suggestions Peter. I hadn't gotten it fixed
until I set the width of the li as per your suggestion.
Now the bullets show up in IE as desired.
Cole
- Original Message -
From:
Peter
Ottery
To: wsg@webstandardsgroup.org
Sent: Monday, June 20, 2005 7:54 AM
Subject: Re: [WSG] Background image in
li not showing in IE
Cole
wrote: I've got a small background icon that I've hooked
to a few li's. Displays as planned in FF, but doesn't display at all
in IE6. Any ideas how I can fix this in IE?not sure if
youve solved this by now but often i find if you specify a background colour
(instead of transparent), IE will play along nicely.
so instead of :li.signInOptions {background:
transparent url(../../admin/i/info.jpg) 0 5px
no-repeat}tryli.signInOptions {background: #fff
url(../../admin/i/info.jpg) 0 5px no-repeat}
of course, then thats a pain if you
have a background image that needs to sit on varying background colours. you
may end up needing to feed specific colours to certain uses, eg... #nav li.signInOptions {background-color:#ccc}
...if the li's needed to sit within a
navigation area that has a background of #ccc
the other thing to try when IE isnt
displaying a background image is to specify a width on the li.
hth,
pete
ottery
Re: [WSG] Background image in li not showing in IE
Other fixes for this problem are as follows:
li { position:relative; }
li { height:1%; }
li { zoom:1.0; }
Applying borders may also fix the problem, I haven't tested that one
as it's a bad solution anyway -- changing the design to fix a bug
isn't cool at all; plus IE can't handle transparent borders anyhoo.
Other solutions can be tested by using this JS in IE:
alert(this.hasLayout);
If it comes back true, you've won :D
Now that I can confidently tackle the IE/PC bugset, I don't mind IE so
much... it keeps me in a job! heh ;)
Andrew.
---
http://leftjusitfied.net/
On 6/20/05, Cole Kuryakin - x7m [EMAIL PROTECTED] wrote:
Thanks for all the suggestions Peter. I hadn't gotten it fixed until I set
the width of the li as per your suggestion.
Now the bullets show up in IE as desired.
Cole
- Original Message -
From: Peter Ottery
To: wsg@webstandardsgroup.org
Sent: Monday, June 20, 2005 7:54 AM
Subject: Re: [WSG] Background image in li not showing in IE
Cole wrote:
I've got a small background icon that I've hooked to a few li's.
Displays as planned in FF, but doesn't display at all in IE6.
Any ideas how I can fix this in IE?
not sure if youve solved this by now but often i find if you specify a
background colour (instead of transparent), IE will play along nicely.
so instead of :
li.signInOptions {background: transparent url(../../admin/i/info.jpg) 0 5px
no-repeat}
try
li.signInOptions {background: #fff url(../../admin/i/info.jpg) 0 5px
no-repeat}
of course, then thats a pain if you have a background image that needs to
sit on varying background colours. you may end up needing to feed specific
colours to certain uses, eg...
#nav li.signInOptions {background-color:#ccc}
...if the li's needed to sit within a navigation area that has a background
of #ccc
the other thing to try when IE isnt displaying a background image is to
specify a width on the li.
hth,
pete ottery
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
[WSG] Background image in li not showing in IE
I've got a small background icon that I've hooked to a few
li's. Displays as planned in FF, but doesn't display at all in
IE6.
Here's the HTML snippet:
ulli
class="signInOptions"Admin Area data includes Guestbook Entries, Read A
Chapter contacts, and Email
contacts./li/ul
Here's the CSS:
li.signInOptions {margin-left:
10px;padding: 5px 0 5px 20px;display: block;
font-size: 0.75em;
background: transparent url(../../admin/i/info.jpg) 0
5px no-repeat;}
If I remove display:block, the icons do show up in IE, but the
text in a few of these li's wrap to a second line and I want to preserve
left indent on both lines. Not only that, but even though they do show up in IE,
the padding isn't retained and two of the three bullets are cut in half. Only in
IE (of course).
Any ideas how I can fix this in IE?
Cole
