Jump to content

Firefox Navigation Alignment Issue


Randomishlying

Recommended Posts

I've been messing around with the map and area elements (for the first time) to build a navigation bar with images, and I've run into a couple problems. The first problem is the images used in the navigation bar aren't aligning in firefox how I think I set them to align. Here is capture, from firefox, showing what I mean: post-85917-0-60788100-1323833639_thumb.jpg However, they align exactly how I want them to align in all the other major browsers. For instance, here is capture from chrome: post-85917-0-44181200-1323833714_thumb.jpg The code in question is the cell with the id of navigation. Additionally I would like to be able to create a hover state, and an active state for these images used in the navigation bar. This is the second problem I've been having. I don't know if it's even possible to use CSS on images to create a hover state for a link. If it is, I'm surely doing something wrong, based on the things I've tried. I'd like to be able to change the image when hovered over, and at the very least I'd like to be able to underline the image on hover. I checked around to see what I could find, but I didn't find anything that I perceived as an answer to my problems. Any help would be greatly appreciated. This is my HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Sarasota-Tampa Express Homepage</title><link href="all.css" rel="stylesheet" type="text/css" /></head><body id="theHeader" ><table id="headerTable" border="0" cellspacing="0" cellpadding="0">  <tr>    <td id="logoBox">    <img src="images/Sarasota-Tampa-Express-Logo.png" width="205" height="75" alt="Logo" /></td>    <td>        <table id="rightsideHeader" border="0" cellspacing="0" cellpadding="0">		    <tr>		        <td><p id="tagLine">We make things convenient for you! <span id="phoneNumber">Call Today! (941)366-6600</span></p>			    </td>		    </tr>		    <tr>		        <td align="left" valign="top" id="navigation"><img src="images/home.png" usemap ="#home" id="home"/><map name="home"><area shape="poly" coords="-3,0,74,0,74,8,79,16,74,24,74,33,-3,33" href="index.html" alt="Home"/></map><img src="images/about-us.png" id="aboutUs" usemap ="#aboutUs"/><map name="aboutUs"><area shape="poly" coords="0,0,105,0,105,8,110,16,105,24,105,33,0,33,0,24,5,16,0,8" href="index.html" alt="About us"/></map><img src="images/route-and-schedule.png" id="routeAndSchedule" usemap="#routeAndSchedule"/><map name="routeAndSchedule"><area shape="poly" coords="0,0,173,0,173,8,178,16,173,24,173,33,0,33,0,24,5,16,0,8" href="index.html" alt="Route And Schedule"/></map><img src="images/flight-information.png" id="flightInfo" usemap="#flightInfo"/><map name="flightInfo"><area shape="poly" coords="0,0,179,0,179,8,184,16,179,24,179,33,0,33,0,24,5,16,0,8" href="index.html" alt=" Flight Information"/></map><img src="images/fare.png" id="fare" usemap="fare"/><map name="fare"><area shape="poly" coords="0,0,70,0,70,33,0,33,0,24,5,16,0,8" href="index.html" alt="Fare"/></map></td>		  </tr>	    </table>    </td>  </tr></table><table id="mainTable" align="center">  <tr>    <td>    </td>  </tr>	    </table>		  </body></html>

This is my CSS:

@charset "utf-8";.body {font-family: Verdana, Geneva, sans-serif;}.table {margin: 0px;padding: 0px;}.td {margin: 0px;padding: 0px;}/*==== header ====*/#theHeader {background-repeat: repeat-x;background-image: url(images/header-gradient.png);margin: 0px;}#headerTable {height: 150px;width: 1024px;margin-left: auto;margin-right: auto;/*==== leftside header ====*/}#logoBox {width: 268px;padding-left: 50px;}/*==== rightside header ====*/#rightsideHeader {height: 150px;}#tagLine {font-family: Verdana, Geneva, sans-serif;font-size: 16px;font-style: italic;text-align: left;color: #FFF;padding-top: 12px;}#phoneNumber {padding-left: 80px;} #navigation {height: 67px;width: 700px;padding-left: 0px;}img {border-top-style: none;border-right-style: none;border-bottom-style: none;border-left-style: none;text-decoration: none;}#navbar {padding: 0px;height: 34px;width: 605px;}#home { }  /*==== main content ====*/#mainTable {background-image: url(images/background-gradients.png);height: 618px;width: 1024px;}#aboutUs {position: relative;right: 5px;}#routeAndSchedule {position: relative;right: 10px;}#flightInfo {position: relative;right: 15px;}#fare {position: relative;right: 20px;}

Link to comment
Share on other sites

This problem might be coming from the fact that there are <map> elements between each image.Since you're already using image maps, why not combine all those images into one and get the coordinates for each piece in a single image map? Is there a particular reason why you need a table there? It's just one box ontop of another, which could be done with div elements:<div>Some text</div><div>Menu items</div>

Link to comment
Share on other sites

I've thought it might be easier to do it the way you are suggesting, but I want each area to at least look like it acts independently. The way I hope to do that is to alter the design of each button area when hovered over and or selected. If I can accomplish that with a single image and image map, then I'll definitely do it that way.You're right, I'm sure I overused tables. I recently tried to layout a webpage using only divs, and I had trouble aligning everything the way I wanted it. So, whilst designing this webpage I decided to try just using tables, and that way I seem to be able to align everything easily. I don't know why this is, because now that I think about it, divs probably have all the same abilities. In any case, this is probably a horrible method, and feel free to tell me that. I'm learning, and I'm still unsure about when a div is most appropriate and when a table is most appropriate. For the sake of knowing, I'll try it the way you are suggesting, and let you know what the results are. Thanks for your help.

Link to comment
Share on other sites

I was able to make it work with a single map as you suggested. However, the way I have it set up now, I have been unable to create a rollover effect using CSS. I was hoping you might help me determine what my options are for a roll over effect with what I have. From what I've gathered so far, there isn't a way to have an image map and a roll over effect using only HTML and CSS, but hopefully I'm wrong about that. HMTL:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Sarasota-Tampa Express Homepage</title><link href="all.css" rel="stylesheet" type="text/css" /></head><body id="theHeader" ><table id="headerTable" border="0" cellspacing="0" cellpadding="0">  <tr>	<td id="logoBox">	<img src="images/Sarasota-Tampa-Express-Logo.png" width="205" height="75" alt="Logo" /></td>	<td>	 <div id="rightsideHeader">   <p id="tagLine">We make things convenient for you! <span id="phoneNumber">Call Today! (941)366-6600</span></p>		<div align="left" id="navigation"><img src="images/navigation.png" width="604" height="33" usemap="#navbar" alt="Navigation Bar"/>		<map name="navbar">		<area shape="poly" coords="0,0,77,0,77,8,82,16,77,24,77,33,0,33" href="index.html" alt="Home"/>		<area shape="poly" coords="77,0,182,0,182,8,187,16,182,24,182,33,77,33,77,24,82,16,77,8" href="thanks.html" alt="About Us"/>		<area shape="poly" coords="182,0,355,0,355,8,360,16,355,24,355,33,182,33,182,24,187,16,182,8" href="thanks.html" alt="Route and Schedule"/>		<area shape="poly" coords="355,0,534,0,534,8,539,16,534,24,534,33,355,33,355,24,360,16,355,8" href="thanks.html" alt="Flight Information"/>		<area shape="poly" coords="534,0,604,0,604,33,534,33,534,24,539,16,534,8" href="thanks.html" alt="Fare"/>		</map>		</div>  </div>	</td>  </tr></table><table id="mainTable" align="center">  <tr>	<td>	</td>  </tr>	  </table>		</body></html>

CSS:

@charset "utf-8";/*==== universal ====*/.body {font-family: Verdana, Geneva, sans-serif;} .table {margin: 0px;padding: 0px;}.td {margin: 0px;padding: 0px;}/*==== header ====*/#theHeader {background-repeat: repeat-x;background-image: url(images/header-gradient.png);margin: 0px;}#headerTable {height: 150px;width: 1024px;margin-left: auto;margin-right: auto;}/*==== leftside header ====*/ #logoBox {width: 268px;padding-left: 50px;} #tagLine {font-family: Verdana, Geneva, sans-serif;font-size: 16px;font-style: italic;text-align: left;color: #FFF;width: 706px;height: 45px;margin: 0px;padding-top: 35px;}#rightsideHeader {height: 150px;width: 604px;margin-top: 0px;} #phoneNumber {padding-left: 80px;}#navigation {height: 70px;width: 706px;}img {border-top-style: none;border-right-style: none;border-bottom-style: none;border-left-style: none;text-decoration: none;}  /*==== main content ====*/#mainTable {background-image: url(images/background-gradients.png);height: 618px;width: 1024px;}

Link to comment
Share on other sites

Image maps are really not the best option if you want a rollover effect. Their only advantage, really, is being able to choose te shape of the clickable area.Your clickable areas are almost rectangular, users would probably not care if the little arrow shape was not clickable. The best option for rollover effect is CSS sprites. Make each <a> element a block with a background image.

Link to comment
Share on other sites

Excellent! This is very helpful. Thank you.On a side note: I don't know if you're familiar with Dreamweaver, but until I read this I had just decided to use the "insert rollover image" function within Dreamweaver. It uses JavaScript to create a rollover effect. It works, but I don't know JavaScript so I had no idea what I was looking at in the code. Your solution is simple and easy to understand. I'm definitely going to try to make it work. Thanks again.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...