Logo won't position correctly in Firefox

**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)

Firefox (incorrect positioning)

Here's the code:

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">

**pegasus58** · 07-05-2007, 06:20 AM

In #topsection try adding clear:both and may be also float:left.

Mark.

**techno_race** · 07-07-2007, 05:00 PM

PLEASE: Include the URL to your problematic webpage that you want help with.
Just the code might not help most of us much.

Thread: Logo won't position correctly in Firefox

Thread Tools

Search Thread

Logo won't position correctly in Firefox

Bookmarks

Bookmarks

Posting Permissions