Forums

spyderf22

Hey all, I tried following the first 3 screencasts, but with my own fake mockup to get a feel for doing it myself, but I'm having some problems with the code between Firefox 3 and IE6. I'm on a Mac, so testing cross-browser compatibility is a bit difficult. I'm using that ie4osx (http://www.kronenberg.org/ies4osx/) program.

At any rate, the columns appear to be fine in FireFox, but they looked jacked like no other in IE6.

Firefox 3.0
http://img300.imageshack.us/img300/7868/firefoxli0.jpg

~~

Internet Explorer 6
http://img261.imageshack.us/img261/3975/ie6pl5.jpg

~~

Here is my code.. I've commented out the navbar list items because they, too, are looking wonky in IE6 and their spacing is all sorts of discombobulated. This is my real first adventure into CSS layout coding.

HTML

<!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>Ethiopian Education Endeavors, Inc.</title>
    <link rel=\"stylesheet\" type=\"text/css\" href=\"stylesheet.css\" />
</head>

<body>

	<div id=\"page-wrap\">
    
    			<ul id=\"nav\">
                    <!-- <li><a href=\"#\">About Us</a></li>
                    <li><a href=\"#\">History</a></li>
                    <li><a href=\"#\">Programs</a></li>
                    <li><a href=\"#\">Future Projects</a></li>
                    <li><a href=\"#\">Governing Body</a></li>
                    <li><a href=\"#\">Contacts</a></li> -->
                </ul>
                
    <div id=\"main\">
    
        <div id=\"left-column\">
        
       		<!-- <ul id=\"quicklinks\">
            	<li><a href=\"index.htm\">Main</a></li>
                <li><a href=\"#\">Contact Us</a></li>
            </ul> -->
            <br />
            <br />
            <br />
            <br />
            <p><a href=\"#\"><img src=\"images/donate.jpg\" alt=\"Donate Now\" /></a></p>
            
        </div>
            
            <!-- End Left Column -->
            
        
        <div id=\"right-column\">
        
            <h1>Mission</h1>
            <hr />
            
            <p>	Suspendisse pulvinar interdum metus. Nullam quis enim. Duis augue odio, elementum et, venenatis nec, pellentesque vitae, diam. Maecenas lobortis, mauris vitae sodales lacinia, augue nulla mollis massa, a tincidunt mi risus eu nibh. Nullam eros purus, eleifend vitae, faucibus eget, cursus sed, ipsum. Suspendisse consequat, orci ac convallis pretium, quam dui dignissim sapien, eget malesuada urna libero id massa. Vivamus ipsum arcu, pellentesque vitae, dignissim non, ornare in, orci. Ut tincidunt congue eros. Aliquam a nulla sed enim venenatis venenatis. Suspendisse erat risus, iaculis sed, dapibus ut, suscipit quis, urna.</p><br />

	<p>Vivamus vitae metus sit amet neque auctor congue. Cras nibh mauris, feugiat sit amet, dignissim ac, lobortis pellentesque, velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p><br />

	<p>Fusce ac eros vel metus eleifend accumsan. Aliquam nec odio. Praesent lacinia mauris sit amet felis. Praesent varius blandit urna. Suspendisse libero. Nunc porttitor libero eu nisl. Vivamus posuere nisl a ante. Liquam id erat. Class aptent.</p>
        
        </div>
        
        <!-- End Right Column -->
        
        
        <div class=\"clear\"></div>
    
    </div>
    
    <!-- End Main -->
    
        <div id=\"footer\">
            <p>&copy;2008 Ethiopian Education Endeavors, Inc.</p>
        </div>
        
    <!-- End Footer -->    
    </div>
</body>
</html>

~~

CSS Stylesheet

@charset \"UTF-8\";
/* CSS Document */

* {
	margin: 0;
	padding: 0;
}

body {
	background: url(images/body_bg.jpg) repeat-x top #fdf4d8;
	font-family: Georgia, \"Times New Roman\", Times, serif;
	font-size: 14px;
}

p {
	text-indent: 2em;
	line-height: 22px;
}

h1 {
	font-size: 18px;
	font-weight: bold;
	margin-top: 5px;
	margin-bottom: 5px;
}

hr {
	margin-top: -4px;
	margin-bottom: 14px;
}

div#page-wrap {
	width: 738px;
	margin: 0 auto;
	background-color: #fffdf4;
}

.clear { 
	clear: both; 
}

ul#nav {
	height: 161px;
	background: url(images/header_bg.jpg) no-repeat;
	list-style: none;
	padding-left: 20px;
}

ul#nav li a {
	display: inline;
	width: 105px;
	margin-right: -10px;
	margin-left: 20px;
	padding: 0px;
	float: left;
	margin-top: 141px;
	color: black;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-decoration: none;
	}
	ul#nav li a:hover, ul#nav li a:active {
		color: red;
}

ul#quicklinks li a {
	font-size: 18px;
	text-decoration: none;
	padding-left: 40px;
	}
	ul#quicklinks li a:visited {
	color: black;
}

div#footer {
	background-color: #e5bf97;
	color: white;
	padding: 8px 0px 8px 0px;
	text-align: center;
}
	
div#main {
	padding-bottom: 50px;
	}
	div#main div#right-column {
	float: right;
	width: 420px;
	padding: 20px;
}

	div#main div#left-column {
	float: left;
	width: 200px;
}

img {  
	border-style: none;
}

~~

I tried having a friend help me with it, but it's driving me crazy. I feel like it's such an easy fix that takes just a few more snippets of code, but I've tried everything that someone with my skill level can do. Just FYI, the page wrap is 738px.

Please help :oops:

box

First of all, get rid of all those <br> tags - use padding or margin for positioning, not mark-up. Secondly, use a strict doctype - otherwise it'll place IE6 into quirks mode and that'll just complicate things.

In order to create two columns you don't need to use both left AND right floats - just left will do.


<div id=\"left\">
	<p>some content</p>
</div>
<div id=\"right\">
	<p>some more content</p>
</div>

and the css


#left{
		float:left;
		width:250px;
	}
	#right{
		margin-left:255px;
	}

This is a basic two-column layout, so you should be able to do everything you need to with that.
If you are setting a width on the right column, the consideration for IE6 is to remember that it can't count to 100. So when you set a width of 30% on the left and 60% on the right, IE6 sees that as 101% and forces the right column 'below' the left - so sometimes you'll have to modify (in your conditional commented stylesheet) the width of the right column.

treehouse : what would you like to learn today?

Forums

Trouble With Columns (Tried following Screencasts #1,2,3)