SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lost on the layout in IE7

    Hi there,
    Am trying to put together this website and is only my second website so am still a bit lost with css layout. It seems to work fine in Mozilla but everything just hits the fan when its viewed in IE7(and also Opera).
    Maybe a more experienced eye will be able to help out.

    Thanks so much . Any help and insight is greatly appreciated!

    Have included the HTML and CSS below:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Mantenga Lodge</title>
    <link rel="stylesheet" type="text/css" href="styles.css" media="all" />
    </head>
    <body>
    <div id="container">
    <div id="header"><img src="images/home.gif" width=590px 70px alt="home header"/></div>
    <div id="content">
    <h1>Welcome to Mantenga Lodge</h1>
    <div id="picture"><img src="images/chalets2.jpg" width=320px height=237px alt="view of chalets with Sheba's Breast Mountain in the background."</div>
    <p>Nestled in Ezulwini Valley, the cultural heart-land of Swaziland, Mantenga Lodge is set at the foot of Sheba’s Breasts Mountain immortalized by the R. Haggard’s fable “King Solomon’s Mines”. Over looking the legendary Execution Rock, the decked restaurant offers uninterrupted views of the surrounding mountains and valleys.</p>
    <p>Because of its superb location, this country style retreat enjoys a great international vibe, offering affordable accommodation and great food for business people and tourists alike. Dedicated staff are always delighted to welcome their guests and provide them with a warm and friendly service. </p>
    <p>38 rooms situated amongst natural surroundings provide guests beautiful scenery and tranquil seclusion creating a wonderful laid back atmosphere </p>
    </div>
    <div id="navbar">
    <div id="name-box"><img src="images/mantenga_lodge.jpg" width=180px height=270px alt="Matenga Lodge. Image of a Swazi statue of a depiciting a tradional Swazi woman."/></div>
    <ul id="navigation">
    <li><a href="index.html">home</a></li>
    <li><a href="accomodation.html">accomodation</a></li>
    <li><a href="facilities.html">facilities</a></li>
    <li><a href="attractions.html">attractions</a></li>
    <li><a href="rates_reservations.html">rates & reservations</a></li>
    <li><a href="location.html">location</a></li>
    <li><a href="gallery.html">gallery</a></li>
    </ul>
    </div>

    <div id="footer">
    <ul id="footer-content">
    <li id="copyright">Copyright xxxx. All rights reserved.</li>
    <li id="contact">emaila href="mailtoxx@xxxx.com">xxxx@xxxx.com</a></li>
    <li id="designer">Designed by Panic-Panda Creative</li>
    </ul>
    </div>

    </div>
    </body>




    /*----------------------------general-styles*/

    a {
    text-decoration: none;
    }
    body p {
    color: #6e5e3f;
    font-size: 12px;
    }
    body h1{
    color: #672b2c;
    font-size: 22px;
    text-align: center
    }
    #content {
    background-color: #f3ede2;
    background-image: url('images/background_brushstroke.gif');
    background-repeat: no-repeat;
    background-position: bottom right;
    width: 570px;
    min-height: 532px;
    padding: 10px;
    margin: 0 10px 10px 0;
    float: right;
    }
    #content img {
    border-color: #d0bea2;
    border-style: solid;
    border-width: 3px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    /*---------------------------navbar*/
    #navbar {
    width: 196px;
    float: left;
    margin: -90px 0 10px 0;
    }
    #navbar ul {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    color:#672b2c;
    list-style: none;
    margin: 0;
    padding: 0;
    }
    #navbar a:link, a:visited {
    color: #672b2c;
    background-color: #f3ede2;
    text-decoration: none;
    }
    #navbar a:hover {
    color: #672b2c;
    font-weight: bold;
    background-color: #d0bea2;
    text-decoration: none;
    }
    #navbar a {
    text-decoration: none;
    font-size: 13px;
    display: block;
    width: 150px;
    padding: 15px;
    margin: 5px 10px 0px 10px;
    text-align: center;
    }
    /*----------------------------layout*/
    body {
    margin: 0;
    padding: 0;
    background: #d0bea2;
    min-width: 800px;
    color: #f3ede2;
    font-family: Verdana, Arial, sans-serif;
    }
    #header {
    float: right;
    width: 590px;
    margin: 10px;
    }
    #container {
    width: 800px;
    background: #6e5e3f;
    margin: 0 auto;
    padding: 0 0 5px 0;
    }

    #name-box {
    margin: 10px;
    }


    /*----------------------------footer*/
    #footer {
    color:#6e5e3f;
    font-size: 10px;
    background: #d0bea2;
    clear: both;
    width: 780px;
    margin: 10px 0px 10px 10px;
    min-height: 10px;
    padding: 10px 0px 10px 0px;
    }
    #footer-content li {
    display: inline;
    list-style: none;
    padding: 5px 10px 5px 5px;
    border-right: solid 1px #6e5e3f;
    margin: 0;
    }
    #footer-content {
    margin: 0;
    padding: 0;
    }
    #footer ul {
    margin: 0 0 0 5px;
    }
    #footer-content #designer {
    border: 0;
    }
    #footer a:link {
    color: #672b2c;
    text-decoration: underline;
    }

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Welcome to SitePoint panicpanda

    You have some serious errors in the html.

    Error fixed:
    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Mantenga Lodge</title>
    <link rel="stylesheet" type="text/css" href="styles.css" media="all" />
    </head>
    <body>
    <div id="container">
    	<div id="header"><img src="images/home.gif" width="590" height="70" alt="home header" /></div>
    	<div id="content">
    		<h1>Welcome to Mantenga Lodge</h1>
    		<div id="picture"><img src="images/chalets2.jpg" width=320 height=237 alt="view of chalets with Sheba's Breast Mountain in the background." /></div>
    		<p>Nestled in Ezulwini Valley, the cultural heart-land of Swaziland, Mantenga Lodge is set at the foot of Shebas Breasts Mountain immortalized by the R. Haggards fable King Solomons Mines. Over looking the legendary Execution Rock, the decked restaurant offers uninterrupted views of the surrounding mountains and valleys.</p>
    		<p>Because of its superb location, this country style retreat enjoys a great international vibe, offering affordable accommodation and great food for business people and tourists alike. Dedicated staff are always delighted to welcome their guests and provide them with a warm and friendly service. </p>
    		<p>38 rooms situated amongst natural surroundings provide guests beautiful scenery and tranquil seclusion creating a wonderful laid back atmosphere </p>
    	</div>
    	<div id="navbar">
    		<div id="name-box"><img src="images/mantenga_lodge.jpg" width=180 height=270 alt="Matenga Lodge. Image of a Swazi statue of a depiciting a tradional Swazi woman." /></div>
    		<ul id="navigation">
    			<li><a href="index.html">home</a></li>
    			<li><a href="accomodation.html">accomodation</a></li>
    			<li><a href="facilities.html">facilities</a></li>
    			<li><a href="attractions.html">attractions</a></li>
    			<li><a href="rates_reservations.html">rates & reservations</a></li>
    			<li><a href="location.html">location</a></li>
    			<li><a href="gallery.html">gallery</a></li>
    		</ul>
    	</div>
    	<div id="footer">
    		<ul id="footer-content">
    			<li id="copyright">Copyright xxxx. All rights reserved.</li>
    			<li id="contact">emaila <a href="mailto:xx@xxxx.com">xxxx@xxxx.com</a></li>
    			<li id="designer">Designed by Panic-Panda Creative</li>
    		</ul>
    	</div>
    </div>
    </body>
    </html>
    And a character set isn't defined. E.g:
    Code HTML4Strict:
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    Happy ADD/ADHD with Asperger's

  3. #3
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much erik.j! It was seriously doing my head in...guess i still have a LOT to learn.
    Thanks again


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •