Back To Website Design Forum

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

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post August 12th, 2008, 4:20 pm

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.  
Use your words like arrows to shoot toward your goal.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post August 12th, 2008, 4:20 pm

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post August 12th, 2008, 6:16 pm

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)
Use your words like arrows to shoot toward your goal.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post August 12th, 2008, 10:43 pm

also, you can use the W3 Validator ... and the Jigsaw CSS Validator ...
Let's leave all our *plum* where it is and go live in the jungle ...
  • bilhasry4you
  • Novice
  • Novice
  • No Avatar
  • Joined: Feb 12, 2008
  • Posts: 33
  • Status: Offline

Post August 20th, 2008, 4:44 am

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

Page 1 of 1

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 78 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.