|
Gap under menu in IE browsers only
08-21-2007, 02:33 PM
|
Gap under menu in IE browsers only
|
Posts: 60
Name: Matt
|
This site is coming along, and I am really enjoying designing with CSS, but I got a weird one that is carrying over to all my pages, and I think I should solve it before I design too many more.
As you can see here when viewing in IE (any version) there is a small gap between the menu and the content, that does not appear in FF or Opera. I cannot figure out what is causing this...
Here is the html:
HTML Code:
<!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=iso-8859-1" />
<title>Systems&Space, Inc.|High-Denisty Mobile Shelving|Compact Shelving|Rolling Files|Shelving Systems|Storage Systems|Modular Millwork|Casework|Pharmacy Casework|Law Enforcement Products|Evidence Lockers|Personnel Duty Lockers|Filing Services</title>
<script language="JavaScript" src="menu.index.js"></script>
<script language="JavaScript1.2" src="mm_menu.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body onLoad="MM_preloadImages('images/aboutslice_f2.gif','images/solslice_f3.gif','images/filingslice_f4.gif','images/servicesslice_f5.gif','images/spaceslice_f6.gif','images/contactslice_f7.gif');">
<script language="JavaScript1.2">mmLoadMenus();</script>
<div id="container">
<div id="toplinks" align="right"><span class="menu"><a href="#">Home</a></span><span class="style7"> | </span><span class="menu"><a href="forms/spaceanalysis.html">Request a Space Analysis</a></span><span class="style7"> | </span><span class="menu"><a href="forms/brochurereq.html">Download our Corporate Brochure</a></span><span class="style7"> | </span><span class="menu"><a href="http://store.systemsnspace.com" target="_blank">Online Store</a></span></div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="924" height="90">
<param name="movie" value="images/index.scroll.swf">
<param name="quality" value="high">
<embed src="images/index.scroll.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="924" height="90"></embed>
</object>
<img src="images/partners_bar.jpg" /><br />
<img name="logoslice" src="images/logoslice.gif" alt=""><img name="aboutslice" src="images/aboutslice.gif" width="116" height="26" border="0" usemap="#m_aboutslice" alt=""><img name="solslice" src="images/solslice.gif" width="170" height="26" border="0" usemap="#m_solslice" alt=""><img name="filingslice" src="images/filingslice.gif" width="144" height="26" border="0" usemap="#m_filingslice" alt=""><img name="servicesslice" src="images/servicesslice.gif" width="116" height="26" border="0" usemap="#m_servicesslice" alt=""><img name="spaceslice" src="images/spaceslice.gif" width="159" height="26" border="0" usemap="#m_spaceslice" alt=""><img name="contactslice" src="images/contactslice.gif" width="119" height="26" border="0" usemap="#m_contactslice" alt="">
<map name="m_aboutslice">
<area shape="rect" coords="0,0,116,26" href="#" alt="" onMouseOut="MM_nbGroup('out');MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_0615092146_4,0,26,null,'aboutslice');MM_nbGroup('over','aboutslice','images/aboutslice_f2.gif','',1);" >
</map>
<map name="m_solslice">
<area shape="rect" coords="0,0,170,26" href="#" alt="" onMouseOut="MM_nbGroup('out');MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_0615092635_3,0,26,null,'solslice');MM_nbGroup('over','solslice','images/solslice_f3.gif','images/solslice_f3.gif',1);" >
</map>
<map name="m_filingslice">
<area shape="rect" coords="0,0,144,26" href="#" alt="" onMouseOut="MM_nbGroup('out');MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_0620150716_5,1,26,null,'filingslice');MM_nbGroup('over','filingslice','images/filingslice_f4.gif','',1);" >
</map>
<map name="m_servicesslice">
<area shape="rect" coords="0,0,116,26" href="#" alt="" onMouseOut="MM_nbGroup('out');MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_0615093043_2,1,26,null,'servicesslice');MM_nbGroup('over','servicesslice','images/servicesslice_f5.gif','',1);" >
</map>
<map name="m_spaceslice">
<area shape="rect" coords="0,0,159,26" href="#" alt="" onMouseOut="MM_nbGroup('out');MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_0615093241_1,0,26,null,'spaceslice');MM_nbGroup('over','spaceslice','images/spaceslice_f6.gif','',1);" >
</map>
<map name="m_contactslice">
<area shape="rect" coords="0,0,119,26" href="#" alt="" onMouseOut="MM_nbGroup('out');MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_0615093406_0,0,26,null,'contactslice');MM_nbGroup('over','contactslice','images/contactslice_f7.gif','',1);" ></map><div id="content">
<div id="rightani">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
WIDTH="355" HEIGHT="374">
<PARAM NAME=movie VALUE="images/index-ani.swf">
<PARAM NAME=quality VALUE="Best">
<PARAM NAME=wmode VALUE="transparent">
<PARAM NAME=bgcolor VALUE="#ffffff"><param name="SCALE" value="exactfit" />
<EMBED src="images/index-ani.swf"
WIDTH="355"
HEIGHT="374" quality="Best" wmode="transparent" bgcolor="#ffffff"
TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" scale="exactfit">
</EMBED>
</OBJECT></div>
<img class="title" src="images/title-innovations.gif" />
<p> Systems & Space is a single source provider that analyzes, engineers, and implements space,
storage and filing solutions for every type of business need. Since 1988 we have been developing storage
and space solutions for all types of businesses, government facilities, museums, healthcare facilities,
colleges, retail firms and manufacturing companies through-out Northern California.
<span class="pagelinks"><a href="about/whois.html">Click here to learn more</a></span></p>
<img class="title2" src="images/title-shop.gif" />
<p> SSI makes it easy for you to save on all your filing supplies by providing an online store filled with
all the files, folders, filings supplies, and equipment you use on a daily basis.<br/>
<span class="style6">Register and recieve a coupon for 15% off your 1st order!</span>
<span class="pagelinks"><a href="http://store.systemsnspace.com" target="_blank">Click here to start saving!</a></span></p>
<img class="title2" src="images/title-green.gif" />
<p> Systems & Space, Inc. and our manufacturers are committed to providing sustainable,
environmentally friendly products as an integral part of the storage solutions we develop
for our customers.
<br />
<span class="pagelinks"><a href="about/green.html">Click here to learn more</a></span></p>
</div>
<div id="footer"><span class="style1">© 2007 Systems & Space, Inc | 500 Boulder Court, Ste. B | Pleasanton, CA 94566 | 800.766.7612 | <span class="menu"><a href="mailto:info@systemsnspace.com">info@systemsnspace.com</a></span> | CA License # 599899 </span></div>
</div>
</body>
</html>
and my style sheet:
Code:
p {
color: #000000;
text-align: justify;
margin: 1em 380px 1em 25px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
p.thumbs{
color: #000000;
text-align: justify;
margin: 2em 450px 2em 25px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
p.comp{
color: #000000;
text-align: center;
margin: 5px 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
}
body {
background: #666666;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #333333;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
ul{
margin: 10px 0px 0px 20px;
width: 540px;
}
li.sixphaseapproach{
list-style: url(images/bullet.gif);
text-align: justify;
margin: 0px 0px 20px 25px;
padding: 0px 25px 0px 25px;
}
li.linkbullets{
list-style: url(images/bullet2.gif);
margin: 2px 0px 2px 80px;
padding-left: 0 0;
}
li.bullets{
list-style: url(images/bullet2.gif);
margin: 2px 0px 0px 80px;
padding-left: 0;
}
.style5 {
color: #000000;
text-align: justify;
padding-left: 20px;
padding-top: 15px;
padding-right: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
A:link {font-family: Arial, Helvetica, sans-serif; color: #000000; text-decoration: underline; text-align: left; margin-bottom: 5px; font-size: 11px;}
A:visited {font-family: Arial, Helvetica, sans-serif; color: #000000; text-decoration: underline; text-align: left; margin-bottom: 5px; font-size: 11px;}
A:active {font-family: Arial, Helvetica, sans-serif; color: #000000; text-decoration: underline; text-align: left; margin-bottom: 5px; font-size: 11px;}
A:hover {font-family: Arial, Helvetica, sans-serif; color: #666666; text-decoration: none; text-align: left; margin-bottom: 5px; font-size: 11px;}
.menu A:link {font-family: Arial, Helvetica, sans-serif; color: #ffffff; text-decoration: underline}
.menu A:visited {font-family: Arial, Helvetica, sans-serif; color: #ffffff; text-decoration: underline}
.menu A:active {font-family: Arial, Helvetica, sans-serif; color: #ffffff; text-decoration: underline}
.menu A:hover {font-family: Arial, Helvetica, sans-serif; color: #999999; text-decoration: none}
.linkbullets a:link {
list-style:url(images/bullet2.gif);
color: #000000;
text-decoration: underline;
text-align: left;
font-size: 11px;
}
.linkbullets A:visited {
list-style:url(images/bullet2.gif);
color: #000000;
text-decoration: underline;
text-align: left;
font-size: 11px;
}
.linkbullets A:active {
list-style:url(images/bullet2.gif);
color: #000000;
text-decoration: underline;
text-align: left;
font-size: 11px;
}
.linkbullets A:hover {
list-style:url(images/bullet2.gif);
color: #666666;
text-decoration: none;
text-align: left;
font-size: 11px;
}
#bullets A:link {font-family: Arial, Helvetica, sans-serif; color: #000000; text-decoration: underline; text-align: left; margin-bottom: 5px; font-size: 11px;}
#bullets A:visited {font-family: Arial, Helvetica, sans-serif; color: #000000; text-decoration: underline; text-align: left; margin-bottom: 5px; font-size: 11px;}
#bullets A:active {font-family: Arial, Helvetica, sans-serif; color: #000000; text-decoration: underline; text-align: left; margin-bottom: 5px; font-size: 11px;}
#bullets A:hover {font-family: Arial, Helvetica, sans-serif; color: #666666; text-decoration: none; text-align: left; margin-bottom: 5px; font-size: 11px;}
.pagelinks a:link {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
text-decoration: underline;
float: right;
padding-right: 15px;
display: block;
}
.pagelinks a:visited {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
text-decoration: underline;
float: right;
padding-right: 15px;
display: block;
}
.pagelinks a:active {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
text-decoration: underline;
float: right;
padding-right: 15px;
display: block;
}
.pagelinks a:hover {
font-family: Arial, Helvetica, sans-serif;
color: #666666 ;
text-decoration: none;
float: right;
padding-right: 15px;
display: block;
}
.style6 {
color: #CC0000;
font-weight: bold;
}
.sixphase {
color: #CC0000;
font-size: 13px;
font-weight: bold;
margin: 0 0;
}
#sixphasetext {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
margin-left: 50px;
}
.style7 {color: #FFFFFF}
img.title {
padding: 8px 0px 0px 10px;
}
img.title2 {
padding: 20px 0px 0px 10px;
}
img.govtlogos {
padding: 10px 0px 5px 5px;
text-align: center;
}
img.usbgc {
float: right;
padding: 0px 10px 10px 20px;
width: 100px;
height: 101px;
}
img.right {
float: right;
height: 374px;
width: 355px;
}
#rightani {
float: right;
height: 374px;
width: 355px;
}
#container {
background: #FFFFFF;
width: 924px;
height: 577px;
border: hidden;
border-width: 0;
margin: auto auto auto auto;
}
#container2 {
background: #FFFFFF;
width: 924px;
border: hidden;
border-width: 0;
margin: auto auto auto auto;
}
#toplinks {
background: url(images/topbar.jpg);
padding: 9px 20px 0 0;
height: 24px;
width: 904px;
}
#image1 {
position: absolute;
height: 374px;
width: 355px;
right: 0px;
top: 0px;
}
#image2 {
position: absolute;
visibility: hidden;
height: 374px;
width: 355px;
right: 0px;
top: 0px;
}
#image3 {
position: absolute;
visibility: hidden;
height: 374px;
width: 355px;
right: 0px;
top: 0px;
}
#image4 {
position: absolute;
visibility: hidden;
height: 374px;
width: 355px;
right: 0px;
top: 0px;
}
#image5 {
position: absolute;
visibility: hidden;
height: 374px;
width: 355px;
right: 0px;
top: 0px;
}
#surveycontent {
background: #FFFFFF;
position: float;
padding: 10px 10px 10px 10px;
height: 374px;
width: 903px;
left: 0px;
top: 0px;
}
#content {
position: relative;
background: #FFFFFF;
margin: 0 0 0 0;
height: 374px;
width: 924px;
}
#usgbclogo {
position: absolute;
background: url(images/usgbc_logo.gif);
right: 375px;
bottom: 20px;
height: 101px;
width: 100px;
}
#content2 {
position: relative;
background: #FFFFFF;
margin: 0 0 0 0;
width: 924px;
}
#footer {
clear: both;
text-align: center;
background: url(images/bottombar.gif);
padding-top: 8px;
height: 22px;
width: 924px;
}
#thumbs {
position: absolute;
margin: 11px 15px 10px 15px;
width: 57px;
height: 353px;
top: 0px;
right: 355px;
}
#comp {
margin-right: 133.5px;
margin-left: 133.5px;
width: 657px;
}
#back {
position: absolute;
bottom: 5px;
right: 355px;
height: 19px;
padding-right: 5px;
width: 213px;
}
Anyone got any idea what is causing it?? 
Thanks for your help! |
|
|
|
|
08-21-2007, 02:35 PM
|
Re: Gap under menu in IE browsers only
|
Posts: 112
Name: Bobby
|
I don't mean to throw a spanner in the works but I just viewed it on Firefox on a mac and I can see the small space also.
|
|
|
|
|
08-21-2007, 02:47 PM
|
Re: Gap under menu in IE browsers only
|
Posts: 60
Name: Matt
|
Thanks, I don't have access to a mac, so I appreciate the info. I'm sure whatever is causing it, will fix it across all browser versions it is happening in... hopefully |
|
|
|
|
08-21-2007, 09:07 PM
|
Re: Gap under menu in IE browsers only
|
Posts: 10,016
Location: Tennessee
|
You REALLY need to shorten that page title, that's just unbelievable overkill. I couldn't save the page because the name was more than 256 characters !
That's not an effective Title, it's too much.
You can solve the problem with a conditional comment and an IE-targeted CSS file. In that css file, add a -3px top margin to #content.
That's one hairy mess of code for that menu. There ARE easier ways to accomplish that ya know 
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
Please login or register to view this content. Registration is FREE
Please login or register to view this content. Registration is FREE
Last edited by LadynRed; 08-21-2007 at 09:18 PM..
|
|
|
|
|
08-21-2007, 11:16 PM
|
Re: Gap under menu in IE browsers only
|
Posts: 10,688
Name: Steven Bradley
Location: Boulder, Colorado
|
Matt I agree with LadynRed about using conditional comments to fix the problem. I also want to add that you should cut down on your page title. I know you're trying to include as many keywords as possible, but you need to keep the page focused. Using all those keywords in a single title only ensures the page won't rank for any of them.
|
|
|
|
|
08-22-2007, 05:48 PM
|
Re: Gap under menu in IE browsers only
|
Posts: 60
Name: Matt
|
ok so I added this to my html:
<!--[if IE]>
<link href="../iestyles.css" rel="stylesheet" type="text/css" media="all" />
<![endif]-->
My question now is, do I need the iestyles.css to be identical to the regular styles.css except for conditional IE stuff being different? Or do I only have to include the IE conditional styles in stylesie.css?
Does that make sense??
Anyway, the margin-top: -3px worked like a charm for IE Thanks!
Oh, and you will also be happy to know that I did change the title, though may of the pages on the current site rank very highly on searches because of the abundance of keywords in the titles... maybe the index page was a bit overkill though
And I would love to recreate my menu with CSS, but haven't quite grasped how to do the rollover for the menu headers, since they need to be rollover images.
I have read tutorials, but am just not getting it... |
|
|
|
|
08-22-2007, 07:55 PM
|
Re: Gap under menu in IE browsers only
|
Posts: 10,688
Name: Steven Bradley
Location: Boulder, Colorado
|
You only have to include the IE specific styles in iestyles.css. They'll be included when the browser is IE, but your main style sheet will be included for any browser.
The drop down I've been using for awhile is Suckerfish. I don't think there's any images in the tutorial, but you should be able to add them using background images. Also looking at your menu it doesn't need any images at all. |
|
|
|
|
08-22-2007, 08:57 PM
|
Re: Gap under menu in IE browsers only
|
Posts: 60
Name: Matt
|
Thanks, I will check out that tutorial. I do need images cause the font I use for the headers is a specific font we use, and I want to use that font.
Now, if I use CSS to do the menu, then when I need to add or change menu items will I need to make those changes on every page of the site? Or is there a way to have that menu linked to external sheet, like I have my menu.js file linked now?
|
|
|
|
|
08-23-2007, 12:20 AM
|
Re: Gap under menu in IE browsers only
|
Posts: 10,016
Location: Tennessee
|
Quote:
|
when I need to add or change menu items will I need to make those changes on every page of the site?
|
Yes, unless you use a server-side include for the menu.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
Please login or register to view this content. Registration is FREE
Please login or register to view this content. Registration is FREE
|
|
|
|
|
« Reply to Gap under menu in IE browsers only
|
|
|
| Thread Tools |
Search this Thread |
|
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
