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
    Feb 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Now that page is xhtml-strict, layout changed

    I made a new layout for my page yesterday and uploaded it to the server I use this morning. It looked just as I expected, until I added all the doctype info and made it xhtml-strict.

    The page didn't validate correctly at first but after putting in a few <ul> tags it now validates fine.

    However, now that I've done this the layout has changed a bit. My navigation div isn't as long as it should be and the content div has moved over and is hidden by it.

    This is what it looks like now:

    http://zactownsend.oxyhost.com/index2.html

    And this is what it should look like:

    http://zactownsend.oxyhost.com

    Should I just resize all the divs to make them correct again, or is there an easier solution? And why is this happening?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hey zachtownsend,
    See my reply to your other post.
    Try this for now:
    Code:
    div.main {
    background-color: #474728;
    position: absolute;
    top: 150px; left: 275px;
    width: 700px; height: 100%;
    z-index: 0;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    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
    Also you can try this:
    Code:
    div.main {
    background-color: #474728;
    position: absolute;
    top: 150; left: 275;
    width: 700px; height: 100%;
    z-index: 0;
    margin-left:280px;
    margin-top: 170px;
    }
    
    .left ul {
    width:250px;
    margin-left:0px;
    }
    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

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    That's a good idea. Get rid of the ap where it's not needed... but let's get rid of the extra stuff that's not getting used too:
    Code:
    .main {
    background: #474728;
    width: 700px; 
    margin: 170px 0 0 280px;
    }
    Instead of bandaiding the #left with this-
    Code:
    .left ul {
    width:250px;
    margin-left:0px;
    }
    We can fix #left itself by specifying a px width for it like this -
    Code:
    div.left {
    background: #474728 url("left_2.png") no-repeat 5px 0;
    position: fixed;
    top: 27%; 
    left:0;
    width: 250px; 
    height: 65%;
    z-index: 5;
    padding: 50px 0 0 10px;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    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
    Well sure, if you want to get fancy
    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

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Instead of bandaiding the #left with this-
    I'm sorry Rowsdower, that did sound kind of rude.
    When the ul got your width it forced the .left to be wide enough to show the background image. That works fine but, since there is a width specified for .left anyway... might as well correct the error there.

    There is more there too.
    By making .left a % height it grows longer than the background image. Just change it from div.left in the CSS to .left and see.
    There is no point to having a % height on something in a position:fixed; div that is never going to change in sized itself. Might as well just tell .left to be the same height as the bg image in it.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    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
    Oh, I wasn't taking any offense. I couldn't agree more about the use of % heights in this application, but for the purpose of fixing the OP's initial issue I was only getting the items to shift where he wanted them. I'm lazy like that. You overachiever!
    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
    •