Is this a blogger problem or CSS problem??? [Archive] - Lissa Explains it All: Web Design Forums

mizosoup

10-23-2005, 06:46 AM

Hi there

I'm using CSS in my Blogger blog and I'm having a bit of difficulty in both IE and Firefox. I'm working off a template, modifying it to suit my tastes as well as Blogger.

In Firefox, the pages all stack up ontop of each other when I try to display multiple posts, as illustrated below

In IE, the pages also stack up but with a frame. Also, the sidebar won't display (sidebar works in Firefox).

I've checked the code and it should work but I'm still an amateur. This has been posted in the CSS forum as well just in case it's in the wrong place but yeah...I'd really appreciate it if someone could go over this and point out where things are stuffing up. Thanks!

<html>
<head>
<title>Mim's Pseudo Zen Garden</title>

<script type="text/javascript" src="http://www.haloscan.com/load/mizosoup"> </script>

<style type="text/css">

body {
background:#fff url(http://img.photobucket.com/albums/v684/mizosoup/rocks.jpg) no-repeat fixed left bottom;
color:#666; margin:10px; font-style:normal; font-variant:normal; font-weight:normal; line-height:11pt; font-size:8pt; font-family:verdana, arial, helvetica, sans-serif; background-image:url(http://img.photobucket.com/albums/v684/mizosoup/rocks.jpg); background-repeat:no-repeat; background-attachment:fixed
}

a {
text-decoration:none;
background:transparent;
border-bottom:1px dashed #F4F4E4;
}

a:link {color:#788DA4;}
a:visited {color:#788DA4;}
a:hover {color:#AE7259; border-bottom:1px dashed #cccc99;}

#log {
position:absolute;
top:50px;
left:150px;
width:350px;
background:transparent;
filter: alpha(opacity=80, style=0);
-moz-opacity: 80%;
padding-bottom:15px;
}

.logbody {
background:#fff;
border:1px solid #F4F4E4;
padding:5px;
margin:0px 0px 0px 0px;
}

.title {
background:#fff;
font:10pt georgia, tahoma, arial, helvetica, sans-serif;
font-weight:bold;
color:#AEAE79;
margin:5px 0px 0px 0px;
}

.date {
color:#526B88;
font:8pt verdana, arial, helvetica, sans-serif;
font-weight:bold;
text-align:right;
background:#fff;
}

.posted {
background:#F4F4E4;
text-transform:lowercase;
text-align:center;
color:#AE7259;
font:8pt verdana, arial, helvetica, sans-serif;
margin:0px 0px 30px 0px;
padding:3px;
}

#side {
position:absolute;
top:35px;
left:520px;
width:180px;
}

.sidebody {
background:#F4F4E4;
font:8pt verdana, arial, sans-serif;
color:#6F6F4E;
padding-left:5px;
padding-right:5px;
padding-top:5px;
padding-bottom:5px;
margin:0px 0px 10px 0px;
}

.sidetitle {
background:#CCCC99;
font:10pt georgia, tahoma, verdana, arial, helvetica, sans-serif;
font-weight:bold;
color:#AE7259;
text-align:center;
text-transform:lowercase;
}

</style>
</head>
<body>

<Blogger>

<div id="log">

<BlogDateHeader>
<div class="date"><$BlogDateHeaderDate$></div>
</BlogDateHeader>

<div class="post"><a name="<$BlogItemNumber$>"></a>
<BlogItemTitle>
<div class="title">
<BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>
<$BlogItemTitle$>
<BlogItemUrl></a></BlogItemUrl>
</div>
</BlogItemTitle>

<div class="logbody">
<div>
<$BlogItemBody$>
</div>
</div>

<div class="posted">
<p class="post-footer"><em>Posted by Mim at <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a></em>
<a href="javascript:HaloScan('<$BlogItemNumber$>');" target="_self"><script type="text/javascript">postCount('<$BlogItemNumber$>'); </script></a>
<$BlogItemControl$></p>
</div>

</Blogger>

<div id="side">

<div class="sidetitle">Music</div>
Who Did You Think I Was - JM3
<div class="sidebody">

</div>

ETC. Basically repeat "music"

</div>

</body>
</html>