|
CSS - Is This A Strict Doctype?
Is this a strict (or even valid) doctype?
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> what should I expect the UA to behave like? Similar TutorialsIf i want to use the strict DTD, is there an alternative to the target attribute on the <a> link which you are no longer allowed to use? 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 Hello guys, i've been trying for the past 2 days to google for textarea sizing under strict mode. i have found no solution and at the moment my problem is this... here is the code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "(URL address blocked: See forum rules)">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<style type="text/css">
.style1 {
text-align: center;
width: 800px;
}
</style>
</head>
<body>
<div class="style1" style="padding: 0px; margin: 10px auto 10px auto; background-color: #D6EBF5; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold; font-style: normal; color: #000000; width: 800px;">Little Bunny</div>
<div class="style1" style="margin: 0px auto 0px auto; background-color: #D6EBF5; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold; font-style: normal; color: #000000;">
<div style="width: 400px; float: left; background-color:#EBEDF3; height: 100px; text-align: center; line-height: 100px;">Text</div>
<div style="width: 400px; overflow:visible; float: left; background-color:#F2F9E8" id="OuterDiv">
<form method="post">
<textarea cols="0" id="T1" name="TextArea1" rows="3" style="float:left; width:100%; height:100px; margin: 5px; padding:0">efefefefefef</textarea>
</form>
</div>
</div>
</body>
</html>
The Textarea expend over the surrounding Div and it shows differntly under FireFox 3.5.7 and IE 8 (tested for both) I'm trying to do the following: make the textarea width 100% and height 100px for example. + padding 5px outside the textarea (space 5px from left, right, top, bottom).. most importent thing is to see it equaly under both ff and ie.. hope you can correct my code since i'm clueless.... have a nice day Hi folks, I am super excited about the box-sizing css rule. I've always thought the original IE box model was better and it was a shame that we had to ditch their superior model for the w3c one to be cross browser. Now all the browsers are starting to support box-sizing which will allow me to go back to the model I prefer. Unfortunately, pioneering the border-box sizing model, the only way I can get to it (that I know of) in IE6/7 is via quirksmode. Quirksmode has a whole bunch of other issues I don't want so this doesn't see a solution. I'm hoping someone out there will no how I can trigger box-sizing: border-box; in IE6/7 without quirksmode. If it's possible I'll be ditching the w3c box model in a hurry. Cheers, Pete So 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. Is there an equivalent to the target attribute in XHTML strict for anchor tags? I know this may sound a stupid question. However I have been reading about XHTML and CSS for these last few weeks. From what I understand a DocType is there to determine if an XHTML document is well-formed. Therefore from my understanding the DocType should have not be related with CSS. However today I wrote the following peace of code: Code: <html>
<head>
<title>Test</title>
<style>
div > span { color: red; }
</style>
</head>
<body>
<div><p>
<span>hello</span>
</p><span>World!!</span>
</div>
</body>
</html>
On Internet Explorer 7 it did not work since 'Hello World!!' was writen all in black. However on Firefox it worked fine since 'World!!' was correctly displayed in red. Then I added the Strict DocType to the page: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ... and it started working on Internet Explorer 7 as well! Now I am glad that it worked on Internet Explorer 7 when using the DocType (Strict). However isn't this wrong? I mean shouldn't this just work without the DocType since it is CSS related and not XHTML? I am very new to all this and I understand that I may be missin something here! However I would be very greatfull if someone could explain me if this behavior from Internet Explorer 7 is correct or not! Thanks and Regards, Sim085 Hello, I am trying to make my webpage, www.jwwebdesign.info, W3 Valid. However, when I insert: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> at the top of the page, and try to vaildate, it does not like my <table height="100%"> What is a CSS alternative I can use so that I can validate my page (height: 100% won't work). Thanks, Jeff 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 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;
}
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? 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 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 I'm having a CSS problem. Everythign i desinged worded fine until i included a <!DOCTYPE> I'm using XHTML 1.0 Strict and everything validates fine, as well as the CSS (according to w3c) Alink to the site: The "E" Proposition here is teh CSS code I am Using (the navigation links) Code: .Nav1 a:hover{color: #666666;}
.Nav1Td{border-right: 1px solid #999999;background-color: #000000;}
.Nav1{padding: 2px 0 10px 0px;font-family: MS Tahoma, Arial;}
.Nav1 .line{border-top: solid 1px #000000;margin: 5px 0 5px 0;}
.Nav1>.line{margin: 6px 0 4px 0;}
.Nav1 h4{margin: 4px 0px 5px 5px;font-size: 10pt;font-family: MS Tahoma, Arial;}
.Nav1>h4{margin: 4px 0px 4px 5px;}
.Nav1 h3{margin: 4px 0px 5px 5px;font-size: 8pt;font-family: MS Tahoma, Arial;}
.Nav1>h3{margin: 8px 0px 4px 5px;}
.Nav1 ul{list-style: none;margin: 0;padding: 0;}
.Nav1 li{margin: -4px 2px;width: 90%;}
.Nav1>ul>li{margin: -3px 2px;}
.Nav1 a{position: relative;background-image: url(images/off.gif);width: 115px;cursor: pointer;display: block;color: #000000;font-family: MS Tahoma, Arial; font-size: 9pt;padding: 2px 4px 4px 8px;margin: 1px 0px; text-align: justify;text-decoration: none;}
.Nav1>ul>li>a{border: 1px solid transparent;padding: 2px 4px 4px 8px;}
.Nav1 a:visited{color: #000000;}
.Nav1 a:hover{border: 1px solid #cccccc;margin: 0px;padding: 2px 4px 4px 8px;background-image: url(images/over.gif);text-decoration: none;}
.Nav1>ul>li>a:hover{margin: 1px 0px;}
might i have made a careless error that CSS validator is not picking up on?? If I take out the doctype tag, everything works fine. But of course, i dont want to do that...heh any help would be greatly appreciated... I just realized tonight that CSS I have been using with my XHTML 1.1 documents does NOT work with HTML 4 documents. Is this common? I never knew there was a difference in CSS functionality between doctypes. hi, I am trying to do DIV 100% height to match the browser height. as I read only way is to make body tag set to 100% and then whatevers is defined 100% within body will readjust at 100% height. problem i found, it doesnt work with any Doctype I set for the page, not xmlns transitional, strict, 4.01 strict , transitional, you name it. BUT as soon as I remove Doctype and start page with just <html> tage this CSS works. I ve tried to link css and embed, same results. W3C validation checks out with no errors. hers code. 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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS</title>
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
background-color:#333333;
height: 100%;
}
.centerwrapper {
width: 1000px;
height: 100%;
background-color:#0099FF;
margin-left: auto;
margin-right: auto;
}
-->
</style>
</head>
<body>
<div class="centerwrapper"></div>
</body>
</html>
if someone has an idea what doctype would work or if theres another problem with this. I've just installed a HTML Doctype declaration after having issues making my webpage work on Firefox and IE. After installing the declaration, the colour of my top nav-bar refuses to change... it stays white, and the text, unreadable. This happens on IE and Opera, but works fine with Firefox. I've also been recieving complaints that my page is non-functioning with the font appearing "way too small". If anyone can give me any ideas, and also point out a simple explanation of the difference between the box model and the W3 layout model, I'd be grateful... Thanks for the advice people gave me last time; I at least managed to get the page working with Firefox... Link to page Ok, some trouble with Fire Fox and IE. I am creating a site for Ernies Inn and for right now I am hosting it here until I am done and the owner is willing to have it. http://ernies.bombinaid.com Problems IE: The main box areas in each page keeps going over the menu! FireFox: In the menu page it seems every time the mouse goes over a h3 tag it has a mouse over effect. I am using <a name="something"> for the page jumping. Here is the css code: Code: body {background-color: black}
.header {width: 100%; margin-left: -1px; margin-top: -4px;}
.links {width: 100%; text-align: center; background-image: url('defult.gif'); background-repeat: repeat-x;}
.main {background-color: #cc3333; height: auto; width: 700px; margin-top: -34px; margin-left: 7cm;}
.main2 {background: url(corner1.gif) 0 100% no-repeat}
.main3 {background: url(corner2.gif) 100% 100% no-repeat}
h3 {color: #ffffff; font-family: Arial; font-size: 30px;}
a:link {text-decoration: underline; color: black;}
a:hover {text-decoration: underline; color: black;}
a:visited {text-decoration: underline; color: black;}
hr {color: white}
img.ajm113 {margin-left: 30cm;}
Can someone help me out here? Hello, this is an ego crasher, just when I was getting to master CSS, I hit botton with html / CSS. I wanted to add stuff on this page, but the way frontpage 2006 sees hebrew, and spanish is just wrong. This page happens to be spanish with hebrew, the letters go weird. I have work in many spanish / hebrew sites, and tried without success to see why my hebrew goes wild, then, the spanish does the same. I tried to put the doctype, and the title lowers it self? then the charset, not matter what lenguages I stipulate, including do not work <meta http-equiv="Content-Language" content="es"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> Which worked for me in other sites! Below is my link I am having hell with. If any one can share light in to the problem. PLEASE!!! (URL address blocked: See forum rules) Thanks, Karl I have a page that will not load external CSS. Tested in Firefox and Opera. If I remove the doctype then the CSS loads and affects the page. This is the 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' xml:lang='en' lang='en'> <head> <title>Insert Notes</title> <meta http-equiv='content-type' content='text/html; charset=utf-8' /> <meta http-equiv='cache-control' content='no-cache' /> <meta http-equiv='pragma' content='no-cache' /> <meta http-equiv='expires' content='0' /> <link rel='stylesheet' type='text/css' href='/test.css' /> </head><body> <h1>Beer</h1> <p>test</p> </body></html> And this is the CSS: Code:
body{ background-color: gray;}
p { color: blue; }
h1{ color: white; }
|
|||||||