TECH Website Coding Help

jaspirr

Well-Known Member
Jul 16, 2008
4,580
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
}
 

Krakerjak

Active Member
Jul 7, 2003
8,280
Edmonton eh
3 quick changes

2f7ecdd184d8077a3327c70b1ace6e47.jpg

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:


Code:
#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
 
TS
TS
jaspirr

jaspirr

Well-Known Member
Jul 16, 2008
4,580
Delaware
Great, thanks so much. Let me see if this works.

edit: Sort of works. Sending you a PM.
 
Last edited:

Users who are viewing this thread

About Us

  • Please do not post anything that violates any Local, State, Federal or International Laws. Your privacy is protected. You have the right to be forgotten. Site funded by advertising, link monetization and member support.
OT v15.8.1 Copyright © 2000-2022 Offtopic.com
Served by fu.offtopic.com

Online statistics

Members online
360
Guests online
40
Total visitors
400

Forum statistics

Threads
369,586
Messages
16,897,207
Members
86,875
Latest member
Theodor