PDA

View Full Version : Help!! Stuck In Css With Firefox

feras_wilson
08-08-2007, 03:40 PM
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:

<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.
koyama
08-08-2007, 04:03 PM
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:

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 (http://www.positioniseverything.net/explorer/expandingboxbug.html).

I suspect that height: 1px was originally added to trigger hasLayout (http://www.satzansatz.de/cssd/onhavinglayout.html) 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:

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;
}
feras_wilson
08-08-2007, 04:14 PM
This is not strange because you have set height: 1px for your anchor elements within the list:

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 (http://www.positioniseverything.net/explorer/expandingboxbug.html).

I suspect that height: 1px was originally added to trigger hasLayout (http://www.satzansatz.de/cssd/onhavinglayout.html) 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:

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
koyama
08-08-2007, 06:10 PM
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 (http://koyama.dk/demos/CF120889/CF120889.html)

For archival purposes, here is the code for the above example:

<!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>
garydarling
08-09-2007, 03:43 AM
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.