So many problems I don't know where to start!

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

Unfortunately I don't have a server yet to upload this site to so you guys can see the difference.
I designed it (stupidly) only testing in firefox and I thought "oh crap, I haven't seen this thing in IE yet." So I open it and holy sonuvagun! Tried fixing it...not workin out so well... Overwhelmed at this point. Here's the code

CSS:
Code: [ Select ]
*{
    margin: 0;
    padding: 0;
}
 
body{
    background-color: white;
    color: #1b3b74;
    background-image: url(images/bgstripe.jpg);
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}
 
#logo{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 3;
    background-color: transparent;
    width: 100%;
    padding-top: 30px;
    height: 120px;
    text-align: left;
}
 
#map{
    position: absolute;
    z-index: 2;
    width: 100%;
    padding-top: 30px;
    text-align: right;
    background-color: transparent; 
    background-image: url(images/logobg.jpg);
    background-repeat: repeat-x;
}
 
#headwrap{
    overflow: visible;
    position: absolute;
    width: 100%;
    text-align: center;
    top: 150px;
    height: 150px;
}
 
#navbarcenter{
    position: absolute;
    width: 100%;
    height: auto;
    text-align: center;
    top: 150px;
    margin-left: auto;
    margin-right: auto;
}
 
#navbarwrap{
    position: relative;
    width: 550px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}
 
#navbar{
    position: relative;
    width: 550px;
    height: 120px;
    padding: 10px;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    z-index: 6;
}
 
#bgimage{
}
 
#headerleft{
    position: static;
    top: 100px;
    z-index: 0;
    background-color: #1b3b74;
    width: 100%;
    background-image: url(images/headerbg.jpg);
    background-repeat: repeat-x;
    height: 150px;
    text-align: left;
}
 
#headerright{
    position: absolute;
    z-index: 1;
    width: 100%;
    text-align: right;
    background-color: transparent;
}
 
#bodycenter{
    position: absolute;
    width: 100%;
    height: auto;
    text-align: center;
    top: 170px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 10px;
}
 
#bodywrap{
    position: relative;
    width: 75%;
    background-color: #1b3b74;
    height: auto;
    padding: 10px;
    margin-left: auto;
    margin-right: auto;
}
 
#body{
    position: inherit;
    background-color: white;
    width: auto;
    height: auto;
    padding: 10px;
    text-align: left;
    margin-right: auto;
    margin-left: auto;
    -moz-border-radius: 10px;
    border: 1px #1b3b74 solid;
}
 
  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5.  
  6. body{
  7.     background-color: white;
  8.     color: #1b3b74;
  9.     background-image: url(images/bgstripe.jpg);
  10.     font-family: Arial, Helvetica, sans-serif;
  11.     text-align: center;
  12. }
  13.  
  14. #logo{
  15.     position: absolute;
  16.     top: 0px;
  17.     left: 0px;
  18.     z-index: 3;
  19.     background-color: transparent;
  20.     width: 100%;
  21.     padding-top: 30px;
  22.     height: 120px;
  23.     text-align: left;
  24. }
  25.  
  26. #map{
  27.     position: absolute;
  28.     z-index: 2;
  29.     width: 100%;
  30.     padding-top: 30px;
  31.     text-align: right;
  32.     background-color: transparent; 
  33.     background-image: url(images/logobg.jpg);
  34.     background-repeat: repeat-x;
  35. }
  36.  
  37. #headwrap{
  38.     overflow: visible;
  39.     position: absolute;
  40.     width: 100%;
  41.     text-align: center;
  42.     top: 150px;
  43.     height: 150px;
  44. }
  45.  
  46. #navbarcenter{
  47.     position: absolute;
  48.     width: 100%;
  49.     height: auto;
  50.     text-align: center;
  51.     top: 150px;
  52.     margin-left: auto;
  53.     margin-right: auto;
  54. }
  55.  
  56. #navbarwrap{
  57.     position: relative;
  58.     width: 550px;
  59.     height: auto;
  60.     margin-left: auto;
  61.     margin-right: auto;
  62. }
  63.  
  64. #navbar{
  65.     position: relative;
  66.     width: 550px;
  67.     height: 120px;
  68.     padding: 10px;
  69.     text-align: center;
  70.     margin-right: auto;
  71.     margin-left: auto;
  72.     z-index: 6;
  73. }
  74.  
  75. #bgimage{
  76. }
  77.  
  78. #headerleft{
  79.     position: static;
  80.     top: 100px;
  81.     z-index: 0;
  82.     background-color: #1b3b74;
  83.     width: 100%;
  84.     background-image: url(images/headerbg.jpg);
  85.     background-repeat: repeat-x;
  86.     height: 150px;
  87.     text-align: left;
  88. }
  89.  
  90. #headerright{
  91.     position: absolute;
  92.     z-index: 1;
  93.     width: 100%;
  94.     text-align: right;
  95.     background-color: transparent;
  96. }
  97.  
  98. #bodycenter{
  99.     position: absolute;
  100.     width: 100%;
  101.     height: auto;
  102.     text-align: center;
  103.     top: 170px;
  104.     margin-left: auto;
  105.     margin-right: auto;
  106.     padding-bottom: 10px;
  107. }
  108.  
  109. #bodywrap{
  110.     position: relative;
  111.     width: 75%;
  112.     background-color: #1b3b74;
  113.     height: auto;
  114.     padding: 10px;
  115.     margin-left: auto;
  116.     margin-right: auto;
  117. }
  118.  
  119. #body{
  120.     position: inherit;
  121.     background-color: white;
  122.     width: auto;
  123.     height: auto;
  124.     padding: 10px;
  125.     text-align: left;
  126.     margin-right: auto;
  127.     margin-left: auto;
  128.     -moz-border-radius: 10px;
  129.     border: 1px #1b3b74 solid;
  130. }
  131.  


html:
Code: [ Select ]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Voltec Design - Website Design, Graphic Design, Website Mainenance</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="loadContent.js" type="text/javascript"></script>
<script src="navbar.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body onload="MM_preloadImages('images/button_01.png','images/rollover_01.png','images/rollover_02.png','images/rollover_03.png','images/rollover_04.png','images/rollover_05.png')">
<div id="map">
<img src="images/map.png" alt="world map" />
</div> 
 
<div id="logo">
<img src="images/logo.png" alt="Voltec Design" />
</div>  
 
<div style="clear: both;" id="headwrap">
 
<div id="headerright">
<img src="images/headerright.jpg" alt="circle" />
</div> 
 
<div id="headerleft">
<img src="images/headerleft.jpg" alt="accent lines" />
</div>
 
<div id="bodycenter">
<div id="bodywrap" align="center">
    <div id="body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus est leo, dictum ut, pharetra sit amet, feugiat a, justo. Integer vel diam quis nunc ultricies dignissim. Nam et est. Nam sit amet massa quis nulla pretium pharetra. Nullam a orci. Donec quis nunc ut sapien euismod cursus. Nulla sem. Etiam quis nisi et lectus sodales tincidunt. Ut dignissim ipsum quis libero. Praesent a ligula non mauris eleifend aliquet. Pellentesque dui. Vivamus at arcu id quam suscipit consectetuer. In congue. Praesent vehicula nisi quis magna. Nullam nec ipsum nec lorem porta sollicitudin. Fusce ultrices, odio at facilisis sagittis, enim massa eleifend velit, sollicitudin dictum est lacus sit amet leo. Integer tincidunt enim id augue. Nullam dui.</div>
  </div>
</div></div>
<div id="navbarcenter" style="clear: both;">
<div id="navbarwrap" align="center">
<div id="navbar">
  <table border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td><a href="javascript&#058;;" target="_top" onclick="MM_nbGroup('down','group1','Company','images/rollover_01.png',1)" onmouseover="MM_nbGroup('over','Company','images/rollover_01.png','images/rollover_01.png',1)" onmouseout="MM_nbGroup('out')"><img src="images/rollover_01.png" alt="Company" name="Company" width="84" height="71" border="0" id="Company" onload="MM_nbGroup('init','group1','Company','images/button_01.png',1)" /></a></td>
      <td><a href="javascript&#058;;" target="_top" onclick="MM_nbGroup('down','group1','GraphicDesign','images/rollover_02.png',1)" onmouseover="MM_nbGroup('over','GraphicDesign','images/rollover_02.png','images/rollover_02.png',1)" onmouseout="MM_nbGroup('out')"><img src="images/button_02.png" alt="Graphic Design" name="GraphicDesign" width="84" height="71" border="0" id="GraphicDesign" onload="" /></a></td>
      <td><a href="javascript&#058;;" target="_top" onclick="MM_nbGroup('down','group1','WebSiteDesign','images/rollover_03.png',1)" onmouseover="MM_nbGroup('over','WebSiteDesign','images/rollover_03.png','images/rollover_03.png',1)" onmouseout="MM_nbGroup('out')"><img src="images/button_03.png" alt="Web Site Design" name="WebSiteDesign" width="84" height="71" border="0" id="WebSiteDesign" onload="" /></a></td>
      <td><a href="javascript&#058;;" target="_top" onclick="MM_nbGroup('down','group1','WorksOfArt','images/rollover_04.png',1)" onmouseover="MM_nbGroup('over','WorksOfArt','images/rollover_04.png','images/rollover_04.png',1)" onmouseout="MM_nbGroup('out')"><img src="images/button_04.png" alt="Works Of Art" name="WorksOfArt" width="84" height="71" border="0" id="WorksOfArt" onload="" /></a></td>
      <td><a href="javascript&#058;;" target="_top" onclick="MM_nbGroup('down','group1','Contact','images/rollover_05.png',1)" onmouseover="MM_nbGroup('over','Contact','images/rollover_05.png','images/rollover_05.png',1)" onmouseout="MM_nbGroup('out')"><img src="images/button_05.png" alt="Contact" name="Contact" width="84" height="71" border="0" id="Contact" onload="" /></a></td>
    </tr>
  </table>
</div>
</div>
</div>
</body>
</body>
 
</html>
 
  1.     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>Voltec Design - Website Design, Graphic Design, Website Mainenance</title>
  6. <link href="style.css" rel="stylesheet" type="text/css" />
  7. <script src="loadContent.js" type="text/javascript"></script>
  8. <script src="navbar.js" type="text/javascript"></script>
  9. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  10. </head>
  11. <body onload="MM_preloadImages('images/button_01.png','images/rollover_01.png','images/rollover_02.png','images/rollover_03.png','images/rollover_04.png','images/rollover_05.png')">
  12. <div id="map">
  13. <img src="images/map.png" alt="world map" />
  14. </div> 
  15.  
  16. <div id="logo">
  17. <img src="images/logo.png" alt="Voltec Design" />
  18. </div>  
  19.  
  20. <div style="clear: both;" id="headwrap">
  21.  
  22. <div id="headerright">
  23. <img src="images/headerright.jpg" alt="circle" />
  24. </div> 
  25.  
  26. <div id="headerleft">
  27. <img src="images/headerleft.jpg" alt="accent lines" />
  28. </div>
  29.  
  30. <div id="bodycenter">
  31. <div id="bodywrap" align="center">
  32.     <div id="body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus est leo, dictum ut, pharetra sit amet, feugiat a, justo. Integer vel diam quis nunc ultricies dignissim. Nam et est. Nam sit amet massa quis nulla pretium pharetra. Nullam a orci. Donec quis nunc ut sapien euismod cursus. Nulla sem. Etiam quis nisi et lectus sodales tincidunt. Ut dignissim ipsum quis libero. Praesent a ligula non mauris eleifend aliquet. Pellentesque dui. Vivamus at arcu id quam suscipit consectetuer. In congue. Praesent vehicula nisi quis magna. Nullam nec ipsum nec lorem porta sollicitudin. Fusce ultrices, odio at facilisis sagittis, enim massa eleifend velit, sollicitudin dictum est lacus sit amet leo. Integer tincidunt enim id augue. Nullam dui.</div>
  33.   </div>
  34. </div></div>
  35. <div id="navbarcenter" style="clear: both;">
  36. <div id="navbarwrap" align="center">
  37. <div id="navbar">
  38.   <table border="0" cellpadding="0" cellspacing="0">
  39.     <tr>
  40.       <td><a href="javascript&#058;;" target="_top" onclick="MM_nbGroup('down','group1','Company','images/rollover_01.png',1)" onmouseover="MM_nbGroup('over','Company','images/rollover_01.png','images/rollover_01.png',1)" onmouseout="MM_nbGroup('out')"><img src="images/rollover_01.png" alt="Company" name="Company" width="84" height="71" border="0" id="Company" onload="MM_nbGroup('init','group1','Company','images/button_01.png',1)" /></a></td>
  41.       <td><a href="javascript&#058;;" target="_top" onclick="MM_nbGroup('down','group1','GraphicDesign','images/rollover_02.png',1)" onmouseover="MM_nbGroup('over','GraphicDesign','images/rollover_02.png','images/rollover_02.png',1)" onmouseout="MM_nbGroup('out')"><img src="images/button_02.png" alt="Graphic Design" name="GraphicDesign" width="84" height="71" border="0" id="GraphicDesign" onload="" /></a></td>
  42.       <td><a href="javascript&#058;;" target="_top" onclick="MM_nbGroup('down','group1','WebSiteDesign','images/rollover_03.png',1)" onmouseover="MM_nbGroup('over','WebSiteDesign','images/rollover_03.png','images/rollover_03.png',1)" onmouseout="MM_nbGroup('out')"><img src="images/button_03.png" alt="Web Site Design" name="WebSiteDesign" width="84" height="71" border="0" id="WebSiteDesign" onload="" /></a></td>
  43.       <td><a href="javascript&#058;;" target="_top" onclick="MM_nbGroup('down','group1','WorksOfArt','images/rollover_04.png',1)" onmouseover="MM_nbGroup('over','WorksOfArt','images/rollover_04.png','images/rollover_04.png',1)" onmouseout="MM_nbGroup('out')"><img src="images/button_04.png" alt="Works Of Art" name="WorksOfArt" width="84" height="71" border="0" id="WorksOfArt" onload="" /></a></td>
  44.       <td><a href="javascript&#058;;" target="_top" onclick="MM_nbGroup('down','group1','Contact','images/rollover_05.png',1)" onmouseover="MM_nbGroup('over','Contact','images/rollover_05.png','images/rollover_05.png',1)" onmouseout="MM_nbGroup('out')"><img src="images/button_05.png" alt="Contact" name="Contact" width="84" height="71" border="0" id="Contact" onload="" /></a></td>
  45.     </tr>
  46.   </table>
  47. </div>
  48. </div>
  49. </div>
  50. </body>
  51. </body>
  52.  
  53. </html>
  54.  
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

ok everyone, I figured it out for the most part with a little help from this site:

http://www.webreference.com/authoring/style/sheets/layout/advanced/
Awesome resource for learning how to position for cross browser compatibility, includes troubleshooting for the major problems faced with IE.

Still can't figure out why my navbar is kinda off centre in FF though...oh well; back to coding 8)
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

also, you can use the W3 Validator ... and the Jigsaw CSS Validator ...
  • bilhasry4you
  • Novice
  • Novice
  • bilhasry4you
  • Posts: 33

Post 3+ Months Ago

yupz i think it should be validated first
sometimes some CSS code are not available in some browser

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 70 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.