Website Coding Help

Discussion in 'OT Technology' started by jaspirr, Dec 12, 2008.

  1. jaspirr

    jaspirr OT Supporter

    Joined:
    Jul 16, 2008
    Messages:
    3,321
    Likes Received:
    6
    Location:
    Delaware
    I need some help with a website I've made for my brother's new company. Basically, on certain browsers the website shows up horribly wrong, and on some it shows up perfect.

    My problem is that my website shows up perfectly when you open it with Mozilla Firefox. But it shows up really bad when you open it with Microsoft Internet Explorer(in most cases). The logo appears stuck behind the text, the links are hidden behind the content, etc.

    At my work computer(Windows XP) the website shows up correctly in both Firefox and Internet Explorer.

    At my home computer(Windows Vista) the website shows up correctly in Firefox, and shows up wrong in Internet Explorer.

    On my mother's computer(Vista) the website shows up incorrectly in Internet Explorer(she doesn't have Firefox)

    On my brother's computer(Vista) it shows up incorrectly in internet explorer(no firefox).

    I'm very new to this stuff and not too great at it. Basically for the site I had a friend make the basic layout and CSS file, then I modified the CSS and all the pages to my liking. I have run the CSS file through http://jigsaw.w3.org/css-validator/ and it runs just fine. I also run all the pages through http://validator.w3.org/ and they all show up mostly fine except each has 5 errors dealing with some < div class > issue. Not sure if that's the problem or not but it doesn't seem like it.

    Can anyone please help me with this problem? My brother has a meeting next week where he will give a link to his company's website, but if the customers open it in internet explorer..well..:rofl:.

    Here is the styles.css:

    Code:
    @charset "utf-8";
    /* CSS Document */
    
    * {
        margin:0;
        padding:0;
        font-size:15px;
        font-family:Arial, Helvetica, sans-serif;
    }
    
    body {
        background:url(../Images/body-bg.gif) top left #fff repeat-x;
    }
    
    .mainContainer {
        width:940px;
        margin-left:auto;
        margin-right:auto;
    }    .mainContainer .pnlSeperator {
            margin-top:10px;
            margin-left:150px;
            height:15px;
            width:640px;
            
        }    .pnlSeperator .pSlc {
                float:left;
                height:15px;
                width:10px;
                
            }
            .pnlSeperator .pSrc {
                float:right;
                height:15px;
                width:10px;
                
            }
    
    #pnlBanner {
        height:1px;
        width:940px;
    }    #pnlBanner .logo {
            float:left;
            margin-top:5px;
            margin-left:1px;
            height:190px;
            width:1200px;
            background:url(../Images/logo2.gif) top left no-repeat;
        }
        #pnlBanner .menuArea {
            float:right;
            height:38px;
            width:350px;
            background:url(../Images/menuArea-bg.gif) top left repeat-x;
        }    .menuArea .mALC {
                float:left;
                height:38px;
                width:15px;
                background:url(../Images/menuArea-lc.gif) top left no-repeat;
            }
            .menuArea .mALinks {
                float:left;
                height:38px;
                width:320px;
            }    .mALinks .mAHome {
                    float:left;
                    height:38px;
                    width:60px;
                    background:url(../Images/mAHome-bg.gif) top left no-repeat;
                }
                .mALinks .mAFAQ {
                    float:left;
                    margin-left:5px;
                    height:38px;
                    width:45px;
                    background:url(../Images/mAFAQ-bg.gif) top left no-repeat;
                }
                .mALinks .mAServices {
                    float:left;
                    height:38px;
                    margin-left:11px;
                    width:65px;
                    background:url(../Images/mAServices-bg.gif) top left no-repeat;
                }
                .mALinks .mAContact {
                    float:left;
                    height:38px;
                    margin-left:8px;
                    width:65px;
                    background:url(../Images/mAContact-bg.gif) top left no-repeat;
                }
                .mALinks .mAAbout {
                    float:left;
                    height:38px;
                    margin-left:6px;
                    width:55px;
                    background:url(../Images/mAAbout-bg.gif) top left no-repeat;
                }
            .menuArea .mARC {
                float:left;
                height:38px;
                width:15px;
                background:url(../Images/menuArea-rc.gif) top right no-repeat;
            }
    
    #contentsContainer {
        width:940px;
        margin-top:1px;
    }    .contentsLeftContainer {
            float:left;
            width:250px;
            
        }    .contentsLeft {
                float:left;
                width:250px;
                margin-bottom:20px;
                margin-top:1px;
                color:#416ef3;
                background:url(../Images/contentsLeft-bg.gif) top left repeat-y;
            }    .contentsLeft .cLHeader {
                    height:13px;
                    width:250px;
                    font-weight:bold;
                    background:url(../Images/contentsLeft-header.gif) top left no-repeat;
                }    .cLHeader .cLHPadding {
                        padding-top:1px;
                        padding-left:7px;
                        padding-right:7px;
                    }
                .contentsLeft .cLPadding {
                    padding-left:7px;
                    padding-right:7px;
                }
                .contentsLeft .cLFooter {
                    height:21px;         
                    width:250px;
                    background:url(../Images/contentsLeft-footer.gif) top left no-repeat;
                }
                
                .graphicAddon {
                    float:left;
                    height:400px;
                    width:250px;
                    background:url(../Images/faq1.jpg) top left no-repeat;
                }
                
                .graphicAddonTwo {
                    float:left;
                    height:400px;
                    width:250px;
                    background:url(../Images/map.gif) top left no-repeat;
                }
                
                #contentsContainer .contentsRight {
            float:right;
            width:680px;
            margin-bottom:20px;
            background:url(../Images/contentsRight-bg.gif) top left repeat-y;
        }    .contentsRight .cRHeader {
                height:32px;
                width:680px;
                font-weight:bold;
                background:url(../Images/contentsRight-header.gif) top left no-repeat;
            }    .cRHeader .cRHPadding {
                    padding-top:7px;
                    padding-left:7px;;
                    padding-right:7px;
                }
            .contentsRight .cRPadding {
                padding-left:7px;
                padding-right:7px;
            }
            .contentsRight .cRFooter {
                height:20px;
                width:680px;
                background:url(../Images/contentsRight-footer.gif) top left no-repeat;
            }
    
    .clear-both {
        clear:both;
        padding:0;
    }    
    
    #pnlFooter {
        width:940px;
        font-size:10px;
        text-align:center;
    Here is the website if you want to test it for yourself. Yes I know it's amateur hour:
    www.fsdeliveries.com
    }
     
  2. jaspirr

    jaspirr OT Supporter

    Joined:
    Jul 16, 2008
    Messages:
    3,321
    Likes Received:
    6
    Location:
    Delaware
    P.S. I'll PayPal $10 to whoever gives me a successful solution to the problem.
     
  3. Krakerjak

    Krakerjak Active Member

    Joined:
    Jul 7, 2003
    Messages:
    8,288
    Likes Received:
    0
    Location:
    Edmonton eh
    3 quick changes

    [​IMG]
    2 changes in this image

    the .logo div is moved up 2 lines.........red bar to green bar
    add the three green lines near the bottom



    also in your css file, because the .logo dive was moved you have to delete this:

    #pnlBanner

    from:



    That fixes the layout
    but you will probbably have to fix the other pages as I only tried the main page
     
  4. jaspirr

    jaspirr OT Supporter

    Joined:
    Jul 16, 2008
    Messages:
    3,321
    Likes Received:
    6
    Location:
    Delaware
    Great, thanks so much. Let me see if this works.

    edit: Sort of works. Sending you a PM.
     
    Last edited: Dec 15, 2008

Share This Page