Posts: 29
|
Hi Everyone,
Just trying to figure out why the orange box in a site I am working on does not line up on the right side as it does in firefox. I am posting the code. Thanks for the help!
HTML Page
HTML 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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Welcome to the UK's premier adventure travel operator | Coldfeet Adventures</title>
<style type="text/css">
<!--
@import "resources/css/reset.css";
@import "resources/css/menu.css";
@import "resources/css/site.css";
.OuterBoxContainer {
background-image: url(resources/image/subnav-bg.png);
background-repeat: repeat;
clear: both;
margin-top: 50px;
margin-left: 10px;
margin-right: 2px;
height: 500px;
}
-->
</style>
<!-- IE PNG FIX -->
<script src="resources/javascript/iepngfix_tilebg.js" type="text/javascript" charset="utf-8"></script>
<script src="resources/javascript/menu.js" type="text/javascript" charset="utf-8"></script>
<script src="resources/javascript/functions.js" type="text/javascript" charset="utf-8"></script>
</head>
<body onload="MM_preloadImages('resources/image/de.png','resources/image/en.png','resources/image/es.png','resources/image/fr.png','resources/image/subnav-bg.png','resources/image/zh-hans.png')">
<div class="PageWrapper">
<div class="LogoContainer"><a href="#"><img src="resources/image/logo.png" width="207" height="40" alt="ColdFeet Adventures Logo" /></a></div>
<div class="MainNavigation">
<img src="resources/image/navbar-leftend.png" alt="LeftRounded" name="LfCorner" width="16" height="35" id="LfCorner" />
<ul id="nav">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT US</a>
<ul>
<li><a href="#">MEET THE TEAM</a></li>
</ul>
</li>
<li><a href="#">COLDFEET FOUNDATION</a>
<ul>
<li><a href="#">Nav Level 3</a></li>
<li><a href="#">Nav Level 4</a></li>
</ul>
</li>
<li><a href="#">ADVENTURES & TREKS</a>
<ul>
<li><a href="#">TREKS AND EXPEDITIONS</a></li>
<li><a href="#">MOUNTAINEERING</a></li>
<li><a href="#">RIVER RAFTING</a></li>
<li><a href="#">MOUNTAIN BIKING</a></li>
<li><a href="#">BUNGEE JUMPING</a></li>
<li><a href="#">BASE JUMPING</a></li>
<li><a href="#">HORSE AND PONY TREKING</a></li>
<li><a href="#">SAFARIS</a></li>
<li><a href="#">HELICOPTER FLIGHTS</a></li>
<li><a href="#">TAILOR MADE ADVENTURES</a></li>
<li><a href="#">SEIGHT SEEING</a></li>
<li><a href="#">FAMILY HOLIDAYS</a></li>
<li><a href="#">SPECIAL OFFERS</a></li>
</ul>
</li>
<li><a href="#">REGIONS</a>
<ul>
<li><a href="#">HIMALAYAS</a></li>
<li><a href="#">NEPAL</a></li>
<li><a href="#">TIBET</a></li>
</ul>
</li>
<li><a href="#">GALLERY</a>
<ul>
<li><a href="#">IMAGES</a></li>
<li><a href="#">VIDEO</a></li>
</ul>
</li>
<li id="NavSpacer"> </li>
<li><a href="#"><img src="resources/image/en.png" width="16" height="12" alt="English Flag" /></a>
<ul>
<li><a href="#"><img src="resources/image/en.png" width="16" height="12" alt="DE" /> EN</a></li>
<li><a href="#"><img src="resources/image/de.png" width="16" height="12" alt="de" /> DE</a></li>
<li><a href="#"><img src="resources/image/es.png" width="16" height="12" alt="es" /> ES</a></li>
<li><a href="#"><img src="resources/image/fr.png" width="16" height="12" alt="fr" /> FR</a></li>
<li><a href="#"><img src="resources/image/ja.png" width="16" height="12" alt="ja" /> JA</a></li>
<li><a href="#"><img src="resources/image/zh-hans.png" width="16" height="12" alt="zh-hans" /> ZH</a></li>
</ul></li>
<li id="NavSearch">
<input name="q" id="q" type="text" size="13" maxlength="50" value="search" onclick="removeInitialText()" onblur="restoreInitialText()" />
</li>
</ul>
<img src="resources/image/navbar-rightend.png" alt="RightRounded" name="RtCorner" width="17" height="35" id="RtCorner" />
</div>
<!-- end of menu, begin of content containers -->
<div class="OuterBoxContainer">
content
</div>
</div>
</body>
</html>
CSS For page
Code:
/*
CSS reset is designed to minimize browser differences. It essentially allows you to start from scratch with your layout. Don't touch.
*/
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,font,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;background:transparent;}
body{line-height:1;background-color:#BFCCD9;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,
q:before,q:after{content:'';content:none;}
:focus{outline:0;}
ins{text-decoration:none;}
del{text-decoration:line-through;}
table{border-collapse:collapse;border-spacing:0;}
li a img{border:0;padding:0;margin:0;}
p{margin-bottom:15px;}
/* End of CSS RESET */
.MainNavigation{margin:0px;padding:0px;height:35px;float:right;width:800px;font-family:Verdana,Geneva,sans-serif;font-size:10px;font-weight:bold;letter-spacing:.04em;max-width:1024px;}
.MainNavigation #LfCorner{float:left;width:17px;height:35px;}
.MainNavigation #RtCorner{float:left;width:17px;height:35px;}
/* All Menu Links */
.MainNavigation a{color:#FFF;text-decoration:none;}
.MainNavigation a:hover{color:#FFF;text-decoration:none}
/* First Level Links */
.MainNavigation ul li a{display:block;padding-left:8px;padding-right:8px;padding-top:12px;}
/* Second Level Links */
.MainNavigation ul li ul li a{display:block;padding-top:7px;padding-left:5px;color:#FFF;}
.MainNavigation ul li ul li:hover a,.MainNavigation ul li ul li.over a{color:#000;}
/*First Level Menus*/
.MainNavigation ul{position:relative;}
.MainNavigation ul li{background:url(../image/navbar-middle.png);background-repeat:repeat-x;height:35px;float:left;width:auto;}
.MainNavigation ul li:hover,.MainNavigation ul li.over{background:url(../image/navbar-hoverbg.png);}
.MainNavigation ul li:hover ul,.MainNavigation ul li.over ul{display:block;}
.MainNavigation ul li:hover ul li,.MainNavigation ul li.over ul li{float:none;width:auto;}
/*Second Level Menus*/
.MainNavigation ul li ul{display:none;position:absolute;top:35px;border-left:1px solid #FFF;border-right:1px solid #FFF;border-bottom:1px solid #FFF;}
.MainNavigation ul li ul li{height:25px;width:197px;background-image:url(../image/subnav-bg.png);background-repeat:repeat; padding-right: 145px;}
.MainNavigation ul li ul li:hover,MainNavigation ul li ul li.over{color:#000;}
/* Spacer Menu Item */
.MainNavigation #NavSpacer{}
.MainNavigation #NavSpacer:hover{background:url(../image/navbar-middle.png);background-repeat:repeat-x;}
/* Navigation Search Item */
.MainNavigation #NavSearch{padding-left:5px;padding-right:5px;padding-top:6px;}
.MainNavigation #NavSearch:hover,.MainNavigation #NavSearch.over{background:url(../image/navbar-middle.png);background-repeat:repeat-x;}
.MainNavigation #NavSearch input{height:16px;background-color:#FFF;background-repeat:no-repeat;background-position:4px center;background-image:url(resources/image/search.gif);padding-left:20px;text-align:right;vertical-align:middle;color:#7D7D7D;font-family:Arial,"MS Trebuchet",sans-serif;font-size:14px;}
/* IE PNG FIX */
img,div,li,a{behavior:url(resources/iepngfix.htc)}
body{background-attachment:fixed;background-image:url(../image/image-bg.jpg);background-repeat:no-repeat;background-position:center top;}
.PageWrapper{height:100%;padding-top:50px;width:1024px;margin:auto;}
.LogoContainer{float:left;height:40px;width:207px;}
.MainNavigation #NavSearch input:focus{color:#7D7D7D;font-size:14px;}
The page is located at: http://www.coldfeetadventures.com/new/index.html
Below are screenshots of what I am talking about.
Picture 4: This is how it is supposed to look (in FireFox)
Picture 5: This is how it shows up in Safari
Thanks in advance!
__________________
Please login or register to view this content. Registration is FREE
Great Web Hosting just $9/mo. Includes free domain and renewals. Free 7 day trial.
|
