Jayman911
06-22-2007, 02:54 PM
Hi,
I'm building a site based on one of the liquid layouts and one of the menu layouts from this site. However i can't seem to get the logo div to position itself properly in firefox. Not sure why. Here are a couple screens. First is IE and second is Firefox. Then my code. Thanks! :)
IE (correct positioning)
http://www.uquestionit.com/TempImages/IE.gif
Firefox (incorrect positioning)
http://www.uquestionit.com/TempImages/firefox.gif
Here's the code:
<style type="text/css">
body{
margin:0;
padding:0;
line-height: 1.5em;
}
.mainmenu{
margin: 0;
padding: 0;
float: left;
font: bold 12px Arial;
width: 100%;
border-bottom: 1px solid #E2A500;
border-width: 3px 0;
background: black url(Images/blockdefault.gif) center center repeat-x;
}
.mainmenu li{
display: inline;
}
.mainmenu li a{
float: left;
color: white;
padding: 6px 11px;
text-decoration: none;
border-right: 1px solid white;
}
.mainmenu li a:visited{
color: white;
}
.mainmenu li a:hover, .mainmenu li .current{
color: white;
background: transparent url(Images/blockactive.gif) center center repeat-x;
}
b{font-size: 110%;}
em{color: red;}
#topsection{
background: #fff;
height: 60px; /*Height of top section*/
border-bottom: 1px solid #E2A500;
border-width: 1px 0;
margin: 0;
padding: 1px;
}
#topsection h1{
margin: 0;
padding: 0;
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin-left: 200px; /*Set left margin to LeftColumnWidth*/
}
#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
background: #C3D9FF;
}
#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
#footer a{
color: #FFFF80;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
</style>
<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>
<!--[if IE]>
<style type="text/css">
p.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/
padding-top: 1em;
}
</style>
<![endif]-->
</head>
<body>
<div id="maincontainer">
<ul class="mainmenu">
<li><a href="#">Home</a></li>
<li><a href="#" class="current">Office Support </a></li>
<li><a href="#">Course Support </a></li>
<li><a href="#">Webmaster Tools</a></li>
<li><a href="#">Information</a></li>
<li><a href="#">Help</a></li>
</ul>
<div id="topsection" >
<table width="100%" border="0" cellspacing="0" cellpadding="2" >
<tr>
<td width="10%"><img src="Images/OOL_Logo.jpg" width="56" height="45" /></td>
<td width="90%"><strong>Office Administration Site </strong><br />
Breadcrumbs / breadcrumb
/ breadcrumb
</td>
</tr>
</table>
</div>
<div id="contentwrapper">
I'm building a site based on one of the liquid layouts and one of the menu layouts from this site. However i can't seem to get the logo div to position itself properly in firefox. Not sure why. Here are a couple screens. First is IE and second is Firefox. Then my code. Thanks! :)
IE (correct positioning)
http://www.uquestionit.com/TempImages/IE.gif
Firefox (incorrect positioning)
http://www.uquestionit.com/TempImages/firefox.gif
Here's the code:
<style type="text/css">
body{
margin:0;
padding:0;
line-height: 1.5em;
}
.mainmenu{
margin: 0;
padding: 0;
float: left;
font: bold 12px Arial;
width: 100%;
border-bottom: 1px solid #E2A500;
border-width: 3px 0;
background: black url(Images/blockdefault.gif) center center repeat-x;
}
.mainmenu li{
display: inline;
}
.mainmenu li a{
float: left;
color: white;
padding: 6px 11px;
text-decoration: none;
border-right: 1px solid white;
}
.mainmenu li a:visited{
color: white;
}
.mainmenu li a:hover, .mainmenu li .current{
color: white;
background: transparent url(Images/blockactive.gif) center center repeat-x;
}
b{font-size: 110%;}
em{color: red;}
#topsection{
background: #fff;
height: 60px; /*Height of top section*/
border-bottom: 1px solid #E2A500;
border-width: 1px 0;
margin: 0;
padding: 1px;
}
#topsection h1{
margin: 0;
padding: 0;
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin-left: 200px; /*Set left margin to LeftColumnWidth*/
}
#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
background: #C3D9FF;
}
#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
#footer a{
color: #FFFF80;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
</style>
<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>
<!--[if IE]>
<style type="text/css">
p.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/
padding-top: 1em;
}
</style>
<![endif]-->
</head>
<body>
<div id="maincontainer">
<ul class="mainmenu">
<li><a href="#">Home</a></li>
<li><a href="#" class="current">Office Support </a></li>
<li><a href="#">Course Support </a></li>
<li><a href="#">Webmaster Tools</a></li>
<li><a href="#">Information</a></li>
<li><a href="#">Help</a></li>
</ul>
<div id="topsection" >
<table width="100%" border="0" cellspacing="0" cellpadding="2" >
<tr>
<td width="10%"><img src="Images/OOL_Logo.jpg" width="56" height="45" /></td>
<td width="90%"><strong>Office Administration Site </strong><br />
Breadcrumbs / breadcrumb
/ breadcrumb
</td>
</tr>
</table>
</div>
<div id="contentwrapper">