Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

CSS & HTML: CSS tabs problem

Bottom of Page

1 to 6 of 6

  1.  
    • CommentAuthordimmon
    • CommentTimeMay 20th 2006 edited
     permalink
    I am new in css, I have created such a menu:
    example
    In firefox and IE in looks different? Why?

    Here is a code:
    tabs.css

    .my_tabs
    {
    	width: 500px;
    	background-color: #FCC;
    	overflow: visible;
    	border-left: 1px solid #666;
    	border-right: 1px solid #666;
    }
    .my_tabs ul
    {
    	display: inline;
    	list-style: none;
    	height: 20px;
    	margin: 0;
    	padding: 0;
    	width: 500px;
    	
    }
    .my_tabs ul li
    {
    	display: inline;
    	float: left;
    	list-style: none;
    	width: 100px;
    	padding: 1px 2px 2px 5px;
    	border-left: 1px solid #666;
    	border-top: 1px solid #666;
    	border-bottom: 1px solid #666;
    }
    .my_tabs .left {	border-left: 0px none !important; }
    .my_tabs .right{
    	border-top: 1px solid #666;
    	border-bottom: 1px solid #666;
    	width: 277px !important;
    	background-color: #CED;
    }
    .content
    {
    	border: 1px solid #000;
    	border-top: 0px none;
    	width: 500px;
    }

    index.html

    <!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=windows-1251" />

      <title>Untitled Document</title>

      <link href="tabs.css" rel="stylesheet" type="text/css" />

      </head>

    </body>

    <div class="my_tabs">

      <ul>

      <li class="left">link 1</li>

      <li>link 2</li>

      <li class="right">&nbsp;</li>

      </ul>

      </div>

      <div class="content">here must be some content of a page

      </div>


    </html>


  2.  permalink
    Hi Dimmon,

    You should start by validating your XHTML code (at this point you're not even close). That's probably the first reason why you're not getting the same results across browsers.
    •  
      CommentAuthormringlein
    • CommentTimeMay 20th 2006
     permalink
    I'd have to agree with adjustafresh. I know that you want a quick and simple answer to your one issue, but the sad truth is that you should start with a good foundation (valid code). Look in skill share under the other CSS tab issues, you will get good help there. I won't repost the same links I've posted there -- great examples from everyone though!
    • CommentAuthordimmon
    • CommentTimeMay 20th 2006
     permalink
    Ok, I understand. How would you advise to learn CSS at a proffessional level? So I know the basics, but when I've tried to copy tabs from Yahoo! main page...I've understood that CSS much more difficult that I thought before. So I didnt know even half of yahoo code lol.
    So I think I need some resource with many different solutions and explanation of them. Thanks.
    •  
      CommentAuthormringlein
    • CommentTimeMay 20th 2006
     permalink
    alistapart is a great resource to get started (see sliding doors topic). You can see what I did with tabs in a quick and simplistic way at: http://www.justconfirmed.com (much easier to read/reuse than yahoo).
    • CommentAuthordimmon
    • CommentTimeMay 21st 2006
     permalink
    Thank you very much. Design of justconfirmed.com is very nice :)

1 to 6 of 6

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page