#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Location
    The Netherlands
    Posts
    114
    Rep Power
    11

    My site works perfectly in FF but not in IE6/7/8 *FIXED*


    The problem is fixed now

    Hello,

    In the last few days I made this website:
    http://www.gambiaguesthouse.nl/index.php?site=home

    I tested it with firefox and once a day i tested it with IE.
    Now the site works like a charm in Firefox but after the changes I made today It doesn't work under IE. The width of the site is not correct in IE.

    This is the CSS code of the website, if I remove the "#all..." part that I made bold the width is correct, but then the site gets very ugly.
    When I put the "#all..." part back the width of the site isn't correct in IE.

    De W3C CSS checker gives no errors

    I hope somebody can see what I do wrong, I am working to figure this out for 2 hours now and I can't find out what the problem is

    Hope you guys can tell me what I did wrong with my CSS code.

    Code:
    body { font-family: verdana; background-color: #bbdaf9;  margin: 0; padding: 0; }
    #all { color: #062A4E; font-size: 14px; background-color: #e9f3fe; position: relative; width: 632px; min-height: 609px; margin: 7px auto 30px; padding: 202px 167px 10px 204px; }
    #head { position: absolute; top: 0; right: 0; width: 1003px; height: 187px; padding-top: 5px; background-image:url(img/titel.jpg); }
    #footer { position: absolute; top: -500px; }
    #con { background-color: #f3f7fb; width: 100%; min-height: 620px; }
    
    #add { position: absolute; top: 198px; padding-top: 4px; right: 0; width: 165px; height: 605px;  }
    #menu { position: absolute; top: 198px; left: 0; padding-top: 4px; right: 0; width: 200px; height: 150px; }
    #login { position: absolute; font-size: 14px; top: 348px; left: 0; width: 190px; background-color: #e0eefc; border-style:solid; border-color:#f3f8fe;}
    #rotating { position: absolute; top: 470px; left: 0; padding-left: 5px; padding-top: 4px; right: 0; width: 200px; height: 350px; }
    
    a { color: #c40000; font-size: 10px; text-decoration: none; margin: 0; padding: 0; border-width: 0; cursor: pointer; }
    a:hover { color: #c40000; }
    .whitetb { color: white; }
    img { margin: 0; padding: 0; border-width: 0; }
    
    li { list-style:none; float: left; text-align: center; border-style:solid; border-color:#f3f8fe; }	
    ul { border-top: 0px solid #FFF; width: 195px; height: 145px; background: #e0eefc; margin: 0;  padding: 0; }
    	
    a.menuitem { padding-top: 3px; font-size: 16px; color: #062A4E; text-decoration: none; font-weight: bold; display: block; width: 190px; height: 27px; }
    a.menuitem:hover { background: #DCEFF8; color: #116086; }
    And this is the HTML source code of my website:
    PHP Code:
    <html>
    <
    title>GambiaGuesthouse.nl</title>
    <
    link href="stylesheet.css" rel="stylesheet" type="text/css">
    </
    head>
    <
    body>
    <
    div id="all">

    <
    div id="head"></div>

    <
    div id="menu">
                <
    ul>
                    <
    li> <class="menuitem" href="index.php?site=home" title="Home">Home</a> </li>

                    <
    li> <class="menuitem" href="index.php?site=links" title="Links">Links</a> </li>
                    <
    li> <class="menuitem" href="index.php?site=toevoegen" title="Guesthouses">Guesthouses</a> </li>
                    <
    li> <class="menuitem" href="index.php?site=contact" title="Contact">Contact</a> </li>
                </
    ul>    

    </
    div>

    <
    div id="rotating">
    <
    img src="img/rotate1.jpg" id="rotate"></div>

    <
    div id="login">
    <
    form target="index.php?site=login" method="POST">
    Gebruiker:<br>
    <
    input type="text" name="gebruiker" size="27" /><br>
    Wachtwoord:<br>
    <
    input type="password" name="wachtwoord" size="27" /><br />
    <
    input type="submit" value="Log In" />
    </
    div>


    <
    div id="add">
    add comes here
    </div>

    <
    div id="con">            
    <
    b>Gambia</b><br /><br />
    Het is een prachtig landwaar je avontuurlijke dingen kan doenMaar vooral lekker uitrusten op de prachtige stranden.
    <
    br>Het is een geweldig gastvrij land.De plaatselijke bevolking bezit een unieke gave.ze kunnen in het nu leven,en genieten van het moment.</p>
    <
    p>Dan is er voor je gevoel even geen verleden en ook geen toekomst,alleen het NU en dan kan je echt leven in zijn puurste vorm,je openen en gelukkig zijn,en dit kunnen de mensen in Gambia.
    <
    br>Daarom vind ik dit zo een mooi land,het is prachtig om te zien hoe deze mensen kunnen genietendankbaar zijn een groot goed is.</p>
    <
    p>
    Op deze website vindt u een zo groot mogelijk overzicht van Guesthouses in the Gambia.</p>

    <
    p>Guesthouses zijn huisjes die verhuurd worden meestal door de lokale bevolking en zijn meestal een stuk lager geprijsd van de hotels in Gambia
    <br>Ook als u met een groot gezelschap van plan bent om naar Gambia te gaan is een Guesthouse de perfecte manier om te verblijven in Gambia.</p></div>      

    </
    body>
    </
    html
    Last edited by dyna_byte; May 20th, 2009 at 08:40 AM.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Location
    The Netherlands
    Posts
    114
    Rep Power
    11
    I found out what the problem was.
    I guesed the only way to find the error is to take my website from yesterday and to put every new line I coded in one by one and see where the error comes from.

    And I found out I barely changed my CSS code but the problem was this piece of code :

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//NL" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml"
    I removed this code yesterday, but that is what caused IE to show my website improperly.
    Anyway It's fixed now and the site is looking the same in: IE, Firefox, Chrome and Opera now.
    As far as I know the code is OK but if you guys see any errors in my HTML or CSS code please let me know!

    The site:
    http://www.gambiaguesthouse.nl/index.php?site=home
    Last edited by dyna_byte; May 20th, 2009 at 08:40 AM.
  4. #3
  5. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,230
    Rep Power
    2179
    Your page is in quirksmode BECAUSE you removed the doctype. If you add it back in, that is how the site is supposed to display..then try validating your HTML..
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR

IMN logo majestic logo threadwatch logo seochat tools logo