No Line Breaks After </li> Tag

Forum Moderators: open

Message Too Old, No Replies

No Line Breaks After </li> Tag

In a list I need to have no line breaks...

ViciousJ

4:00 am on Feb 28, 2009 (gmt 0)

I have been trying so many things, and I cannot find out how to prevent line breaks from occurring between every </li> tag when in the midst of doing a list.

I am trying to run a list:hover sequence, and I have the class and everything in my CSS but I can't seem to make the list not have a line break in between each new <li> .

Here's the code...

(CSS)

li.tab { background-image: url('http://www.example.com/imgs/layout/nav/nohovertab.png'); width: 91px; height: 38px; list-style-type: none; }
li.tab:hover { background-image: url('http://www.example.com/imgs/layout/nav/hovertab.png'); width: 91px; height: 38px; list-style-type: none; }

(HTML)

<div class="navbg">
<img class="logo" src="http://www.example.com/imgs/logos/d-padlogo.png" align="left"><br><br>
<ul>
<li class="tab">&nbps;</li>
<li class="tab"> </li>
</ul>
</div>

So, yeah...please help me out on this one.

[edited by: tedster at 4:36 am (utc) on Feb. 28, 2009]
[edit reason] switch to example.com [/edit]

walrus

4:29 am on Feb 28, 2009 (gmt 0)

Isn't that display:inline; ?

ViciousJ

4:34 am on Feb 28, 2009 (gmt 0)

I have tried that...I'll try it again...

And, yeah, it works, but it makes the tabs (the images I'm trying to use) not the specified width and height that I wish them to be.

So, is there something wrong with the code I have that would be making them change their size with the display: inline; code?

phranque

1:30 pm on Feb 28, 2009 (gmt 0)

welcome to WebmasterWorld [webmasterworld.com], ViciousJ!

this might work:

ul.tab{
list-style-type: none;
background-image: url('http://www.example.com/imgs/layout/nav/nohovertab.png');
width: 91px;
height: 38px;
}
ul.tab:hover{
background-image: url('http://www.example.com/imgs/layout/nav/hovertab.png');
}
ul.tab li{
display: inline;
}

sometimes i find it helpful to use The W3C CSS Validation Service [jigsaw.w3.org].
(not that i'm saying anything about you or your code, i'm just saying...)
=8)

swa66

1:46 pm on Feb 28, 2009 (gmt 0)

Try display: inline-block if you want it inline but control it's size.

note there is some trickery needed to get ti to work in all browsers:
[webmasterworld.com...]

ViciousJ

4:34 pm on Feb 28, 2009 (gmt 0)

Thanks a lot, guys. :D

In the end though, I just took out the background div then made the <li class> float to the left. It isn't exactly what I wanted in the beginning but it worked out better than I really thought it would.

And, phranque, thanks so much! You really helped me out, that code is really useful, I will definitely need that in some of my other codes!

pageoneresults

5:04 pm on Feb 28, 2009 (gmt 0)

I may be incorrect in guessing what you are referring to but is it that slight gap that appears between the <li> elements? If so, I've found that if you bring them all onto one line, the gap is null.

<ul>
<li class="tab">&nbps;</li><li class="tab">&nbsp;</li>
</ul>