473,545 Members | 2,737 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

inline element background image with IE

On my site, I use a background image of a small arrow to denote links
that lead away from my site. This page has four such links in the first
section:

http://tranchant.plus.com/notes/cable-wrap

The links are coded thus:

<a class="external " href="url">blah </a>

with:

a.external {
background: transparent url('/images/ext') no-repeat 100% 55%;
padding-right: 11px;
}

All works fine, except in IE (surprise) when the image is not shown if
the element either goes across two lines or starts at the beginning of a
line. Load up the above URL in IE and resize the window to see the effect.

Is this a known IE bug (I expect so) and is there anything I can do
about it (I guess not...)?

--
Mark.
http://tranchant.plus.com/
Jul 20 '05 #1
3 5623
Mark Tranchant <ma**@tranchant .plus.com> wrote:
On my site, I use a background image of a small arrow to denote links
that lead away from my site. This page has four such links in the first
section:
http://tranchant.plus.com/notes/cable-wrap

<a class="external " href="url">blah </a>

a.external {
background: transparent url('/images/ext') no-repeat 100% 55%;
padding-right: 11px;
}
By changing the 55% to 0 you can see what IE is doing...
All works fine, except in IE (surprise) when the image is not shown if
the element either goes across two lines or starts at the beginning of a
line. Load up the above URL in IE and resize the window to see the effect.
It's putting the background-image at the rightmost position possible
in the inline boxes generated by the element, regardless of whether
this is at the end of the element or not.

You have to admire the (perverse) logic behind this behaviour. :-(
Is this a known IE bug (I expect so) and is there anything I can do
about it (I guess not...)?


Can't think of anything you can do. I had a little play with a nested
span and a repeating background image but ran into other bugs. :-(

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net > <http://steve.pugh.net/>
Jul 20 '05 #2
Els
Mark Tranchant wrote:
On my site, I use a background image of a small arrow to denote links
that lead away from my site. This page has four such links in the first
section:

http://tranchant.plus.com/notes/cable-wrap

The links are coded thus:

<a class="external " href="url">blah </a>

with:

a.external {
background: transparent url('/images/ext') no-repeat 100% 55%;
padding-right: 11px;
}

All works fine, except in IE (surprise) when the image is not shown if
the element either goes across two lines or starts at the beginning of a
line. Load up the above URL in IE and resize the window to see the effect.

Is this a known IE bug (I expect so) and is there anything I can do
about it (I guess not...)?


If you replace 55% by .55em, the arrow will be shown on the
end of the first line of the wrap, at the same height as
when it doesn't wrap.
In IE 55% apparently means at 55% of the two lines together.
With .55em you have 55% of only one line. It still doesn't
appear at the end of the element, but it's better than nothing?

As for not showing the arrow when the element starts at the
beginning of a line, just add padding-left:1px, and the
arrows show. (Don't ask me why...)

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 20 '05 #3
Els
Els wrote:
Mark Tranchant wrote:
On my site, I use a background image of a small arrow to denote links
that lead away from my site. This page has four such links in the
first section:

http://tranchant.plus.com/notes/cable-wrap

The links are coded thus:

<a class="external " href="url">blah </a>

with:

a.external {
background: transparent url('/images/ext') no-repeat 100% 55%;
padding-right: 11px;
}

All works fine, except in IE (surprise) when the image is not shown if
the element either goes across two lines or starts at the beginning of
a line. Load up the above URL in IE and resize the window to see the
effect.

Is this a known IE bug (I expect so) and is there anything I can do
about it (I guess not...)?


Steve's answer gave me the idea to do this:

<a class="external "
href="http://www.fastech.ch/gb/VELCRO/Velcro%20Story. htm">why
I shouldn’t call it velcro<span>&nb sp;&nbsp;</span></a>

and in the stylesheet, change

#content a.external {
background:tran sparent url('../images/ext.png') no-repeat
100% 55%;
padding-right: 11px;
padding-left:1px;
}

to

#content a.external span{
background:tran sparent url('../images/ext.png') no-repeat
0% 55%;
}

and

#content a.external:hove r {
background:tran sparent url('../images/exth.png') no-repeat
100% 55%;
background-color: #ffcccc;
}

to

#content a.external:hove r {
background-color: #ffcccc;
}
#content a.external:hove r span{
background:tran sparent url('../images/exth.png') no-repeat
100% 55%;
}

I've only tested in IE5 and 6, NS7.1 and Opera 7.5, no
problems with this method, other than
<span>&nbsp;&nb sp;</span> just being ugly code...

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 20 '05 #4

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

Similar topics

46
6913
by: DJ WIce | last post by:
Hi all, I did make a script/css thing to replace the contextmenu on the website with a new one: http://www.djwice.com/contextmenu.html It works nice in MSIE, but on Netscape (and probable other browsers) it stays on the same place (does not "open'' where the mouse is). And the links do not work when you click on them. If anyone has...
3
7693
by: Aaron | last post by:
Hi, I'm trying to use style sheets instead of tables for layout, but I'm not sure on how to do something... I have a div (100% width) containing 3 other divs. Each needs to be lined up next to one another inside the first div. Whenever I nest these divs inside the first, it always treats each of them like a block element and puts them on...
1
6790
by: Johannes Theile | last post by:
Hi, is it possible to show the bullets in a list (ul), although it is possitioned as an inline element? Greetings, Johannes
12
6712
by: Stanimir Stamenkov | last post by:
Here are two cases regarding inline-level elements' line-height, padding and background, which I doesn't understand: <div style="background: black; color: white; line-height: 1.5"> <span>Abc</span> <span style="background: white; color: black; line-height: 3">Abc</span> <span>Abc</span> </div>
1
3406
by: Jens | last post by:
An image like this one <html> test1<img src="" style="width:100;height:100"/>test2 </html> is in line with the text and has a width and height. How can I get the same with a span or div instead of an image? This does NOT work: <html>
6
6472
by: axlq | last post by:
I've spent most of the day struggling with what I thought would be a trivial problem. I have a hidden element that appears, outside of the normal flow, when the mouse hovers over an inline element. HOWEVER, I want the hidden element positioned at a location of my choosing relative to that inline element. Is this possible?
3
4924
by: Jannette | last post by:
I've got this to finally work in IE (its only taken me 2 days solid), but now mozilla isn't displaying the text on the same line as the image. I'm a newby at CSS, and I've think I've worked on trying to resolve this too long and now I'm totally lost. I've posted this up to a site: *************************Uploaded to SERVER...
7
5429
by: massic80 | last post by:
Hi everybody! I'm making a page for an exam at uni. In two DIV blocks of it there should appear (and disappear) some "icons", due to XML messages, so I dunno how many of them should I can obtain; I want to show a small image, with its "icon name" under it, so I thought to use a DIV where I put a small image, a <br/and the icon name (and...
5
3224
by: GluteHam | last post by:
OK, so here's a new one for the group... I have the two following classes: .ratings_link { display: block; background: #ffeec1 url(image.gif) no-repeat center right; font: bold Arial, Helvetica, sans-serif; color: #176fcc; text-decoration: none;
0
7502
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7692
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
7946
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7457
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
7791
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
6026
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5360
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
3491
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
1
1045
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.