Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Sep 2005
    Location
    Bath, ENG
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Header side shadow not showing in IE or Safari

    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

    Code:
    .header { border-top:none; background:url(../images/vert-header-bg.gif) no-repeat #fcfcf8; }
    from vert.css

    Code:
    #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;
    }
    html

    Code:
    <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>
    Thanks

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Just had a quick look and the image doesn't align in FF3, IE7 or Safari.

    I think your background image just isn't aligned correctly. Try:

    Code:
    .header { border-top:none; 
    background:#fcfcf8 url(../images/vert-header-bg.gif) no-repeat center top; }

  • #3
    Regular Coder
    Join Date
    Sep 2005
    Location
    Bath, ENG
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Great that worked


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •