Help! More of the Age Old FF vs. IE
I'm a newbie to this whole CSS thing and this forum, so forgive me if my know-how or lack of lingo shows through.
I was trying to use one of the divs I found from this site and I got it to work in IE but not in Firefox. After tinkering with it, I got it to work in FF but not IE. I feel like that old Charlie Chaplin (?) bit where he would reach for his hat and accidentally kick it away from himself as he bent down to pick it up. Anyways, here's what I've gotten.
<head>
<style type="text/css">
/*start template*/
body{
margin:0;
padding:0 150 0 150;
line-height: 1.5em;
background: #bcbcbc;
}
b{font-size: 110%;}
em{color: red;}
#topsection{
background: black;
height: 90px;
}
#topsection h1{
margin: 0;
color: yellow;
padding-top: 15px;
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin-left: 169px;
height: 840px;
background: gray;
}
#leftcolumn{
float: left;
width: 150px;
margin-left: -101%
}
#footer{
clear: left;
width: 100%;
background: black;
color: blue;
text-align: center;
padding: 4px 0;
}
#footer a{
color: #FFFF80;
}
.innertube{
margin: 10px;
margin-top: 0;
}
/*End Template*/
/* Whole Column */
#ddblueblockmenu{
border-bottom-width: 0;
background: Black;
}
#ddblueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
/* Boxes */
#ddblueblockmenu li a{
display: block;
padding: 3px 0;
padding-left: 1px;
width: 169px;
text-decoration: none;
color: white;
background-color: #2175bc;
border-bottom: 1px solid #90bade;
border-left: 7px solid #1958b7;
}
/* Hover */
#ddblueblockmenu li a:hover {
background-color: #2586d7;
border-left-color: #1c64d1;
}
/* Menu Titles */
#ddblueblockmenu div.menutitle{
color: white;
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: black;
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
</style>
</head>
<body>
<div id="maincontainer">
<div id="topsection">
<div class="innertube"><h1>CSS Liquid Layout #2.1- (Fixed-Fluid)</h1>
</div>
</div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fluid</em></b> <script type="text/javascript">filltext(45)</script>
</div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube">
<div id="ddblueblockmenu">
<div class="menutitle">Dynamic Drive</div>
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm">What's New</a></li>
<li><a href="http://www.dynamicdrive.com/revised.htm">What's Revised</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Help Forums</a></li>
</ul>
<div class="menutitle">CSS Library</div>
<ul>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image Effects</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form Effects</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">Boxes & containers</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/" style="border-bottom-color: black">Links & Buttons</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="footer">test</a></div>
</div>
</body>
</html>
Thanks in advance for any help and I apologize if I'm not posting this correctly.
CSS Codes
Reply With Quote
Bookmarks