CSS - Removing Line Break After List Items

This is probably the dumbest question ever, but I hardly ever work on GUI stuff anymore so here it goes...

I have some buttons that have their size (height and width) controlled by CSS. The text I'm putting on them is sometimes too long to fit unless it would wrap, but it doesn't want to wrap, it wants to disappear off the side of the button. Is there a way to explicity tell it to wrap if it needs to, or even insert a "new line" character?

Thanks!

Hi, folks. I'm having a curious problem with the navigation on my page. I'd like the nav and header to be all on the same line. It works when I just include the nav icons as images directly in the HTML. But when I make the nav icons into links, set each link to display:block, and give it the appropriate background-image, it puts all the icons on a new line. I'm not sure why. Any ideas?

You can see the page with the problem and the effect I'm trying to achieve at these two TinyURLs:

Problem: TinyURL dotcomslash a8qnky
Working: TinyURL dotcomslash 8tj29l

(The HTML validates, and the CSS validates except for the IE PNG transparency fix. I'm still experiencing this problem without that fix in place.)

Hi,

What is my CSS file is making my <p></p> tags not break a line?

My css file is located he
Code:

/*
Theme Name: U5
Theme URI: (URL address blocked: See forum rules)
Description: This theme is form <a href="utombox.com">UtomBox.com</a>.
Version: 6.11
Author: Utom
Author URI: (URL address blocked: See forum rules)
*/
* {
list-style:none;
text-decoration:none;
margin:0;
padding:0;
}

blockquote { 
margin-left:15px; 
background-color:#F8F5D1; 
border-left:5px solid #F9CA68;
border-right:1px solid #F9CA68;
border-bottom:1px solid #F9CA68;
border-top:1px solid #F9CA68; 
margin-right:15px; 
padding:4px; 
}

.navigation { 
font-family:"Trebuchet MS", Verdana, sans-serif; margin-bottom:5px; font-size:12px;
}

.navigation a { 
color:#3E6697; 
text-decoration:none; 
}

.navigation a:hover { 
color:#3E6697; 
text-decoration:underline; 
}

.navigation .alignleft { 
float:left; 
}

.navigation .alignright { 
float:right; 
}

.post { 
margin-right:10px; 
clear:both; 
border-bottom:1px dotted #999999; 
margin-bottom:5px; 
padding-bottom:10px; 
margin-top:10px;  
}

.post h1 { 
font-size:30px; 
font-family:"Trebuchet MS", Verdana, sans-serif;
}

.post h1 a { 
color:#4374b0; 
text-decoration:none; 
padding-left:1px; 
padding-right:1px;  
}

.post h1 a:hover { 
color:#4374b0; 
text-decoration:underline; 
padding-left:1px; 
padding-right:1px;  
}

.post h2 { 
font-size:20px; 
font-family:"Trebuchet MS", 
Verdana, sans-serif; 
}

.post h2 a {
font-size:20px; 
color:#4374b0; 
text-decoration:none; 
padding-right:1px; 
margin-top:5px; 
}

.post h2 a:hover { 
font-size:20px; 
color:#4374b0; 
text-decoration:underline; 
padding-right:1px; 
margin-top:5px; 
}

.post small { 
font-size:10px; 
color:#666666; 
font-family:Verdana, Arial, Helvetica, sans-serif; 
}

.post small a { 
color:#3E6697; 
text-decoration:none; 
}

.post small a:hover { 
text-decoration:underline; 
}

hr { clear:both; border:0px; 
background-image:url(/images/hor_div.gif); 
background-repeat:repeat-x; 
height:1px; 
background-color:#FFFFFF; 
padding:0px; }

body {
overflow:auto;
background:#fff;
color:#fff;
font-size:11px;
line-height:22px;
font-family: "Verdana", Lucida Grande, Arial, Helvetica, sans-serif;
}

p {
font-size:11px;
margin:0;
margin-bottom:15px;
}

p a {
color:#333;
text-decoration:none;
margin:0;
margin-bottom:15px;
}

p a:hover {
color:#333;
text-decoration:underline;
margin:0;
margin-bottom:15px;
}


h1,h2,h3,h4,h5,h6 {
font-family:"Trebuchet MS";
}

p,.entry ol,.entry ul {
margin:0;
}

.entry ol,.entry ul {
padding:0;
}
.entry strike{
text-decoration:line-through;
}
input,textarea {
background:#fff;
border:1px solid #999;
font:11px "Verdana", Arial, Helvetica, sans-serif;
color:#333;
padding:2px;
}

input[type=text]:focus,textarea:focus {
background:#fff;
border:1px solid #666;
font:11px/150% "Verdana", Arial, Helvetica, sans-serif;
color:#333;
}

#wrapper {
background:#fff url("images/bg.png") repeat-y center center;
margin:0 auto;
padding:0 5px;
}

#header {
height:100px;
}

#headerimg {
height:100px;
}

#headerimg h1 a {
background:transparent url("images/logo.png") no-repeat 0 0;
position:absolute;
width:180px;
height:100px;
overflow:hidden;
text-indent:400px;
line-height:200px;
}

#headerimg .description {
display:none;
}

#box {
padding:0 20px 20px;
}

#content,#sidebar {
float:left;
margin:0 20px 0 0;
}

#content {
width:550px;
color:#333;
}

#content2 {
width:550px;
color:#333;
float:left;
margin:0 50px 0 0;
}

.narrowcolumn a {
color:#333;
text-decoration:underline;
margin:0;
margin-bottom:15px;
}

.narrowcolumn ul.u_datetime {
background:#666 url("images/datetime.png") no-repeat 0 0;
width:60px;
height:60px;
float:left;
text-align:center;
color:#FFF;
margin:0 10px 0 0;
}

.narrowcolumn li.u_month {
font-size:10px;
line-height:20px;
}

.narrowcolumn li.u_day {
font-size:20px;
font-weight:700;
line-height:20px;
}

.narrowcolumn li.u_year {
font-size:12px;
font-weight:700;
line-height:20px;
}

.narrowcolumn h2 a {
color:#4374b0;
font-size:20px;
margin:0;
}

.narrowcolumn .u_tag,.narrowcolumn ul.u_postinfo li {
line-height:23px;
margin:0 10px 0 0;
padding:0 0 0 20px;
}

.narrowcolumn .u_tag {
background:transparent url("images/tag_blue.png") no-repeat left center;
}

.narrowcolumn .u_author {
background:transparent url("images/user.png") no-repeat left center;
}

.narrowcolumn .u_timepost {
background:transparent url("images/time.png") no-repeat left center;
}

.narrowcolumn .u_category {
background:transparent url("images/folder.png") no-repeat left center;
}

.narrowcolumn .u_comment {
background:transparent url("images/comments.png") no-repeat left center;
}

.narrowcolumn .entry {
clear:both;
padding:10px;
overflow : hidden;
}

.narrowcolumn .entry blockquote {
border-left:2px solid #fff;
color:#666;
margin:0 0 0 2em;
padding:0 0 0 2em;
overflow:hidden;
}

.narrowcolumn .entry ol li {
list-style:decimal;
}

.narrowcolumn .entry ul li {
list-style:disc;
}

.narrowcolumn .entry img {
margin:5px;
}

.narrowcolumn .entry a:hover img {
border:0px solid #FFF;
}

.narrowcolumn .navigation {
height:20px;
margin:0 0 20px;
}
.narrowcolumn .navigation_page a,.narrowcolumn .navigation_page .utompage{
font-size: 10px;
float: left;
height: 20px;
padding: 0 5px;
line-height: 20px;
margin: 0 1px 1px 0;
}
.narrowcolumn .navigation_page a{
background: #fff;
border:0px solid #fff;
color: #666;
}
.narrowcolumn .navigation_page a:hover, .narrowcolumn .navigation_page .utompage{
color: #4374b0;
background: #fff;
border:0px solid #fff;
}
.narrowcolumn .alignright {
float:right;
}

.narrowcolumn .postmetadata {
border-top:1px solid #fff;
border-bottom:1px solid #fff;
margin:20px 0;
padding:10px;
}

.narrowcolumn .postrss2 a {
background:transparent url("images/rss_big.png") no-repeat 0 0;
position:absolute;
width:80px;
height:80px;
overflow:hidden;
text-indent:400px;
line-height:200px;
margin:-5px 0 0 400px;
}

.narrowcolumn .postmetadata li {
line-height:23px;
padding:0 0 0 20px;
}

.narrowcolumn .postdatetime {
background:transparent url("images/time.png") no-repeat left center;
}

.narrowcolumn .postcategory {
float:left;
background:transparent url("images/folder.png") no-repeat left center;
margin:0 10px 0 0;
}

.narrowcolumn .posttag {
float:left;
background:transparent url("images/tag_blue.png") no-repeat left center;
}

.narrowcolumn .posttrackback {
clear:both;
background:transparent url("images/arrow_refresh.png") no-repeat left center;
}

.narrowcolumn .postedit {
clear:both;
background:transparent url("images/pencil.png") no-repeat left center;
}

span.ugr {
float:left;
width:50px;
height:50px;
border:0px solid #666;
margin:0 3px 3px 0;
}

.narrowcolumn h3#comments,.narrowcolumn h3#respond {
font-size:15px;
margin:10px 0;
}

.narrowcolumn ol.commentlist {
border:0px solid #666;
border-bottom:none;
margin:0 0 20px;
}

.narrowcolumn ol.commentlist li {
border-bottom:0px solid #666;
background:#fff;
padding:10px;
}

.narrowcolumn ol.commentlist li.alt {
background:#fff;
}

.narrowcolumn .commentlist .uar,.narrowcolumn .commentlist .uar a {
font-size:14px;
font-weight:700;
color:#333;
}

.narrowcolumn .spost,.narrowcolumn .commentlist p {
clear:both;
}

.narrowcolumn #comment {
width:80%;
}

My homepage is he
Code:

tonycai.com

As you can see my paragraphs doesn't break a line.

Thanks

Hi,

I have an OL list (the numbered one) and the horz gap between the list item
number (as automatically generated by OL) and the text of the LI is too big
(according to client). Looks fine in FF but is bigger alright on IE (ahem
naturally .....)

I've played with the CSS for both the OL & LI styles even setting all
margins and paddings to 0 but without effect on the gap.

Is there any way to style that gap? Code below.

Kevin

<ol class="most_read">
<li class="most_read_li">Apples</li>
<li class="most_read_li">Oranges</li>
</ol>



.most_read {
text-align:left;
color:#808080;
font-size:10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight:normal;
margin-left:30px;
padding:0px;
margin-top:5px;
}


.most_read_li {
margin-bottom:7px;
margin-right:7px;
}

Hi all,

I've created a template in CSS and divs, but when someone puts a word like this_is_a_template - with no spaces in it, it breaks the left nav.

Is there any way of making sure words break once they get to the width of the leftnav, even when they don't have spaces in them?

Cheers.

try to make a UL into a horizontal nav.

i want the a's inside the li's to be display:block, so i need a block element around the outside, but that means they wrap to new lines.

What is block without new lines?

thanks.

I have a search box/button I want to keep on a single line in a tool bar on my page in strict XHTML/CSS. The <form> tag produces a line break beforehand.

In old HTML I could put the <form> tag outside of the table row or data tags, but XHTML does not allow that (bad nesting). I found in devshed here to use style="display:inline;" which works! But the page does not validate as strict XHTML/CSS (using validator.w3.org).

<table><tr><td> <!-- simplified to illustrate!! -->
<form method="get" action="..." style="display:inline;">
<input type="text" name="q" size="10" maxlength="255" value="" />
<input type="submit" name="sa" value="go" />
</form>
</td></tr></table>

The Error and reason given is below. It seems that you can not have a block-level element (<input>) within in inline-level element (<form>).

***
document type does not allow element "input" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag.

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
***

Does anyone know how to code this to not have the linebreak and still maintain strict XHTML/CSS code?

I am having two problems with a theme I have for PHPBB3. One problem is the text that you type into textboxes when making a new post, updating your profile, or a few other spots is white on a very light grey background; therefore, hardly showing up.

The second problem is that the page display a white line at the bottom of a few pages (but not others) and the line goes away if you resize the IE window smaller, but reappears again if you full screen it.

I know the first problem has to exist in the stylesheet.css file; however, I am not sure where to make these changes as I am not familiar with PHPBB stylesheets. If anyone could help it would be greatly appreciated. Thanks!

Forums: Click Here

Stylesheet: Click Here

Pictures of my problems:
Text problem-


Line Problem -

#leftNav ul
{
margin:0;
padding:0;
list-style-type: none;
}

#leftNav ul li
{
padding:0;
margin:0;
display: block;
text-align: left;
background-color: #000;
border-top: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
border-right: none;
width:130px;
}

for some reason I am getting black boxes, with the white outlines.. but in between each LI.. i get spaces? how do you control the spacing between li's in a ul?

Hi everyone,

Just two really quick questions.

Is there a way to get the list-style-image property to work for in-line unordered lists? And is there a way to remove the first bullet in the list?

Thanks for any help.

whats the CSS for creating an unordered list that goes across the page rather than down with no bullet points?

Hi,

I have tried putting list-style-type: none; in various places to remove the circle bullets from the list style in my code but I must be doing something wrong.

How can I remove the circle bullets from the expanding menus on this page ?

Thanks

How do I remove the indenting that happens on a UL with CSS? I want a vertical list but I don't want it to indent as it messes up my design.

Hi, I have a list of items, but when one item goes onto the next line, It doesn't align with the text above it. Here is an example. Look at the right hand column, and notice how the list items, when they go into 2 lines, the second line aligns with the bullet point and not the text.

Anyone know how to fix this?

thanks

Hi Guys,
I am trying to incorporate a CSS file into an xml document.I have the following problem.

My XML file is:

<!-- example of an list item -->

<?xml-stylesheet type="text/css" href="styledocument.css" ?>

<document>

<employee>
<firstname>peter</firstname>
<lastname>lance</lastname>
</employee>

</document>

My corresponding styledocument css file is :

employee {display:list-item;color:red;}
firstname {display:inline;}
lastname {display:inline;}

---

Output in IE5:

peter lance
-----

The expected output should be peter and lance as list items with bullets preceding them and in red color. But my output is
peter lance in just red color without any bullets.

List-item value of the display attribute is not recognised at all.

Can u help deal with this problem!!!