Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #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&nbsp;Mission","window.open('aboutus/ourmission.html', '_self');");
      mm_menu_0605192834_0.addMenuItem("History&nbsp;of&nbsp;the&nbsp;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&nbsp;History","window.open('bardejov/jewishhistory.html', '_self');");
      mm_menu_0605193018_0.addMenuItem("Early&nbsp;History","window.open('bardejov/earlyhistory.html', '_self');");
      mm_menu_0605193018_0.addMenuItem("Bardejov&nbsp;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&nbsp;May&nbsp2012","window.open('../gallery/newphotos2012.html', '_self');");
        mm_menu_0605194018_0.addMenuItem("From&nbsp;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&nbsp;May&nbsp2012","location='../gallery/newphotos2012.html'")
      mm_menu_1113121056_0.addMenuItem("From&nbsp;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 &copy; 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;
    	
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •