PDA

View Full Version : Header Shifting Left in IE 7 and Under.



fgdesign
Jul 14th, 2010, 06:18 AM
My header is shifting to the left in IE 7 and under. It looks great in IE 8, Firefox and Safri. I am pretty new to using CSS. My header is built on in a single HTML file with a Spray Menu created in DreamWeaver. I am using a Server Side include to pull the header into all my site pages. This makes it really easy for me to update links and change the menu for future editing. I have also notice that the menu is not working correctly in IE 7 and under, but thought this may be do to the same issue with it shifting to the left. Any help with this would be awesome. The site that i am building can be found here: northbaptistflint.com/new/ (http://northbaptistflint.com/new/)

The HTML code is:


<!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>North Baptist Church of Flint</title>
<meta name= "robots" content = "index", follow">
<meta name= "revisit" content="14 days">
<meta name = "author" content= "FGdesign [www.fgdesignonline.com]">

<link href="../css/NB-style.css" rel="stylesheet" type="text/css">
<script src="../assets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
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];}}
}
</script>
<link href="../assets/SpryMenuBarHorizontal1.css" rel="stylesheet" type="text/css">

<script type="text/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 flvFTSS4(){//v1.02
this.style.filter="";}

function flvFTSS3(){//v1.02
var v1=arguments,v2=v1[0],v3=MM_findObj(v2);if (v3&&v3.TSS2!=null){clearTimeout(v3.TSS2);}}

function flvFTSS2(){//v1.02
var v1=arguments,v2=v1[0],v3=MM_findObj(v2),v4=v1[1],v5=v1[2],v6,v7,v8,v9,v10,v11,v12=document;if (v3&&v3.TSS7){flvFTSS3(v2);v9="flvFTSS2('"+v2+"',"+v4+","+v5+")";if (v4==1){if (!v3.TSS5.complete){v3.TSS2=setTimeout(v9,50);return;}v6=v3.TSS9+1;if (v6>v3.TSS7.length-1){if (v3.TSS10==0){return;}else {v6=0;}}else if (v6+1<v3.TSS7.length){v3.TSS5.src=v3.TSS7[v6+1][0];}}else {if (!v3.TSS3.complete){v3.TSS2=setTimeout(v9,50);return;}v6=v3.TSS9-1;if (v6<0){if (v3.TSS10==0){return;}else {v6=v3.TSS7.length-1;}}else if (v6-1>0){v3.TSS3.src=v3.TSS7[v6-1][0];}}v3.TSS9=v6;v10=v3.TSS7[v6][0];v11=v3.TSS7[v6][1];v7=(v3.filters&&!v12.TSS6&&v11<25);if (v7){if (v3.filters[0]&&v3.filters[0].status==2){v3.filters[0].Stop();}if (v11==0){v8="blendTrans(Duration="+v3.TSS8+")";}else {v8="revealTrans(Duration="+v3.TSS8+",Transition="+(v11-1)+")";}v3.style.filter=v8;v3.onfilterchange=flvFTSS4;v3.filters[0].Apply();}v3.src=v10;if (v7){v3.filters[0].Play();}if (v5==1){v3.TSS2=setTimeout(v9,v3.TSS4);}}}

function flvFTSS1(){//v1.02
// Copyright 2003, Marja Ribbers-de Vroed, FlevOOware (www.TSS1.nl/dreamweaver/)
var v1=arguments,v2=document,v3=v1[0],v4=MM_findObj(v3),v5,v6;if (v4){v2.TSS6=(navigator.userAgent.toLowerCase().indexOf("mac")!=-1);v4.TSS8=v1[1]/1000;v4.TSS4=v1[2]+v1[1];v6=v1[3];v4.TSS10=v1[4];v4.TSS7=new Array();for (var v7=5;v7<v1.length;v7+=2){v4.TSS7[v4.TSS7.length]=new Array(v1[v7],v1[v7+1]);}v4.TSS9=0;v4.TSS5=new Image();v4.TSS5.src=v1[7];v4.TSS3=new Image();v4.TSS3.src=v1[v1.length-2];if (v6==1){v5="flvFTSS2('"+v3+"',1,"+v6+")";v4.TSS2=setTimeout(v5,v4.TSS4);}}}
</script>
</head>

<body onload="flvFTSS1('NB1',1000,2500,1,1,'index/slideshow/NB (1).jpg',24,'index/slideshow/NB (2).jpg',24,'index/slideshow/NB (3).jpg',24,'index/slideshow/NB (4).jpg',24,'index/slideshow/NB (5).jpg',24,'index/slideshow/NB (6).jpg',24,'index/slideshow/NB (7).jpg',24,'index/slideshow/NB (8).jpg',24,'index/slideshow/NB (9).jpg',24,'index/slideshow/NB (10).jpg',24)">

<table width="1000" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="1000" height="367" colspan="3"><!--#include file="include/index.html" --></td>
</tr>
<tr>
<td width="455" height="205" id="slideshow1"><img src="index/slideshow/NB (1).jpg" name="NB1" width="387" height="290" id="NB1" /></td>
<td width="286"><p>&nbsp;</p>
<p><img src="index/images/icons.jpg" width="216" height="166" border="0" usemap="#Map" /></p></td>
<td width="259" rowspan="2"id="sidep1">Service Times:
<ul class="sd1">
<li>Sunday School - 9:45a.m.</li><br>
<li>Sunday Morning Worship - 11:00a.m.</li><br>
<li>Sunday Evening Service - 6:00p.m.</li><br>
<li>Wednesday:
<ul>
<li>Evening Bible Study - 6:00 pm</li>
<li>North Bound Kids &amp; Teen Youth Group -6:00-7:15 p.m.</li>
<li>Ladies Prayer &amp; Praise - 10:00 a.m.</li><br>
</ul>
</li>
<li>Ladies Bible Study - Last Tuesday of the month at 7:00 p.m. or Last Wednesday of the month at 10:00 a.m.</li><br>
<li>Men's Bible Study/Men's Prayer Time - Alternate every Tuesday Morning at 8:30 a.m.</li>
</ul></td>
</tr>
<tr>
<td height="204" width="741" colspan="2"><p>Welcome to North Baptist Church. Let us share with you the marvelous ways in which God's hand is at work in our church. We believe that you will find our fellowship to be a family affair and together we will grow, worship, serve, and reach out to our community. Our doors are always open, and if you've been praying about the church where the Lord would have you to serve, please know that you are welcome here. </p></td>
</tr>
<tr>
<td width="1000" height="47" colspan="3"><!--#include virtual="include/footer.html" --></td>
</tr>
</table>

<map name="Map" id="Map">
<area shape="rect" coords="7,2,206,48" href="#" />
<area shape="rect" coords="6,48,207,96" href="#" />
<area shape="rect" coords="6,95,207,155" href="#" />
</map>
</body>
</html>


CSS code for the site:


body {
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
margin-left: 10%;
margin-right: 10%;
background-image: url(../new/include/bkgrd.gif);
}
p {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16pt;
color: #666;
padding-left: 5pt;
padding-top: 5pt;

}
td {
background-color: #FFF;
text-align: left;
vertical-align:top;
padding: 0px;
padding-top: 0px;
padding-bottom: 0px;
}

.sd1 {
font-size: 11pt;
padding-right: 2px;
padding-left: 29px;
}

a:link {
color: #F00;
font-family: Georgia, "Times New Roman", Times, serif;
}

a:visited {
color: #00F;
font-family: Georgia, "Times New Roman", Times, serif;
}
a:hover {
color: #F00;
font-family: Georgia, "Times New Roman", Times, serif;
}
a:active {
color: #00F;
font-family: Georgia, "Times New Roman", Times, serif;
}

#ft1 {
text-align: center;
font-family: Verdana, Geneva, sans-serif;
font-size: x-small;
vertical-align: middle;
color: #FFF;
background-color: #333;
}

#ft2 {
text-align: center;
font-family: Verdana, Geneva, sans-serif;
font-size: small;
vertical-align: middle;
color: #FFF;
background-color: #333;
}

#ft3 {
text-align: center;
font-family: "Courier New", Courier, monospace;
font-size: x-small;
vertical-align: middle;
color: #CCC;
background-color: #333;
}
#slideshow1{
text-align:center;
background-color: #FFF;
}

a img {border: none;

}
.Heading1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: medium;
color: #000;
font-weight: bold;
}
.Heading2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: medium;
color: #FFF;
font-weight: bold;
}
div.Table_01 {
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
margin-left: 10%;
margin-right: 10%;
position:absolute;
left:0px;
top:0px;
width:1000px;
height:368px;
}

div.index-01_ {
position:absolute;
left:0px;
top:0px;
width:398px;
height:215px;
}

div.index-02_ {
position:absolute;
left:398px;
top:0px;
width:602px;
height:215px;
}

div.index-03_ {
position:absolute;
left:0px;
top:215px;
width:398px;
height:51px;
}

div.index-04_ {
position:absolute;
left:398px;
top:215px;
width:602px;
height:51px;
}
div.NBMenu_ {
position:absolute;
left:0px;
top:266px;
width:1000px;
height:31px;
background-image:url(../assets/NBMenuBar-BckGrd.gif)
}

div.x23_ {
position:absolute;
left:191px;
top:266px;
width:105px;
height:32px;
}

div.x23013_ {
position:absolute;
left:906px;
top:266px;
width:94px;
height:32px;
}

div.index-14_ {
position:absolute;
left:0px;
top:297px;
width:1000px;
height:22px;
background-color: #FFF;
padding-left: 0px;
padding-bottom: 0px;
}

div.index-15_ {
position:absolute;
left:0px;
top:319px;
width:743px;
height:48px;
padding-left: 0px;
padding-bottom: 0px;
background-color: #F0F0F0;
}

div.index-16_ {
position:absolute;
left:743px;
top:319px;
width:257px;
height:48px;
background-color: #006;
border:0;
padding-bottom: 0px;
}
#sidep1 {
font-size: 20px;
vertical-align:text-top;
color:#FFF;
padding-left: 2pt;
padding-top: 2pt;
background-color: #006;
}


CSS for the Spray Menu Bar:



@charset "UTF-8";

/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/*******************************************************************************

LAYOUT INFORMATION: describes box model, positioning, z-order

*******************************************************************************/

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
width: 111px;
float: left;
white-space: nowrap;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 160px;
position: absolute;
left: -1000em;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
text-align: left;
border: none;
float: none;
background-color: transparent;
width: 160px;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}

/*******************************************************************************

DESIGN INFORMATION: describes color scheme, borders, fonts

*******************************************************************************/

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
border:none;
outline:none;

}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
padding: 0.3em 0.75em;
color: #FFF;
background-image: url(NBMenuBar-BckGrd.gif);
font-family: Verdana, Geneva, sans-serif;
font-size: 15px;
text-decoration: none;
border:none;
outline:none;
font-weight: bolder;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-image: url(NBMenuBar-BckGrdHover.gif);
text-decoration: underline;
border:none;
outline:none;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
border:none;
outline:none;
}

/*******************************************************************************

SUBMENU INDICATION: styles if there is a submenu under a given menu item

*******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(NBMenuBar-BckGrd.gif);
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(NBMenuBar-BckGrd.gif);
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(NBMenuBar-BckGrdHover.gif);
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(NBMenuBar-BckGrdHover.gif);
}

/*******************************************************************************

BROWSER HACKS: the hacks below should not be changed unless you are an expert

*******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #FFF;
}
}

abduraooft
Jul 14th, 2010, 09:49 AM
<body onload="flvFTSS1('NB1',1000,2500,1,1,'index/slideshow/NB (1).jpg',24,'index/slideshow/NB (2).jpg',24,'index/slideshow/NB (3).jpg',24,'index/slideshow/NB (4).jpg',24,'index/slideshow/NB (5).jpg',24,'index/slideshow/NB (6).jpg',24,'index/slideshow/NB (7).jpg',24,'index/slideshow/NB (8).jpg',24,'index/slideshow/NB (9).jpg',24,'index/slideshow/NB (10).jpg',24)">

<table width="1000" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="1000" height="367" colspan="3"><div class="Table_01">

Don't you know why using tables for layout is very bad (http://www.hotdesign.com/seybold/)?

fgdesign
Jul 14th, 2010, 11:35 AM
Like i said i am new to CSS and when i first learned to do website it was recommended to use tables. I am working on moving away from any use of tables so any help with that will be great. I will take a look at your link and see if that helps me out.

Thanks!