|
CSS - Valid <form> Without Line-break In Strict Xhtml/css
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? Similar TutorialsSo my page is valid strict xhtml 1.0, and valid css 2, yet it looks so messed up in FF. I can't figure out why. http://www.drowninginmytears.org/index.php It looks perfect in IE, but totally messed up in FF Can anyone help? Thanks. I usually build in XHTML Traditional, and modify via CSS... but i want to learn how to build in XHTML strict.. and practice i notice is putting data in ul lists... which when the css is taken off, gives quite a nice structured layout of text and such... problem is, i dont know how to do it to where the "dot" doesnt show up... anyhelp would be great. thanks Is there an equivalent to the target attribute in XHTML strict for anchor tags? I am developing websites using ASP.NET and C# for the code-behind. I just started using css design and I realized after trying to validate my rendered pages that some things in ASP.NET would be VERY difficult to make completely valid. IE: ASP.NET automatically renders this piece of code everytime the page is rendered: Code:
<script language="javascript">
<!--
function __doPostBack(eventTarget, eventArgument) {
var theform;
if (window.navigator.appName.toLowerCase().indexOf("netscape") > -1) {
theform = document.forms["frm"];
}
else {
theform = document.frm;
}
theform.__EVENTTARGET.value = eventTarget.split("$").join(":");
theform.__EVENTARGUMENT.value = eventArgument;
theform.submit();
}
// -->
</script>
That right there is invalid due to the fact that it does not have type="text/javascript" in the <script>. There are many other instances of this that I won't go into detail. In order to fix this you have to override ASP.NET's page rendering methods and do a Regex! thats right, a regex on EACH line of code to replace the line above with valid XHTML. This can become VERY inefficient if you are serving 30+ pages a second. My question is this: at this point is it really worth the performance hit on my web server to make my asp.net sites XHTML compliant? on a side note, I would like to bludgeon the MS designer that wrote these chunks of code into ASP.NET!@!$%#$ thanks! I have a web site using XHTML 1.0 Strict. The main body of the web pages is absolutely positioned 225px from the left, 100px from the top and is 750px wide. There is a banner and menu at the top and then another menu with links to the left. They are also absolutely positioned as well. I am using IE 6.0 as the main web browser since this is a corporate environment. The problem that I am having is that when I select text in the main body it either selects everything from the top down to the cursor or from the cursor to the end. I have troubleshot this and narrowed it down to the absolute positioning. It works fine in IE 7 with the absolute positioning. Does anyone know why this is happening and is there a work around for this? Thank you. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Code: #content {
position:absolute;
width: 750px;
left: 225px;
top: 100px;
z-index: 500;
border-top-style: outset;
border-right-style: outset;
border-bottom-style: outset;
border-left-style: outset;
background-color: #ECE9E2;
}
quirks mode is what i'm using, but now im thinking that in order to support all browsers i need to jump to strict. now im really in trouble. is strict right for me? xhtml or html? my site works perfectly in firefox because that is what i have been testing it in, but it works horribly in IE. so, will switching to strict give me the best compatibility? I've been making ok progress with CSS (thanks to your help ) but have come up with a problem when wanting to embed a flash movie into my webpage. How do i do it using CSS? the follwing Html code works fine but fails upon validation. Code:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="300" height="300>
<param name="movie" value="flash/home.swf">
<param name="quality" value="high"><param name="BGCOLOR" value="#A1D7FD">
<embed src="fighter.swf" width="250" height="250" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" bgcolor="#A1D7FD"></embed></object>
Any help is appreciated. Also - is it a bad idea including small intro flash movies for webpages? any help is appreciated Hi- I need to know if IE 5, IE 6 or IE7 are considered standards-compliant and do any of them support fully CS2 and strict standards? Thanks in advance- S Hi! How do I open a link in a new window in XHTML strict? (knowing that target="_blank" forbidden). Thank you How do I create two div blocks that lay side by side from each other? Right now I have two "column" divs (one left and one right), and separate "box" div that contain the content. CSS: Code: div#frame
{
width: 40%;
margin-top: auto;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: 5px;
border-right-color: black;
border-bottom-color: black;
border-left-color: white;
border-top-color: white;
}
div#title
{
width: 100%;
background-color: black;
color: white;
}
div.box
{
width: 100%;
border-style: solid;
border-width: 5px;
border-right-color: black;
border-bottom-color: black;
border-left-color: white;
border-top-color: white;
}
div#left
{
width: 45%;
}
div#right
{
width: 45%;
margin-left: 50%;
}
HTML: Code:
<div id="frame">
<!--------------------------->
<div id="left">
<div class="box">
<div id="title">NEWS</div>
fsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jkl</div>
<div class="box">
<div id="title">RECENT GAMES</div>
fsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jkl</div>
</div>
<!--------------------------->
<div id="right">
<div class="box">
<div id="title">NEWS</div>
fsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jkl</div>
<div class="box">
<div id="title">RECENT GAMES</div>
fsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jkl</div>
</div>
</div>
Link: http://mushsauce.110mb.com/art.html Below is my CSS file for list. Code: li {
list-style-position: outside;
}
ul {
list-style-position: outside;
list-style-type: disc;
margin-left: 15;
}
ul ul {
list-style-position: outside;
list-style-type: circle;
margin-left: 25px;
}
ol {
list-style-position: outside;
list-style-type: upper-alpha;
}
ol ol {
list-style-position: outside;
list-style-type: decimal;
margin-left: 25px;
}
ol ol ol {
list-style-position: outside;
list-style-type: upper-alpha;
margin-left: 35px;
}
Now, here's the problem. When I do this: Code: <b>Section Title</b> <ul><li>List 1</li> <li>List 2</li> <li>List 3</li> </ul> The result showed up like this: Section Title *List 1 *List 2 *List 3 Is there a way to not having the line break after the "Section Title"? I want it to show up like this: Section Title *List 1 *List 2 *List 3 How to I take out the extra line break? Any help is grateful! ljCharlie Hi im having trouble with a padding problem. I have a paragraph with a background color, and I need the paragraph to be on two seperate lines so I add the <br> tag and when i do this happens. http://www.sloweducation.com/la.htm You see, it only does the padding-left on the top line.. is there a way I can make it pad the bottom line also? I dont know what to do at all. Thanks. 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 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. 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 I am new to xhtml and am working on my web page i want to use a graphic to split my different areas and the book i was using only showed how to put in a plain line, In .css PHP Code: h2 {border-top:1px solid #4D65A0} I have found a graphic i want to use from the animation factory cd's i have and now im lost as to how to put it in. new line: slash_blue_mw.gif sorry posted in the wrong spot b4 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 - |
|||||||