CSS Forum

**soon** · 11-21-2006, 09:26 AM

Hi folks

Can you see any way to force this UL to go inline. Any time I succeed, the whole thing goes invisible.

Code:

<style>
ul#bmarkicon { display:block;  }
#bmarkicon { padding:0; margin:0; }
#bmarkicon li { display:block;list-style-type:none; background: url(http://ied.gospelcom.net/images/bookmarkicon.gif) no-repeat left transparent; }
#bmarkicon a, #bmarkicon a:visited {
  color:red;
  width:16px;height:16px;
  border:none;
  font-size:1px; letter-spacing:-5px;
  text-decoration:none; display:block;
  }
</style>


</head>

<body>

Some text all on oneline <span style="display:inline;">
<ul id="bmarkicon">
<li><a href="index.php">linkname</a></li>
</ul>
Some more text on the same line
</span>

The small font size for the link is there for a reason - to make it virtually invisible, likewise the letterspacing.

I can something similar with a span and samecolor background as text. However, an li link has some advantages, if it will work.

The purpose is, to create what looks like a graphic, which can be right-clicked on, to bookmark the site rather than the page, or can be drag/dropped to a start button to make a start menu shortcut

It seems to need display:block within the ul code,otherwise it displays but ceases to be a link.

I have managed to make it go inline with the text in IE but not FF, but then it ceases to be a link.

Code works if ul#bmarkicon { nothing here } but if it is changed to
ul#bmarkicon { display:inline; }
the link ceases to work.

Maybe it is intrinsically impossible?

Best wishes and thanks

Tony

**LadynRed** · 11-21-2006, 11:19 AM

If you want a list to be horizontal, you're going to have to specify display: inline for the list element <li>.
http://css.maxdesign.com.au/listutor...troduction.htm

You've got it set to display:block, which is unnecessary because a UL IS a block-level element.

**soon** · 11-21-2006, 12:42 PM

Thanks, I have managed to get it inline, but with the very small font, connot make the li width stay at 16px height 16px for some reason:

Code:

<style>
#bmarkicon { display:inline;padding:0;margin:0;width:16px;height:16px; }
#bmarkicon li { display:inline;width:16px;height:16px;margin:0px;list-style-type:none; background: url(http://ied.gospelcom.net/images/bookmarkicon.gif) no-repeat left red; }
#bmarkicon a, #bmarkicon a:visited {
  color:white;
   font-size:1px; 
  text-decoration:none;letter-spacing:-1px;
border:none;
  }
</style>

Any ideas on that?

Many thanks

Tony

**LadynRed** · 11-21-2006, 01:22 PM

try adding a line-height rule.