Hi, I have a problem in that the side shadow in my header isn't aligning up correctly in Safari or IE, looks fine in FF. Any ideas? Here's the CSS code that may be of help: from boxes.css .header { border-top:none; background:url(../images/vert-header-bg.gif) no-repeat #fcfcf8; } Code (markup): from vert.css #vertwrapper { width: 938px; margin: 0 auto; background-color:#FBFAF6; font-family: Arial, Helvetica, sans-serif; position: relative; z-index: 99; } .clear {clear: both; background-color:white;} #vertheader { width: 938px; height: 122px; background: #FBFAF6 url(../images/vertheader2.jpg) no-repeat; } #vertheader .vertlogo { width: 441px; height: 122px; float: left; } #vertheader .vertlinks { width: 350px; height: 85px; float: right; } #vertheader .vertlinks .verticalnavigation { width: 350px; height: 46px; margin-top: 10px; } #vertheader .vertlinks .verticalnavigation ul li { display: inline; float: right; color: #8DC34E; font-size: 12px; margin-right: 15px; line-height: 46px; } #vertheader .vertlinks .verticalnavigation ul li a { color: #8DC34E; text-decoration: none; font-size: 12px; } #vertheader .vertlinks .verticalnavigation ul li a:hover { text-decoration: underline; } #vertheader .vertlinks .buttons { width: 350px; height: 29px; clear: both; } #vertheader .vertlinks .buttons .confidence { width: 156px; height: 24px; background: #FFFFFF url(../images/confidence.jpg) no-repeat; float: left; margin-top: 4px; } #vertheader .vertlinks .buttons .confidence a { color: #8DC34E; font-size: 12px; font-weight: bold; margin-left: 30px; line-height: 24px; } #vertheader .vertlinks .buttons .safe { width: 151px; height: 29px; float: left; margin-left: 10px; } #vertmenu { width: 900px; height: 30px; background: #024190 url(../images/vertmenu.jpg) repeat-x; margin-bottom: 1px; } #vertmenu ul#verticalnavigation { padding: 0; margin: 0; list-style: none; width: 934px; height: 30px; margin-left: 5px; /*border-left: 1px solid #FFFFFF;*/ } #vertmenu ul li { float: left; position: relative; height: 30px; } #vertmenu ul li a { padding: 0 5px; border-right: 1px solid #FFFFFF; } #vertmenu ul li a, #vertmenu ul li ul li a { float: left; height: 30px; line-height: 30px; font-size: 12px; font-weight: bold; color: #FFFFFF; text-decoration: none; } #vertmenu ul li ul { display: none; position: absolute; top: 30px; left: 0; z-index: 1; width: 150px; padding: 0; margin: 0; list-style: none; border-bottom: 1px solid #FFFFFF; } #vertmenu ul li ul li { width: 150px; } #vertmenu ul li ul li a { width: 143px; background-color: #024190; border-right: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; padding-left: 5px; } #vertmenu ul li ul li a:hover { background-color: #4080c0; } #vertmenu ul li:hover ul, #vertmenu ul li.over ul { display: block; } #vertmenu ul li a.sale { float: right; border-left: 1px solid #FFFFFF; background-color: #8DC34E; } #vertmenu ul li.sale { float: right; } #summer { width: 938px; height: 69px; background: #FFFFFF url(../images/summer.jpg) no-repeat; padding-top: 7px; } #summer .deals { width: 527px; height: 62px; margin-left: 225px; } Code (markup): html <body class=" cms-index-index cms-home"> <div class="wrapper"> <!-- [start] header --> <div class="header"> <div id="vertwrapper"> <div id="vertheader"> <div class="vertlogo"> <a href="http://www.fidelis-corporation.com"><img src="../images/vertlogo.jpg" /></a> </div> <div class="vertlinks"> <div class="verticalnavigation"> <ul> <li>Order by phone <strong>05602 544414</strong></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Help</a></li> </ul> </div> <div class="buttons"> <div class="confidence"> <a href="#">Buy with confidence</a> </div> <div class="safe"> <a href="#"><img src="../images/safe.jpg" /></a> </div> </div> </div> </div> <div class="clear"></div> <div id="vertmenu"> <ul id="verticalnavigation"> <li><a href="#">Home</a></li> <li><a href="#">Electronics Store</a> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> </li> <li><a href="#">Memory Store</a> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </li> <li><a href="#">Home Store</a> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> </li> <li><a href="#">Periperal Store</a> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> </li> <li><a href="#">Tape Store</a> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> </li> <li><a href="#">Underwater Store</a> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> </li> <li class="sale"><a href="#" class="sale">Clearance Sale</a></li> </ul> </div> <div class="clear"></div> <div id="summer"> <div class="deals"> <a href="#"><img src="../images/deals.jpg" /></a> </div> </div> </div> </div> Code (markup): Thanks