CSS - Ie & Displaying Form On One Line

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've got two lines of text. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line (and maybe below the second). How can I increase spacing between the two lines only, without increasing above and below? Thanks!

Greetings,

I have a class called "header" and I am trying to give it a touch of extra space between it and the next line.

All of my headers are just a few words and thus on one line. I tried placing "line-height: 1.5em" in my "header" class and it shows up correctly in Dreamweaver but not in IE. My thought is, because it is only a single line, that class value does not kick in because there is no second line for that class.

Is there a way to conrol this in CSS or am I going to have to resort to using a....gulp.....spacer?

Thanks in advance!

Greetings,

I am relatively new to CSS and am using background image bullets. Problem is, in the case of a two line link, the bullet aligns in between the two lines and I need it to align to the top line. Below is the CSS, and attached is a screenshot of the link to better illustrate my predicament. Thanks for any help!

li
{
list-style-type: none;
background: url(../images/bullet.gif) no-repeat left;
padding: 0 0 0 10px;
}

Hi all,

How to go to next line if the width of the content is more than specified width?

Thanx/Chandar

Hello,

I use always use the <br /> tag and I just found out in using the clearing of divs like;
Code:

<div style="clear:both; margin-top:5px"></div> 

for next line or breaking of line. Is this a good thing to use?

Hello,

At my blog test site You'll notice the Quote:
<< Hello World! | Gettin' Closer >>
text in the middle. Just as you see it above, I'd like that all on one line, but can't seem to figure out how to do it. Driving me nuts.

Anyone?

The CSS code controlling that is
Code:

.alignright {
	text-align: center;
	display: inline;
	}
	
.alignleft {
	text-align: center;
	display: inline;
	}

Thanks!

Chris

Thanks for taking the time to read my question

I have a row of pictures as nav links, and under them I want to put a row of text stating what each link is

Picture Picture Picture Picture
Text Text Text Text

Each pic is 52px wide, so I made the containers for the text 52px wide. both have left and right margins of 10px (I made the .NavText margin 11 to compensate for the 1px border) yet they don't line up!! What am I missing?

Thanks,

Brad

html
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="Canada Carriage - A supplier of great carriages from XXXXXXX." />
<meta name="keywords" content="Horse drawn vehicle, Carriages, Carts, Horse carriages, Horse carts, Coyaltix, Manitoba, Canada, Dealer, Equine, FEI, CDE, Combined Driving Event, Pleasure driving, Competition driving, Custom made, Fine quality, Affordable prices, European manufactured, Drive Canada" />
<meta name="Revisit-After" content="7 Days" />
<meta name="Robots" content="index, follow" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Canada Carriage</title>
<link rel="stylesheet" type="text/css" href="LC.css" media="screen" />
</head>
<body>
<div class="MainCont">
<img class="HomeLogo" src="images/logo.jpg" />
<div class="NavHolder">
<a href="LisaClarkDesigns_About.htm"><img class="ImgNav" src="images/AboutNav.gif" alt="Click here to navigate to the About Lisa Clark Designs page." /></a>
<a href="LisaClarkDesigns_Portfolio.htm"><img class="ImgNav" src="images/PortfolioNav.gif" alt="Click here to navigate to the Lisa Clark Designs Portfolio page." /></a>
<a href="LisaClarkDesigns_Fees.htm"><img class="ImgNav" src="images/FeesNav.gif" alt="Click here to navigate to the Lisa Clark Designs Fees page." /></a>
<a href="LisaClarkDesigns_Contact.htm"><img class="ImgNav" src="images/AboutNav.gif" alt="Click here to navigate to the Lisa Clark Designs Contact page." /></a>
<div class="NavText">About</div>
<div class="NavText">Portfolio</div>
<div class="NavText">Fees</div>
<div class="NavText">Contact</div>
</div>
</div>
</body>
</html>

css
Code:

body {
background-color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}

.MainCont {
width: 800px;
margin: 0px auto;
padding: 0px;
}

img.HomeLogo {
margin-left: auto;
margin-right: auto;
margin-top: 200px;
margin-bottom: 0px;
display: block;

}

img.ImgNav {
border: 1px solid #999999;
padding: 0px;
margin: 0px 10px 0px 10px;
width: 52px;
}

.NavHolder {
margin-left: auto;
margin-right: auto;
margin-top: 100px;
margin-bottom: 0px;
padding: 0px;
display: block;
width: 314px;
background-color: orange;
}

.NavText {
padding: 0px;
margin: 0px 11px 0px 11px;
width: 52px;
color: #ffffff;
font-size: 12px;
float: left;
display: inline;
background-color: red;
}

i have a series of divs that look like this

Code:

<div>
   <div></div>
   <div></div>
</div>

<div>
   <div></div>
   <div></div>
</div>

Each of the inner divs use the float attribute but when it comes to the second outer div it doesnt automatically go onto the next line it sort of continues from where the last div left off. Why is this...

I'm having trouble making the line-height work the way I want to in IE.

I set the line-height of the outer container to this tag cloud to 24px, yet on IE it doesn't seem to be working. Any Ideas?

Check it out.
http://gifdump.com/tags/

Viewed on Firefox


Viewed on IE

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;
}

I have a left-hand side nagivation TD containing plain-text links. The TD is a fixed width and I want to be able to indent automatically the second line of text in a link should the text for the text for the link exceed the fixed width of the TD. Anyone know how to achieve this effect?

An example of what I might want it to look like...

Code:

Link one
Link two
A longer link
   three
Link four

Hi

I have a classic CSS:-

ul.none {
FONT-SIZE: 70%;
line-height: 10pt;
COLOR: #000000;
list-style-position: intside;
list-style-type: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
position:relative;
width:150px;
padding:10px;
text-align:center;
BACKGROUND-COLOR: #EDF5F5;
border: 1px solid #0000000;
}

AND THE HTML:-

<ul class="none">
<li>NEWS 1</li>
<li>NEWS 2</li>
<li>NEWS 3</li>
<li>NEWS 4</li>
<li>NEWS 5</li>
</ul>

I want to have a larger gap between each <li> item, without using a <p> or a <br>?

Line height or spacing does not work, it spaces out everything. E.g if the text in the <li> is longer than a line it makes this line higher, which means it looks well daft if you see what i mean. because everything is so spaced out.

Margin and Padding do not work for what i wish to achieve.

Could anyone Help please.

i am trying to do something like:

<h6>blah</h6><span class="note">*blah</span> but *blah is appearing underneath the h6 which is fair enough but how do i make it appear on the same line? i cant for the life of me think of a css property that lets me do that?