i am trying to design a page by CSS , the problem is when

Question

0

Asked: May 29, 20262026-05-29T20:29:25+00:00 2026-05-29T20:29:25+00:00

i am trying to design a page by CSS , the problem is when

0

i am trying to design a page by CSS , the problem is when i am trying to show my page on browsers otherthan Google Chrome , it doesn’t work, it shows me wrecked design page, the design only works perfectly on chrome , i used code prefixer to make my css3 code match all browsers .

here is my code

<!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>anaawez</title>
</head>
<style>
html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    height: 97%;
    background-image: url(bg.jpg);
    background-repeat-x: repeat;
    background-repeat-y: no-repeat;
    background-attachment: initial;
    background-position-x: initial;
    background-position-y: initial; /*background-origin*/
-webkit-background-origin: initial;
    -moz-background-origin: initial;

    background-origin: initial; /*background-clip*/
-webkit-background-clip: initial;
    background-color: #718693;
}

#wrapper {
    background: white;
    border: 1px solid #000;
    margin: auto;
    margin-top: 10px;
    font: 1.5em arial, verdana, sans-serif;
    width: 960px;
    height: 100%%; /*border-radius*/

-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

#header {
    height: 8%;
    background-color: white;
    font-family: verdana;
    font-size: 15px;
    margin: 10px; /*border-radius*/

-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 10px;
}

#headerleft {
    text-align: left;
    vertical-align: top;
    float: left;
}

#headerright {
    text-align: right;
    float: right;
}

#search {
    height: 5%;
    text-align: center;
}

#container {
    height: 50%;
    text-align: right;
    font-family: verdana;
    font-size: 15px;
    margin: 10px; /*border-radius*/

-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 0px;
}

#blockcontainer {
    height: 80%;
}

#blockouterleft {
    float: left;
    width: 65%;
    height: 39%;
    margin-top: 5px; /*border-radius*/

-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

#blockinnerleftleft {
    float: left;
    width: 45%;
    height: 100%;
    background-color: #FDFDFD; /*border-radius*/

-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: thin dotted #999;
    height: 100% vertical-align: middle;
}

#blockinnerleftmiddle {
    float: right;
    width: 45%;
    height: 100%;
    background-color: #FDFDFD; /*border-radius*/

-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: thin dotted #999;
}

#blockouterright {
    float: right;
    width: 35%;
    height: 39%;
    margin-top: 5px; /*border-radius*/

-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

#blockinnerrightleft {
    float: right;
    width: 84.1%;
    height: 100%;
    background-color: #FDFDFD; /*border-radius*/

-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: thin dotted #999;
}

#tagcloud {
    height: 18%;

    background-image: -webkit-linear-gradient(bottom, rgb(17,28,46) 13%, rgb(13,21,26) 66%);
    background-image: -moz-linear-gradient(bottom, rgb(17,28,46) 13%, rgb(13,21,26) 66%);
    background-image: -o-linear-gradient(bottom, rgb(17,28,46) 13%, rgb(13,21,26) 66%);
    background-image: -ms-linear-gradient(bottom, rgb(17,28,46) 13%, rgb(13,21,26) 66%);
    background-image: linear-gradient(bottom, rgb(17,28,46) 13%, rgb(13,21,26) 66%);
    -image-image background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.13, rgb(17,28,46)), color-stop(0.66, rgb(13,21,26)) );
    text-align: right;
    font-family: verdana;
    font-size: 15px; /*border-radius*/

-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 10px;
    margin: 10px;
}

#contenttext {
    margin: 3px;
    font-size: 10px;
    height: 100%;
}

#image {
    float: left;
    margin: 3px;
    font-size: 10px;
    height: 100%;
}

</style>
<body >
<div id="wrapper">
  <div id="header" >
    <div id="headerright">Login with Facebook | Contact Us| Help </div>
    <div id="headerleft"><img src="anaawez.png"  /></div>
  </div>
  <div id="search">
    <form>
      <label>ANA AWEZ</label>
      <input type="text" />
      <select name="type">
        <option name="work" value="work">work</option>
      </select>
      <input type="button" value="submit" />
    </form>
  </div>
  <div id="container">
    <div id="blockcontainer">
      <div id="blockouterleft">
        <div id="blockinnerleftleft">
        <div >
        <div id="image" ><p ><img src="dta2.png" align="left" height="90px" width="90px"/></p></div></div>
          <div id="contenttext">i want you to spread my shitty facebook application , please i need to steal your data ASAP ! :D <a href="#">view ad</a></div>
        </div>
        <div id="blockinnerleftmiddle"></div>
      </div>
      <div id="blockouterright">
        <div id="blockinnerrightleft"></div>
      </div>
      <div id="blockouterleft">
        <div id="blockinnerleftleft"></div>
        <div id="blockinnerleftmiddle"></div>
      </div>
      <div id="blockouterright">
        <div id="blockinnerrightleft"></div>
      </div>
      <div id="blockouterleft">
        <div id="blockinnerleftleft"></div>
        <div id="blockinnerleftmiddle"></div>
      </div>
      <div id="blockouterright">
        <div id="blockinnerrightleft"></div>
      </div>
    </div>
  </div>
  <div id="tagcloud">BlackBerry IPHONE 4GS SAMSUNG GALAXY SII MIDO BADER JOB PROGRAMMER </div>
  <div id="bottom"></div>
</div>
</body>
</html>

JS Fiddle reproduction of the above HTML/CSS.