|
CSS - Validation Problem (form)
Hello every one, thanks for your help before hand,
I have validating my own website, so far so good, but I have this problem. I can not figure out why is not validating, the problem lies on this second line of code: <input type="hidden" name="cfgId" value="1" /> So part of the form looks like this: <form action="/cgi-bin/ssecure/ssecure.pl" method="post" enctype="multipart/form-data"> <input type="hidden" name="cfgId" value="1" /> The Error message for validation says this: Validation Output: 1 Error Line 152, Column 49: 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. <input type="hidden" name="cfgId" value="1" / > <input type="hidden" name="cfgId" value="1" / > The last haracter ">" of this last line are in RED. Then it says: 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>"). ------------------------------------------------------------------------ The question, what is that I am doing wrong? Thanks, Similar TutorialsHi all, I'm sure this is an easy fix, but I can't get it. I have a javascript rollover image swap, and can only get it to validate if I don't use the border="0" attribute. The site is to be pure css, but the course requires me to use some javascript to show understanding. So it works fine, but showing a blue border in ie, and a red border in mozilla. My question is, if you can help, how to hide/get rid of the border, and have validate at the same time. Cheers Solar. html link http://darkspeed.atspace.com/Javascript.htm css link http://darkspeed.atspace.com/speedstyle.css the div is #roll, hope this makes sense.. thanks. And if I'm doing it all wrong any advice would be appreciated.. Thanks again. Hello, I have been working for a few days on this form layout and it works pretty much the way I want it to in FF but everything goes to hell when I open it in IE. If you look at the code the three <td class="td_spacer"> elements are floated to the right but I dont know why the in IE they extend vertically off the page instead of reaching the predefined width of the form, where they should then be forced down to the row below. I hope someone can help me make sense of this. Code: form{
display:block;
width:566px;
margin:0px;
padding:0px;
}
#form_table{
border-style:solid;
border-color:black;
border-width:thin;
border-spacing:0px;
border-collapse: collapse;
float:right;
width:564px;
margin:0px 0px 50px 0px;
padding:0px;
}
#form_table thead tr{
color:white;
text-align:left;
background-color:#1B1B1B;
border:solid black thin;
}
#form_table tbody tr td{
float:right;
display:block;
}
#country_list{
list-style-type:none;
margin:0px;
padding:5px 0px 0px 0px;
}
.td_spacer{
display:block;
margin:0px;
padding:10px 0px 0px 0px;
}
.input{
width:300px;
}
#message_box{
width:558px;
height:286px;
}
Code: <form name="jobs" action="php/rtProcessor.php" method="post">
<table id="form_table" summary="post form">
<thead>
<tr>
<th><span class="">Post</span></th>
</tr>
</thead>
<tbody>
<tr>
<td style="float:left;">
<ul id="country_list">
<li id="china"><input type="radio" name="color" value="red" />red</li>
<li id="japan"><input type="radio" name="color" value="green" />green</li>
<li id="korea"><input type="radio" name="color" value="blue" />blue</li>
<li id="thailand"><input type="radio" name="color" value="orange" />orange</li>
<li id="other"><input type="radio" name="color" value="Other" />Other</li>
</ul>
</td>
<td class="td_spacer">
<label for="companyname">Company Name:</label>
<input type="text" id="companyname" name="companyname" class="input" />
</td>
<td class="td_spacer">
<label for="email">E-Mail Address:</label>
<input type="text" id="email" name="email" class="input" />
</td>
<td class="td_spacer">
<label for="subject">Subject:</label>
<input type="text" id="subject" name="subject" class="input" />
</td>
</tr>
<tr>
<td>
<label for="message">Listing:</label>
<textarea id="message_box" name="message" rows="16" cols="67"></textarea>
</td>
</tr>
<tr>
<td>
<label for="hii">1+1 is?</label>
<input type="text" id="hii" name="hii" class="input" />
</td>
</tr>
<tr>
<td>
<input type="submit" value="Submit" name="submit" />
</td>
</tr>
</tbody>
</table>
</form>
Dear all, A very strange css problem when applying styles to the form tag. This page, when viewed in FF or Safari, has odd red background colouring the central directory items. It is caused by the lower form tag. If I remove the lower form tag, the problem disappears, but I don't want to remove the lower form tag! Can anyone (dev)shed any light on this? Looks fine in IE, and it validates fine. Many thanks I dont understand why form at the following address take blockquote's background. http://refinethetaste.com/html/cp/?Section=stats&Process=ViewStats Code: Code: <form action="" method="post">
<fieldset class="width50">
<div class="row">
<label for="DateRange">Date Range</label>
<select name="DateRange" class="width50">
<option value="Today" selected="selected">Today</option>
<option value="Yesterday">Yesterday</option>
<option value="Last24Hours">Last 24 Hours</option>
<option value="Last7Days">Last 7 Days</option>
<option value="Last30Days">Last 30 Days</option>
<option value="ThisMonth">This Month</option>
<option value="LastMonth">Last Month</option>
<option value="AllTime">All Time</option>
</select>
</div>
</fieldset>
<fieldset class="width50">
<input type="submit" value="Go" class="button" />
</fieldset>
</form>
<blockquote>
<p>
<div id="placeholder" style="width:100%;height:300px"></div>
</p>
<script>
$(function () {
// a null signifies separate line segments
var d1 = [[1,38],[2,132],[3,41],[4,3],[5,291],[6,62],[7,31],[8,33],[9,125],[10,0],[11,0],[12,0],[13,0],[14,0],[15,0],[16,0],[17,0],[18,0],[19,0],[20,0],[21,0],[22,0],[23,0],[24,0],[25,0],[26,0],[27,0],[28,0],[29,0],[30,0],[31,0],];
$.plot($("#placeholder"), [d1]);
});
</script>
</blockquote>
i have a style sheet which says form should have no margin/paddings at all.. now the problem is that i have a form and i use: <form style="margin-top:12em; padding-top:12em;" > however if i use a value of anything <12 it doesnt move down one tiny bit, for 12em it will move down a bit (about 2em) and if i set it to 14 then it will move down more (about 5em). the form in question has an image & a hidden field. which have margin:0, padding0 applied to them, but my GUESS is it doesnt matter what they have because i am telling form to move down so all elements within it should move down as well but still be margin:0 etc? or am i reading/thinking it wrong? At this address my website form and shows differently in IE and Firefox. The questions I have a 1. the border I have coloured but in IE if I do not style it IE produces a nice rounded border but the wron colour. Does anyone know how to get the rounded border corners AND ones own colour? 2. In IE the space between the legend text and the first label text is OK but in Firefox is is greater for some reason. Any clues as to how to make it the same? Please take a look at my css form he http://www.pearl.ru/isdunyasi/admin/default[1].htm For some reason row under select boxes dislocated. I couldnt figure out why. Any help appreciated. Code:
/**************** Form styles ****************/
fieldset {
margin:1em 0;
border:none;
border-top:1px solid #aaaaaa;
}
legend {
color:#aaaaaa;
background:transparent;
font-size:14px;
font-weight:bold;
}
label {
float:left;
width:100px;
padding:0 10px;
text-align:right;
}
fieldset div {
margin-bottom:.5em;
padding:0;
display:block;
}
fieldset div input,fieldset div textarea {
width:150px;
border-top:1px solid #000000;
border-left:1px solid #000000;
border-bottom:1px solid #aaaaaa;
border-right:1px solid #aaaaaa;
padding:1px;
}
#Submit input {
border:1px solid #d7d7d7;
padding:2px;
background:#aaaaaa;
color:#FFFFFF;
font-weight:bold;
}
fieldset div.Req {
font-weight:bold;
}
Hi all, I cannot figure why last two form inputs at the following website appears wrong near the end. I also included a screenshot. http://www.refinethetaste.com/yk/addproject.asp Hello, I have a problem to display a List/Menu in IE. It cut off the text in the drop down list when I set the WIDTH of the drop down box shorter than the text. It works fine in FireFox. Here is the picture I captured to demonstrate what I'm talking about. Sorry the forum don't allow me to post url, please copy the link and paste it in your browser linklighthouse.com/dropdown_ie.html How do I fix this problem in IE? Please help! Thanks hi my page involves having a form element inside of a div. the div is floated left. relevant (seemingly) css from my stylesheet & html code (all simplified for readability) form { margin: 0px; padding: 0px; } .mydiv { float: left; } html looks vaguely like: <div class="mydiv"><form name="blah" action="blahblah"> .... all form controls </form></div> PROBLEM!!!! in mozilla, none of the form elements display. in ie, everything displays as expected. PLEASE HELP ME BEFORE I GO INSANE AND START KILLING INNOCENT PEOPLE. thanks in advance. d 18 #header Property border-radius doesn't exist in CSS level 2.1 but exists in [css3] : 10px 10px 0 0 When validating I get this message but this would validate in CSS 3. So is this ok or is there a way around this to make it validate in 2.1. Regards Karl I just added a bit of javascript into my css layout for my html page I am working on and it went from validating perfectly fine to tossing me out some errors. I was hoping I could get some direction as to what exactly is going on with these errors and how I may go about eliminating them? Here's the html, all the css validates fine: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="test5.css">
<link rel="stylesheet" type="text/css" href="topmenu.css">
<link rel="stylesheet" type="text/css" href="header.css">
<link rel="stylesheet" type="text/css" href="body.css">
<link rel="stylesheet" type="text/css" href="accountselector.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="animatedcollapse.js">
/***********************************************
* Animated Collapsible DIV v2.4- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
animatedcollapse.addDiv('MyAccount', 'fade=0,speed=400,group=AccountDiv')
animatedcollapse.addDiv('HelpAndSupport', 'fade=0,speed=400,group=AccountDiv,persist=1,hide=1')
animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
//$: Access to jQuery
//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
//state: "block" or "none", depending on state
}
animatedcollapse.init()
</script>
<title></title>
</head>
<body>
<div id= "wrapper">
<div id="accountselector-wrapper">
<div id= "accountselector-home">Personal</div>
<div id= "accountselector-business">Business</div>
<div id= "accountselector-spacer"> </div>
</div>
<div id= "headerwrapper">
<div id="headerwrapper-left">
<div id= "headerwrapper-left-logo">US Sonet Logo</div>
<div id= "headerwrapper-left-navigation">
<div id= "navmenu">
<ul>
<li><a href="">Internet</a>
<ul>
<li><a href="test.html">Test 1</a></li>
<li><a href="test.html">Test 2</a></li>
<li><a href="test.html">Test 3</a></li>
</ul>
</li>
<li><a href="">Telephone</a>
<ul>
<li><a href="test.html">Test 1</a></li>
<li><a href="test.html">Test 2</a></li>
<li><a href="test.html">Test 3</a></li>
</ul>
</li>
<li><a href="">Television</a>
<ul>
<li><a href="test.html">Test 1</a></li>
<li><a href="test.html">Test 2</a></li>
<li><a href="test.html">Test 3</a></li>
</ul>
</li>
<li><a href="">About Us</a>
<ul>
<li><a href="test.html">Test 1</a></li>
<li><a href="test.html">Test 2</a></li>
<li><a href="test.html">Test 3</a></li>
</ul>
</li>
<li><a href="">FAQ</a>
<ul>
<li><a href="test.html">Test 1</a></li>
<li><a href="test.html">Test 2</a></li>
<li><a href="test.html">Test 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id= "headerwrapper-left-banner">US Sonet Banner</div>
</div>
<div id= "headerwrapper-right">
<a href="#" rel="toggle[MyAccount]" data-openimage="ManageMyAccountGrey.png" data-closedimage="ManageMyAccountBlue.png"><img src="ManageMyAccountGrey.png" alt="none"></a>
<div id="MyAccount">
The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years. A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple commands.
</div>
<b></b>
<a href="#" rel="toggle[HelpAndSupport]" data-openimage="HelpAndSupportGrey.png" data-closedimage="HelpAndSupportBlue.png"><img src="HelpAndSupportGrey.png" alt="none" ></a>
<div id="HelpAndSupport">
The dog (Canis lupus familiaris) is a domesticated subspecies of the wolf, a mammal of the Canidae family of the order Carnivora. The term encompasses both feral and pet varieties and is also sometimes used to describe wild canids of other subspecies or species. The domestic dog has been one of the most widely kept working and companion animals in human history, as well as being a food source in some cultures.
</div>
</div>
</div>
<div id="bodywrapper">
<div id="bodywrapper-leftwrapper">
<div id="bodywrapper-leftwrapper-subnav"><p>Link1</p><p>Link2</p><p>Link3</p></div>
<div id="bodywrapper-leftwrapper-news" >News</div>
</div>
<div id="bodywrapper-rightwrapper">
<div id="bodywrapper-rightwrapper-body">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque
adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam
libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor
cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque
in dui. In eget elit. Praesent eu lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque
adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam
libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor
cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque
in dui. In eget elit. Praesent eu lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque
adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam
libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor
cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque
in dui. In eget elit. Praesent eu lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque
adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam
libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor
cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque
in dui. In eget elit. Praesent eu lorem.</p></div>
</div>
</div>
</div>
<div id= "footer">Test Footer</div>
</body>
</html>
I am getting a: Line 91, Column 55: Attribute "DATA-OPENIMAGE" is not a valid attribute Line 91, Column 98: Attribute "DATA-CLOSEDIMAGE" is not a valid attribute What would be the correct way to call this? The page works fine with all of the browsers I have checked it with, but if I don't have that attribute shown the images fail to load on the menu style I have set. When the image is clicked it is supposed to swap out images and pull the menu either up or down. If I take out that attribute call, the image simply fails to load period. Any suggestions? Thanks in advance. Hello, Please tell me, if you can, why I am getting a CSS Validation warning with: http://student.flvs.net/html/millety/mod8/sitemap.htm. Click the box on the bottom to see the XHTML Validation and on validate CSS right under to see the warning. Thanks! Hi, My CSS is nearly completed. Have spent a lot of time on this design and I must say I have learnt a lot on CSS from this forum. However I have a problem! I do not know if my CSS is correct or not! Are there any tools that can say if the CSS I have is correct or not? At the moment my CSS works on IE (7.0), FireFox and Opera, giving the same result on these three browsers. What I am searching for is to know if maybe I implemented some CSS in a way that could be implemented in another way!! Or maybe if I left some loopwhole in my CSS! Thanks and Regards, Sim085 I normally try XHTML Validation, however, this time I'm trying CSS validation as well. Most of these errors that I came across were in "background-color" and it says you've NO "background-color", which after delving into it further, I realised that whereever I've "color", I HAVE TO HAVE "background-color" as well or whereever I had "background-image", I should ALSO have "background color" & "color", alongside. Bearing this in mind, I managed to reduce the error considerably, however, there seems a tiny hiccup at the moment. I've the background of "centerContent" as image. WITHIN this centerContent, I've texts & within these texts, I've many headings. Now, if I use "h3" and type in "Favourite", it'll display in "h3" style, HOWEVER, the precise background of "h3" stays whatever the background of the "contentCenter" is, which is perfectly fine. Code: h3
{
color:purple;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:left;
font-size:150%;
margin:2% 3%;
border-bottom:thin solid #990000;
}
Now, the "background-color:transparent" works perfectly well but if I put "background-color:transparent", I'm STILL getting warning for that. Hence, when I do "background-color:#FFFFFF;", I'll get the "white" space behind the "h3" and NOT the contentCenter's image. Same goes for other elements like "p", "h1", etc. In addition, if I do "background:url(centercontentbackground.jpg) #FFFFFF;", what it does is that it although displays the "centerContent's" image, but it displays it OVER "centerContent's image" i.e. the same image OVER each other. Attached with this message is the "template" page i.e. the way it look IF I add "background:url(centercontentbackground.jpg) #FFFFFF;" in "p" element. While the same template page can be seen with ONLY ONE image i.e. "centerContentbackground's image" perfectly well on: http://darsh25.silverserve.co.uk/Al...gn/template.php Hello all. I'm curious as to your thoughts on validating CSS documents. For example I have a document that is not valid because of some style settings of a menu I'm using with effects from script.aculo.us. Using the blind down (and blind up) effects found on that site, the menu would normally cover the content whereas I am using the following CSS to make it translucent: Code: filter: alpha(opacity=80); -moz-opacity: .20; opacity: .80; Those three lines are the lines that fails the validator and I'm curious as to how big of an issue that is. Thanks in advance. http://validator.w3.org/check?uri=h...ne&ss=1&group=0 With validation on this site I get this error: Sorry, I am unable to validate this document because on line 267 it contained one or more bytes that I cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication. The error was: utf8 "\x96" does not map to Unicode Line 267: <h4><strong>Fabulous Getaways - Bakoven Villas Place </strong></h4> I have reenetered it plain text but still that error. I have no idea how to fix this. Anybody know? I'm having some serious difficulties... but not the standard, "what's wrong with my code", everything validates properly. Seperately... I really dislike linking outside of a forum to describe a situation... but in this scenario I think it is the only feasible way to explain it. The template that I have created for my website validates as, xhtml 1.1 -- tentatively as do all other documents that validate against the formal parsing. See the following to understand my situation. EDIT: Validation of my pages template in html format. - yay! it validates as XHTML 1.1 EDIT: Validation of my pages stylesheet - yay! it validates as CSS 2.0 EDIT: Validation of them both together returns the following: - Boooo! It won't validate and also tells me: Code: "Please, validate your XML document first! Line 2 Column 3 The markup declarations contained or pointed to by the document type declaration must be well-formed. " I would have thought that these things are dependent on eachother. Does it make sense that something can pass a XHTML compliant, but then be formed badly in such a way that a formal parser would read it wrong with respect to CSS? Is it because of my comments? If you look at the code of the page I have detailed a few things that I thought were important. I went and validated my CSS. When doing so it listed some warnings yet the CSS still validated. I have tried to correct the warnings and can't seem to satisfy the validator. Code: Example: Line : 19 (Level : 1) You have no background-color with your color : h1 Line : 31 (Level : 1) You have no background-color with your color : a Line : 37 (Level : 1) You have no background-color with your color : a:link Line : 38 (Level : 1) You have no background-color with your color : a:visited Line : 39 (Level : 1) You have no background-color with your color : a:hover etc... I checked the validity of the CSS at jigsaw.w3.org/css-validator/. Theirs validated and they too have some warnings. Should I be concerned with the warnings? Can I fix the issues that it has? I am trying to make my CSS & XHTML all validate without any warnings. Thank You! Greetings Well, I hope I'm not the only one who has struggled with trying to get a page to validate AFTER you have finaly got it working like you'd like it to. I've fixed most of the problems, but this one I'm either too daft or too tired to come up with something. First, here is the current page: http://www.freshrod.com/maryville/maryvillemo_mod.html ...and here is where I'm trying to validate it: http://validator.w3.org/ The problem is that I'm trying to apply css to an <h2> and <p> tag, within an <a> tag. It doesn't like that. However, if you see what I'm trying to have it do on the bottom with those box div's I really can't think of a better way. When I try using <span> to format the text I can't get it to respond right either, but this could just be my poor coding. Any suggestions |
|||||||