473,408 Members | 2,813 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,408 software developers and data experts.

background image problem with IE

4
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 wraps a line, so that the link starts on one line but finishes on the next line, IE doesn't seem to understand not to put the image on the first line, but on the second. it leaves the padding in the right spot, but the image is not there.

thoughts?
Jun 6 '07 #1
6 2990
nomad
664 Expert 512MB
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 wraps a line, so that the link starts on one line but finishes on the next line, IE doesn't seem to understand not to put the image on the first line, but on the second. it leaves the padding in the right spot, but the image is not there.

thoughts?
Not to sure what you want. but try this:

[HTML]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
-->
</style></head>
<body>
<table width="124" border="0" cellspacing="0" cellpadding="0">
<tr>
<th width="27" scope="col"><img width="22" height="16"></th>
<th width="97" align="left" scope="col"><div align="left"><a href="sss.htm">abc</a></div></th>
</tr>
</table>
</body>
</html>
[/HTML]

Nomad
Jun 6 '07 #2
jaredh
4
thanks, but i'm not sure you understood what i'm trying to do. i'm not doing anything with tables, i am just trying to add a CSS background image to the right side of all my text links (a very small image that stays inline with text).

i got it working perfectly (its really simple) using just CSS to add a little padding to the right side, and then apply the image in CSS on the right, not repeating.

so it works beautifully, except in Internet Explorer ONLY WHEN the text link starts on one line and then finishes on (wraps to) the next.

all the other browsers were smart enough to handle this, but IE kept leaving the padding on the second line but trying to add the image on the first line.
Jun 6 '07 #3
drhowarddrfine
7,435 Expert 4TB
Yes, tables should never be used for layout.

jared, sometimes our brains are fried and we need to see sample code or a link so we don't have to think too hard.
Jun 6 '07 #4
jaredh
4
ok, here is the problem. View it in IE6 to see what i'm talking about, the big long link that spans two lines. IE6 doesn't put the little CSS image in the right place.

here is the CSS code:

Expand|Select|Wrap|Line Numbers
  1. #content a:link {
  2.     padding-right: 14px;
  3.     background-image: url(images/link.gif);
  4.     background-repeat: no-repeat;
  5.     background-position: right;
  6. }
  7.  
  8. #content a:hover {
  9.     padding-right: 14px;
  10.     background-image: url(images/link_over.gif);
  11.     background-repeat: no-repeat;
  12.     background-position: right;
  13. }
  14.  
Jun 6 '07 #5
jaredh
4
bump

any help at all? anyone have thoughts? what am i doing wrong?i
Jun 7 '07 #6
drhowarddrfine
7,435 Expert 4TB
Sorry I missed this.

IE has a problem with background-position. It aligns itself with the wrong thing. Instead of aligning with the border, it aligns with the padding. I'm not saying this from experience but from my chart of bugs. So, I assume, that since the padding on that line doesn't move, it stays in place rather than following the border as it moves to the next line.

A fix? I don't know and I'm leaving to go out of town in an hour or so but I'll see what I can see.
Jun 7 '07 #7

Sign in to post your reply or Sign up for a free account.

Similar topics

4
by: erik | last post by:
Is it posssible to inherit the previous pages (parent pages) background image? Is there a script out there I could look at? Thanks
2
by: Markus Mohr | last post by:
Hi, everyone, I have a special problem: For every monitor resolution in 200 pixel steps from 800 to 1600 pixels I have an image to be shown as centered background-image. Those images all...
13
by: Giggle Girl | last post by:
Hi there, I need to use a background image in a TR that does NOT restart everytime it hits a TD. Can it be done? Specifically, if you set a background image for an entier table, now mater how...
7
by: Nilesh | last post by:
I am using background-image attribute in a CSS file and linking the CSS file to aspx page. But strangly, background-image attribute is not working for relative URL. e.g. If I apply following css...
3
by: Viken Karaguesian | last post by:
Hello all, I need somehelp with background tiling. I have a sneaking suspicion that what I want to do is not possible, but I'll ask anyway. :>) First some background: Here's the site in...
2
by: Patrick | last post by:
Hi All, I am trying more and more to incorporate CSS into my work here. I have currently been playing around with fluid design and tableless layout. Currently I am trying to make a background...
3
by: KNDesign | last post by:
I've set a background image to repeat-y and at 100% height. It appears fine when I open the window, but when I resize to a smaller height so that I must scroll down to see the rest, the background...
6
by: Rob | last post by:
Hello, I'm sure this has come up before. I have need for a collection of all elements/objects in an HTML document that have any kind of an attribute (HTML or CSS) that is making use of a URL to...
16
by: stevedude | last post by:
CSS newbie again. I have a problem trying to get coffee mug images within anchor tags to center with my link text for a vertical list menu. If I use the horizontal/vertical properties of...
2
by: thephatp | last post by:
I'm having a problem with IE rendering correctly. I'm experimenting with using all div's in my pages now, and I'm not very familiar with the quirks of IE. I have created a sample page, and I'm...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
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,...
0
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,...
0
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...
0
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...
0
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,...

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.