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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Take Pity? CSS/Blogger

    I'm a total newb at this. I know just enough CSS to get myself into trouble but not enough to get myself out. No, scratch that.
    I know how to follow tutorials on CSS enough to get myself into trouble, but not back out again.

    Does anybody know what they're doing as far as CSS on Blogger and would be willing to help me with 3 problems?
    1. Aligning a fixed header
    2. Adding a fixed, third column
    3. Fixing a display problem with my background vs. main body


    Here's my test site: http://testddork.blogspot.com/

    The header problem is pretty obvious.
    The reason I want a fixed third column is to have a nav menu on the left under the illustration.
    The background problem only happens on some computers (mine is not one of them). On some the speech bubble in the back ground ends while the main body continues on, but the main body is thinner than the bubble so it looks weird. Does that make any sense?

    If anybody can and is willing to help me out I'll be eternally grateful.

    Let me know, and I'll post my code.

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Hello and welcome to the forums! I'll start at the beginning, which is a very good place to start:

    If you are asking someone to do the work completely for you then you should consider having this thread moved to the small job paid work forum. You will see a lot better response for that type of request if you put money behind it.

    Alternatively, (and preferably) if you want to learn how to manage your site's appearance yourself, then you have come to the right place but be prepared to work. You need to ask specific questions to get specific answers and we will talk you through the process. This is the version of help that comes "free."

    Now, the first free bit of advice is this:
    Validate your page before you even start with the CSS. If your page is invalid then CSS will be much more likely to be inconsistent between browsers and you currently have 360 errors and 96 warnings:
    http://validator.w3.org/check?uri=ht...ss=1&verbose=1

    Don't worry, that number will sometimes drop by 10 by fixing one single error. You probably don't need to actually make 360 changes to the page.

    When that all of the HTML checks out, post back here (and if you want the work done for you, hands-free, ask a mod to move this thread to the paid work forum as suggested above) and the CSS help will come as fast as you absorb it.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Rowsdower! View Post
    Validate your page before you even start with the CSS.
    I don't even know what that means. I looked at the link you gave and my eyes kind of glazed over at all the stuff I didn't understand.

    I would say go ahead and move my thread to the paid work section...but I have no idea how much to even offer for something like this.

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by domesticdork View Post
    I don't even know what that means. I looked at the link you gave and my eyes kind of glazed over at all the stuff I didn't understand.

    I would say go ahead and move my thread to the paid work section...but I have no idea how much to even offer for something like this.
    Seriously? Come on! I doubt you made it this far in life by giving up whenever you see something that you don't immediately understand. Why let this beat you?

    As with any problem just take it one step at a time when you are trying to learn the process. For example, the first 2 errors and 4 warnings listed in the validator are related to Line 4 (your javascript). This is the script you have:
    Code:
    <script type="text/javascript">(function() { var a=window;function f(e){this.t={};this.tick=function(d,b,c){var i=c?c:(new Date).getTime();this.t[d]=[i,b]};this.tick("start",null,e)}var g=new f;a.jstiming={Timer:f,load:g};try{a.jstiming.pt=a.external.pageT}catch(h){};a.tickAboveFold=function(e){var d,b=e,c=0;if(b.offsetParent){do c+=b.offsetTop;while(b=b.offsetParent)}d=c;d<=750&&a.jstiming.load.tick("aft")};var j=false;function k(){if(!j){j=true;a.jstiming.load.tick("firstScrollTime")}}a.addEventListener?a.addEventListener("scroll",k,false):a.attachEvent("onscroll",k); })();</script>
    You need to keep the HTML validator (and subsequently the browsers of your users) from trying to read and interpret your javascript as HTML.

    Search google - in general terms - for the problem you are experiencing.
    For example, search "javascript html validator error" and this is the very first hit returned:
    http://htmlhelp.com/tools/validator/problems.html <-- first hit and gives the right answer!

    You don't need to know any techinical name for the problem. After one simple, intuitive search you'll find that you need to either use HTML comments hidden behind javascript line comments like this:
    Code:
    <script type="text/javascript">
    //<!--
    (function() { var a=window;function f(e){this.t={};this.tick=function(d,b,c){var i=c?c:(new Date).getTime();this.t[d]=[i,b]};this.tick("start",null,e)}var g=new f;a.jstiming={Timer:f,load:g};try{a.jstiming.pt=a.external.pageT}catch(h){};a.tickAboveFold=function(e){var d,b=e,c=0;if(b.offsetParent){do c+=b.offsetTop;while(b=b.offsetParent)}d=c;d<=750&&a.jstiming.load.tick("aft")};var j=false;function k(){if(!j){j=true;a.jstiming.load.tick("firstScrollTime")}}a.addEventListener?a.addEventListener("scroll",k,false):a.attachEvent("onscroll",k); })();
    //-->
    </script>
    or else use the CDATA tags like this:
    Code:
    <script type="text/javascript">
    <![CDATA[
    (function() { var a=window;function f(e){this.t={};this.tick=function(d,b,c){var i=c?c:(new Date).getTime();this.t[d]=[i,b]};this.tick("start",null,e)}var g=new f;a.jstiming={Timer:f,load:g};try{a.jstiming.pt=a.external.pageT}catch(h){};a.tickAboveFold=function(e){var d,b=e,c=0;if(b.offsetParent){do c+=b.offsetTop;while(b=b.offsetParent)}d=c;d<=750&&a.jstiming.load.tick("aft")};var j=false;function k(){if(!j){j=true;a.jstiming.load.tick("firstScrollTime")}}a.addEventListener?a.addEventListener("scroll",k,false):a.attachEvent("onscroll",k); })();
    ]]>
    </script>
    Making either one of these little changes will take you down to 355 errors and 93 warnings.

    Oddly enough you have what is basically the same thing (though it's not correctly implemented) put into your style tag where it doesn't belong. This is causing 201 errors and 11 warnings itself. Frankly, since this deals with the in-page CSS you are using this might have a lot to do with some browsers skipping your style rules. Error handling is different in different browsers and some might be guessing correctly while others are just walking away from this block of code.

    If you remove the HTML comments from your style element (with ID of page-skin-1) you are already going to be down to 154 errors and 82 warnings. All of that by changing about 4 lines of code between the two fixes I just mentioned.

    If you relax and use your head you'll get through the rest just fine... Mathematically speaking I just did roughly 49% of the work for you in 2 minutes with two fixes.

    Don't be a quitter! Read up, follow the links that the validator gives you, and look at your source code. If that doesn't help, search the forums, search google, and then post a question here if you still can't find it.

    Other general concerns:
    • You have 17 <variable> tags inside of your <style> tag that are creating at least a couple of errors each.
    • You have XHTML 1.0 strict doctype while using iframes - this is not allowed under strict. Change to a different doctype or lose the iframe.
    • You have deprecated attributes in your elements that are not allowed in XHTML 1.0 strict (such as "name", "align", and "target"). Your iframe is a particularly bad offender with attributes that do not belong.
    • You have a ton of URL's in your links that have "&" in them, but you haven't encoded the character as "&amp;" to avoid browser confusion (the validator links you right to the solution and cause of this particular error but you haven't taken the time to read it).
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Posting Permissions

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