I'm developing a website and not sure what else to do here.. I am developing on a machine with 1680x1050 resolution and it looks good. However changing the resolution or trying on another machine w/ a different resolution goofs it all up. Especially the menu at the top.
Here is the site: http://wbra.pronet-systems.com/index.html
Here are the two .css files along with the index.html file. Can any of you experts help me?
Style.css
/*
Author: TemplateAccess.com (DT/TS)
*/
@charset "utf-8";
body { margin:0; padding:0; width:100%; background:#faf9f9;}
html { padding:0; margin:0;}
.main { margin:0 auto; padding:0; position:relative; z-index:2;}
/********** header **********/
.header { padding:0; margin:0; background:#232323;}
.header_resize { padding:0; margin:0 auto; width:962px;}
/* logo */
.logo {padding:0; margin:0; width:400px; float:left;}
/* rss */
.rss { text-align:right; width:215px; margin:0; padding:10px 10px 10px 0; float:left; font: normal 11px Arial, Helvetica, sans-serif; color:#7e7e7e; line-height:1.8em;}
.rss_img { float:left; margin:0; padding:20px 0 0 0;}
.rss_img img { margin:5px; padding:0;}
/*jmenu*/
.jmenu { padding:0; margin:0; position:absolute; z-index:800; float:left;}
/* body */
.body { background:#f4f7ef;}
.body_resize { width:960px; padding:10px 0; margin:0 auto;}
.body h2 { font:bold 18px Arial, Helvetica, sans-serif; color:#232323; padding:10px 0; margin:0;}
.body h2 span { display:block; font: normal 11px Arial, Helvetica, sans-serif; color:#b1b1b1; padding:0; margin:0;}
.body p { font:normal 12px Arial, Helvetica, sans-serif; color:#848484; line-height:1.8em; padding:5px 0; margin:0;}
.body p span { font-size:18px; font-weight:bold; color:#888;}
.body a { color:#89c631; text-decoration:none;}
.body img { margin:5px auto; padding:5px; background:#f8f8f8; border:1px solid #d4d4d4;}
.body img.float_left { margin:10px 10px 5px 0; padding:0; padding:5px; background:#f8f8f8; border:1px solid #d4d4d4; float:left;}
.body img.none { float:left; margin:5px 5px 5px 0; padding:0; border:none; background:none;}
.right { width:280px; margin:0; padding:0; float:right;}
.left { width:620px; margin:0; padding:0 60px 0 0; float:left;}
.port {width:280px; margin:0 29px 15px 0; padding:0 30px 0 0; float:left; border-right:1px solid #d4d4d4;}
.list_work { border-bottom:1px solid #d4d4d4;}
.last { padding:0; margin-right:0; border:0;}
/********** contact form **********/
#contactform { margin:0; padding:5px 0; }
#contactform * { color:#F00; }
#contactform ol { margin:0; padding:0; list-style:none; }
#contactform li { margin:0; padding:0; background:none; border:none; display:block; clear:both; }
#contactform li.buttons { margin:5px 0 5px 100px; clear:both; }
#contactform label { margin:0; width:100px; display:block; padding:5px 0; color:#737373; font: bold 12px Arial, Helvetica, sans-serif; float:left; }
#contactform label span { color:#d66423; font-weight:bold; }
#contactform input.text { width:450px; border:1px solid #d4d4d4; margin:5px 0; padding:5px 2px; height:16px; background:#fff; float:left; }
#contactform textarea { width:450px; border:1px solid #d4d4d4; margin:5px 0; padding:2px; background:#fff; float:left; }
#contactform li.buttons input { padding:3px 0 3px 0; margin:10px 0 0 0; border:0; color:#FFF; float:left; }
/* FBG */
.FBG { padding:0; margin:0; background:#232323;}
.FBG_resize { width:962px; margin:0 auto; padding:0;}
.FBG_resize img { float:left; margin:0; padding:0;}
.FBG_resize a { color:#89c631; text-decoration:none; font-weight:bold; }
.FBG_resize h2 { font:normal 18px Arial, Helvetica, sans-serif; color:#f0f0f0; padding:10px 0; margin:0;}
.FBG_resize p {font: normal 11px Arial, Helvetica, sans-serif; color:#919191; padding:5px 0; margin:0; line-height:1.8em;}
.FBG_resize ul { padding:0; margin:0; list-style:none;}
.FBG_resize li { padding:5px 0; margin:0; }
.FBG_resize li a { font:normal 11px Arial, Helvetica, sans-serif; color:#757575; padding:5px 0 5px 0; margin:0;text-decoration:none;}
.FBG_resize li a:hover { color:#89c631; text-decoration:none;}
.FBG_resize .blog { width:210px; float:left; margin:0; padding:15px 40px 15px 0;}
.FBG_resize .blog.last { padding:15px 0;}
/*************footer**********/
.footer { width:962px; padding:20px 0; margin:0 auto; border-top:1px solid #313131;}
.footer p { font:normal 11px Arial, Helvetica, sans-serif; color:#707070;}
.footer a { font:bold 11px Arial, Helvetica, sans-serif; color:#707070; text-decoration:none; }
.footer p.right { text-align:right; width:350px; margin:0; padding:10px 0; float:right;}
.footer p.leftt { text-align:left; width:550px; margin:0; padding:10px 0; float:left;}
p.clr, .clr { clear:both; padding:0; margin:0; background:none;}
.bg { clear:both; padding:5px 0; margin:0; border-bottom:1px solid #ededed;}
/* Slider */
.bg_color { height:150px; width:100%; position:absolute;}
.left_color { float:left; width:50%; background:url(images/slider_bg_l.jpg); height:150px; margin:141px 0 0 0;}
.right_color { float:right; width:50%; background:url(images/slider_bg_r.jpg); height:150px; margin:141px 0 0 0;}
#slider { padding:0; margin:0; border-top:15px solid #61a203; border-bottom:15px solid #61a203; background:url(images/slider_bg.jpg) no-repeat center; }
#slider .flash_slider { width:960px; height:305px;
margin:0 auto; overflow:hidden;
}
/* header_text */
.header_text { border-top:15px solid #61a203; border-bottom:15px solid #61a203; background:url(images/slider_bg_l.jpg);}
.header_text_left_bg { background:url(images/slider_bg.jpg) no-repeat top right}
.header_text_resize { padding:30px 0; margin:0 auto; width:960px;}
.header_text h1 { padding:0; margin:0; font:bold 40px Arial, Helvetica, sans-serif; color:#FFF;}
/* search */
.search { padding:0 0 15px 0; margin:0;}
.search form { display:block; padding:0;}
.search span { display:block; float:left; background:#393735; width:278px; padding:0; height:25px; border:1px solid #ededed; background:#FFF;}
.search form .keywords { width:232px; float:left; background:none; border:0; padding:5px 10px; margin:0; font:normal 12px Arial, Helvetica, sans-serif; color:#706e6d; line-height:15px;}
.search form .button { float:left; margin:0; padding:0;}
Menu.css
/* Reset */
#menu * {
margin: 0px;
padding: 0px;
list-style-type: none;
text-decoration: none;
position:relative;
}
div#menu {
position:relative;}
#menu ul.menu {
white-space: nowrap;
}
/* Geometrical arrangement */
#menu ul.menu li {
display: inline-block;
height: 57px;
position: relative;
}
#menu ul.menu li div {
position: absolute;
top: 55px;
left: 0px;
}
#menu ul.menu li div div {
position: absolute;
top: -6px;
left: 176px;
}
/* Escaping style for lower levels */
#menu ul.menu li div ul li {
display: block;
float: none;
width: auto;
height: auto;
}
/** Graphics **/
/* Horizontal sliding doors */
#menu ul.menu li a {
padding-left: 15px;
background-image: url("images/menu_level1_item.png");
background-repeat: no-repeat;
background-position: left -1000px;
display: inline-block;
margin: 6px 2px;
}
#menu ul.menu li a span {
padding-right: 15px;
padding-left: 0px;
background-image: url("images/menu_level1_item.png");
background-repeat: no-repeat;
background-position: right -1000px;
display: inline-block;
height: 40px;
line-height: 40px;
cursor: pointer;
}
#menu ul.menu li:hover a {
background-position: left -90px;
}
#menu ul.menu li:hover a span {
background-position: right -135px;
}
#menu ul.menu li.active a {
background-position: left 0px;
}
#menu ul.menu li.active a span {
background-position: right -45px;
}
/* Escape Horizontal doors */
#menu ul.menu li div ul li a {
display: block;
padding: 0px;
margin: 0px;
background: none;
}
#menu ul.menu li div ul li a span {
display: block;
padding: 0px;
background: none;
height: auto;
line-height: 25px;
padding: 10px 0 10px 12px;
white-space: normal;
}
/* Vertical sliding doors */
#menu ul.menu li div {
width: 194px;
padding-top: 6px;
background-image: url("images/submenu-top.png");
background-repeat: no-repeat;
background-position: 0px top;
}
#menu ul.menu li div ul {
padding: 9px;
padding-top: 0;
background-image: url("images/submenu-bottom.png");
background-repeat: no-repeat;
background-position: 0px bottom;
}
/* Hover Effect on Submenus */
#menu ul.menu ul li:hover
{
background-repeat: repeat-x;
background-position: 0% 100%;
background-image: url(images/menu_level2_item_hover.png);
}
#menu ul.menu ul li:hover>a
{
background-repeat: repeat-x;
background-position: 0% 0%;
background-color: transparent;
background-image: url(images/menu_level2_item_hover.png);
}
/* Main header line */
#menu
{
height: 57px;
position: absolute;
background: transparent url(images/page_header_b.png) repeat-x;
}
/* Text shadow */
#menu span
{
color: #edf0f1;
text-shadow:0 -1px 1px #000000;
}
#menu li:hover>a>span
{
color: #ffffff;
text-shadow: 0 1px 1px #000000, 0 2px 10px #969696;
}
/* Fonts */
#menu ul.menu li a span
{
font-family: Arial;
font-size: 18px;
font-weight: 400;
}
#menu ul.menu li div ul li a span
{
font-family: Arial;
font-size: 15px;
font-weight: 400;
}
/* Lines between li */
#menu ul.menu li div ul
{
padding-bottom: 8px;
}
#menu ul.menu li div ul li:first-child
{
border-top-width: 0px;
}
/* menu logic */
#menu li>div { visibility: hidden; }
#menu li:hover>div { visibility: visible; }
/* */
/* Hover Effect on Submenus */
#menu ul.menu ul li:hover
{
background-color: #2e4355;
}
/* Lines between li */
#menu ul.menu li div ul li
{
border-bottom: 1px solid #6d819a;
border-top: 1px solid #304054;
}
/* ie7 */
#menu ul.menu li {
*zoom: 1;
*display: inline;
}
#menu ul.menu li a {
*zoom: 1;
*display: inline;
}
#menu ul.menu li a span {
*zoom: 1;
*display: inline;
}
#menu ul.menu li div ul li a {
*display: inline;
}
/* Discarding semi-transparency */
#menu ul.menu ul li:hover
{
*background-image: none;
}
#menu ul.menu ul li:hover>a
{
*background-image: none;
}
/* IE6 */
#menu ul.menu li a {
_background-image: url("images/menu_level1_item.gif");
}
#menu ul.menu li a span {
_background-image: url("images/menu_level1_item.gif");
}
#menu ul.menu li div {
_background-image: url("images/submenu-top.gif");
}
#menu ul.menu li div ul {
_background-image: url("images/submenu-bottom.gif");
}
#menu ul.menu li a:hover {
_background-position: left -90px;
}
#menu ul.menu li a:hover span {
_background-position: right -135px;
}
/* menu logic for IE6 */
#menu div { _display: none; }
#menu div li:hover div { _display: block; }
#menu div li:hover li:hover div { _display: block; }
#menu div li:hover li:hover li:hover div { _display: block; }
/* */
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TemplateAccess.com Theme</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="menu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<!-- Cufon -->
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/myradpro.font.js"></script>
<script type="text/javascript">
Cufon.replace('h1')('h2')('h3')('h4');
</script>
<!-- flash script -->
<script type="text/javascript" src="js/flash_detect.v1.7.js"></script>
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<!-- End WOWSlider.com HEAD section -->
<div id="fb-root"></div>
<script> (function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));</script>
</head>
<body>
<div class="bg_color">
<div class="left_color"></div>
<div class="right_color"></div>
</div>
<div class="main">
<div class="header">
<div class="header_resize">
<div class="logo"><a href="#"><img src="images/logo.png" alt="logo" width="395" height="126" border="0" /></a></div>
<div class="jmenu">
<div id="menu">
<ul class="menu">
<li><a href="#" class="parent"><span>Home</span></a>
</li>
<li><a href="#"><span>About WBRA</span></a>
<div><ul>
<li><a href="#" class="parent"><span>Sub Item 1</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 1.1</span></a></li>
<li><a href="#"><span>Sub Item 1.2</span></a></li>
</ul></div>
</li>
<li><a href="#" class="parent"><span>Sub Item 2</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 2.1</span></a></li>
<li><a href="#"><span>Sub Item 2.2</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Sub Item 3</span></a></li>
<li><a href="#"><span>Sub Item 4</span></a></li>
<li><a href="#"><span>Sub Item 5</span></a></li>
<li><a href="#"><span>Sub Item 6</span></a></li>
<li><a href="#"><span>Sub Item 7</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Customer Service</span></a>
<div><ul>
<li><a href="#" class="parent"><span>Sub Item 1</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 1.1</span></a></li>
<li><a href="#"><span>Sub Item 1.2</span></a></li>
</ul></div>
</li>
<li><a href="#" class="parent"><span>Sub Item 2</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 2.1</span></a></li>
<li><a href="#"><span>Sub Item 2.2</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Sub Item 3</span></a></li>
<li><a href="#"><span>Sub Item 4</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Developers & Contractors</span></a>
<div><ul>
<li><a href="documents.html" class="parent"><span>Forms & Documents</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 1.1</span></a></li>
<li><a href="#"><span>Sub Item 1.2</span></a></li>
</ul></div>
</li>
<li><a href="#" class="parent"><span>Sub Item 2</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 2.1</span></a></li>
<li><a href="#"><span>Sub Item 2.2</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Sub Item 3</span></a></li>
<li><a href="#"><span>Sub Item 4</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Resources</span></a>
<div><ul>
<li><a href="#" class="parent"><span>Sub Item 1</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 1.1</span></a></li>
<li><a href="#"><span>Sub Item 1.2</span></a></li>
</ul></div>
</li>
<li><a href="#" class="parent"><span>Sub Item 2</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 2.1</span></a></li>
<li><a href="#"><span>Sub Item 2.2</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Sub Item 3</span></a></li>
<li><a href="#"><span>Sub Item 4</span></a></li>
</ul></div>
</li>
</ul>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
</div>
<div id="slider">
<!-- start slideshow -->
<div class="flash_slider">
<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="data1/images/simple_img_1.jpg" alt="simple_img_1" title="simple_img_1" id="wows0"/></li>
<li><img src="data1/images/simple_img_2.jpg" alt="simple_img_2" title="simple_img_2" id="wows1"/></li>
<li><img src="data1/images/simple_img_3.jpg" alt="simple_img_3" title="simple_img_3" id="wows2"/></li>
</ul></div>
<a class="wsl" href="http://wowslider.com">Free Javascript Photo Gallery by WOWSlider.com v2.1.3</a>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->
</div>
<!-- end #slideshow -->
<div class="clr"></div>
</div>
<div class="body">
<div class="body_resize">
<div class="left">
<h2>Welcome to Our Website <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</span></h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium mque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <a href="#">read more... >></a></p>
<div class="port">
<h2>What We Do <span>Sed congue, dui vel tristique mollis...</span></h2>
<img src="images/img_1.jpg" alt="picture" width="264" height="101" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id tristique sem. Nuncnec ipsum sed nisi dictum mollis. Praesent malesuada mauris a odio adipiscing mollis. Invarius tincidunt elit vitae eleifend. </p>
<a href="#">» read more </a></div>
<div class="port last">
<h2>Business Monitoring <span>Sed congue, dui vel tristique mollis...</span></h2>
<img src="images/img_2.jpg" alt="picture" width="264" height="101" />
<p>Sed tempus bibendum risus, nec dignissim sem vestibulum ut. Nam iaculis aliquam elementum. Nunc sed dignissim sapien. </p>
<a href="#">» read more </a> </div>
</div>
<div class="right">
<h2>Site Search:</h2>
<div class="search">
<form id="form1" name="form1" method="post" action="">
<span>
<input name="q" type="text" class="keywords" id="textfield" maxlength="50" value="Search..." />
<input name="b" type="image" src="images/search.gif" class="button" />
</span>
</form>
<div class="clr"></div>
</div>
<h2>What Do We Do </h2>
<div class="list_work">
<p><strong>Visit Us On Facebook!</strong></p>
<div class="fb-activity" data-site="wbra.pronet-systems.com" data-width="300" data-height="300" data-header="true" data-border-color="green" data-font="verdana" data-recommendations="false"></div>
</div>
<div class="list_work">
<p><img src="images/icon_bg_2.png" width="50" height="50" alt="icon" class="float_left" /></p>
<p><strong>Web & Interactive Media</strong></p>
<p>Curabitur sed urna id nunc pulvinar semper. Nunc sit amet tortor sit amet </p>
<p><a href="#">read more... >></a></p>
</div>
<div class="list_work last">
<p><img src="images/icon_bg_3.png" width="50" height="50" alt="icon" class="float_left" /> </p>
<p><strong>Web & Interactive Media</strong></p>
<p>Curabitur sed urna id nunc pulvinar semper. Nunc sit amet tortor sit amet </p>
<p><a href="#">read more... >></a></p>
</div>
</div>
<div class="clr"></div>
</div>
</div>
<div class="clr"></div>
</div>
<div class="FBG">
<div class="FBG_resize">
<div class="blog">
<h2>What They Say</h2>
<p><img src="images/quote.gif" width="20" height="19" alt="quote" /> "Quis autem vel eum iure reprehenderit
qui in ea voluptate velit esse voluptas nulla pariatur?"</p>
<p><a href="#">by: John S., webdesigner</a></p>
</div>
<div class="blog">
<h2>Blogroll</h2>
<ul>
<li><a href="#">» Development Blog</a></li>
<li><a href="#">» Documentation</a></li>
<li><a href="#">» Plugins</a></li>
<li><a href="#">» Suggest Ideas</a></li>
<li><a href="#">» Support Forum</a></li>
<li><a href="#">» Themes</a></li>
</ul>
</div>
<div class="blog">
<h2>Latest News</h2>
<p><strong>At vero eos et accusamus et iusto </strong><br />
<a href="#">January 6, 2010</a><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor dolore magna aliqua...</p>
<p><strong>Cras lobortis mauris vel diam </strong><br />
<a href="#">February 27, 2010</a><br />
Ut enim ad minim veniam, quis nostrud exercitation Lorem ipsum dolor sit amet...</p>
<div class="clr"></div>
</div>
<div class="blog last">
<h2>Contact</h2>
<p>+1 215.676.7876<br />
<a href="mailto:contact@mycompany.com">contact@mycompany.com</a><br />
123 Pine Street<br />
Mycity, ST 19000</p>
<p><img src="images/icon_1.png" width="19" height="19" alt="icon" /><img src="images/icon_2.png" width="19" height="19" alt="icon" /> <img src="images/icon_3.png" width="19" height="19" alt="icon" /></p>
</div>
<div class="clr"></div>
</div>
<div class="footer">
<p class="leftt">© Copyright <a href="#">Templatesold</a>. All Rights Reserved </p>
<p class="right"> (TS) <a href="http://www.templatesold.com">Website Templates</a></p>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
</body>
</html>
