Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder feras_wilson's Avatar
    Join Date
    Jul 2005
    Location
    Sweden
    Posts
    129
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Exclamation Help!! Stuck In Css With Firefox

    Hi!
    I have a website width a menu usin <ul><li>item</li></ul>. When i use internet explorer it works fine but when i use firefox the letters in the menu is only 1pt or lower.
    Please check this code in internet explorer and firefox:
    Code:
    <html>
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Teknik Experten i Södertälje</title>
    <style>
    UL {
    padding:0px 0px 0px 0px;
    text-align:left;
    margin:0px;
    float:left;
    }
    li {
    width:100%;
    	list-style-position: inside;
    	list-style:none;
    	margin: 0px;
    	padding: 0px;
    }
    
    LI a {
    width: 100%;
    padding-left: 5px;
    padding-top: 1px;
    padding-right: 1px;
    padding-bottom:1px;
    font-size:8pt;
    font-family:Arial;
    height:1px;
    text-decoration:none;
    display:block;
    color:#FFFFFF;
    background-color:#000000;
    border:1px solid;
    }
    LI a:hover {
    color:#000000;
    background-color:#FFFF00;
    background-image:url('menubgover.png');
    }
    OL {
    padding:0px 0px 0px 0px;
    text-align:left;
    margin:0px;
    }
    
    </style>
    </head>
    
    <body>
    
    <table border="0" width="1000" cellspacing="0" cellpadding="0" height="787" bgcolor="#F0F0F0">
    	<tr>
    		<td width="163" colspan="3">
    		<img border="0" src="logo.png"></td>
    	</tr>
    	<tr>
    		<td width="178" style="padding:0px;">
    		<div style="float:left;">
    		<UL> 
    			<LI>
    			<A 
      href="http://www.teknik-experten.se/index.php?act=viewCat&amp;catId=49">Startsida</A>
    <LI>
    			<A 
      href="http://www.teknik-experten.se/index.php?act=viewCat&amp;catId=49">Batterier</A>
    			<LI class=bullet>
    			<A 
      href="http://www.teknik-experten.se/index.php?act=viewCat&amp;catId=5">Bildskärmar</A>
    			<LI class=bullet>
    			<A 
      href="http://www.teknik-experten.se/index.php?act=viewCat&amp;catId=79">Bläckpatron 
      			</A>
    			<LI class=bullet>
    			<A 
      href="http://www.teknik-experten.se/index.php?act=viewCat&amp;catId=21">CD-DVD</A>
    			<LI class=bullet>
    			<A 
      href="http://www.teknik-experten.se/index.php?act=viewCat&amp;catId=2">Datorpaket</A>
    			<LI class=bullet>
    			<A 
      href="http://www.teknik-experten.se/index.php?act=viewCat&amp;catId=86">Externa 
      Kabinett</A>
    			<LI class=bullet>
    			<A 
      href="http://www.teknik-experten.se/index.php?act=viewCat&amp;catId=90">Fläktar</A>
    			<LI class=bullet>
    			<A 
      href="http://www.teknik-experten.se/index.php?act=viewCat&amp;catId=33">Grafikkort</A>
    			<LI class=bullet>
    			<A 
      href="http://www.teknik-experten.se/index.php?act=viewCat&amp;catId=22">Headset</A>
    			<LI class=bullet>
    			<A 
      href="http://www.teknik-experten.se/index.php?act=viewCat&amp;catId=17">Hårddiskar</A>
    			<LI class=bullet>
    			<A 
      href="http://www.teknik-experten.se/index.php?act=viewCat&amp;catId=20">Högtalare</A>
    			<LI class=bullet>
    			<A 
      href="http://www.teknik-experten.se/index.php?act=viewCat&amp;catId=37">Kablage</A>
    			<LI class=bullet>
    			<A 
      href="http://www.teknik-experten.se/index.php?act=viewCat&amp;catId=36">Kontrollerkort</A>
    			<LI class=bullet>
    			<A 
      href="http://www.teknik-experten.se/index.php?act=viewCat&amp;catId=85">Kylpasta</A>
    			<LI class=bullet>
    			<A 
      href="http://www.teknik-experten.se/index.php?act=viewCat&amp;catId=88">Ljudkort</A>
    			<LI class=bullet>
    			<A 
      href="http://www.teknik-experten.se/index.php?act=viewCat&amp;catId=41">Media</A>
    			<LI class=bullet>
    			<A 
      href="http://www.teknik-experten.se/index.php?act=viewCat&amp;catId=23">Minnen</A>
    			<LI class=bullet>
    			<A 
      href="http://www.teknik-experten.se/index.php?act=viewCat&amp;catId=26">Minneskort</A>
    			<LI class=bullet>
    			<A 
      href="http://www.teknik-experten.se/index.php?act=viewCat&amp;catId=4">Mobiltelefoner</A>
    			<LI class=bullet>
    			<A 
      href="http://www.teknik-experten.se/index.php?act=viewCat&amp;catId=27">Moderkort</A>
    			<LI class=bullet>
    			<A 
      href="http://www.teknik-experten.se/index.php?act=viewCat&amp;catId=91">MP3/4</A>
    			<LI class=bullet>
    			<A 
      href="http://www.teknik-experten.se/index.php?act=viewCat&amp;catId=19">Mus</A>
    			<LI class=bullet>
    			<A 
      href="http://www.teknik-experten.se/index.php?act=viewCat&amp;catId=78">Musmatta</A>
    			<LI class=bullet>
    			<A 
      href="http://www.teknik-experten.se/index.php?act=viewCat&amp;catId=65">Nätdel</A>
    			<LI class=bullet>
    			<A 
      href="http://www.teknik-experten.se/index.php?act=viewCat&amp;catId=61">Nätverk</A>
    			<LI class=bullet>
    			<A 
      href="http://www.teknik-experten.se/index.php?act=viewCat&amp;catId=3">Paraboler</A>
    			<LI class=bullet>
    			<A 
      href="http://www.teknik-experten.se/index.php?act=viewCat&amp;catId=83">PC 
      Lådor</A>
    			<LI class=bullet>
    			<A 
      href="http://www.teknik-experten.se/index.php?act=viewCat&amp;catId=30">Processorer</A>
    			<LI class=bullet>
    			<A 
      href="http://www.teknik-experten.se/index.php?act=viewCat&amp;catId=74">Programvaror</A>
    			<LI class=bullet>
    			<A 
      href="http://www.teknik-experten.se/index.php?act=viewCat&amp;catId=92">Skrivare</A>
    			<LI class=bullet>
    			<A 
      href="http://www.teknik-experten.se/index.php?act=viewCat&amp;catId=42">Säkerhet</A>
    			<LI class=bullet>
    			<A 
      href="http://www.teknik-experten.se/index.php?act=viewCat&amp;catId=18">Tangetbord</A>
    			<LI class=bullet>
    			<A 
      href="http://www.teknik-experten.se/index.php?act=viewCat&amp;catId=95">TV</A>
    			<LI class=bullet>
    			<A 
      href="http://www.teknik-experten.se/index.php?act=viewCat&amp;catId=73">Uppgraderingspaket 
      			</A>
    			<LI class=bullet>
    			<A 
      href="http://www.teknik-experten.se/index.php?act=viewCat&amp;catId=54">Webbkamera 
      			</A>
    			<LI class=bullet>
    			<A 
      href="http://www.teknik-experten.se/index.php?act=viewCat&amp;catId=43">Övrigt</A>
    			</LI>
    		</UL>
    		</div>
    		</td>
    		<td width="701">&nbsp;</td>
    		<td width="121">&nbsp;</td>
    	</tr>
    </table>
    
    </body>
    
    </html>
    Please help me! i need help fast to continue my job.
    Exp:
    PHP
    .NET

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by feras_wilson View Post
    When i use internet explorer it works fine but when i use firefox the letters in the menu is only 1pt or lower.
    This is not strange because you have set height: 1px for your anchor elements within the list:
    Code:
    LI a {
    width: 100%;
    padding-left: 5px;
    padding-top: 1px;
    padding-right: 1px;
    padding-bottom:1px;
    font-size:8pt;
    font-family:Arial;
    height:1px;
    text-decoration:none;
    display:block;
    color:#FFFFFF;
    background-color:#000000;
    border:1px solid;
    }
    So you need to remove that line. You don't see anything wrong in IE6 and below because of the expanding box problem.

    I suspect that height: 1px was originally added to trigger hasLayout in IE6 at least for your menu to work so that the entire area of the anchor element block can be clicked on and not just the text[1].

    [1] http://www.brunildo.org/test/IEABlock1.html

    Maybe hasLayout is also needed for IE7, but I didn't check.

    Instead you may use zoom: 1 to trigger hasLayout:
    Code:
    LI a {
    width: 100%;
    padding-left: 5px;
    padding-top: 1px;
    padding-right: 1px;
    padding-bottom:1px;
    font-size:8pt;
    font-family:Arial;
    zoom: 1;
    text-decoration:none;
    display:block;
    color:#FFFFFF;
    background-color:#000000;
    border:1px solid;
    }

  • #3
    Regular Coder feras_wilson's Avatar
    Join Date
    Jul 2005
    Location
    Sweden
    Posts
    129
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by koyama View Post
    This is not strange because you have set height: 1px for your anchor elements within the list:
    Code:
    LI a {
    width: 100%;
    padding-left: 5px;
    padding-top: 1px;
    padding-right: 1px;
    padding-bottom:1px;
    font-size:8pt;
    font-family:Arial;
    height:1px;
    text-decoration:none;
    display:block;
    color:#FFFFFF;
    background-color:#000000;
    border:1px solid;
    }
    So you need to remove that line. You don't see anything wrong in IE6 and below because of the expanding box problem.

    I suspect that height: 1px was originally added to trigger hasLayout in IE6 at least for your menu to work so that the entire area of the anchor element block can be clicked on and not just the text[1].

    [1] http://www.brunildo.org/test/IEABlock1.html

    Maybe hasLayout is also needed for IE7, but I didn't check.

    Instead you may use zoom: 1 to trigger hasLayout:
    Code:
    LI a {
    width: 100%;
    padding-left: 5px;
    padding-top: 1px;
    padding-right: 1px;
    padding-bottom:1px;
    font-size:8pt;
    font-family:Arial;
    zoom: 1;
    text-decoration:none;
    display:block;
    color:#FFFFFF;
    background-color:#000000;
    border:1px solid;
    }
    Tanks a lot but can you just tell me whats wrong with the menu (ul)?
    I want it to be like a table. now its a list like that with space:
    Item 1
    Item 2
    i want like this:
    Item 1
    Item 2
    Exp:
    PHP
    .NET

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by feras_wilson View Post
    Tanks a lot but can you just tell me whats wrong with the menu (ul)?
    I want it to be like a table. now its a list like that with space:
    I am not sure what you mean, but I now see that the widths of your list items are incorrect in Firefox 2. I have not seen this (bug?) before which seems to be caused by two levels of float nesting. To solve the problem you may remove the floated div element (which is redundant anyway) around your menu.

    As for the problem with Firefox 2 I have set up a cleaner example to show the problem in case anyone has any input. Has anyone seen this thing before. Is this a bug or not in Firefox or does CSS 2.1 permit such a rendering?

    Live example

    For archival purposes, here is the code for the above example:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title>CF120889</title>
    		<style type="text/css">
    			html {font-family: sans-serif;}
    			h2 {margin: 1em 0 0 0; clear: both}
    			.example {overflow: hidden;}
    
    			/* the important part */
    			.two {
    				float: left;
    				border: 5px solid blue;
    			}
    			.one {
    				float: left;
    				border: 5px solid red;
    			}
    			.item {
    				background: yellow;
    			}
    		</style>
    	</head>
    	<body>
    		<h1>Firefox 2 bug with float > float > auto-width-div ?</h1>
    
    		<ul>
    			<li>The div with the blue border is floated (ex. 1)</li>
    			<li>The div with the red border is floated (ex. 1,2)</li>
    			<li>The yellow boxes are ordinary auto-width div elements (ex. 1,2)</li>
    		</ul>
    		<p>Look at the width of the yellow div elements</p>
    		<div class="example">
    
    			<h2>Example 1: Problem in Firefox 2 with float > float > auto-width-div ?</h2>
    			<p>Why do the yellow div elements not occupy the full width within the red div?</p>
    			<div class="two">
    				<div class="one"> 
    					<div class="item">Carcharhinus</div>
    					<div class="item">Galeocerdo</div>
    					<div class="item">Glyphis</div>
    
    					<div class="item">Isogomphodon</div>
    				</div>
    			</div>
    		</div>
    		<div class="example">
    			<h2>Example 2: Ok with float > auto-width-div</h2>
    			<div class="one"> 
    				<div class="item">Carcharhinus</div>
    
    				<div class="item">Galeocerdo</div>
    				<div class="item">Glyphis</div>
    				<div class="item">Isogomphodon</div>
    			</div>
    		</div>
    	</body>
    </html>

  • #5
    Regular Coder
    Join Date
    Feb 2007
    Location
    Seattle
    Posts
    153
    Thanks
    5
    Thanked 9 Times in 9 Posts
    I want it to be like a table. now its a list like that with space:
    Item 1
    Item 2
    i want like this:
    Item 1
    Item 2
    Yeah, not sure what you are asking. Can you create an example in Photoshop and show us an image?

    I played with Koyama's code extensively and can't get rid of the bug. That is a head-scratcher.


  •  

    Posting Permissions

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