I'm working on this site for a friend of mine for the business she runs and I've run into a snag. I have the base for the page all designed and set up, but for some reason Firefox doesn't want to set up my menu images as links. IE does it just fine.
http://brian-jordan.com/bellas-bridal.com/index.html
Code from html file
CODE
<div class="menu">
<a href="index.html"><img src="images/home.jpg" alt="Home" title="" /></a>
<a href="dresses.html"><img src="images/dresses.jpg" alt="Dresses" title="" /></a>
<a href="location.html"><img src="images/location.jpg" alt="Location" title="" /></a>
<a href="contact.html"><img src="images/contact.jpg" alt="Contact Info" title="" /></a>
<a href="events.html"><img src="images/events.jpg" alt="Upcoming Events" title="" /></a>
</div>
<a href="index.html"><img src="images/home.jpg" alt="Home" title="" /></a>
<a href="dresses.html"><img src="images/dresses.jpg" alt="Dresses" title="" /></a>
<a href="location.html"><img src="images/location.jpg" alt="Location" title="" /></a>
<a href="contact.html"><img src="images/contact.jpg" alt="Contact Info" title="" /></a>
<a href="events.html"><img src="images/events.jpg" alt="Upcoming Events" title="" /></a>
</div>
Code from CSS
CODE
body {
background : #ffffcc;
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
img {
border: 0px;
}
.banner {
position: relative;
margin:0px;
padding:0px;
border:0px;
width:491px;
display:block;
left: 50%;
margin-left: -245.5px;
}
.menu {
position:relative;
vertical-align: top;
margin:0px;
padding:0px;
border:0px;
width:335px;
left: 50%;
margin-left: -164px;
}
.menu img {
vertical-align: top;
float: left;
border:0px;
padding:0px;
margin:0px;
}
.menu p {
margin:0;
}
.image-main {
position: relative;
margin:0px;
padding:0px;
border:0px;
width:466px;
display:block;
left: 50%;
margin-left: -233px;
}
.container {
position: relative;
margin:5px;
padding:5px;
border:0px;
width:800px;
display:block;
left: 50%;
margin-left: -400px;
}
background : #ffffcc;
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
img {
border: 0px;
}
.banner {
position: relative;
margin:0px;
padding:0px;
border:0px;
width:491px;
display:block;
left: 50%;
margin-left: -245.5px;
}
.menu {
position:relative;
vertical-align: top;
margin:0px;
padding:0px;
border:0px;
width:335px;
left: 50%;
margin-left: -164px;
}
.menu img {
vertical-align: top;
float: left;
border:0px;
padding:0px;
margin:0px;
}
.menu p {
margin:0;
}
.image-main {
position: relative;
margin:0px;
padding:0px;
border:0px;
width:466px;
display:block;
left: 50%;
margin-left: -233px;
}
.container {
position: relative;
margin:5px;
padding:5px;
border:0px;
width:800px;
display:block;
left: 50%;
margin-left: -400px;
}
The page does validate with W3C, by the way. Any help would be greatly appreciated.
