Enjoy an ad free experience by logging in. Not a member yet?
Register .
PM User | 1
New to the CF scene
Join Date: Jan 2013
Posts: 6
Thanks: 3
Thanked 0 Times in 0 Posts
Help with IE compatibility view
When I check the IE compatibility view for my wip page the lext changes spacing a little and there is a grey box around the page.
Can someone please help me clean it up. Page is
http://bardejov.org/index-1-15-13-v3.html
I have place the html and the css file bellow.
Also, is there a program that can check it?
Thank you,
David
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bardejov Jewish Preservation Committee</title>
<meta namex="Description" content="Bardejov Jewish Preservation Committee is a committee formed for the purpose of restoring the cemetery and synagogues in Bardejov, Slovakia." />
<meta name="KeyWords" content="Bardejov, Jewish, preservation, synagogues, cemetery, heritage, Jewish quarter, survivors, descendants, reunion, Unesco"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (HomePage3.psd) -->
<script type="text/javascript">
<!--
<!--
function mmLoadMenus() {
if (window.mm_menu_0605192834_0) return;
window.mm_menu_0605192834_0 = new Menu("root",176,18,"Arial, Helvetica, sans-serif",12,"#FFFFFF","#46577F","#46577F","#EFEFEF","left","middle",3,0,1000,-5,7,true,false,true,0,true,true);
mm_menu_0605192834_0.addMenuItem("Our Mission","window.open('aboutus/ourmission.html', '_self');");
mm_menu_0605192834_0.addMenuItem("History of the Committee","window.open('aboutus/historyofcommittee.html', '_self');");
mm_menu_0605192834_0.menuBorder=1;
mm_menu_0605192834_0.menuLiteBgColor='#FFFFFF';
mm_menu_0605192834_0.menuBorderBgColor='#777777';
window.mm_menu_0605193018_0 = new Menu("root",123,18,"Arial, Helvetica, sans-serif",12,"#FFFFFF","#46577F","#46577F","#EFEFEF","left","middle",3,0,1000,-5,7,true,false,true,0,true,true);
mm_menu_0605193018_0.addMenuItem("Jewish History","window.open('bardejov/jewishhistory.html', '_self');");
mm_menu_0605193018_0.addMenuItem("Early History","window.open('bardejov/earlyhistory.html', '_self');");
mm_menu_0605193018_0.addMenuItem("Bardejov Today","window.open('bardejov/bardejovtoday.html', '_self');");
mm_menu_0605193018_0.hideOnMouseOut=true;
mm_menu_0605193018_0.bgColor='#555555';
mm_menu_0605193018_0.menuBorder=1;
mm_menu_0605193018_0.menuLiteBgColor='#FFFFFF';
mm_menu_0605193018_0.menuBorderBgColor='#777777';
window.mm_menu_0605194018_0 = new Menu("root",113,18,"Arial, Helvetica, sans-serif",12,"#FFFFFF","#46577F","#46577F","#EFEFEF","left","middle",3,0,1000,-5,7,true,false,true,0,true,true);
mm_menu_0605194018_0.addMenuItem("From May 2012","window.open('../gallery/newphotos2012.html', '_self');");
mm_menu_0605194018_0.addMenuItem("From 2010-2011","window.open('../gallery/recent.html', '_self');");
mm_menu_0605194018_0.addMenuItem("Synagogues","window.open('../gallery/synagogue.html', '_self');");
mm_menu_0605194018_0.addMenuItem("Cemetery","window.open('../gallery/cemetery.html', '_self');");
mm_menu_0605194018_0.hideOnMouseOut=true;
mm_menu_0605194018_0.bgColor='#555555';
mm_menu_0605194018_0.menuBorder=1;
mm_menu_0605194018_0.menuLiteBgColor='#FFFFFF';
mm_menu_0605194018_0.menuBorderBgColor='#777777';
window.mm_menu_1113121056_0 = new Menu("root",117,18,"Arial, Helvetica, sans-serif",12,"#FFFFFF","#46577F","#46577F","#EFEFEF","left","middle",3,0,1000,-5,7,true,false,true,0,true,true);
mm_menu_1113121056_0.addMenuItem("From May 2012","location='../gallery/newphotos2012.html'")
mm_menu_1113121056_0.addMenuItem("From 2010-2011","location='../gallery/recent.html'");
mm_menu_1113121056_0.addMenuItem("Synagogues*","location='../gallery/synagogue.html'");
mm_menu_1113121056_0.addMenuItem("Cemetery*","location='../gallery/cemetery.html'");
mm_menu_1113121056_0.hideOnMouseOut=true;
mm_menu_1113121056_0.bgColor='#555555';
mm_menu_1113121056_0.menuBorder=1;
mm_menu_1113121056_0.menuLiteBgColor='#FFFFFF';
mm_menu_1113121056_0.menuBorderBgColor='#777777';
mm_menu_1113121056_0.writeMenus();
} // mmLoadMenus()
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
index_05_over = newImage("images/index_05-over.gif");
index_06_over = newImage("images/d_about_us_o.jpg");
index_07_over = newImage("images/2013v3/d_cemetery_o.jpg");
index_08_over = newImage("images/2013v3/d_suburbia_o.jpg");
index_09_over = newImage("images/2013v3/d_suburbia_o.jpg");
index_10_over = newImage("images/2013v3/d_suburbia_o.jpg");
preloadFlag = true;
}
}
// -->
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
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 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_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
<!-- End Preload Script -->
<style type="text/css">
<!--
body {
background-color: #8588A6;
}
.style1 {
font-size: 12px;
color: #FFFFFF;
}
.style2 {font-size: 10px; color: #FFFFFF; }
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
#Table_01 tr td table tr td {
font-size: 12px;
}
#Table_01 tr td table {
font-size: 14px;
}
#Table_01 tr td table {
font-size: 14px;
}
-->
</style>
<script language="JavaScript" src="mm_menu.js"></script>
<link href="print.css" rel="stylesheet" type="text/css" media="print">
<link href="reunion.css" rel="stylesheet" type="text/css">
<link href="drfhb.css" rel="stylesheet" type="text/css">
<link href="../links.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="drfstyle.css" type="text/css" media="screen, projection" />
</head>
<body onLoad="preloadImages();MM_preloadImages('images/status-over.gif','images/synagogue-over.gif','images/cemetery-over.gif','images/index_06-over.gif','images/index_07-over.gif','images/jewish_suburbia-over.gif','images/index_08-over.gif','images/archival_photos-over.gif','images/index_09-over.gif','images/index_10-over.gif','images/iwantohelp-over.gif','images/photogallery-over.gif','images/viewnow-over.gif','images/d_about_us_o.jpg','images/2013v3/d_cemetery_o.jpg','images/2013v3/d_suburbia_o.jpg')">
<script language="JavaScript1.2">mmLoadMenus();</script>
<div id="wrapper">
<div id="headerlogo"><img src="images/2013v3/bjpc_blue logo.jpg" alt="" width="968" height="97" border="0">
</div>
<div id="header">
<img src="images/2013v3/drf_index_04.jpg" alt="" width="968" height="90" border="0">
</div><!-- #header-->
<div id="headerline3">
<img src="images/2013v3/d_home_o.jpg" border="0"><a href="#","background-color:black"><img src="images/2013v3/d_about_us_no.jpg" alt="" name="about" width="104" height="31" border="0" id="about" onMouseOver="MM_showMenu(window.mm_menu_0605192834_0,0,31,null,'about');MM_swapImage('about','','images/d_about_us_o.jpg',1)" onMouseOut="MM_startTimeout();MM_swapImgRestore()"></a><a href="cemetery_hm/cemetery_hm.html" target="_self"><img src="images/2013v3/d_cemetery_no.jpg" alt="" name="cemetery" width="103" height="31" border="0" onMouseOver="MM_swapImage('cemetery','','images/2013v3/d_cemetery_o.jpg',1)" onMouseOut="MM_swapImgRestore()"></a><a href="surburbia.html" target="_self"><img src="images/2013v3/d_surburbia.jpg"></a><a href="monument.html" target="_self"#><img src="images/2013v3/d_memorial_no.jpg" alt="" name="monument" width="102" height="31" border="0" id="monument" onMouseOver="MM_swapImage('monument','','images/2013v3/d_memorial_o.jpg',1)" onMouseOut="MM_swapImgRestore()"></a><img src="images/2013v3/d_2012gathering.jpg"><img src="images/2013v3/d_contactus.jpg"><img src="images/2013v3/d_shareyourstory.jpg">
</div><!-- #header_line_3-->
<div id="middle">
<div id="container">
<div id="content">
<strong>Content:</strong> Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu, aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus a, facilisis eget, nisl. Quisque vitae pede. Nam et augue. Sed a elit. Ut vel massa. Suspendisse nibh pede, ultrices vitae, ultrices nec, mollis non, nibh. In sit amet pede quis leo vulputate hendrerit. Cras laoreet leo et justo auctor condimentum. Integer id enim. Suspendisse egestas, dui ac egestas mollis, libero orci hendrerit lacus, et malesuada lorem neque ac libero. Morbi tempor pulvinar pede. Donec vel elit.
</div><!-- #content-->
</div><!-- #container-->
<div class="sidebar" id="sideLeft">
<a href="/bardejov/jewishhistory.html" target="_self">Jewish History of Bardejov</a><br><br>Integer velit. Vestibulum nisi nunc, accumsan ut, vehicula sit amet, porta a, mi. Nam nisl tellus, placerat eget, posuere eget, egestas eget, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In elementum urna a eros. Integer iaculis. Maecenas vel elit.
</div><!-- .sidebar#sideLeft -->
</div><!-- #middle-->
<div id="footer">
Bardejov Jewish Preservation
Committee, 905 S. Fair Oaks Avenue, Pasadena, CA 91105, USA <br>
Tel 626-773-8801 Fax 626-773-8825, Email: info@bardejov.org<br>
Copyright © 2013 Bardejov Jewish Preservation Committee <br><br>
Photos by Rivka and Ben-Zion Dorfman; Synagoga Slovakia; HFPJC; BJPC<br>
Website designed by Prarthana Panchal and Jai Dandekar
</div><!-- #footer -->
</div><!-- #wrapper -->
</body>
</html>
The CSS is
Code:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
:focus {
outline: 0;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
font: 12px/18px Calibri, Arial, Tahoma, Verdana, sans-serif;
width: 100%;
}
a {
color: blue;
outline: none;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
p {
margin: 0 0 18px
}
img {
border: none;
}
input {
vertical-align: middle;
}
#wrapper {
width: 968px;
margin: 0 auto;
}
/* HeaderLogo
-----------------------------------------------------------------------------*/
#headerlogo {
height: 97px;
background: #8588A6;
}
/* Header
-----------------------------------------------------------------------------*/
#header {
height: 95px;
background: #0079c2;
}
/* headerline3
-----------------------------------------------------------------------------*/
#headerline3 {
height: 36px;
background: #0079c2;
}
/* Middle
-----------------------------------------------------------------------------*/
#middle {
width: 100%;
height: 1%;
position: relative;
}
#middle:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
height: 0;
}
#container {
width: 100%;
float: left;
overflow: hidden;
}
#content {
padding: 0 0 0 132px;
}
/* Sidebar Left
-----------------------------------------------------------------------------*/
#sideLeft {
float: left;
width: 112px;
margin-left: -100%;
position: relative;
background: #4DA1D4;
font-size: 14px;
padding: 0px 5px 0px 5px;
font: 18px Calibri, Arial, Tahoma, Verdana, sans-serif;
}
#sideLeft a:link {color:white;} /* unvisited link */
#sideLeft a:visited {color:white;} /* visited link */
#sideLeft a:hover {color:#FF00FF;} /* mouse over link */
#sideLeft a:active {color:#0000FF;} /* selected link */
/* Footer
-----------------------------------------------------------------------------*/
#footer {
height: 100px;
background: #8588A6;
color: #ffffff;
text-align:center;
}
PM User | 2
Master Coder
Join Date: Dec 2006
Location: Alaska
Posts: 9,410
Thanks: 22
Thanked 1,765 Times in 1,749 Posts
Hello Bardejov,
IE's compatability view is like a user controlled transitional doctype. I wouldn't worry about IE not displaying correctly in compatability view since, if site dispays correctly when first seen, there would be no reason to switch.
For a program to check you code, see the links about validation in my signature line. Validating your CSS and Markup is a good start.
Not a big fan of your menu, it's way more complicated than it needs to be. See a few CSS only examples
here .
---
Instead of using negative margins to put your two columns side by side, you just need to follow the box model rule to make your floats work. See what these changes highlighted in red can do -
Code:
background: #0079c2;
}
/* Middle
-----------------------------------------------------------------------------*/
#middle {
/* width: 100%;
height: 1%; */
overflow: auto; /*to clear floats*/
position: relative;
}
/* #middle:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
height: 0;
}*/
#container {
/* width: 100%;
float: left;
overflow: hidden;*/
margin: 0 0 0 130px; }
/* #content {padding: 0 0 0 132px;}*/
/* Sidebar Left
-----------------------------------------------------------------------------*/
#sideLeft {
float: left;
width: 112px;
/* margin-left: -100%;*/
position: relative;
background: #4DA1D4;
font-size: 14px;
padding: 0px 5px 0px 5px;
font: 18px Calibri, Arial, Tahoma, Verdana, sans-serif;
}
That's based on
this example .
----> You will need to re-arrange your markup so floated #sideLeft comes first to make that column come up where it should be. Remember, floats come first.
Jump To Top of Thread
Thread Tools
Rate This Thread
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
All times are GMT +1. The time now is 07:33 AM .
Advertisement
Log in to turn off these ads.
Before you post, read our: 
