[Problem] CSS - Firefox

Hi guys,

I'm building a site and have a link with an image and a text link below it to the same page such as this -

Code:

---

<a href="link.htm">
  <img src="link_picture.png" class="link_picture" />
  <br />
  link text
</a>

---

I have text-decoration: underline for links but my class for the picture has text-decoration: none. This works fine in all browsers except for Firefox that still displays a underline under the picture. Obviously I could seperate them in to two links but then my link text won't change color when you hover on the picture.

Does anyone know a solution whereby the picture won't have an underline but the link text will still change colour when you hover over the picture?#

Thanks.

(And if I come up with a solution before I anyone else I'll post it up here ;))

The only way to do that with a single link is to wrap the text with an underline tag and take out text decoration with CSS:

Code:

---

<a href="link.htm" style="text-decoration:none;">
  <img src="link_picture.jpg" class="link_picture">
  <br>
  <u>link text</u>
</a>

---

Hi,

I don't know if this will work together with the rest of the layout of your page, but if you set the display property of the img to block (and probably do the same for the a element, since block elements shouldn't be contained inside inline ones) you should lose the text-decoration from the image in Firefox. Of course having the link displayed as a block may mean you need to do other stuff to get it to fit in. e.g. using floats to get it to appear alongside other content.

[edit]Ah, ignore me. Genesis' idea is much better :)[/edit]

Thanks Genesis, can't believe I overlooked such a simple solution, brilliant stuff!

Can some of you help me with PHP? I know it's a bit off the subject, and I know that it was kind of random of me to pick this thread, but Genesis seems like a pro...I'm trying to learn PHP, so I can be the ultimate web page programmer!...please?

Haha, not a pro yet. :D Hopefully someday. Again, I'm going to point to w3schools. There should be enough there to get you started. If you've visited both links, you've probably noticed that the syntax is very similar. The nice thing about languages like PHP, Javascript, and C is that you only need to learn a few rules that differentiate them, but for the most part, they share structure format, operators, and common functions.

PHP is like C in some regards (way to handle files / ect) but it's very easy to pick up. The cool thing about PHP is that you can embed it into an HTML page, unlike Perl. The preprocessor will parse the code and output an HTML page all ready to go.

In the future, please try to keep your PHP questions in the Scripting and Backend forum so you don't litter other member's threads. Thanks. :)

Sorry, I wasn't sure where to put my PHP questions...and thanks again for the link!