SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS tabs falls over in Mozilla and Firefox

    Hi all,

    I have followed a tutorial to create a tabbed layout which works fine in IE6, but when I display it in Mozilla or Firfox it seems to go wrong in places. The CSS is also mixed in with PHP, and therefore will include my whole file (Interface.php). If you wish to try this, just copy and paste the following code into a new file and save it as Interface.php, and then run it in the Mozilla browser to watch it fall over

    Anyone in this fountain of knowledge know why it falls over?

    Code:
    <?php
    	$tabs = array();
    	$tabs[0] = "Preparation";
    	$tabs[1] = "Running";
    	$tabs[2] = "Completed";
    	$tabs[3] = "Dead";
    	$tabs[4] = "Interface";
    ?>
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    	#navtabs {
    	font-family: verdana;
    	height: 30px; vertical-align: middle;
    	padding: 0px 0px 0px 15px; margin: 0px; width: 100%;
    	border-color: #333333; border-style: solid; border-width: 0px 0px 2px 0px;
    	}
    	
    	.tabon, .taboff {
    	height: 30px; vertical-align: middle;
    	display: inline; overflow: hidden;
    	cursor: pointer; cursor: hand;
    	font-size: 11px;
    	padding: 6px 2px 0px 2px; margin: 0px 2px 0px 0px;
    	border-color: #333333; border-style: solid; border-width: 1px 1px 0px 1px;*/
    	}
    	
    	.taboff {
    	color: #000000;
    	background: #FF0000;
    	}
    	
    	.tabon {
    	font-weight: bold;
    	position: relative;
    	top: 2px;
    	background: #ffffff;
    	border-width: 2px 2px 0px 2px;
    	}
    </style>
    </head>
    <body>
    <div id="navTabs">
    <?php
    	$thisPage = basename($_SERVER[PHP_SELF], ".php");
    	
    	for($i = 0; $i < count($tabs); $i++) {
    		if($thisPage == $tabs[$i])
    			$theClass = "on";
    		else
    			$theClass = "off";
    		
    		echo '<div class="tab'.$theClass.'" onclick="javascript:window.location=\'' . $tabs[$i] . '.php\'">'; 
    		echo $tabs[$i]."</div>";//'<img src="'.$tabs[$i].'.jpg" align="absmiddle">&nbsp;' . $text . '</div>'; 
    	}// End For loop
    ?>
    </div>
    </body>
    </html>
    Thanks

    Tryst

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Sorry I don't do php

    Can you just post the code after its been parsed.

    Or better still provide a link

    Paul

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

    I lied I do do php but was just feeling lazy

    The problem is you are taking advantage of ie's quirks mode by not using a doctype. In quirks mode ie will allow you to specify height and widths to inline elements which isn't allowed according to the specs.

    To give an element a height or width it needs to be display block. So your options are to either float the elements side by side or just use padding to increase the height.

    Heres an example using floats.
    Code:
    #navtabs {
    font-family: verdana;
    height: 30px; vertical-align: middle;
    padding: 0px 0px 0px 15px; margin: 0px; width: 100%;
    border-color: #333333; border-style: solid; border-width: 0px 0px 2px 0px;
    }
     
    .tabon, .taboff {
    height: 29px; vertical-align: middle;
    line-height:29px;
    float:left; overflow: hidden;
    cursor: pointer; cursor: hand;
    font-size: 11px;
    padding: 0px 2px 0px 2px; margin: 0px 2px 0px 0px;
    border-color: #333333; border-style: solid; border-width: 1px 1px 0px 1px;*/
    }
     
    .taboff {
    color: #000000;
    background: #FF0000;
    }
     
    .tabon {
    font-weight: bold;
    position: relative;
    top: 2px;
    background: #ffffff;
    border-width: 2px 2px 0px 2px;
    }
    Strictly speaking the floats should be gicen a specific width but in some cases you can get away without it but test first.


    Paul

  4. #4
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent work, Paul!

    There is just one thing though The active tab in Mozilla seems to be 1px lower, therefore just passing the bottom border of the 'navtabs' <div>. I tried changing the 'top' value to 1px (in the 'tabon' CSS declaration) but then this makes the 'navtabs' bottom border look 1px thinner on the active tab in IE.

    Thanks

    Tryst

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

    Well a hacking we wil go then
    Code:
     .tabon {
     font-weight: bold;
     position: relative;
     top: 1px;
     background: #ffffff;
     border-width: 2px 2px 0px 2px;
     }
    * html .tabon {top:2px}
    
    You should also delete the width:100% from navtabs as it is causing a horizontal scrollbar. Just let it defult to auto which is effectively 100%.

    Paul

  6. #6
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorted

    What exactly does this do...

    * html .tabon {top:2px}
    Thanks

    Tryst

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Its whats commonly known as the star selector hack.

    The asterisk is the universal selector and is a wild card that will match any element.

    However if you use it as the first element then it represents the root of the document. If you therefore follow it with html that would mean that html is a child of something which its not.

    All other browsers understand this and completely ignore the style. IE in its stupidty parses the style and applies the properties. This allows us to safely pass styles to ie and not affect any other browsers.

    So all we have done is to give ie a 2px top and other browsers get 1px top.

    http://www.info.com.ph/~etan/w3panth...ifiedsbmh.html

    Paul

  8. #8
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So if the next instalment of IE over comes this problem, the many websites that have this hack are screwed?

    Tryst

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    So if the next instalment of IE over comes this problem, the many websites that have this hack are screwed
    No ie6 and ie5 and ie5.5. will be the same and are not going to change .

    You can't second guess what browsers will do but if they do fix the star selector in a new version the chances are the problems that it is overcoming will be fixed also so it won't matter. (Mind you they will probably introduce a load of others if they haven't learned any lessons.)

    Usually I try to only use hacks for minor placement issues so that if the worst comes to the worst then theres just just the odd pixel difference.

    As usual with web design we're talking years before anything will happen so theres plenty of time

    Paul


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
  •