SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Threaded View

  1. #1
    SitePoint Addict evilone's Avatar
    Join Date
    Oct 2004
    Location
    Estonia
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Something wrong with tabs and css

    Hi everyone!

    I'm struggling here with a little problem. I'm quite new in CSS and I can't position my tabs correctly. Can anybody say what is the problem here in http://www.whazzup.ee/map/ with tabs. IE7 displaying tabs correctly but Firefox, Safari and Opera not. Correctly displayed is that tabs are positioned above the red submenu line. In Safari, Firefox and Opera are tabs below or on the red line.

    And the code:

    Code HTML4Strict:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>index.php</title>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <link rel="stylesheet" type="text/css" href="styles/main.css" media="all" />
    </head>
    <body>
    <div id="container">
      <div id="header">
        <div id="logo">
       	  <a href="http://www.whazzup.ee"><img src="gfx/whazzup_logo.gif" width="200" height="90" alt="Whazzup.ee" /></a>
        </div>
        <div id="slogan">
          <img src="gfx/whazzup_slogan.gif" width="194" height="29" alt="" />
        </div>
        <div id="ads">
          <img src="gfx/banner1.gif" width="468" height="60" alt="reklaam" />
        </div>
        <div class="clearfloats"></div>
      </div>
      <div id="navigation">
        <div id="tabs">
        	<ul>
    <li id="active"><a href="/map/index.php" title="Avaleht"><span>Avaleht</span></a></li>
    <li><a href="/map/events/index.php" title="&Uuml;ritused"><span>&Uuml;ritused</span></a></li>
    <li><a href="/map/catalog/index.php" title="&Uuml;rituste korraldamine"><span>&Uuml;rituste korraldamine</span></a></li>
    <li><a href="/map/search/index.php" title="Otsing"><span>Otsing</span></a></li>
    <li><a href="/map/my/index.php" title="Minu Whazzup"><span>Minu Whazzup</span></a></li>
    </ul>
          <!--<ul>
    		<li><a href="#"><span>Avaleht</span></a></li>
    		<li><a href="#"><span>Üritused</span></a></li>
    		<li><a href="#"><span>Minu Whazzup</span></a></li>
    		<li><a href="#"><span>Otsing</span></a></li>
    	  </ul>-->
        </div>
        <div id="clearfloats"></div>
        <div id="submenu">
        	<ul>
    <li title="Uudised"><a href=""><span>Uudised</span></a></li>
    <li title="Reklaam"><a href=""><span>Reklaam</span></a></li>
    <li title="Portaalist"><a href=""><span>Portaalist</span></a></li>
    <li title="Registreeru kasutajaks"><a href="/whazzup/register.php"><span>Registreeru kasutajaks</span></a></li>
    </ul>
        </div>
      </div>
      <div id="content">
        <div id="navi"> Siin on vasak aken </div>
        <div id="main">Siin on peaaken</div>
        <div id="extra">Siin on parem aken</div>
        <div class="clearfloats"></div>
      </div>
      <div id="footer"> Siia tuleb footer. </div>
    </div>
    </body>
    </html>

    Code CSS:
    /*---------- SKELETON ----------*/
    * {
    	margin: 0;
    	padding: 0;
    }
     
    html, body {
    	background: #FFF;
    	font: 70&#37; Tahoma, Arial, Verdana;
    }
     
    .clearfloats {
    	clear: both;
    	float: none;
    }
     
    #container {
    	width: 1000px;
    	margin: 0 auto;
    }
     
    #content {
    	width: 100%;
    }
     
    #navi {
    	float: left;
    	width: 250px;
    }
     
    #main {
    	float: left;
    	width: 500px;
    }
     
    #extra {
    	float: left;
    	width: 250px;
    }
     
    #footer {
    	height: 50px;
    }
     
    /*---------- HEADER ----------*/
    #header {
    	margin: 0;
    	padding: 0;
    	background: url(../gfx/bg_header.gif) repeat-x;
    	height: 130px;
    	border-left: 1px solid #4C4C4C;
    	border-right: 1px solid #4C4C4C;
    }
     
    #logo {
    	float: left;
    	margin-left: 30px;
    	margin-top: 20px;
    }
     
    #header div img {
    	border: none;
    }
     
    #slogan {
    	float: left;
    	margin-left: 10px;
    	margin-top: 50px;
    }
     
    #ads {
    	float: right;
    	margin-right: 30px;
    	margin-top: 35px;
    }
     
    /*---------- NAVIGATION ----------*/
    #navigation {
    	background: #EBEBEB;
    	border-left: 1px solid #4C4C4C;
    	border-right: 1px solid #4C4C4C;
    	width: 998px;
    }
     
    #tabs {
    	float: left;
    	width: 100%;
    	line-height: normal;
    }
     
    #tabs ul {
    	font-size: 1.5em;
    	font-weight: bold;
    	margin: 0;
    	padding: 10px 0px 0 220px;
    	list-style: none;
    }
     
    #tabs li {
    	display: inline;
    	margin: 0;
    	padding: 0;
    }
     
    #tabs a {
    	float: left;
    	background: url("../gfx/tab_left.gif") no-repeat left top;
    	margin: 0;
    	padding: 0 0 0 4px;
    	text-decoration: none;
    }
     
    #tabs a span {
    	float: left;
    	display: block;
    	background: url("../gfx/tab_right.gif") no-repeat right top;
    	padding: 5px 15px 4px 6px;
    	color: #000;
    }
     
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabs a span { float: none; }
     
    /* End IE5-Mac hack */
    #tabs a:hover span { color: #FFF; }
     
    #tabs a:hover {
    	background-position: 0% -42px;
    }
     
    #tabs a:hover span {
    	background-position: 100% -42px;
    }
     
    #tabs #active a {
    	background-position: 0% -42px;
    }
     
    #tabs #active a span {
    	background-position: 100% -42px;
    	color: #FFF;
    }
     
    #submenu {
    	width: 100%;
    	background: #8C0101;
    	height: 25px;
    }
    Last edited by evilone; Sep 2, 2007 at 05:18. Reason: forgot the code


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
  •