SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Threaded View

  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    SOS-Please Help! CSS Layout problem

    As a relative beginner to CSS i'm struggling to acheive the same layout in different browsers. I have a CSS tab bar that displays ok in IE but hides behind another div tag when displayed in Safari and Firefox. No doubt the problem is blindingly simple but I just can't see it. Would anyone be able to offer any assistance? Cheers Guys!

    Code:
    #masthead {
    	position: absolute;
    	background-color: #3399CC;
    	top: 5px;
    	left: 2%;
    	right: 2%;
    	width:95.6%;
    	height: 101px;
    	
    }
    
    #tabbar {
    	position: absolute;
    	font-size: small;
    	background-color: #3399CC;
    	padding: 0px 0px 0px 0px;
    	width: 100%;
    	height: 18px;
    	top: 60px;
    	left: 0px;
    }
    
    #searchbar {
    	position: absolute;
    	font-size: 10px;
    	background-color: #336699;
    	padding: 0px 0px 0px 0px;
    	top: 75px;
    	left: 0px;
    	width: 100%;
    	height: 25px;
    }
    
    #topbuttons {
    	position:absolute;
    	width:150px;
    	height: 43px;
    	z-index:2;
    	left: 310px;
    	top: 9px;
    }
    
    #navigation a
     {
     color: #336699;
     background: #ff9900 url(images/l_tab.gif) left top no-repeat;
     text-decoration: none;
     padding-left: 10px;
     }
    
     #navigation a span
     {
     background: url(images/r_tab.gif) right top no-repeat;
     padding-right: 10px;
     }
    
     #navigation a, #navigation a span
     {
     display: block;
     float: left
     }
    
     /* Hide from IE5-Mac \*/
     #navigation a, #navigation a span
     {
     float: none;
     }
     /* End hide */
    
     #navigation a:hover
     {
     color: #ffffff;
     background: #336699 url(images/l_tab_roll.gif) left top no-repeat;
     padding-left: 10px;
    
     
     }
    
     #navigation a:hover span
     {
     background: url(images/r_tab_roll.gif) right top no-repeat;
     padding-right: 10px;
     }
    
     #navigation ul
     {
     list-style: none;
     padding: 0;
     margin: 0;
     }
    
     #navigation li
     {
     float: left;
     margin: 0;
     padding: 0;
     }
    HTML:

    HTML Code:
    <div id="masthead">
    
      <div id="tl_curve"><img src="Images/tl_curve.gif" /></div>
      
      <div id="tr_curve"><img src="Images/tr_curve.gif" /></div>
      
      <div id="logo"><img src="Images/hislogo.gif" alt="His Accessories" /></div>
    
    <div id="topbuttons"><img src="Images/accounttopb.gif" alt="My Account" /><img src="Images/helpdesktopb.gif" alt="Helpdesk" /><img src="Images/checkouttopb.gif" alt="Checkout" width="50" height="43" /></div>
    
      <div id="tabbar">
        
     <ul id="navigation">
     <li><a href="#"><span>Ipod</span></a></li>
     <li><a href="#"><span>PSP</span></a></li>
     <li><a href="#"><span>Wallets</span></a></li>
     <li><a href="#"><span>Cuff Links</span></a></li>
     <li><a href="#"><span>Winterwear</span></a></li>
     <li><a href="#"><span>Gift Ideas</span></a></li>
     </ul>
    </div>
    
    <div id="searchbar"> 
    
    <div id="searchinput"> 
    
      <form action="#">
          <label>Search:</label>
          <input name="searchFor" type="text" size="20" />
            <input name="goButton" type="submit" value="go" />
          </form> </div>
      
    </div>
      
    </div>
    Last edited by davebunyan; Jun 22, 2006 at 04:14.


Bookmarks

Posting Permissions

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