I'm in the process of trying to convert my html table based website ( The Joke Jukebox ) to a CSS positioned layout.
I've made some progress, but I am having some issues. First, the positoning of the category listing appears correctly in IE and Opera, but Firefox seems to be having issue with it. The sidebar_head1 Random Joke appears to start in the top left corner rather than under the header portion. Is there something I'm missing, or is there a Firefox hack that I need to employ to fix this?
Being the CSS novice that I am, I am not sure how to get the 'main' div to be positoned to the right of the category menu on the left. This data appears immediately after the category listings.
If you could, please take a look at this link or the following code:
Code:
<!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>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
background-image:url(images/bg.gif);background-repeat:repeat-x;
}
.sidebar_head1 { background: #0000E7 url(/images/sidebar_head-left.gif) no-repeat top left; }
.sidebar_head2 {
background: url(/images/sidebar_head-right.gif) no-repeat top right;
font-family: Arial, Verdana, sans-serif;
font-size: 8pt;
font-weight: bold;
color: #FFF;
padding: 2px 2px 2px 5px;
}
.sidebar_content {
background-color: #F1F3F7;
border: 1px solid #0000E7;
font-size: 8pt;
font-weight: bold;
color: #3C3F45;
padding: 2px;
}
ul.cat {
list-style: none;
margin-left: 5px;
padding-left: 1em;
text-indent: -1em;
line-height: 1.3em;
}
li {
font-family: Arial, Verdana, sans-serif;
font-size: 8pt;
font-weight: bold;
}
-->
</style>
</head>
<body>
<center>
<div style="text-align:center;width:800px;">
<div style="margin:0 auto;text-align:left;">
<img src="images/logo.gif" alt="" style="float:left;" />
<div style="float:left;width:480px;height:64px;padding:3px">
Google ad code here.
</div>
<div style="float:left;border:0;">
<form method="post" action="search.php" style="display:inline;">
<img src="images/search.gif" style="float:left;" />
<input type="text" name="search" />
<input type="submit" value="Go" />
</form>
</div>
</div>
</div>
</center>
<div style="width: 15%;">
<div class="sidebar_head1" align="center" ><div class="sidebar_head2">
Random Joke
</div></div>
<div class="sidebar_content" id="randomjoke" align="center">
<a href="/jokes/797.php">Efficiency expert</a>
<br />
</div>
<br />
<div class="sidebar_head1" align="center"><div class="sidebar_head2">
Joke Categories
</div></div>
<div class="sidebar_content" align="left">
<ul class="cat">
<li><a href="/category/28.php">• Animal Antics</a></li>
<li><a href="/category/1.php">• Bar and Drinking</a></li>
<li><a href="/category/2.php">• Battle of the Sexes</a></li>
The rest of the list continues here.
</ul>
</div>
</div>
<div class="clear"> </div>
<div class="main" style="width:70%;">
I'd like this text in the white area below the blue bar. But to the right of the category listings.
</div>
</body>
</html>
Your assistance is greatly appreciated.
__________________
Check out my joke site Please login or register to view this content. Registration is FREE
|
