Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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

    Code:
    <?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 ) but I will be eternally grateful to anyone that can help even one of these issues. Thanks so much!

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Why don't you...copy a live blog from blogger & replace the CSS with yours? Believe me, it's kinda hard to guess blindly

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    You do have BODY twice in your style sheet.
    Your css is not enclosed in <style type="text/css"></style> tags.

    Frank

    Code:
    body {
      margin:0;
      font:$bodyfont;
      background:$bgcolor;
      color:$textcolor;
    }
    Code:
    body
    { margin-top: 0;
      margin-bottom: 0;
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;
      background-color: #566D4D;
    }
    Last edited by effpeetee; 12-29-2007 at 05:01 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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))
    Last edited by Venice7; 12-29-2007 at 05:12 PM.

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    http://validator.w3.org/check?uri=ht...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
    Last edited by effpeetee; 12-29-2007 at 05:59 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The thing is, most of those errors have to do with the content of the page, not the template.

    ...so confusing. >_<

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by Venice7 View Post
    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
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •