...

View Full Version : CSS: acting random, padding won't work, and div won't show in IE



Venice7
12-29-2007, 02:49 PM
Sigh. So I'm getting back into webdesign for the first time in a few years, and getting into CSS for the first time EVER. I managed to design and code the the layout fine on my own computer, off the internet, but once I tried to put it onto blogger... *shudder*. Everything went wonky, and after six hours or so there are a few things that refuse to happen correctly.

The Site (http://angelyngreye.blogspot.com)


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
* Blogger Template Style
*
* Simple II
* by Jason Sutter
*/

/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">

<Variable name="textcolor" description="Text Color"
type="color" default="#000" value="#000000">

<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#000" value="#000000">

<Variable name="titlecolor" description="Post Title Color"
type="color" default="#000" value="#000000">

<Variable name="footercolor" description="Date and Footer Color"
type="color" default="#555" value="#555555">

<Variable name="linkcolor" description="Link Color"
type="color" default="#58a" value="#ffffff">

<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#999" value="#e6e6e6"> Used to be #969

<Variable name="bordercolor" description="Border Color"
type="color" default="#999" value="#999999">

<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia,Serif;" value="normal normal 100% Georgia,Serif;">

<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal bold 200% Georgia,Serif" value="normal bold 200% Georgia,Serif">
<Variable name="startSide" description="Start side in blog language"
type="automatic" default="left" value="left">
<Variable name="endSide" description="End side in blog language"
type="automatic" default="right" value="right">
*/

body {
margin:0;
font:$bodyfont;
background:$bgcolor;
color:$textcolor;
}

a:link {
color:$linkcolor;
text-decoration:none;
}

a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}

a:hover {
color:$titlecolor;
text-decoration:underline;
}

a img {
border-width:0;
}

html {
padding:0px;
margin:0px;
}

body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
background-color: #566D4D;
}

#header {
position: absolute;
left: 0;
height: 324px;
width: 100%;
background:url('http://img413.imageshack.us/img413/1808/headerfinalcopyit1.jpg')no-repeat top left;
}

#menu {
position: absolute;
padding: 5px;
width: 150px;
top: 165px;
left: 310px;
z-index: 1;
}

#content {

position: relative;
width: 608px;
background:url("http://img301.imageshack.us/img301/6817/backgroundlx9.jpg") repeat-y;
top: 304px;
padding-right: 10px;
padding-left: 10px;
}


#footer {
position: relative;
float: bottom;
background:url("http://img167.imageshack.us/img167/765/footertransparentzo0.png") no-repeat bottom left;
height: 56px;
width: 100%;
}

#comments {
padding-top:30px;
color:$textcolor;
padding-bottom:0px;
margin-bottom:0px;
font-weight:bold;
}

#comments .comment-footer {
font-size:1em;
font-weight:normal;
color:$footercolor;
margin-$endSide:10px;
display:inline;
}

.comment-author {
margin-top: 3%;
}

.comment-body {
font-size:1em;
font-weight:normal;
}

.deleted-comment {
font-style:italic;
color:gray;
}
.comment-link {
margin-$startSide:.6em;
}

.feed-links {
clear: both;
line-height: 2.5em;
}

#blog-pager-newer-link {
float: $startSide;
}

#blog-pager-older-link {
float: $endSide;
}

#blog-pager {
text-align: center;
}

.clear {
clear: both;
}

.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
}


]]></b:skin>
</head>

<body>
<div id='header'>
</div>



<div id='content'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

<div id='menu'>

<b:section class='menu' id='menu' showaddelement='yes'>
<b:widget id='Profile1' locked='false' title='About The Author' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
</div>


</body>
</html>

(that's probably a complete and utter mess, huh? Ick, this CSS stuff is so hard. I don't care what people say, I think I like tables better. x_x)

Firstly:
Is it just me being amateur, or does CSS behave completely RANDOMLY sometimes??? Sometimes, out of nowhere, my "content" div would just move 20 pixels down or so, and I'd have to adjust it's position to get it in the right place. Then it would just move back UP a bit later. Arg. And don't get me started on positioning the menu div... for some reason that I fail to understand at all, it seems to consider a pixel to be more than it is, if that's possible. I would move it 10 px to the right and it would move much more that it's supposed to. I have to guess to get it in the proper position and I still have no idea why what's happening is happening.

Secondly:
The padding for the content div. AHHHHHH!!! I really need some padding on the right side, but no matter what I do, it REFUSES.

Thirdly:
In IE, the top image won't show and I have absolutely no idea why whatsoever. None.

Fourthly:
I DID have a footer that I was trying to position, but I gave up on that pretty quickly. Even so, if anyone has some tips, that would be so great.

I know I have a lot of problems (heh, perhaps in more than one way :D ) but I will be eternally grateful to anyone that can help even one of these issues. Thanks so much!

Apostropartheid
12-29-2007, 02:57 PM
Why don't you...copy a live blog from blogger & replace the CSS with yours? Believe me, it's kinda hard to guess blindly

effpeetee
12-29-2007, 03:13 PM
You do have BODY twice in your style sheet.
Your css is not enclosed in <style type="text/css"></style> tags.

Frank


body {
margin:0;
font:$bodyfont;
background:$bgcolor;
color:$textcolor;
}



body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
background-color: #566D4D;
}

Venice7
12-29-2007, 04:01 PM
CyanLight -

I tried starting from scratch, or replacing all the CSS, but I kept getting all of these XHTML errors - and since I don't know a thing about XHTML, I figured it would be smarter to go through the code and replace just the elements that I needed to. It wasn't, really, but it's done now. =P

effpeetee -

Thanks for pointing that out! I fixed it and it didn't seem to change anything, but must have complicated things.

EDIT - I just saw your edit and geez, I feel stupid. -_- The most basic of mistakes. Oy!

EDIT (again) - ((never mind what was here, another stupid mistake))

effpeetee
12-29-2007, 04:32 PM
http://validator.w3.org/check?uri=http&#37;3A%2F%2Fangelyngreye.blogspot.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

This is the W3 validator report.

Sometimes a change of Doctype will solve some of the problems, and some of them can be due to errors that are not too significant.

Frank

Venice7
12-29-2007, 05:33 PM
The thing is, most of those errors have to do with the content of the page, not the template.

...so confusing. >_<

effpeetee
12-29-2007, 06:17 PM
The thing is, most of those errors have to do with the content of the page, not the template.

...so confusing. >_<
Have you tried the css validator.

http://jigsaw.w3.org/css-validator/

It is free.

http://exitfegs.co.uk/Sources.html

There are a lot of useful sites here including the Validators

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum