5 replies [Last post]
amelmgd
Offline
newbie
Last seen: 8 years 40 weeks ago
Timezone: GMT-8
Joined: 2011-02-07
Posts: 2
Points: 3

hello there
i have been working on a website and i didn't test it in IE till i finished the home page ( my bad )
and when i tested it now it's all over the place , it works in all the other major browsers
this is my code
sorry it's too long but just scan it and maybe you will tell me where is the problem!

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>APP store</title>
<link  rel="stylesheet" type="text/css" href="reset.css"/>
<link  rel="stylesheet" type="text/css" href="style.css"/>
</head>
 
<body>
 
 
 
 
<div class="header"> </div><!-- header-->
 
 
<div class="logo">
 
<img id="logo" src="images/logo.png"  alt="logo"/>
<img  id="logostatment" src="images/logo-statment.png" alt="logostatment"/>
 
</div> <!--logo-->
 
<div class="form">
<form action="send.php" method="get"/>
<span id="searchword">Search :</span> <input type="text" name="search" />
 
<img id="searchimg" src="images/search.png" alt="search"/>
 
</div><!-- form-->
 
<div class="mainmenu">
<div id="menu">
 
<ul id="mainmenu">
 
<li><a id="contact" href="#"> Contact us </a> </li>
<li> <a class="menu1" href="#"> Portfolio </a>  </li>
<li> <a class="menu1" href="#"> Services </a>  </li>
<li><a class="menu1" href="#"> About us</a>  </li>
<li><a class="menu1" href="#"> Home</a> </li>
</ul>
</div>
</div>
 
<div class="midcontent">
<h1 id="midcontenthead"> Creative Solutions to improve your online business! </h1>
<p id="firstpara">Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many</p>
<a id="logoimage" href="images/logomid.png"/>
<div id="midlinks">
<a id="midlink1" href="#">prv project </a>
<a id="midlink2" href="#"> next project </a>
<a id="midlink3" href="#">viwe Portfolio </a>
<img id="midimage" src="images/logomid.png"  alt="midimage"/>
</div>
</div>
 
<div id="aftermid">
<div id="aftermid1">
<div id="aftermidtext">
<h2> Welcome to our web site </h2>
<p id="aftermipara1"><span class="boldtext">Lorem Ipsum </span>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500.</p>
<h4 id="aftermidheading3"> Simply dummy text of the printing and typesetting industry. </h4>
<p id="aftermipara2"> 
Lorem Ipsum has been the industry's standard dummy text ever since thes, when an unknown printer.Simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since thes, when an unknown printer.</p>
<a id="linkaftermid1" href="#">Standard dummy text ever </a>
<a id="linkaftermid2" href="#">Standard dummy text ever </a>
</div>
<img id="iphoneicon" src="images/iphoneicon.png" alt="iphoneicon"/>
<img id="borderimg" src="images/5_home_09.png" alt="borderimage"/>
</div>
<div id="aftermid2">
<div id="aftermid2text">
<h1 id="aftermidheading1"> What we offer </h1>
<h4 id="aftermidheading2"> Why do we use it? </h4>
<p id="aftermipara3">
Lorem Ipsum is simply dummy text of the printing and typesetting industryhas been the indutext ever since the 1500s, when an unknown printer. Lorem Ipsum is simplti </p>
<p id="aftermipara4"> <span class="boldtext"> LoremIpsum</span> is simply dummy text of the printing and typesettm Ipsum </p>
<a id="linkaftermid3" href="#"> more info </a>
<img id="usbicon" src="images/usbicon.png" alt="usbicon"/>
</div>
<img id="iphonekeyboard" src="images/iphonekyboardicon.png" alt="iphonekeyboard"/>
</div>
</div> 
 
 
<div id="footer1">
<div id="contact1">
<h2 id="contactus"> Contact us</h2>
<img id="phoneicon" src="images/phoneicon.png" alt="phoneicon"/>
<div id="contact11">
<ul>
<li>1234 Make Believe</li>
<li>New York, NY 50210</li>
<li>United States of America</li>
</ul>
</div>
<div id="contact12">
<ul>
<li>
Tel: +1 234 567 8910</li>
<li>E-mail: </p>
<script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%6d%61%69%6c%40%79%6f%75%72%73%69%74%65%6e%61%6d%65%2e%63%6f%6d%22%3e%6d%61%69%6c%40%79%6f%75%72%73%69%74%65%6e%61%6d%65%2e%63%6f%6d%3c%2f%61%3e%27%29%3b'))</script><p></li>
</ul>
</div>
<h2 id="Testimonials">Testimonials</h2>
<p id="Testimonials11">
Lorem Ipsum is simply dummy text industry. Lorem Ipsum has been the. since the 1500s, when an unknown printer..
</p>
<div id="Testimonialsid" >
-Jhon Jhohonson, web designer
</div>
 
 
<h2 id="LinksFriends">Links Friends</h2>
 
<div id="linksfriends11" >
 
<ul>
<li>
 Make a type specimen book
 </li>
 <li>
 
It has survived not only five
</li>
<li>
 Lorem Ipsum has been the 
</li>
<li>
 Standard dummy text ever
</li>
<li>
 Make a type specimen book
</li>
</ul>
</div>
<img id="icon3" src="images/icons3.png" alt="icon"/>
<p id="donicons">
 Lorem Ipsum has been the 
Standard dummy text ever
 Make a type specimen book
</p>
<h2 id="Blogcomments"> Blog Recents Comments</h2>
<p id="comment1"> Lorem Ipsum is simply dummy text industry. Lorem Ipsum has been the. since the 1500s, when an unknown printer..</p>
<img id="twitterimg2" src="images/5_home_13.png" alt="twitter"/>
<p id="comment2">Simply dummy text industry. Lorem Ipsum has been the. since the 1500s, when an unknown printer</p>
<img id="twitterimg"  src="images/twiiteron.png" alt="twittericon"/>
 
</div>
 
 
</div>
 
<div id="footer2">
 
<div id="menufooter">
 
<ul>
<li><a href="#"> home</a></li>
<li><a href="#"> services</a></li>
<li><a href="#"> profile</a></li>
<li><a href="#"> about</a></li>
<li><a href="#"> contact</a></li>
<li><a href="#"> rssfeed</a></li>
<li id="copyright">© Copyright2011.amelalmgdmicom.All Rights Reserved</li>
</ul>
 
</div>
</div>
 
 
 
 
 
</body>
</html>

my CSS

.header {
        width: 100%;
        height: 120px;
        background: url(images/bg_header.gif); }
 
.logo {
        padding-top: 9px;
        width: 100px;
        height: 420px;
        position: absolute;
        top: 0;
        left: 100px; }
 
#logostatment {
        position: absolute;
        top: 50px;
        left: 130px; }
 
form {
        background: url(images/formBg.png);
        margin: 0px ;
        padding: 0px;
        width: 277px;
        height: 76px;
        position: absolute;
        top: 0px;
        left: 800px; }
 
span#searchword {
        color: #c2c6ca;
        padding-left: 15px; }
 
#searchimg {
        margin-top: 15px;
        position: relative;
        top: 3px; }
 
.mainmenu {
        height: 47px;
        margin-right: 200px;
        padding: 0;
        margin-top: -10px; }
 
#menu ul li {
        display: inline ;
        float: right;
        padding: 10px; }
 
        #menu ul li a {
                float: right;
                text-decoration: none;
                color: #6e6e6e;
                border-right: 1px #900;
                padding: 5px 5px 10px 5px; }
 
#contact {
        padding-right: 10px;
        border: #000 4px; }
 
#menu a:hover {
        background: #4c5964;
        color: #FFF;
        padding: 5px 5px 10px 5px; }
 
.menu1 { border-right: 3px #C33; }
 
.midcontent {
        margin: 0;
        padding: 0;
        background: #f4f4f4 url(images/MID.png);
        height: 285px; }
 
h1#midcontenthead {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 30px;
        color: #424a55;
        font-weight: bold;
        width: 440px;
        position: absolute;
        top: 180px;
        left: 550px; }
 
#firstpara {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
        color: #90989e;
        width: 500px;
        position: absolute;
        top: 260px;
        left: 550px; }
 
#midlinks {
        padding: 0;
        margin: 0;
        height: 25px;
        width: 335px;
        position: absolute;
        top: 360px;
        left: 600px; }
 
#midlink1 {
        background: url(images/preporvect.png)no-repeat ;
        margin: 11px;
        text-decoration: none;
        color: white;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        padding: 5px 12px; }
 
#midlink2 {
        background: url(images/next.png) no-repeat ;
        margin: 10px;
        text-decoration: none;
        color: white;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        padding: 5px 7px; }
 
#midlink3 {
        background: url(images/viweprofile.png)no-repeat;
        margin: 10px;
        text-decoration: none;
        color: white;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        padding: 5px 10px; }
 
#midlink1:hover ,#midlink2:hover,#midlink3:hover {
        color: #FFF;
        background: #CCC; }
 
#midimage {
        position: relative;
        top: -180px;
        left: -400px; }
 
#aftermid {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 700px;
        background: #fff; }
 
#aftermid1 {
        width: 100%;
        height: 350px; }
 
h2 {
        font: normal 30px Arial, Helvetica, sans-serif;
        color: #424a55;
        margin: 30px;
        margin-left: 200px; }
 
#aftermipara1 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        width: 340px;
        color: #656565;
        margin: 20px;
        margin-left: 200px; }
 
#boldtext { font-weight: bold; }
 
#aftermidheading3 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        font-weight: bold;
        margin: 20px;
        color: #646464;
        margin-left: 200px; }
 
#aftermipara2 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        width: 550px;
        color: #656565;
        margin: 20px;
        margin-left: 200px; }
 
#linkaftermid1 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        color: #3f91b4;
        margin: 10px;
        position: relative;
        left: 180px;
        padding: 10px; }
 
        #linkaftermid1:before { content: url(images/linkdot.png); }
 
#linkaftermid2 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        color: #3f91b4;
        margin: 10px;
        position: relative;
        left: 180px;
        padding: 10px; }
 
        #linkaftermid2:before { content: url(images/linkdot.png); }
 
#iphoneicon {
        position: absolute;
        left: 800px;
        top: 450px; }
 
#borderimg {
        position: relative;
        top: 400px;
        left: 290px; }
 
#aftermid2 {
        width: 100%;
        height: 300px; }
 
#aftermidheading1 {
        font: normal 30px Arial, Helvetica, sans-serif;
        color: #424a55;
        margin-top: 40px;
        margin-left: 250px; }
 
#aftermidheading2 {
        font: normal 20px Arial, Helvetica, sans-serif;
        color: #424a55;
        margin-top: 40px;
        margin-left: 250px; }
 
#aftermipara3 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        width: 570px;
        color: #656565;
        margin: 20px;
        margin-left: 250px; }
 
#aftermipara4 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        width: 570px;
        color: #656565;
        margin-top: 50px;
        margin-left: 380px; }
 
#iphonekeyboard {
        float: right;
        position: absolute;
        left: 100px;
        top: 890px; }
 
#usbicon {
        position: relative;
        top: -50px;
        left: 140px; }
 
#linkaftermid3 {
        background: url(images/next.png) no-repeat ;
        margin: 10px;
        text-decoration: none;
        color: white;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        padding: 5px 7px;
        position: relative;
        top: -20px;
        left: 250px; }
 
        #linkaftermid3:hover {
                color: #FFF;
                background: #CCC; }
 
#aftermid2text {
        position: absolute;
        top: 860px ;
        left: 310px; }
 
#aftermidtext {
        position: absolute;
        top: 470px;
        left: 35px; }
 
#footer1 {
        width: 100%;
        height: 500px;
        background: #5b6873; }
 
#contactus {
        color: white;
        padding-top: 150px;
        margin-left: 100px; }
 
#phoneicon {
        position: absolute;
        left: 100px;
        top: 1330px; }
 
#contact11 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        color: #ced2d5;
        position: absolute;
        top: 1310px;
        left: 300px; }
 
        #contact11 ul li:before { content: url(images/5_home.jpg); }
 
#contact12 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        color: #ced2d5;
        position: absolute;
        top: 1310px;
        left: 500px; }
 
        #contact12 ul li:before { content: url(images/5_home.jpg); }
 
#Testimonials {
        color: white;
        margin-left: 830px;
        margin-top: -66px; }
 
#Testimonials11 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        color: #ced2d5;
        position: absolute;
        top: 1340px;
        left: 830px;
        width: 200px;
        font-style: italic; }
 
#Testimonialsid {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 15px;
        color: #bdc3c7;
        position: absolute;
        top: 1440px;
        left: 930px;
        font-weight: bold;
        font-style: italic; }
 
#Blogcomments {
        color: white;
        position: absolute;
        top: 1480px;
        left: 430px; }
 
#comment1 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #bdc3c7;
        position: absolute;
        top: 1580px;
        left: 630px;
        font-style: italic;
        width: 450px; }
 
#comment2 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #bdc3c7;
        position: absolute;
        top: 1640px;
        left: 630px;
        font-style: italic;
        width: 450px; }
 
#twitterimg {
        position: absolute;
        left: 580px;
        top: 1580px; }
 
#twitterimg2 {
        position: absolute;
        left: 580px;
        top: 1640px; }
 
#LinksFriends {
        color: white;
        position: absolute;
        top: 1480px;
        left: -90px; }
 
#linksfriends11 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #bdc3c7;
        font-style: italic;
        position: absolute;
        top: 1570px;
        left: 120px; }
 
#donicons {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #bdc3c7;
        font-style: italic;
        position: absolute;
        top: 1620px;
        left: 360px;
        width: 200px; }
 
#icon3 {
        position: absolute;
        top: 1560px;
        left: 380px; }
 
#footer2 {
        height: 30px;
        width: 100%; }
 
        #footer2 #menufooter ul {
                margin-left: 100px;
                margin-top: 10px; }
 
                #footer2 #menufooter ul li {
                        display: inline;
                        padding: 10px; }
 
                        #footer2 #menufooter ul li a {
                                color: #919aa1;
                                font-size: 14px;
                                text-align: center; }
 
#copyright {
        color: #919aa1;
        font-size: 14px;
        margin-left: 300px; }
 
#footer2 #menufooter ul li a:hover { color: #4c5964; }
 

thank you very much

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 33 weeks 2 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

I'll bet you didn't validate.

I'll bet you didn't validate.

MrRout
MrRout's picture
Offline
newbie
Last seen: 8 years 38 weeks ago
Timezone: GMT+5.5
Joined: 2011-01-20
Posts: 9
Points: 12

Why you are using so many time "POSITION:ABSOLUTE;

Dear amelmgd,

I let you know here one thing the position property is using for layer defining. So try to make your web page without using this css properties (position:absolute).

Here the problem is happening this the reason only, please remove all these tag and code it once again.

thank
MrRout

amelmgd
Offline
newbie
Last seen: 8 years 40 weeks ago
Timezone: GMT-8
Joined: 2011-02-07
Posts: 2
Points: 3

thanx i did validate my

thanx i did validate my website before i come and post here
and i will try to remove the positioning properties

djsounds02
djsounds02's picture
Offline
Enthusiast
Burnley, UK
Last seen: 8 years 3 weeks ago
Burnley, UK
Joined: 2010-06-17
Posts: 110
Points: 134

Sorry but the only input I

Sorry but the only input I have is surprise surprise.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 33 weeks 2 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

amelmgd wrote: thanx i did

amelmgd wrote:

thanx i did validate my website before i come and post here ...

Well, then please post the valid code.