|
Problem with gap when viewing page
07-13-2007, 06:12 PM
|
Problem with gap when viewing page
|
Posts: 60
Name: Matt
|
So here is a weird one... I have this page I am designing using CSS for layout (NO TABLES!), and it looks nice when I preview the in a browser through DW, but when I upload the html, and css files to my webserver to test it, there is this weird gap that shows up (between the "Partners in...." bar, and the menu bar.
Here is the site so you can see what I mean:
http://www.systemsnspace.com/new2007/css-test.html
It was recommended in another thread that I remove all the position: absolute; attributes, and so I have... but that did not solve the problem...
It should be known that before yesterday, I was creating the layout of this site using tables, and after finding your forum, and reading some of the tutorial links you have available, I learned how to design a webpage with CSS... and I love it! I am now working on recreating the site using CSS and NO TABLES! - Thanks!
So anyway.... here is my style sheet:
Code:
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
font-weight: bold;
}
body,td,th {
background: #666666
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #333333;
margin: 0;
}
a:link {
color: #282828;
text-decoration: underline;
}
a:hover {
color: #666666;
text-decoration: none;
}
.style5 {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
.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}
.pagelinks A:link {color: #000000; text-decoration: underline}
.pagelinks A:visited {color: #000000; text-decoration: underline}
.pagelinks A:active {color: #000000; text-decoration: underline}
.pagelinks A:hover {color: #666666 ; text-decoration: none}
a:visited {
text-decoration: underline;
color: #282828;
}
a:active {
text-decoration: underline;
color: #282828;
}
.style6 {
color: #CC0000;
font-weight: bold;
}
.style7 {color: #FFFFFF}
#container {
position: relative;
background: #FFFFFF
width: 930px; /* width + border for IE 5.x */
w\idth: 924px; /* real width */
border: hidden;
border-width: 0;
margin-bottom: auto;
margin-top: auto;
margin-left: auto;
margin-right: auto;
}
#toplinks {
position: absolute;
top: 9px;
right: 21px;
}
#header {
position: static;
height: 33px;
width: 924px;
}
#topscroll {
position: static;
width: 924px;
height: 90px;
}
#partnersbar {
position: static;
height: 32px;
width: 924px;
}
#menubar {
position: static;
height: 26px;
width: 924px;
}
#rightimage {
position: absolute;
height: 374px;
width: 355px;
right: 0px;
top: 181px;
}
#content {
position: absolute;
background: #FFFFFF;
height: 374px;
width: 569px;
left: 0px;
top: 181px;
}
#footer {
position: absolute;
backgound: #000000;
height: 27px;
width: 924px;
right: 0px;
top: 555px;
}
#emaillink {
position: relative;
width: 750px;
left: 95px;
bottom: 20px;
}
And.. here is my 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>Untitled Document</title>
<script language="JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])?args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) { img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr) for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function mmLoadMenus() {
if (window.mm_menu_0615092146_4) return;
window.mm_menu_0615092146_4 = new Menu("root",116,20,"tahoma, arail, verdana",10,"#000000","#ffffff","#cccccc","#666666","left","middle",5,0,1000,-5,7,true,false,true,0,true,true);
mm_menu_0615092146_4.addMenuItem("Who We Are");
mm_menu_0615092146_4.addMenuItem("Six-Phase Approach");
mm_menu_0615092146_4.addMenuItem("Commitment to GREEN");
mm_menu_0615092146_4.addMenuItem("Government");
mm_menu_0615092146_4.addMenuItem("Healthcare GPOs");
mm_menu_0615092146_4.addMenuItem("Project Studies");
mm_menu_0615092146_4.addMenuItem("News Room");
mm_menu_0615092146_4.addMenuItem("Careers @ SSI");
mm_menu_0615092146_4.hideOnMouseOut=true;
mm_menu_0615092146_4.menuBorder=0;
mm_menu_0615092146_4.menuLiteBgColor='#ffffff';
mm_menu_0615092146_4.menuBorderBgColor='#555555';
mm_menu_0615092146_4.bgColor='#555555';
window.mm_menu_0615092635_3 = new Menu("root",169,20,"tahoma, Arial, helvetica",10,"#000000","#ffffff","#cccccc","#666666","left","middle",5,0,1000,-5,7,true,false,true,0,true,true);
mm_menu_0615092635_3.addMenuItem("Spacesaver Mobile Storage");
mm_menu_0615092635_3.addMenuItem("Shelving Systems");
mm_menu_0615092635_3.addMenuItem("Library Bookstacks");
mm_menu_0615092635_3.addMenuItem("Rotary Storage");
mm_menu_0615092635_3.addMenuItem("QuickSpace Storage");
mm_menu_0615092635_3.addMenuItem("Museum/Gallery Storage");
mm_menu_0615092635_3.addMenuItem("Weapons Storage");
mm_menu_0615092635_3.addMenuItem("Law Enforcement Lockers");
mm_menu_0615092635_3.addMenuItem("Modular Millwork");
mm_menu_0615092635_3.addMenuItem("Mailroom Furniture");
mm_menu_0615092635_3.addMenuItem("Modular Medical Casework");
mm_menu_0615092635_3.addMenuItem("Pharmacy & Laboratory Casework");
mm_menu_0615092635_3.addMenuItem("Professional Filing Services");
mm_menu_0615092635_3.hideOnMouseOut=true;
mm_menu_0615092635_3.menuBorder=0;
mm_menu_0615092635_3.menuLiteBgColor='#ffffff';
mm_menu_0615092635_3.menuBorderBgColor='#555555';
mm_menu_0615092635_3.bgColor='#555555';
window.mm_menu_0620150716_5 = new Menu("root",144,20,"tahoma, Arial, Helvetica, sans-serif",10,"#000000","#ffffff","#cccccc","#666666","left","middle",5,0,1000,-5,7,true,false,true,0,true,true);
mm_menu_0620150716_5.addMenuItem("File Moves");
mm_menu_0620150716_5.addMenuItem("File Conversions");
mm_menu_0620150716_5.addMenuItem("File/Folder Supplies");
mm_menu_0620150716_5.addMenuItem("On-Demand Label Printing");
mm_menu_0620150716_5.addMenuItem("Record Managemant Systems");
mm_menu_0620150716_5.hideOnMouseOut=true;
mm_menu_0620150716_5.menuBorder=0;
mm_menu_0620150716_5.menuLiteBgColor='#ffffff';
mm_menu_0620150716_5.menuBorderBgColor='#555555';
mm_menu_0620150716_5.bgColor='#555555';
window.mm_menu_0615093043_2 = new Menu("root",116,20,"tahoma, Arial, Helvetica, sans-serif",10,"#000000","#ffffff","#cccccc","#666666","left","middle",5,0,1000,-5,7,true,false,true,0,true,true);
mm_menu_0615093043_2.addMenuItem("Space Analysis");
mm_menu_0615093043_2.addMenuItem("AIA Learning Seminars");
mm_menu_0615093043_2.addMenuItem("Site Visits");
mm_menu_0615093043_2.hideOnMouseOut=true;
mm_menu_0615093043_2.menuBorder=0;
mm_menu_0615093043_2.menuLiteBgColor='#ffffff';
mm_menu_0615093043_2.menuBorderBgColor='#555555';
mm_menu_0615093043_2.bgColor='#555555';
window.mm_menu_0615093241_1 = new Menu("root",157,20,"tahoma, Arial, Helvetica, sans-serif",10,"#000000","#ffffff","#cccccc","#666666","left","middle",5,0,1000,-5,7,true,false,true,0,true,true);
mm_menu_0615093241_1.addMenuItem("Business/Offices");
mm_menu_0615093241_1.addMenuItem("Education");
mm_menu_0615093241_1.addMenuItem("Libraries");
mm_menu_0615093241_1.addMenuItem("Government");
mm_menu_0615093241_1.addMenuItem("Health Care");
mm_menu_0615093241_1.addMenuItem("Industrial");
mm_menu_0615093241_1.addMenuItem("Justice");
mm_menu_0615093241_1.addMenuItem("Legal");
mm_menu_0615093241_1.addMenuItem("Museum/Gallery ");
mm_menu_0615093241_1.hideOnMouseOut=true;
mm_menu_0615093241_1.menuBorder=0;
mm_menu_0615093241_1.menuLiteBgColor='#ffffff';
mm_menu_0615093241_1.menuBorderBgColor='#555555';
mm_menu_0615093241_1.bgColor='#555555';
window.mm_menu_0615093406_0 = new Menu("root",119,20,"tahoma, Arial, Helvetica, sans-serif",10,"#000000","#ffffff","#cccccc","#666666","left","middle",5,0,1000,-5,7,true,false,true,0,true,true);
mm_menu_0615093406_0.addMenuItem("Company Directory");
mm_menu_0615093406_0.addMenuItem("Free Space Analysis");
mm_menu_0615093406_0.addMenuItem("Request Information ");
mm_menu_0615093406_0.hideOnMouseOut=true;
mm_menu_0615093406_0.menuBorder=0;
mm_menu_0615093406_0.menuLiteBgColor='#ffffff';
mm_menu_0615093406_0.menuBorderBgColor='#555555';
mm_menu_0615093406_0.bgColor='#555555';
mm_menu_0615093406_0.writeMenus();
} // mmLoadMenus()
//-->
</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="header">
<img src="http://www.webmaster-talk.com/images/topbar.jpg" />
<div id="toplinks" align="right"><span class="menu"><a href="spaceanalysis.html">Request a Space Analysis</a></span><span class="style7"> | </span><span class="menu"><a href="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>
</div>
<div id="topscroll">
<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="imagescroller30.swf">
<param name="quality" value="high">
<embed src="imagescroller30.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="924" height="90"></embed>
</object></div>
<div id="partnersbar">
<img src="http://www.webmaster-talk.com/images/partners_bar.jpg" /></div>
<div id="menubar"><img name="logoslice" src="http://www.webmaster-talk.com/images/logoslice.gif" alt=""><img name="aboutslice" src="http://www.webmaster-talk.com/images/aboutslice.gif" width="116" height="26" border="0" usemap="#m_aboutslice" alt=""><img name="solslice" src="http://www.webmaster-talk.com/images/solslice.gif" width="170" height="26" border="0" usemap="#m_solslice" alt=""><img name="filingslice" src="http://www.webmaster-talk.com/images/filingslice.gif" width="144" height="26" border="0" usemap="#m_filingslice" alt=""><img name="servicesslice" src="http://www.webmaster-talk.com/images/servicesslice.gif" width="116" height="26" border="0" usemap="#m_servicesslice" alt=""><img name="spaceslice" src="http://www.webmaster-talk.com/images/spaceslice.gif" width="159" height="26" border="0" usemap="#m_spaceslice" alt=""><img name="contactslice" src="http://www.webmaster-talk.com/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>
<div id="rightimage"><img src="http://www.webmaster-talk.com/images/index.ani.gif" /></div>
<div class="style5" id="content">this is a test of text</div>
<div id="footer"><img src="http://www.webmaster-talk.com/images/bottombar.gif" />
<div id="emaillink"><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>
</div>
</body>
</html>
Thanks for your help 
Last edited by DrSeuss; 07-13-2007 at 06:13 PM..
|
|
|
|
|
07-13-2007, 06:27 PM
|
Re: Problem with gap when viewing page
|
Posts: 1,774
Name: Stephanie
Location: Oklahoma
|
I am glad you decided to use CSS to layout your site! I know it can be confusing at first, but once you get used to using css, you will start to despise tables!
Anyway, I agree about the position:absolute. With this layout, you dont need to use absolute positioning. The absolute positioning will probably make things a lot more confusing.
I am wondering if there is something in the javascript that could be causing the gap?
|
|
|
|
|
07-13-2007, 06:45 PM
|
Re: Problem with gap when viewing page
|
Posts: 60
Name: Matt
|
Thanks
Well, here is the same page I originally created with tables, using the same javascript.... but it doesn't have that problem...
http://www.systemsnspace.com/new2007/index.html
Last edited by DrSeuss; 07-13-2007 at 06:58 PM..
Reason: Cause i was rude and didn't thank you for your reply :(
|
|
|
|
|
07-13-2007, 06:59 PM
|
Re: Problem with gap when viewing page
|
Posts: 1,774
Name: Stephanie
Location: Oklahoma
|
ok, its not the javascript.
Landynred posted in your other thread that you should put this in your #menubar div:
#menubar {
position: absolute;
height: 26px;
width: 924px;
top: 153px;
}
I tried that and it worked. I think it is a good quick fix, but you might want to try to get away from the absolute positioning later.
2 other little tips:
1. Remember to put a title on your page. Right now it comes up as "untitled document".
2. You might want to put your javascript in a separate file and link to it. Just like you would link a CSS file. It will keep your HTML cleaner, and also you can make sitewide changes to your menu in one location.
|
|
|
|
|
07-13-2007, 07:19 PM
|
Re: Problem with gap when viewing page
|
Posts: 60
Name: Matt
|
Thanks, I tried that, but it moved the menu bar up too far in DW, and when i tested iit in a browser from there.... but low and behold... it looks right live... go figure. Oh well, I guess I can live with it looking odd in DW while i design it... as long as it is showing up right live.
Yeah, this is just a test page for CSS, and by no means a final page! The final pages will have titles etc...
Thanks for the advice on the javascript... that will make it A LOT easier to make changes in the future
I think I have the basic template down now for most of the pages... now I just need to start adding content
Thanks for your help, expect to hear from me again if I have other problems, you guys have made this project much easier |
|
|
|
|
07-14-2007, 02:37 AM
|
Re: Problem with gap when viewing page
|
Posts: 1,774
Name: Stephanie
Location: Oklahoma
|
Yeah, sometimes dreamweaver renders things a little weird. You can't depend on it to give you the truth. It is just helpful to see a rough guide of what you are working on.
Your welcome for the advice! If you have more questions, feel free to ask. That is why we are all here, to help each other out!
|
|
|
|
|
07-14-2007, 12:11 PM
|
Re: Problem with gap when viewing page
|
Posts: 10,016
Location: Tennessee
|
DW's internal viewer uses an older version of IE, so you cannot expect it to show you anything reliably. Plus, DW adds borders and other visual aids which can throw things off.
__________________
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 Problem with gap when viewing page
|
|
|
| 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
|
|
|
|
