Hi all,
I’ve got 2 issues on a site I’m working on that are bugging me and I just cannot figure out what it is that’s causing the problems. I’ll paste the code below.
First of all there’s an image in the upper left corner that I want to link back to the home page, but in Firefox only the left part of the image will link. When you hover over the image you can only see the hand on about the left 1/4 of the image. I just cannot figure out why.
Second, in IE7 all the top links that should be up on the top white bar are bumped down below into the content section. I’ve tried everything I can think of to fix these issues and just am not getting anywhere.
Can someone look at my code and help me figure out how to fix these problems? Thanks!
Here’s the 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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testing Page for Layout</title>
<link rel="stylesheet" type="text/css" href="1299MassAve-styles.css" />
</head>
<body>
<div id="wrap">
<div id="header">
<div id="logo"><a href="index.html"><img src="images/1299-Massachusetts-Ave.jpg" width="303" height="100" alt="1299 Massachusetts Avenue" /></a>
<div id="navigation">
<div id="mainmenu">
<ul>
<li><a href="#">This is Link 1</a></li>
<li><a href="#">And This is Link 2</a></li>
<li><a href="#" class="last">And Finally Link 3</a></li>
</ul>
</div> <!-- /mainmenu -->
</div> <!-- /navigation -->
</div> <!-- /logo -->
</div> <!-- /header -->
<div id="main">
<div id="content">
<div id="images">
<img src="images/1299-Massachusetts-Ave-before.jpg" width="303" height="188" alt="Before pic" />
<div id="mapviewer"><iframe id="map" name="mapFrame" scrolling="no" width="303" height="220" frameborder="0" src="http://www.bing.com/maps/embed/?lvl=15&cp=42.320615686476216~-71.06166142970324&sty=r&draggable=false&v=2&rtp=pos.42.320617_-71.06166_1299+Massachusetts+Ave%2C+Dorchester%2C+MA+02125-1603___a_~pos.42.320617_-71.06166_1299+Massachusetts+Ave%2C+Dorchester%2C+MA+02125-1603___a_&mode=D&rtop=0~0~0~&emid=eccd4693-b7e6-86d4-24bb-ebfec7fce6f9&w=303&h=220"></iframe><div id="LME_maplinks" style="line-height:20px;"><a id="LME_largerMap" href="http://www.bing.com/maps/?mm_embed=map&cp=42.320615686476216~-71.06166142970324&lvl=15&sty=r" target="_blank">View Larger Map</a> | <a id="LME_directions" href="http://www.bing.com/maps/?mm_embed=dir&cp=42.320615686476216~-71.06166142970324&rtp=~pos.42.320615686476216_-71.06166142970324_Your+location&lvl=15&sty=r" target="_blank">Get Directions</a> | <a id="LME_birdsEye" href="http://www.bing.com/maps/?mm_embed=be&cp=42.320615686476216~-71.06166142970324&lvl=1&sty=b" target="_blank">View Bird's Eye</a></div>
</div>
</div> <!-- /images -->
<h1>Heading One</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas congue pretium augue, sed rhoncus urna bibendum vitae. Donec quis libero nec quam placerat tristique quis at elit. Maecenas facilisis, metus eleifend placerat pellentesque, neque magna condimentum est, non sagittis odio nunc sit amet diam. Donec nec risus erat, at viverra ligula. Suspendisse id urna nunc. In sit amet dui purus. Aliquam non ornare orci. Donec sed neque nec elit sodales aliquet a sed lectus. Donec quam magna, ullamcorper sed volutpat eu, porttitor vitae nunc. Curabitur quam metus, lacinia ut convallis et, pulvinar vitae ante. Vestibulum porta lacus sed ipsum auctor id aliquam arcu semper. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam eu malesuada tellus. Nullam eu metus tellus, vitae ultricies dolor. In convallis imperdiet sem et vestibulum. Vestibulum magna arcu, luctus ut porta ullamcorper, egestas eu augue.</p>
<p>Curabitur tristique, lorem eget pretium adipiscing, magna metus tempor erat, ac dapibus metus lectus non mauris. Etiam cursus gravida ligula, sed aliquam est laoreet vulputate. Fusce lobortis metus venenatis ligula commodo semper. Suspendisse sodales nulla sed neque faucibus varius. Pellentesque consectetur nulla mattis neque auctor sed aliquet elit malesuada. Curabitur tempus pretium vehicula. Vivamus laoreet lectus eget augue egestas sollicitudin. Sed sit amet aliquet lorem. Vestibulum ornare, ligula ut consectetur placerat, elit tellus tempus elit, eget euismod orci metus sit amet leo. Quisque odio eros, facilisis vitae dictum egestas, facilisis in metus. Sed lacus est, porttitor non dictum et, iaculis nec turpis. Proin quam leo, bibendum sit amet ultricies in, iaculis iaculis dui.</p>
</div> <!-- /content -->
</div> <!-- /main -->
</div> <!-- /wrap -->
<div id="footer">
<p>COPYRIGHT © 2010. All rights reserved. Reproduction in whole or in part without permission is prohibited.</p>
</div> <!-- /footer -->
</body>
</html>
Here’s the CSS:
/* overall site structure */
* {margin:0; padding:0;}
html, body {height:100%;}
html {overflow:scroll;}
#wrap {
min-height:100%;
width:100%;
margin:-60px auto 0;
background:url(images/white-bg-shadow.gif) repeat-y center top;}
* html #wrap {height:100%;}
#main {
overflow:auto;
width:850px;
margin:0 auto;
clear:both;}
/* Footer */
#footer {
position:relative;
margin:0;
height:60px;
clear:both;
background-color:#68748d;
color:#ccc;
font:normal 11px Verdana, Geneva, sans-serif;}
#footer a {
color:#fff;
text-decoration:underline;
font:bold 1em Verdana, Geneva, sans-serif;}
#footer a:hover {
color:#960214;
text-decoration:underline;}
#footer p {padding:15px 0; margin:0; text-align:center;}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
body {
font:bold .8em/1.3em Arial, Helvetica, sans-serif;
background-color:#dae0ee;
color:#7f8082;}
a img {border:0;}
a, a:link {color:#3366ff; text-decoration:underline; font-weight:bold;}
a:hover {color:#960214; text-decoration:underline;}
p {margin:10px 0 5px 0; text-align:justify;}
form p {margin:0; text-align:right;}
/* Header */
#header {
padding:0;
height:122px;
width:100%;
background:#fff url(images/header-bg.gif) repeat-x center;
border-top:60px solid #fff;
}
#header #logo {
width:850px;
margin:0 auto;
padding:0;
}
#logo #imglogo {
margin-top:0;
float:left;
}
#navigation {
width:502px;
float:right;
height:100px;
margin:0;
padding:0;
}
/* Main menu settings */
#mainmenu {
clear:both;
float:left;
margin:0;
padding:0;
width:500px;
z-index:1000;
position:relative;
}
/* Top menu items */
#mainmenu ul {
margin:0;
padding:0;
list-style:none;
float:right;
position:relative;
right:50%;
}
#mainmenu ul li {
margin:0;
padding:0;
float:left;
position:relative;
left:50%;
top:0;
}
#mainmenu ul li a {
display:block;
margin:0;
padding:63px 20px 26px 20px;
font:bold 11px Verdana, Geneva, sans-serif;
text-transform:uppercase;
line-height:1em;
text-decoration:none;
color:#071f4c;
border-left:1px dotted #ccc;
}
#mainmenu ul li a.last {
display:block;
margin:0;
padding:63px 20px 26px 20px;
font:bold 11px Verdana, Geneva, sans-serif;
text-transform:uppercase;
line-height:1em;
text-decoration:none;
color:#071f4c;
border-left:1px dotted #ccc;
border-right:1px dotted #ccc;
}
#mainmenu ul li a:hover {
background:#f4e5e7; /* Top menu items background colour */
color:#071f4c;
}
#mainmenu ul li:hover a, #mainmenu ul li.hover a { /* This line is required for IE 6 and below */
background:#f4e5e7; /* Top menu items background colour */
color:#071f4c;
}
/* Content Area for index page */
#content {
width:810px;
padding:20px;
background-color:#fff;
}
#content h1 {
font:bold 1.3em Tahoma, Geneva, sans-serif;
margin:0;
padding:0;
color:#960214;
}
#content h2 {
font:bold 1.1em Tahoma, Geneva, sans-serif;
margin:15px 0 10px 0;
color:#960214;
}
#content h3 {
font:normal 1em Tahoma, Geneva, sans-serif;
margin:15px 0 10px 0;
color:#960214;
}
#images {float:left; padding-bottom:20px;}
#mapviewer {
margin:10px 20px 0 0;
text-align:center;
}
#mapviewer a {font-size:11px;}
#content ul.circle {
list-style-type:circle;
margin:10px 0 10px 35px;
line-height:2em;
}
/* Breadcrumbs */
#breadcrumbs {
margin-bottom:0;
padding-bottom:20px;
padding-left:0;
overflow:hidden;
width:810px;}
#crumbslist {
list-style-type:none;
margin:0;
padding:0;
font-size:11px;}
#crumbslist li {
float:left;
list-style-type:none;
margin:0 .5em 0 -.5em;
padding:0 .5em 0 .5em;
font:normal 11px Verdana, Geneva, sans-serif;
color:#071f4c;}
#crumbslist a {
padding:0 16px 0 0;
_padding:0 16px 0 0;
margin:0;
background:url('images/subnavarrow.gif') right no-repeat;
font-size:11px;
text-decoration:underline;}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;}
.clearfix {display:inline-block;}
* html .clearfix {height:1%;}
.clearfix {display:block;}