Home/ Questions/Q 7821303
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T07:35:58+00:00

The layout is working fine only in Chrome. In IE and Firefox it does

  • 0

The layout is working fine only in Chrome. In IE and Firefox it does not work correctly and all seems to be aligned to the left and no outerwrapper is shown.

I have added the HTML code as requested

/* CSS Document */

/* Reset */

body  {background-color:#6CF; }

/* Headings */

h1, h2, h3, h4, h5, h6 (font-weigth: bold;}

h1  { font-size: 35px; color:blue }
h2  { font-size: 25px; color:blue }
h3  { font-size: 15px;  color: red;}


/* Text Elements */

a               {   }
a.link          {   }
a.visited       {   }
a.active        {   }
a.focus         {   }
a.visited       {   }
a.visited       {   }


/* container */

#outerwrapper  { width: 960px; margin:0px auto; background-color:white;   }

#wrapper       { width: 900px; margin:0px auto; background-color:white;   }

#logo       {  margin: auto; text-align: center;  }

#navigation  {   text-align: center;  }
#navigation ul li { display:inline;  }
#navigation ul{ border-top: 1px #000 solid; border-bottom: 1px #000 solid; margin-bottom:20px; }
#navigation ul a{padding: 25px;}

#navigation a               { color: #33F;  }
#navigation a.link          { color: #33F;  }
#navigation a.visited       { color: #33F;  }
#navigation a.active        { color: #33F;  }
#navigation a.focus         { color: #33F;  }
#navigation a.visited       { color: #33F;  }
#navigation a.visited       { color: #33F;  }


#banner     {margin-bottom: 30px;    }

.content   { width: 900px; margin:auto; width: 900px; float:top; text-align:center }
.content-main { width: 500px; margin:auto; font-weight:bold; font-size:20px; text-align:left}  

#news  {width: 200px; float:right; padding:0px;}  


.date {font-weight: bold;}

.footer { clear:both; padding-top: 5px; padding-bottom: 5px;}
.footer-text {text-align:center}

#mainimages {margin-top: 20px; width: 700px; float: left;}


aboutimages {margin-top: 20px; width: 700px; float: left;}

.servicesimage {width: 200px; float:left; margin-top: 40px;  margin-left:20px;}

.servicelistleft {width: 300px; float:right; margin-top: 40px; }

.servicelistright {width: 300px; float:right; margin-top: 40px; margin-left:20px; }

.centertable { width: 500px; margin:auto;
    margin-top: 30px;}

HTML

> <!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>

<div id ="outerwrapper">
   <div id="wrapper">
            <div id="logo">
                <h1><img src="images/logo.jpg" width="248" height="153" alt="Conti Computer Shop" /></h1>
            </div>

            <div id="navigation">
            <ul>
                <li><a href="index.html">HOME</a></li>
                <li><a href="about.html">ABOUT</a></li>
                <li><a href="services.html">SERVICES</a></li>
                <li><a href="contact.html">CONTACT</a></li>
        </ul>
            </div>
             <div id ="banner">
                <p><img src="images/test.jpg" width="900" height="202"/></p>
            </div>
            <div class ="content">
            <h1>Your One Stop Shop for all Computer Needs !</h1>

            <p class = "content-main">Welcome to our new website where you can find more about us, what Services we offer and contact us for more information. Rest Assured that our priority will always be to provide an excellent service at a good price. Thank You.            </p>
            </div>
            <div id = "news">
              <h2>Latest News</h2>
                <p class="date">April 20, 2012</p>
                <h3>Acer Laptops now available</h3>
                <p class="date">April 12, 2012</p>
                <h3>New Gadgets Just Arrived</h3>
                <p class="date">April 05, 2012</p>
                <h3>New HP Computers in stock</h3>
                <p class="date">April 02, 2012</p>
                <h3>Students discounts Launched</p>
            </div>
            <div id="mainimages">
                    <p>
                    <img src="images/sales.jpg" width="340" height="276" />
                    <img src="images/service.jpg" width="340" height="276" />
                    </p>

            </div>
     <div class ="footer">
            <p class="footer-text"> 2012 - Conti Design</p>
            </div>
  </div>
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    What could be the root of your problem is both your CSS and HTML are invalid. Running them through their respective W3C validators located at:

    http://validator.w3.org

    http://jigsaw.w3.org/css-validator

    turns up errors.

    For your CSS:

    11   h1, h2, h3, h4, h5  Parse Error [ (font-weigth: bold;} h1]
51   .content    Value Error : float top is not a float value : top

    First column is line numbers. For the HTML, it looks like most complaints it has stem from this one:

     Line 44, Column 51: end tag for element "p" which is not open
                <h3>Students discounts Launched</p>

    Fix your HTML and CSS, revalidate, and try again in those browsers.

    • 0