5 replies [Last post]
daze
Offline
newbie
Germany
Last seen: 17 years 35 weeks ago
Germany
Timezone: GMT+1
Joined: 2004-12-13
Posts: 4
Points: 0

Hi everybody,

my first post over here is a request, i apologize ... i see no other way. searching google, and groups showed me the issue, but ive found nowhere a workaround.

When you apply line-height to an element (in my case "td") it works until you insert an image into a line. (sorry for my bad english, but please be lenient toward me)

here is my example: (kept it as simple as possible)

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  
                      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">  
  <head>  
    <title>E:X:A:M:P:L:E</title>  
    <style type="text/css">  
      table { font-size: 10px; }  
      .line_test { line-height: 20px; }  
    </style>  
  </head>  
  <body>  
    <table>  
      <tr><td class="line_test">  
        Row 1 TEST&nbsp;TEST<br />  
        Row 2 TEST&nbsp;TEST<img src="images/ext.gif" /><br />  
        Row 3 TEST&nbsp;TEST<img src="images/ext.gif" /><br />  
        Row 4 TEST&nbsp;TEST  
      </td></tr>  
    </table>  
  </body>  
</html>  


all lines without an image are set to line-height 20px but the ones with an image are ignored.

I would be glad if anyone could help me out...

Thanks and greetings
Tim

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 15 weeks 6 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

line-height, image inline and IE6

Are the images bigger than the cells they are supposed to be contained in?

Anyhoo, welcome to the forums - don't apologise for asking for help, that's what we're here for!

You will get a lot of people telling you to shy away from tables and use divs - I suggest once you get this problem fixed you read up on them, as they allow much greater flexibilty and styling. Updating is easer as well.

Verschwindende wrote:
  • CSS doesn't make pies

daze
Offline
newbie
Germany
Last seen: 17 years 35 weeks ago
Germany
Timezone: GMT+1
Joined: 2004-12-13
Posts: 4
Points: 0

line-height, image inline and IE6

thanks for this fast reply.

1. the images are smaller in this case 10x10px. Its an icon mentioning an external link.
2. i use divs for layouting, and table for simple content things. i see no need for using div/css layouting when i can do it with an simple table!

but these are principle discussions which don't solve this problem.

i will attach the image for the ones wich will test it.

greetings

tim

btw: i prefer firefox, but this is an intranet thing and our IT Freaks over here are totaly M$ based. From 2003 AS over ASP to IE6 brrr.

daze
Offline
newbie
Germany
Last seen: 17 years 35 weeks ago
Germany
Timezone: GMT+1
Joined: 2004-12-13
Posts: 4
Points: 0

line-height, image inline and IE6

Sad

seems to end here like in the other newsgroups with this issue. it seems that i have to find an answer elsewhere on the net... cause its a littlebit urgent..

thanks anyway.. bye

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 23 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

line-height, image inline and IE6

I've come up with three fixes. One is an elegant sane solution, but not applicable in your case. One is really clunky. One is not elegant, but is at least very workable on an ad hoc basis.

  • Switch to a modern browser—oh well.
  • This came up on CSS-Discuss. An admittedly awkward hack was offered.
  • My suggestion is to use padding (margin seems to work also) and vertical align. The numbers are based on a 10px image in a 20px linebox.
     
    img { 
        padding: 5px 0; 
        vertical-align: middle; 
        }
cheers,

gary

[/]

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

daze
Offline
newbie
Germany
Last seen: 17 years 35 weeks ago
Germany
Timezone: GMT+1
Joined: 2004-12-13
Posts: 4
Points: 0

line-height, image inline and IE6

point 2 was also in my mind... but no.

i made it this way ... the lines are links and the links are marked as an external link with an image.

i took the image and put it into the background propertie (no-repeat, right). i also added a padding-right of 13px just a bit larger than the image.

its dirty an usable in my case. maybe a span with background image will solve the image on normal plain text without links.

example for my case:

<a href="#" style="background: url(images/ext.gif) no-repeat right; padding-left: 13px; height: 10px;">Link</a>

greetings tim