SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Evangelist
    Join Date
    Nov 2003
    Location
    England
    Posts
    540
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Make links 100% height of container in Firefox & IE

    Hello all,

    The following code is supposed to be a tab strip, the tabs are supposed to be the same height as the strip.

    It works fine in IE, but I cannot make the links take the full height in Firefox without setting padding, which then makes the links overlap the top of the tab strip, and leaves a big space at the bottom, its like it just moves the tab up by 5 or so pixels. The result im looking for is how this currently looks in IE, but im obviously wanting it to look the same in both IE and Firefox.

    Any ideas?

    Code:
    <html>
    
    <head>
    
         <style type="text/css">
    
              #TabContainer
    	  {
    		height:30px;
    		background-color:#333333;
    		text-align:right;
    	  }
    
              a.tab
    	  {
    		height:30px;
    		line-height:30px;
    		color:#333333;
    		background-color:#EEEEEE;
    	  }
    
         </style>
    
    </head>
    
    <body>
    
         <div id="TabContainer">
    
              <a href="" class="tab">Link 1</a>
              <a href="" class="tab">Link 2</a>
    
         </div>
    
    </body>
    
    </html>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    An anchor is an inline element and will not take height or width in compliant browers in standards mode. As you are not using a doctype then ie will be in quirks mode and support legacy behaviour such as widths on inline elements. If you use a valid doctype (with uri) you will see that ie6 is the same as firefox.

    One solution is to declare the anchor as display block so that widths and height can take effect but this means that the anchor will also force a new line. Therefore the solution is to float the anchors so that they are automatically display:block but still stay on the same line.
    Code:
    		 a.tab
    {
    height:30px;
    line-height:30px;
    color:#333333;
    background-color:#EEEEEE;
    float:right;
    margin-left:2px;
    }
    Of course you will need to change the order of the anchor items as they will be reversed when floating right. Also floats should have a specified width or you will annoy browsers such as ie mac.

    To be semantically correct it would be better to wrap the anchors in a list and if you look here you may find some preformatted examples to save you a lot of work. There is even a list generator to automate the task:

    http://css.maxdesign.com.au/listamatic/

    Hope that helps.

    Paul

  3. #3
    SitePoint Evangelist
    Join Date
    Nov 2003
    Location
    England
    Posts
    540
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry im using XHTML strict but didn't include that in my example above. I've just gone through one of the sticky topics and found this:

    http://moronicbajebus.com/playground/cssplay/hormenu/

    Which im currently implementing.
    Thanks for your reply

  4. #4
    SitePoint Evangelist
    Join Date
    Nov 2003
    Location
    England
    Posts
    540
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right.. I think im almost there,

    Working from the last example at:
    http://moronicbajebus.com/playground/cssplay/hormenu/

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    
    <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en"
    	"http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
    	
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    	<head>
    	
    		<title>test</title>
    	
    		<style type="text/css">
    		
    			#TabContainer
    			{
    				width:100%;	
    				border:1px solid #333333;
    				white-space:nowrap;
    				float:left;
    			}
    			
    			#TabContainer ul
    			{
    				float:right;
    				padding:0px;
    				margin:0px;
    			}
    			
    			#TabContainer ul li
    			{
    				display:inline;
    			}
    			
    			#TabContainer ul li a
    			{
    				color:#333333;
    				background-color:#EEEEEE;
    				
    				padding-left:1px;
    				padding-right:1px;
    				float:left;
    				
    				padding:2px;
    			}
    			
    			#Bar
    			{
    				width:100%;
    				height:60px;
    				background-color:#CCCCCC;
    				color:#333333;
    			}
    			
    		</style>
    		
    	</head>
    	
    	<body>
    	
    		<div id="TabContainer">
    				
    			<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>
    				<li> <a href="">Link 5</a> </li>
    			</ul>
    			
    		</div>
    		
    		<div id="Bar">
    			hello world
    		</div>
    	
    	</body>
    	
    </html>
    In IE, theres a gap between the "hello world" bar and the tabs, can't seem to get rid of it.

    And in Fireworks, half of the "hello world" bar disappears behind the tabs.

    Also, I can't seem to get a space between the li elements?

    This tableless design stuff is confusing, although I feel that im learning alot, even if im getting it wrong all the time heh.


  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    That example won't work in opera and the lists will stack on top. Also you have specified 100% width and then added a border which makes the element too wide for any page and a horizontal scrollbar will appear.

    You need to clear floated elements for mozilla browsers.

    Also your doctype is invalid.

    Apart from that

    Heres your code amended to work although you will have to do as I said originally and reverse the list items.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>test</title>
    <style type="text/css">
      
       #TabContainer
       {
    	border:1px solid #333333;
    	white-space:nowrap;
    	position:relative;
       }
       
       #TabContainer ul
       {
    	padding:0px;
    	margin:0px;
    	list-style:none;
       }
       
       #TabContainer ul li
       {
    	display:inline;
       }
       
       #TabContainer ul li a
       {
    	margin:0 0 0 5px;
    	color:#333333;
    	background-color:#EEEEEE;
    	float:right;
    	padding:2px;
       }
       
       #Bar
       {
    	height:60px;
    	background-color:#CCCCCC;
    	color:#333333;
       }
       
      .clearer{
       clear:both;
       height:1px;
       overflow:hidden;
    	  margin-top:-1px;
      }
      </style>
    </head>
    <body>
    <div id="TabContainer"> 
      <ul>
    	<li> <a href="">Link 5</a> </li>
    	<li> <a href="">Link 4</a> </li>
    	<li> <a href="">Link 3</a> </li>
    	<li> <a href="">Link 2</a> </li>
    	<li> <a href="">Link 1</a> </li>
      </ul>
    <div class="clearer"></div>
    </div>
    <div id="Bar"> hello world </div>
    </body>
    </html>
    That should display the same in ie6, firefox and opera 7.5.

    Hope that helps.

    Paul

  6. #6
    SitePoint Evangelist
    Join Date
    Nov 2003
    Location
    England
    Posts
    540
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent, Thankyou very much Paul - very helpful.

    Where did you get such indepth knowledge of CSS, just through trial and error? Any books you'd like to reccomend?

    Matt.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Any books you'd like to reccomend?
    Anything by Eric Meyer (and of course the sitepoint books )

  8. #8
    SitePoint Evangelist
    Join Date
    Nov 2003
    Location
    England
    Posts
    540
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, time to do some shopping then

  9. #9
    SitePoint Evangelist
    Join Date
    Nov 2003
    Location
    England
    Posts
    540
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry to be a pain, I just noticed that if I try to apply a background colour to the container #TabContainer, the contents disappears in IE, but shows in Firefox & Opera..

    Another hack required?

  10. #10
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Montreal
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure if this will cause any other problems but if you modify your CSS like so adding z-index:

    Code:
    #TabContainer ul li a
    {
    position: relative;
    z-index: auto;
    margin:0 0 0 5px;
    color:#333333;
    background-color:#EEEEEE;
    float:right;
    padding:2px;
    }
    It seems to work in all 3 browsers.

  11. #11
    SitePoint Evangelist
    Join Date
    Nov 2003
    Location
    England
    Posts
    540
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep, that fixed it. Thanks

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Thanks nix112

    Its the position:relative that IE likes The z-index isn't really necessary as auto is the default anyway but won't do any harm

    Paul

  13. #13
    SitePoint Evangelist
    Join Date
    Nov 2003
    Location
    England
    Posts
    540
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry to keep on and on..

    How can I add padding to the text in Bar?

    I Tried:

    Code:
    <div id="Bar"> <p style="padding:20px;"> hello world </p> </div>
    but it creates a space between the tabs and the bar again..and if I display:inline; the <p> then the padding doesn't work, all looks ok on IE but these problems are seen under Firefox and Opera.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Try this:
    [code]
    #Bar
    {
    height:60px;
    background-color:#CCCCCC;
    color:#333333;
    padding-top:20px}
    #Bar p{margin:0px;padding:0}
    [code]
    Code:
    <div id="Bar"><p> hello world </p></div>
    Paul

  15. #15
    SitePoint Evangelist
    Join Date
    Nov 2003
    Location
    England
    Posts
    540
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep, Thanks Again


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
  •