Navigation links in Firefox

Navigation links not working/paritally working in Firefox

Page 1 of 1

5 Replies - 864 Views - Last Post: 10 June 2009 - 11:48 AM

#1 laughinannie  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 04-June 09

Navigation links in Firefox

Post icon  Posted 04 June 2009 - 05:28 PM

I'm working with CSS and PHP. My navigation consists of transparent PNGs (and I've tried other formats as a test). The links work in IE, but not in Firefox (or sometimes only a small part of the image is clickable). I've never come across this before - anyone else had similar issues or ideas for a solution?

 

CSS:

#nav {
	float: left;
	position: relative;
	width: 250px;
	text-align: left;
	margin-left: 25px;
	padding-right: 25px;
	margin-top: 20px;
			}
		
img.navtext {
	border-width: 0;
	padding-bottom: -3em;
	}
	
img.nav2 {
		padding-bottom: -3em;
		text-indent: 15px;
	}
		
/* Hack for IE5* which misinterprets the width */
* #nav {
	width: 100%;
	w\idth: auto;
	
	}
/* end hack */

PHP: 

<div id="nav">
  <p><a href="http://www.gotchacoveredlinens.ca/index.php"><img src="images/home.png" border="0" class="navtext"></a></p>
  <p><a href="http://www.gotchacoveredlinens.ca/about.php" ><img src="images/about.png" alt="about" border="0" class="navtext"></a></p>
  <p><a href="http://www.gotchacoveredlinens.ca/products.php"><img src="images/products.png" alt="products" border="0" class="navtext"></a> </p>
  <p><a href="http://www.gotchacoveredlinens.ca/sashes.php"><img src="images/sashes.png" alt="sashes" border="0" class="nav2"></a></p>
  <p><a href="chaircovers.php"><img src="images/chaircovers.png" alt="chair covers" border="0" class="nav2"></a></p>
  <p><a href="overlays.php"><img src="images/overlays.png" alt="overlays" border="0" class="nav2"></a></p>
  <p><a href="runners.php"><img src="images/runners.png" alt="runners" border="0" class="nav2"></a></p>
  <p><a href="order.php"><img src="images/order.png" alt="order" border="0" class="navtext"></a></p>
  <p><a href="gallery.php"><img src="images/gallery.png" alt="gallery" border="0" class="navtext"></a></p>
  
</div>




Is This A Good Question/Topic? 0
  • +

Replies To: Navigation links in Firefox

#2 RudiVisser  Icon User is offline

  • .. does not guess solutions
  • member icon

Reputation: 1003
  • View blog
  • Posts: 3,562
  • Joined: 05-June 09

Re: Navigation links in Firefox

Posted 05 June 2009 - 06:51 AM

Have you tried properly closing the img tag? I assume you're trying to write XHTML (the code above isn't PHP it's (X)HTML) but what doctype are you using?

Firefox likes to do things it's own rubbish way anyway, but there shouldn't really be a problem with what you posted, although I don't understand your CSS, nor why you're using paragraph tags for a single link.

Have you tried just floating the images left so they line up next to each other?
Was This Post Helpful? 0
  • +
  • -

#3 Wimpy  Icon User is offline

  • R.I.P. ( Really Intelligent Person, right? )
  • member icon

Reputation: 159
  • View blog
  • Posts: 1,038
  • Joined: 02-May 09

Re: Navigation links in Firefox

Posted 06 June 2009 - 04:08 AM

@MageUK: "Firefox likes to do things it's own rubbish way anyway"; What do you mean by saying that? If there's a browser doing things it's own rubbish way it's Internet Explorer... :)

@laughinannie:
The problem you have might be the "padding-bottom: -3em", which shouldn't even be possible to do, but Firefox might interpret it anyway and remove 3em of the images area and therefore also make the links work in a weird way.

I'm also curious about the "Hack for IE5* which misinterprets the width"-thing, why even bother about IE5, people should at least be using IE6 nowadays if not even IE7? And also, I have never had any problems with IE5 and widths, what's up with that?! :)
Was This Post Helpful? 0
  • +
  • -

#4 laughinannie  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 04-June 09

Re: Navigation links in Firefox

Posted 09 June 2009 - 09:55 PM

Thanks for the insights MageUK and Wimpy - I clearly have a lot to learn! I'll try both of your suggestions... and thanks for picking up on my little mistakes so I can clean it up! Much appreciated - will report back.
Was This Post Helpful? 0
  • +
  • -

#5 RudiVisser  Icon User is offline

  • .. does not guess solutions
  • member icon

Reputation: 1003
  • View blog
  • Posts: 3,562
  • Joined: 05-June 09

Re: Navigation links in Firefox

Posted 10 June 2009 - 12:33 AM

View PostWimpy, on 6 Jun, 2009 - 03:08 AM, said:

@MageUK: "Firefox likes to do things it's own rubbish way anyway"; What do you mean by saying that? If there's a browser doing things it's own rubbish way it's Internet Explorer... :)

Off-Topic but Firefox is more prone to doing things differently than everyone else from my experience. It couldn't even handle float:right correctly at one point.
Was This Post Helpful? 0
  • +
  • -

#6 laughinannie  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 04-June 09

Re: Navigation links in Firefox

Posted 10 June 2009 - 11:48 AM

Well, this is interesting - when I removed all the padding/margin information from the nav in the CSS file, the links started working. They look terrible and sit funny, but I'll try a few work-arounds.

The <p> tags around the links were to make the nav spread out a bit more (my friend who I'm doing this for - obviously just as a favor since I'm no pro! - wanted it to look that way), and to make it read vertically. I thought I should be able to do it by controlling the width and padding of the nav, but for some reason it didn't work. I know the <p> isn't ideal - it was a bit of a lame work-around.

You're right about IE5 - it's a throw-back from when I was first learning.

Thank you both so much for your insights. If anything else occurs to you, I'm always willing to learn! Hopefully I'll learn enough to return the favor for someone one day.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1