TECH Website Coding Help

[jaspirr]

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...

Here is the styles.css:

@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
}

 

[jaspirr]

P.S. I'll PayPal $10 to whoever gives me a successful solution to the problem.

 

[Krakerjak]

3 quick changes

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:

#pnlBanner .logo {
        float:left;
        margin-top:5px;
        margin-left:1px;
        height:190px;
        width:1200px;
        background:url(../Images/logo2.gif) top left no-repeat;
    }

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

 

[jaspirr]

Great, thanks so much. Let me see if this works.

edit: Sort of works. Sending you a PM.