CSS - Mysterious Line Break Between Divs

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

Anyway to remove the automatic line break after list items? I'd like to use styles to create roll-over effects in a menu I've used an unordered list to create that menu. But, I'd like a horizontal menu bar rather than a vertical menu column.

Thanks!
David Goldfeder

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 -

I can't get IE7 or IE6 to look corectly. IE8 and other browsers appear to be fine.

Any suggestions?

html:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="ctl00_ctl00_ctl00_ContentPlaceHolderDefault_head">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>HOME - My Company </title>
    <link rel="stylesheet" type="text/css" href="/css/CC_Style.css" />
</head>
<body>
    <div id="wrapper">
        <div id="main">
            <div id="bannerHolder">
                <img id="banner" src="../media/108/banner_home.jpg" alt="" />
                <div id="banner2">
                </div>
            </div>
        </div>
        <div class="clearfix">
        </div>
        <div id="footer">
            Copyright @ 2002-2010, My Company, Inc. <a href="#">PRIVACY STATEMENT</a>
            | <a href="#">SITEMAP</a>
        </div>
    </div>
</body>
</html>

CSS

Code:

/*LAYOUT*/
*{
    padding: 0px; 
    margin: 0px; 
}
body
{
    text-align: center; 
    background-image: url(../images/bg.gif);
    background-repeat: repeat-x repeat-y;
}
#wrapper
{
    margin: auto; 
    text-align: center; 
    width: 960px;
    background-color: #FFF;
}

/*--------------- B A N N E R S --------------*/
#bannerHolder
{
	padding: 0; 
    margin: 0;
    border: 0;
    text-align: left;
    background-color: #fff;
    height: 198px;
}
#banner
{ 
    width: 655px;
    height: 198px;
}
#banner2
{
    float: right;
    height: 198px;
    background-color: #e5f2fb;
    width: 304px;
}

/*--------------------- M A I N -----------------------*/
#main
{
    background: #fff;
    height: 300px;
}
#news	/* News Bar for Banner DocTypes */
{
    border-left: solid 1px #ccc;
    float: right;
    margin: 15px 0 15px 0;
    padding: 0 15px 0 15px;
    width: 274px;
    height: 350px;
}

/*--------------------- F O O T E R -----------------------*/
#footer
{
    height: 22px;
    line-height:22px;
    font-size: 10px;
    color: #aaa;
    border-top: solid 1px #ccc;
    text-align: right;
    padding-right: 15px;
}
#footer a
{
    font-family: Arial, Helvetica, sans-serif;
    color: #3a80a2; 
}

/*----------------- F I X E S -----------------*/
.clearfix
{
    clear: both;
}

Hi,

http://www.expressible.net/index.php?cat=1

The problem I'm having is that on the page the 'Navigation' and 'Register' headings aren't in line. They are both styled so they are the same size though and I can't see anything which is stopping them from aligning.

Also I've googled this but I still can't find the answer; are there any ways of making my titles and navigation look more appealing?

Thanks a lot.

Viewing in Firefox 3.

This is how I created layout of my website:

div.HEADER
>div.logo
>div.members
>div.mainmenu
div.CONTENT
...........

After div.logo floats left, div.members floats right, and div.mainmenu just under. For some reason, there appears one empty line above div.main menu

HEADER AREA:
Code:

#header, #logo, #members, #mainmenu {
	margin:auto;
	text-align:left;
	float:left;
	}
#logo {
	width:500px;
}
#members {
	width:300px;
}
#members ul{
	float:left;
	list-style-type:none;
}
#members li a{
	display:block;
	font-weight:normal;
	text-decoration:none;
}
#mainmenu {	
	width:800px;
	text-align:center;
	height:25px;
	background:#6078BF;
	border-bottom:1px solid #E6ECFF;
	font-size:14px;
}
#mainmenu ul {
	list-style:none;
}
#mainmenu ul li{
	display: inline;
	margin:0;
	padding:0;
}
#mainmenu ul li a{
	display:block;
	float:left;
	width:95px;
	height:25px;
	line-height:25px;
	overflow:hidden;
	color:#E6ECFF;
	font-weight:bold;
	text-decoration:none;
	background:#6078BF url(images/mmenu_line.gif) right no-repeat;
}
#mainmenu ul li a:hover {
	background:#809FFF right no-repeat;
}

Hi

I am having problems when using relative divs in CSS

the items on the right keep jumping down to the next line.

i have included an image of what it looks like, i wanted to make it so that the items on the right were aligned with those on the left. the left always stays fixed width but the right is dyamic depending on content.

any suggestions?

Cheers

PS the code is as follows

html, body{
margin:0;
padding:0;
}

#topleft {
position: relative;
width: 180px;
left: 12px;
height: 23px;
z-index: 1;
vertical-align: middle;
background-color: red;
}

#topright {
position: relative;
left: 192px;
height: 23px;
z-index: 2;
vertical-align: middle;
background-color: green;
}
#topleftwhite {
width: 180px;
position: relative;
left: 12px;
height: 23px;
z-index: 3;
vertical-align: middle;
background-color: blue;
}

#toprightblue {
position: relative;
left: 192px;
height: 23px;
z-index: 4;
vertical-align: middle;
background-color: orange;
}

#leftmenu {
position: relative;
left: 12px;
width: 180px;
height: 23px;
z-index: 5;
vertical-align: middle;
background-color: pink;
}

#rightcontent {
position: relative;
left: 192px;
height: 23px;
z-index: 6;
vertical-align: middle;
background-color: yellow;
}

#whitebottomleft {
position: relative;
width: 180px;
left: 12px;
height: 23px;
z-index: 7;
vertical-align: middle;
background-color: gray;
}

#bluerightbottom {
position: relative;
left: 192px;
height: 23px;
z-index: 8;
vertical-align: middle;
background-color: black;
}

#blueleftbottom {
position: relative;
width: 180px;
left: 12px;
height: 23px;
z-index: 9;
vertical-align: middle;
background-color: #FF33FF;

}

#whiterightbottom {
position: relative;
left: 192px;
height: 23px;
z-index: 10;
vertical-align: middle;
background-color: #996600;
}


HTML

<div id="topleft">topleft</div>
<div id="topright">middletop</div>
<div id="topleftwhite">tleftcorner</div>
<div id="toprightblue">bluetop</div>
<div id="leftmenu">menu</div>
<div id="rightcontent"> content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here </div>
<div id="whitebottomleft">bleftcorner</div>
<div id="bluerightbottom">bluebottom</div>
<div id="blueleftbottom">bottomleft</div>
<div id="whiterightbottom">middlebottom</div>

w3 css-validation tool
Quote:
context:html body
Property word-break doesn't exist : break-all



it doesnt validates ,, why?? It changes both attribute in ie and firefox,, I use it because when people choose bigger text sizes my divs mix up because of long words so I use word-break. What do you prefer me?? Live without validation

Please poke around this site -

http://swansonre.tmhdesign.com/home-payment-calculator.asp

See the main content area (in white). It should butt up to the green navigation area but instead I get a gap for some reason or another. I've dissected this page up and down, left and right, but can't find what is causing the issue. If you browse some other pages you will see they are just fine.

Thanks so much.

T

So this is my first time every going this in-depth with creating a website from scratch simply using CSS. So far with the help of many tutorials it's been really great. However, shortly after adding my layout to my code a problem arose. For a while it was okay. I started creating different containers and parts of the page. But then after one save this bar magically appeared. After ctrl-z'ing as far as I could and refreshing I could not find the problem.

Here is a picture of the bar above the page:

http://tinypic.com/r/124zv47/7



Here's the code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type="text/css">

/*Currently not in use*/
.className {
	position: absolute;
	top: 0px;
	left: 0px;
}

/*Surrounding background cover*/

#outside_container {
	background: url(Slice.jpg);
	background-repeat: repeat-x;
	background-color: #000;
	min-height: 900px;
}

/*Actual background*/

#container {
	background: url(Complete_Layout.jpg);
	background-repeat: no-repeat;
	background-position: center;
	min-height: 900px;
}

/*Future sidebar*/

ul#navigationmenu {
	text-decoration: none;
}


body {
	margin: 0px;
	padding: 0px;
}
</style>
</head>
<body>
<div id="outside_container">
	<div id="container">
		<ul id="navigationmenu">
			<li><a href="#">Home</a></li>
			<li><a href="#">About Us</a></li>
			<li><a href="#">Contact Us</a></li>
			<li><a href="#">Competitions</a></li>
			<li><a href="#">Blog/Updates</a></li>
		</ul>
	</div>
</div>




	

  
</body>
</html>

I just don't understand IE... something that should work just doesnt, and then it works fine on another page.... for example...

Scroll Over The Staff Links at the very bottom

You will notice that the black background disappears when viewed in IE... but
take a look at the code isolated in IE

and it looks perfect...