Grow your CSS skills. Land your dream job.

Works mostly in Firefox, but won’t align in other browsers..

  • # May 19, 2009 at 3:35 pm

    It’s me again… I am still learning and will just need help for a little while…

    Anyway, I don’t know what I’ve done wrong exactly, but the page won’t all align properly when it is in other browsers. The website is: http://www.meandmyback.com/provident-living

    Here’s the HTML:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




    3 Steps to Your Success...

    1. Track

    “You cannot improve that
    which you do not track.”

    Take control of your finances with
    our easy-to-use tracking and
    budgeting software and begin the
    journey to financial freedom.

    2. Evaluate

    • Over 100 powerful calculators created by our team of highly-specialized mathematicians gives you ultimate ability to see “what if” situations.
    • Solid, provident advice in all major aspects of your financial life, provided by experts.

    3. Decide

    You will inevitably make some
    decisions on your own, but when
    it comes to your financial future,
    you want to know you’re getting
    the best advice possible.

    We are assembling the most
    qualified and wide team of
    professional advisors in one
    place than ever before.

    • Learn More
    • Learn More
    • Learn More

    People
    The Success Spiral&#0153 Go Arrow

    What is it? Learn about this
    powerful concept, and why
    it is the foundation of our
    provident philosophy, and
    your financial success!

    and now the CSS:

    Code:
    * {
    margin:0;
    padding:0;
    }
    body {
    background-color: #364565;
    }

    #container {
    margin: 0 auto;
    padding-top: 70px;
    width: 910px;
    padding-bottom:inherit;
    }
    #header {
    height: 100px;
    width: 647px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:large;
    background-color:#FFF;
    }
    #header ul {
    list-style:none;
    display:block;
    float:right;
    width: 300px;
    }
    #header ul li {
    list-style:none;
    float: right;
    display:block;
    font-size:10px;
    margin: -28px 190px 50px 0px;
    width: 90px;
    padding-left: 5px;
    padding-right: 5px;
    }
    #headerimage {
    margin:3px 25px 25px 25px;
    }
    #header-login {
    float:right;
    margin: 40px -150px 0px 20px;
    }
    #header-login ul li {
    margin: 10px;
    padding: 5px;
    }
    #main {
    float: left;
    width: 638px;
    padding: 5px;
    margin: -32px 0px 0px 0px;
    background-color:#FFF;
    }
    #main1 {
    float:left;
    width: 190px;
    padding:5px;
    margin: 5px;
    text-align:right;
    }
    #main2 {
    float: left;
    width: 190px;
    padding: 5px;
    margin: 5px;
    border-left: solid 1px #364565;
    border-right: solid 1px #364565;
    text-align:center;
    }
    #main2 ul li{
    list-style:none;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    }
    #main3 {
    float:right;
    width:190px;
    padding: 5px;
    margin: 5px;
    text-align:left;
    }

    #main-right {
    float: right;
    width:249px;
    height:410px;
    margin: -145px 0px 0px 0px;
    background-color: #FFF;
    }
    #main-right2 {
    float:right;
    width: 200px;
    height:142px;
    margin-left: 5px;
    margin-top: 12px;
    padding-bottom: 0px;
    padding-right: 0px;
    padding-top: 40px;
    padding-left: 50px;
    background-color: #E8A722;
    font-family:Arial, Helvetica, sans-serif;
    color: #364565;
    }
    #main-right2 p {
    font-weight:600;
    }
    #align {
    margin-top: 20px;
    margin-left: 150px;
    margin-bottom: 20px;
    }
    #align2 {
    margin-left: 5px;
    }
    #main-right2 h5 b a {
    text-decoration:none;
    color: #364565;
    border:none;
    }
    #main-right2 h5 b a:hover {
    color: #999;
    }
    #main-right2 h5 b a:visited {
    color: #364565;
    text-decoration:none;
    }
    #main-right2 h5 {
    padding-right: 30px;
    }
    #align3 {
    display:block;
    float:left;
    list-style:none;
    }
    #align3 ul li {
    list-style:none;
    display:block;
    float:left;
    margin: 16px 26px 16px 26px;

    }
    #h1 {
    font-family: Arial, Helvetica, sans-serif;
    margin-left:310px;
    margin-top:-140px;
    margin-bottom:12px;
    }
    .clear {
    clear:both;
    }
    p {
    font-family:Arial, Helvetica, sans-serif;
    font-size: 11px;
    }
    img {
    border:none;
    }

    # May 19, 2009 at 3:51 pm

    Start by validating:
    linky

    # May 19, 2009 at 4:22 pm

    Now it is validated, so here is the new HTML:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



    Round Arrows
    3 Steps to Your Success...

    1. Track

    “You cannot improve that
    which you do not track.”

    Take control of your finances with
    our easy-to-use tracking and
    budgeting software and begin the
    journey to financial freedom.

    2. Evaluate

    • Over 100 powerful calculators created by our team of highly-specialized mathematicians gives you ultimate ability to see “what if” situations.

      Solid, provident advice in all major aspects of your financial life, provided by experts.

    3. Decide

    You will inevitably make some
    decisions on your own, but when
    it comes to your financial future,
    you want to know you’re getting
    the best advice possible.

    We are assembling the most
    qualified and wide team of
    professional advisors in one
    place than ever before.

    • Learn More
    • Learn More
    • Learn More

    People
    The Success Spiral™ Go Arrow

    What is it? Learn about this
    powerful concept, and why
    it is the foundation of our
    provident philosophy, and
    your financial success!



    What would you suggest now?

    # May 20, 2009 at 12:42 am

    hey i will give an IE specific solution…..i am not sure whether this will work on other browsers

    paste the following code inside the head of the markup ….. right after the

    Code:

    tag ends

    Code:

    Check it with other browsers and let me know if it works or not …….Enjoy

    Edit : Forgot to mention this block of code works only for different versions of IE and these are just changes to the positions of the elements that weren’t aligned properly……..

    and remove the css code for #align3 ………………..in style.css

    # May 20, 2009 at 4:59 am

    #header and #main should be in one div together and floated left. Lose the padding on #container and give it a 70px top margin and ditch the negative margin on #main-right.

    # May 20, 2009 at 10:12 am

    CSSFREAK, your solution worked for IE only, but it is different in other browsers. I will just put one up specifically to check the browser, and if it is IE, then it will use that one – thanks!

    APOSTROPHE, if I understood what you were saying correctly, you wanted me to either combine my #header and #main, or just put the same information on both, is either one of those right? I tried using the same information for both and doing the rest that you said, but everything became really messed up at that point – I’m sure I didn’t understand what you posted correctly. If you would like to clarify, I would be happy to try more solutions.

    # May 20, 2009 at 11:12 am

    Structure the html something like this:

    Code:

    People


    and the css:

    Code:
    #container {
    margin:70px auto 0;
    width:910px;
    }

    #leftMain {
    float:left;
    width:647px;
    }

    #main-right {
    background-color:#FFFFFF;
    float:right;
    height:410px;
    width:249px;
    }

    # May 21, 2009 at 12:08 am

    apostrophe with ur solution everything goes messy in IE …..

    nchipping ma solution only works for Ie since i have given u a conditional statement that works only in Ie ……will let u know when i find a cross browser solution to this

    # May 21, 2009 at 2:26 am
    "cssfreak" wrote:
    apostrophe with ur solution everything goes messy in IE …..

    Please elaborate.

    # May 21, 2009 at 3:09 am

    the div "main" layout goes messy it doesnt show the background ……doesn’t display in the proper position …etc…. or am i missing something over here :lol:

    # May 21, 2009 at 4:47 am

    Think you must be missing something. :roll:

    I didn’t realise I was expected to re-code the whole page. All I did was correct the basic structure, I thought it was obvious that the contents would have to be adjusted to suit, my bad.

    EDIT: Just went back for another look. Have you seen how the page is put together? Images in place of lists, images in place of links and images in place of headings, all thrown directly into the html, no image replacement here! Negative margins everywhere and line breaks used inplace of margins, it’s a testament to Firefox that the page works at all!

    # May 21, 2009 at 6:24 am
    "apostrophe" wrote:
    it’s a testament to Firefox that the page works at all!

    Yes very true…….its a bad design case ….but we can only suggest a redesign and can’t spoon feed how do do effective design right…..well yes ur right kudos to firefox that it works and displays fine…..another reason to show the world that IE stone-age software :lol:

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".