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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Absolute Positiong - IE Compatibility, Won't work

    My website shows up perfect in Firefox and Safari, but the left menu isn't even visible in IE. I know this is a very common problem, but I can't seem to figure it out from the help others have gotten on this forum.

    HTML:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>World Travelling Sail Boat Vagabonds - 2guys1boat Travelling the World</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="keywords" content="Your, keywords, here." />
    <meta name="description" content="Your Description Here." />
    <link rel="stylesheet" type="text/css" href="sef.css" />
    <!--
    <![CDATA[
    Javascript to replace the contents of the floating div with those of the absolutely positioned div, and clear the absolutely positioned div.  This will ensure a true two column layout.
    To ensure that the script works, place the call to the script between the <head> and </head> tags of your document.
    ]]>
    -->
    <script type="text/javascript" src="/Scripts/3_column_replace_divs.js">
    <!-- 
    //-->
    </script>
    </head>
    <body>
    <div id="bodywrapper">
    	<div id="leftcolumn"></div>
    	<div id="contentarea">
        <h1>World Travelling Sail Boat Vagabonds Perform Social Media Experiment:</h1>
    		
    		<p>Two sail boat vagabonds, Jason Argall (online marketer) and Roberto Santos (race car driver), decide to perform a social media experiment in world travel. </p>
    		<p>The mission: Travel the world by sail boat and satisfy the &quot;wanderlust itch&quot; in our vagabond bones.</p>
    		<p>The question: How long can we sustain such earth-wandering? Indefinitely?</p>
    		<p>The clincher: In order to travel the world indefinitely as two sail boat vagabonds, we must create a truly immersive social media travel site that is so great that it generates enough interest and traffic to cover our travel costs.</p>
    	  <p>Join us for the first leg of our journey: a 6-month Caribbean and South American expedition aboard the &lt;boat name&gt;.</p>
    	  <p>How will our experiment in world travel, Lifestyle Design and social media turn out? Visit our <a href="http://www.2guys1boat.com/blog">blog</a> to find out.</p>
    		<p>&nbsp;</p>
      </div>
    </div>
    <div id="leftcolumncontent">
    <p></p><br /><h2>Menu</h2> <ul>
    <li><a href="/index.html">World Travel Home</a></li>
    <li><a href="http://www.2guys1boat.com/blog">Our Blog</a></li>
    <li><a href="/forum.html">World Travel Forum</a></li>
    <li><a href="/video.html">Video Gallery</a></li>
    <li><a href="/photo.html">Photo Gallery</a></li>
    <li><a href="/shop.html">World Travel Shop</a></li>
    </ul>
    </div>
    <div id="header"><img src="images/header.jpg" alt="" width="915" height="324" /></div>
    <div id="columnsize"></div>
    <!-- 
    <![CDATA[
    Javascript to replace the contents of the floating divs (leftcolumn and rightcolumn) with those of the absolutely positioned divs (leftcolumncontent and rightcolumncontent), and clear the absolutely positioned divs.  This will ensure a true three column layout.
    You may replace the background URL and color parameters ("images/body_bg.gif" and "#3F9BCF") with the background and background color of your left and right side columns, respectively.  The first two should be left alone, however.
    IMPORTANT:  the function must be called after both the two floating columns and the two absolutely positioned columns are loaded, or it will not work. 
    ]]>
    -->
    <script type="text/javascript">
    <!-- 
    replaceDivs ("leftcolumn", "leftcolumncontent", "images/body_bg.gif", "#3F9BCF", "images/body_bg.gif", "#3F9BCF", "leftbackground", "images/body_bg.gif", "images/body_bg.gif")
    -->
    </script>
    <div id="footer">
    	<a href="/index.html">World Travel Home</a> |
    <a href="http://www.2guys1boat.com/blog">Our Blog</a> | 
    <a href="/forum.html">World Travel Forum</a> | 
    <a href="/video.html">Video Gallery</a> |
    <a href="/photo.html">Photo Gallery</a> |
    <a href="/shop.html">World Travel Shop</a><br />
    <a href="/caribbean.html">Caribbean Info</a> |
    <a href="/southamerica.html">South American Info</a> |
    <a href="/travel-books.html">Travel Books</a> |
    <a href="/news.html">Travel News</a></div>
    <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
    </script>
    <script type="text/javascript">
    _uacct = "UA-655631-9";
    urchinTracker();
    </script></body>
    </html>
    CSS:

    Code:
    body {
    	font: 75%/150% Verdana, Arial, Helvetica, sans-serif;
     	color: #2c2c2c;
    	background: #fff8e6;
    	margin: 0px;
    	padding: 0px;
    }
    a {
    	color: #ff6f00;
    	text-decoration: none;
    }
    a:visited {
    	color: #ff6f00;
    	text-decoration: none;
    }
    a:hover {
    	color: #000000;
    	text-decoration: none;
    }
    img {
    	border: none;
    }
    p {
    	padding: 0px 0px 15px;
    	margin: 0px;
    }
    h1 {
    	margin:0px;
    	
    	padding-left: 0px;
    	height: 60px;
    	font: bold 36px/100% "Trebuchet MS", Tahoma, Arial;
    	color: #ffffff;
    }
    h1 a, h1 a:visited{
    	color: #ffffff;
    	text-decoration: none;
    }
    h1 a:hover{
    	color: #ffffff;
    	text-decoration: none;
    }
    h2 {
    	color: #000000;
    	margin: 0px 0px 2px;
    	border-bottom: 1px dotted #8E5341;
        font-size:12px;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	padding-bottom: 3px;
    }
    h2 a, h2 a:visited {
    	color: #000000;
    	text-decoration: none;
    }
    h2 a:hover {
    	color: #000000;
    	text-decoration: none;
    }
    h3 {
    	color: #000000;
    	font-size:12px;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	margin: 10px 0px 5px;
    	border-bottom : 1px dotted #8E5341;
        
    }
    h4 {
    	color: #000000;
    	font-size:12px;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	margin: 10px 0px 5px;
    	border-bottom : 1px dotted #8E5341;
        
    }
    form {
    	margin:0px;
    	padding:0px;
    }
    
    
    
    
    
    
    #leftbackground {
    /* replace this value with the height of your header. */
    	margin-top:  325px;
    	margin-bottom:  0;
    	margin-left:  0;
    	margin-right:  0;
    	padding:  0;
    /* Replace URL and background color attributes with the attributes corresponding with your background URL and color, respectively */
    	color:  #fff8e6;
    /*  Replace with your choice of layout width.  */
    	width:  915px;
    }
    
    
    
    #leftcolumn {
    	float:  left;
    	width:  185px;
    	margin:  0; 
    	padding:  0;
    /* Replace URL and background color attributes with the attributes corresponding with your background URL and color, respectively */
    	background: #FFFFFF;
    	
    }
    
    
    
    
    #contentarea {
    	
    	margin-top: 329px;
    /*  Replace with your choice of content area width.  */
    	width:  715px;
    	
    	background-color:  #fff;
    	height:  1%; /*  IE hack related to float:  left bug.  */
    	float:  left;
    	border-right: 1px solid #FF6F00;
    	
    	
    }
    
    #contentarea h1 { margin: 0; padding-left: 1px; padding-top: 12px; font-size: 1.1em; color: #FF9621; }
    #contentarea h1 a { font-size: 1.1em; color: #FF9621; text-decoration: none;}
    #contentarea h2 { margin: 0; padding-left: 1px; padding-top: 0px; font-size: .8em; color: #fff; }
    
    
    #contentarea[id] {
    /* This div is in place to counter the differences in handling the middle column (#contentarea) between Firefox and IE.  IE will ignore this section, whereas Firefox will acknowledge it. */
    	float:  none;
    	margin-left:  201px;
    	margin-right:  200px;
    }
    
    #leftcolumncontent {
    	position:  absolute;
    	/* replace this value with the height of your header. */
    	left: 0;
    	top:  334px;
    	
    	
    	/* replace with the width of your left column div */
    	width:  182px;
    	/* Replace URL and background color attributes with the attributes corresponding with your background URL and color, respectively */
    	background: #FFFFFF;
    	border-left: 1px solid #FF6F00;
    }
    
    
    #leftcolumncontent li { padding: 2px 0 2px 0px;
    	border-bottom: 1px solid #E4F1F5;
    	list-style: none;
    	}
    #leftcolumncontent li a {text-decoration: none; 
    list-style: none;}
    #leftcolumncontent li a:hover {color : #FFEB31;}
    
    
    
    
    
    #columnsize {
    	clear:  both;
    /* this is the lowest possible value that will ensure three columns.  Do not lower this value, or your layout will break up. */
    	height:  1px; 
    	overflow:  hidden;
    	border:  none;
    	margin:  0; 
    	padding:  0;
    	background:  transparent;
    }
    
    #header {
    	position:  absolute;
    	top:  2px;
    	margin-left: 0;
    	/* The header can be set to either a fixed width or a liquid width.  I prefer to make the header a liquid width for aesthetic purposes, but changing it to a fixed width will not affect the layout.  This is an optional property. */
    	width:  915px;
    	/* replace this value with the height of your header. */
    	
    	/* put this in to ensure that your header doesn't overlap the body of your website. */
    	overflow:  hidden;
    	
    
    	background: #333333;
    	height: 324px;
    	border-top: 1px solid #000000;
    	border-bottom : 10px solid #fff7eb;
    	border-left: 1px solid #FF6F00;
    	border-right: 1px solid #FF6F00;
    }
    
    #footer {
    	margin:  0;
    	padding:  0;
    /*  Replace with the width of your footer.  Optional. */
    	width:  916px;
    /* Replace with the height of your footer.  Optional.  */
    	height:  50px;
    /* Replace with the background image and colour of your footer.  */
    	background:  #444;
    	color:  #FFFFFF;
    	font: .8em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    background: #444;
    margin-bottom: 5px;
    color: #fff;
    height: 50px;
    border-top : 10px solid #fff7eb;
    border-right: 1px solid #FF6F00;
    }
    
    #footer a { 
    color: #FFF;
    text-decoration: none;
    line-height: 22px;
    }

    Javascript:

    Code:
    // Functions to be used with the 2-column, liquid layout with header and footer or 
    // 2-column, fixed-width layout with header and footer at http://www.searchenginefriendlylayouts.com.
    // This code may be freely distributed and used in any commercial or non-commercial application, as long as
    // these comments are maintained.  All other comments may be removed.
    
    function clearOld (oldDivName) {
    	// hides a div and absolutely positions it outside of the viewable area of the page.
    	var oldDiv = document.getElementById(oldDivName);
    	oldDiv.style.visibility = 'hidden';
    	oldDiv.style.overflow = 'hidden';
    	oldDiv.style.display = 'none';
    	oldDiv.style.top = '-2px';
    	oldDiv.style.left = '-2px';
    	oldDiv.style.width = '1px';
    	oldDiv.style.height = '1px';
    }
    
    function replaceDivs(floatLeftDiv, absoluteLeftDiv, floatLeftDivBG, floatLeftDivBGColor, leftWrapper, leftWrapperBG) {
    	// This function replaces the contents of the floating left div with the contents of the absolutely positioned left div, followed by the same procedure with the corresponding right divs..
    	var leftDiv = document.getElementById(floatLeftDiv);
    	var oldLeftDiv = document.getElementById(absoluteLeftDiv);
    	var leftHTML = oldLeftDiv.innerHTML;
    	leftDiv.innerHTML = leftHTML;
    	// clear the inner HTML of the absolutely positioned div and hide it to be safe.
    	oldLeftDiv.innerHTML = null;
    	clearOld (absoluteLeftDiv);
    	
    }
    Any help is greatly appreciated. Thanks in advance!

    Jason

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,742
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello jargall,
    I put your CSS and markup together and IE6, IE7 and FF all show your left menu.
    The layout is pretty broken in IE6 but the menu is there.
    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

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,917
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    And this doesn’t help either:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    …
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    Switch back to XHTML 1.0 Strict at least. Everything else (except HTML 4.01 strict) is not feasible.

  • #4
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello jargall,
    I put your CSS and markup together and IE6, IE7 and FF all show your left menu.
    The layout is pretty broken in IE6 but the menu is there.
    Thanks for checking this out. Yeah, I forgot to mention this and it may be helpful in solving the problem: When I preview the site in IE 6 on from the file on my computer it shows the left menu and is the layout is broken (which is fine until I get more traffic), but when I load the site from my domain the left menu doesn't show up at all.


  •  

    Posting Permissions

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