List not working in Firefox

2creative · Jan 19, 2009

Hi all!

I am not sure where this forum should go but I just took a guess. I have created a list using DIV and external CSS. The list looks fine in IE7 but not in Firefox. I was hoping someone can take a look at this an let me know what is the issue.

When I add more text to each list, the yellow bullets gets wacky in Firefox. It will only look good if I add just 1 line within each list. The more lines I added, the more it looks out of place.

Here is the HTML code:

Code:

<head>


<style type="text/css">
ul {list-style: none;}
li {color:#fc0;line-height:1.2;}
li span {color:#000; display:inline-block; vertical-align:top; padding-left: 4px;}
</style>


</head>




<body>


<div id="sage1" class="paragraph1"> knldknlskdnflskd sldknfsldk flskdn flksnd lfkn sldkfn lkn lsdknf lskddnf lksdf lksdn fls.



          <div class="list">




            <ul >
              <li style="height: 3em;">?<span> oidjfosijdfoisjdfoij dfjos dfojs dofj sodif osdjfosidj fosijdf ois dfojosidjf.</span></li>
              <li style="height: 4em;">?<span> sdfsdfsdf odjfo sijdij osidj fos oijod fsoi doi fosdfosdfrf f oif sod eoi o vidfv odifv oij oisdofi soidjf osidj foisdj o ojfojsdoifj osdi  osdosodfosodofs odfsodfosidjfoisjdf oisjdos .</span></li>
              <li style="height: 4em;">?<span> sdfsdfsdf odjfo sijdij osidj fos oijod fsoi doi fosdfosdfrf f oif sod eoi o vidfv odifv oij oisdofi soidjf osidj foisdj o ojfojsdoifj osdi  osdosodfosodofs odfsodfosidjfoisjdf oisjdos .</span></li>
              <li style="height: 4em;">?<span> sdfsdfsdf odjfo sijdij osidj fos oijod fsoi doi fosdfosdfrf f oif sod eoi o vidfv odifv oij oisdofi soidjf osidj foisdj o ojfojsdoifj osdi  osdosodfosodofs odfsodfosidjfoisjdf oisjdos .</span></li>
              <li style="height: 4em;">?<span> sdfsdfsdf odjfo sijdij osidj fos oijod fsoi doi fosdfosdfrf f oif sod eoi o vidfv odifv oij oisdofi soidjf osidj foisdj o ojfojsdoifj osdi  osdosodfosodofs odfsodfosidjfoisjdf oisjdos .</span></li>
              <li style="height: 4em;">?<span> sdfsdfsdf odjfo sijdij osidj fos oijod fsoi doi fosdfosdfrf f oif sod eoi o vidfv odifv oij oisdofi soidjf osidj foisdj o ojfojsdoifj osdi  osdosodfosodofs odfsodfosidjfoisjdf oisjdos .</span></li>
            </ul>


          </div>


        </div>



</body>

Here is the external CSS:

Code:

.shadetabs{
padding: 3px 0;
margin-left: 0px;
margin-top: 320px;
margin-bottom: 6px;
font: bold 12px Verdana;
list-style-type: none;
text-align: left;




}

.shadetabs li{
display: inline;
margin: 0;

}

.shadetabs li a{
text-decoration: none;
position: relative;
z-index: 1;
padding: 9px 45px;
margin-right: 1px;
color: #2d2b2b;
background-image: url(shadeactive2.gif);



}

.shadetabs li a:visited{
color: #2d2b2b;
}

.shadetabs li a:hover{
text-decoration: none;
color: #2d2b2b;
}

.shadetabs li a.selected{

position: relative;
top: 1px;
}

.shadetabs li a.selected{ 
background-image: url(shadeactive.gif);
border-bottom-color: white;
color: #FFFFFF;
}

.shadetabs li a.selected:hover{
text-decoration: none;
}

.tabcontent{
display:none;
}

.tab {

	height:20px;
	width:762px;
	left: 17px;
	position:absolute;
	
	
}

.paragraph1 {

	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	font-weight: bold;
	left:25px;
	top: 370px;
	width: 400px;
	position:absolute;
	display:block;
	
}



.paragraph2 {

	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	font-weight: bold;
	left:25px;
	top: 370px;
	width: 400px;
	position:absolute;
	display:block;
	
}

.paragraph3 {

	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	font-weight: bold;
	left:25px;
	top: 370px;
	width: 400px;
	position:absolute;
	display:block;
}

.paragraph4 {

	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	font-weight: bold;
	left:25px;
	top: 370px;
	width: 400px;
	position:absolute;
	display:block;
	
}

.list {

	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	font-weight: normal;
	display:block;
	left:0px;
	top: 43px;
	position:absolute;
	width: 450px;
	

	
}





.tabbluebar {

	height:2px;
	width:526px;
	left: 0px;
	top:347px;
	position:absolute;
	
	
}

.tabfooter {

	height:2px;
	width:526px;
	left: 0px;
	top:814px;
	position:absolute;
	
	
}


Notice that there is CSS style within the HEAD section as well as an EXTERNAL CSS.


Thanks for any advice!!!

vacunita · Jan 19, 2009

This is the correct forum for this "thread".

To address your question:
There is no such value for the display property as an inline-block.
Its either inline, or its a block, can't be both.

Scroll down for a list of possible values for the propery.

http://www.w3schools.com/css/pr_class_display.asp

With that said, spans are by default inline, so you don't really need to specify it.

Remove the display:inline-block bit and it should then be o.k.
IE7 seems to just ignore the invalid value where as FF tries to interpret what you mean thus making the span a block and dropping it to the next line.

Additionally you need to specify units for your values. specifically your line-height value for the li.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

2creative · Jan 19, 2009

Thank vacunita!

I took out the display:inline-block and its looking better. A few more questions for you.

The first sentence looks correct but the second sentence is not align to the first first sentence for each list. Is there a way to add a style to make them all align correctly? The bottom sentence need to move to the right so it will align with the top sentence.

My other question is there a way to put the style of:

<style type="text/css">
ul {list-style: none;}
li {color:#fc0;line-height:1.2;}
li span {color:#000; display:inline-block; vertical-align:top; padding-left: 4px;}
</style>

and added to the external CSS sheet? I have been trying many ways but it does not work so I added back to the HTML page.

Thanks!

2creative · Jan 19, 2009

vacunita, here is what I am talking about regarding the top and bottom sentence:

Currently looks like:

sdfsdf sdfsdfs dfsdf sd fs df sdf sd fsdfsdfsdf sdfsdfsd
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsd sdfsdf sdf sdfs df

I like to make it look like this so it will align on the LEFT side:

fsdfsdf sdfsdf sdfsdfsdfsdf sdfsdfsdf sdfsdfsdf sdfsfsdf
sdfsdfsd fsdfsdf dfsdfsd fsdfsdfs dfsdf sdf sdf sd fsdf

Of course, the yellow bullet should be next to the FIRST sentence like I have it right now. I just need to move all the bottom sentences to the right so it will align evenly with the FIRST line.

Thanks!!

vacunita · Jan 19, 2009

Technically the usage of list-style-position would handle that.

Setting it to "outside" would make the text line up to the right of the bullet.

But you are using an ascii character for the bullet that is part of the content of the list item and artificially indented using the padding-left. So the list-style-position doesn't work.

Exactly what character are you using as the bullet?

There are ways to use a custom bullet if you need to, that will allow the lists to work correctly.

As for adding the stylings to the external stylesheet, is should be a straight forward. Just paste them at the end of the style sheet file. you may need to be more specific, as there are other stylings for li element already there, so you may need to specify inside which element they are.

.since they are inside a div with a class of list you may need to specify it like:

.list ul{
...
}

.list li{
...
}

etc...

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

BillyRayPreachersSon · Jan 19, 2009

There is no such value for the display property as an inline-block.

There is, if you're talking about IE only:

http://msdn.microsoft.com/en-us/library/ms530751.aspx

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

feherke · Jan 19, 2009

Hi

vacunita said:
There is no such value for the display property as an inline-block.

Dan said:
There is, if you're talking about IE only:

Hmm... I thought it is CSS 2.1. And according to The display declaration article by Peter-Paul Koch, is quite well supported. Now. Or am I misunderstanding the situation ?

W3C said:
'display'
Value: inline | block | list-item | run-in | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit

[gray](...)[/gray]

inline-block
This value causes an element to generate a block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an inline replaced element.

The 'display' property

Feherke.

http://rootshell.be/~feherke/

BillyRayPreachersSon · Jan 19, 2009

It would appear that Safari, Chrome, and Opera 9 all treat 'inline-block' the same, and then Fx 2 and IE 6 both do their own thing:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
	<title>Inline-block test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<style type="text/css">

		span {
			color: black;
			padding: 10px;
		}

		#spanN {
			background-color: blue;
			display: inline;
		}

		#spanIB {
			background-color: green;
			display: inline-block;
		}

		#spanB {
			background-color: red;
			display: block;
		}

	</style>
</head>

<body>
	<div>
		Leading text... <span id="spanN">A normal (inline) span</span> ...trailing text
	</div>

	<div>
		Leading text... <span id="spanIB">An inline-block span</span> ...trailing text
	</div>

	<div>
		Leading text... <span id="spanB">A block-level span</span> ...trailing text
	</div>
</body>
</html>

I didn't try IE 7 or Fx 3...

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

feherke · Jan 19, 2009

Hi

Than that is it. I not misunderstand it. I do not understand at all...

Your example works as I expected on Mozilla ( FireFox 3.0.5, SeaMonkey 1.1.14 ), Opera 9.62, Konqueror 3.5.9, Safari 3.1.2, Chrome 1.0.154.43 and Explorer 6. ( Of course, the ugliest result I got on Explorer, but it clearly renders it as [tt]inline-block[/tt]. )

( Note, that I modified abit your example to have more adjacent [tt]div[/tt]s with the same type of [tt]span[/tt]. That way the rendering difference is more visible. I would say. )

Feherke.

http://rootshell.be/~feherke/

ChrisHunt · Jan 20, 2009

Bear in mind that the screative's code didn't have a DOCTYPE, so he'd be contending with each browser's quirks modes as well as flaky inline-block support.

2creative,

You're doing way too much work in your HTML to get the effect (I assume) you're trying to achieve. Here's a better way of doing it:

Make an image of your custom bullet character, either on a transparent background or on one that matches your general background colour.

You can then get rid of all your bullet characters and <spans> and height declarations in the HTML:

Code:

<ul >
  <li>oidjfosijdfoisjdfoij dfjos dfojs dofj sodif osdjfosidj fosijdf ois dfojosidjf.</li>
  <li>sdfsdfsdf odjfo sijdij osidj fos oijod fsoi doi fosdfosdfrf f oif sod eoi o vidfv odifv oij oisdofi soidjf osidj foisdj o ojfojsdoifj osdi  osdosodfosodofs odfsodfosidjfoisjdf oisjdos .</li>
   ... etc ...
</ul>

... and code your CSS like this:

Code:

ul {
  list-style: none;
}

li {
  padding-left: 20px; /* width of image plus a bit */
  background: url(/images/bullet.gif) top left no-repeat;
}

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

vacunita · Jan 20, 2009

Apologies, but I could not find anything about inline_block, and of course distorted the list rendering terribly.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

List not working in Firefox

2creative

Technical User

vacunita

Programmer

2creative

Technical User

2creative

Technical User

vacunita

Programmer

BillyRayPreachersSon

Programmer

feherke

Programmer

BillyRayPreachersSon

Programmer

feherke

Programmer

ChrisHunt

Programmer

vacunita

Programmer

Similar threads

Part and Inventory Search

Sponsor