|
HTML - Doctype Ruining My Layout
I'm trying to code a simple Table-based layout with some CSS. I validated my CSS fine, but when I went to validate my XHTML, I realized that I forgot my DOCTYPE declaration. When I added it in, my layout went completely screwy and I can't figure out why. If someone can help.
The details I can offer up front are that I am trying to use XHTML Transitional, so I am using the following DOCTYPE: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> My layout is supposed to look like this: http://akito.clavis-sama.com/ But when I put in the DOCTYPE, it ends up like this: http://akito.clavis-sama.com/index2.html It's actually rather frustrating. Any clues/tips? [Also, yes I know there are some other Validation errors, I was going to use the validation to help me find them, but I can't get that far without a working DOCTYPE.] Similar TutorialsHey, new to the forums, so please be kind I recently "inherited" a site that was created by someone else using a WYSIWYG, and am in the process of converting his table-based layout and other WYSIWYG monstrosities into lovely CSS and standards-compliant HTML. Only I'm having a slight problem. When I fixed the doctype (the one he used was incorrect), my right column got bumped all the way to the bottom of the page. It's definitely the doctype that caused it, but I'm not sure *why*. I'm using a three-column fixed-width CSS-based layout with a header and footer. The left column (which is the one having problems) and the footer are both navigation areas that use php (which I have zero experience with). The old version (with the working columns but the non-working doctype) can be found here, and the new version (with the non-working columns but the working doctype) can be found here. The stylesheet for both can be found here. I really appreciate any help, because I'm just pounding my head against a wall here. Thanks. I just finished my website and inserted so flash in it before I inserted the flash everything was fine after I inserted the flash a lot of space was created under it I used the layers method because I need my flash to be on top of something. But for some reason alot of extra space is created. I tried this on a different website on mine too and the same thing happened. Here is the link have a look at it. Notice the extra space under the stickman the white space between the stickman and the footer if you can't tell then open any different page like the updates because that doesn't have the stick man. I will upload the code after maybe, but check to see what could be wrong http://differentworld.comze.com thanks, Ali I need to accomplish a layout like this: Code: <table> <tr> <td colspan=2 rowspan=2>? by ?</td> <td width=7 height=7>7x7</td> </tr> <tr> <td height=7>?x7</td> </tr> <tr> <td height=7 width=7>7x7</td> <td height=7>?x7</td> <td height=7 width=7>7x7</td> </tr> </table> <!-- expected: _____________ | ? x ? |7x7| | |7x?| |7x7|?x7|7x7| actual (ie): __________________ | ? x ? |7x ?/2 | | |7x ?/2 | | ?/2 x7| ?/2 x7| 7x7 | --> Any idea how to overcome this ie oddity? When I add a doctype it completely ruins my whole page layout. How can i fix this? Without: it fits my whole page and looks nice. With doctype: it squishes everything to the top. Help please. How improtant is the doctype tag? I am trying to teach myself html and am trying to figure out when to use what doctype. DOCTYPE basically tell the web browser what to expect when interpreting the html doc b/c html has been revised over the years, is that correct? Can someone please help me understand how to properly use the doctype tag and what is smart choice/ example of a specific doctype tag is and the reasoning behind why 'this' doctype tag is a smarter choice than an alternate doctype tag? Thank you! -Matt H. I have a doctype problem on my site which I cannot get rid of... Im using utf-8 have tried the below: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> !DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> --> !DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Many things are happening and I have read a lot of docs handling this... What do you suggest that I do? (Hmmm, - I need dansih characters... ) (In mysql working on the site I cannot see the correct characters... A workaround are being used...) Regards, Frank <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> this line seems to be at war with firefox. for some unknown reason my banner has a space between the lower body (it shouldn't). It is fine in IE and fine if the above line is not included. It seems to be adding some sort of padding into the table cells where the images are, somehow because of the domument type. ---------- Anyone have any solutions? LINK: http://uniden.zzl.org/ Again it is FINE in IE, but not if FF. HTML is Valid according to W3c Validator. Thanks in advance I'm trying to re-do and validate all my 100+ websites; this one is the most recent: http:// www.sticksite.com/cook/indexNEW.html and after "Tidy" cleaned it up I now have the very top looking like this which I know is not right: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> --> <html> <head> <meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org"> <meta content="text/html; charset=utf-8" http-equiv="content-type"> <title>Fast, nutritious meals</title> My pages are nothing fancy, I just want them to work. "Transitional" is fine; I'm not worried yet about "Strict." I'm validating at http://validator.w3.org/ Can one of you super HTML specialists please tell me how the top of my pages SHOULD look? Many thanks in advance! Hi simple question. I'm setting a background color on a div and when I put the Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> the background color disappears? Whys this? Heres the css Code: #content {
width: 795px;
background-color: f9dc6e;
margin: 0px;
padding: 10px;
}
Thanks What is a doctype, ive seen it in almost every html file someones , i never use it and when i remove it it doesnt do anything. so whats the point of it? to me it just looks like its taking up space. I didn't see an XML/XSL forum so I'm posting this here, maybe someone can help me. I'm trying something new, and it's giving me a headache. But hey it's all part of the process. Here's my site: HTML Code: <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="/layout/frontpage.xsl"?> <page lang="en_ca"> <frontpage/> </page> HTML Code: <?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"/>
<xsl:variable name="lang" select="/page/@lang"/>
<xsl:variable name="strs" select="document(concat('/strings/',$lang,'/strings.xml'))"/>
<xsl:template match="page">
<html>
<head>
<title><xsl:value-of select="$strs/strs/str[@id='title']"/></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="/css/css-default.css" />
</head>
<body>
<h1>Test</h1>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Seems to work fine, but when I try to validate I get the following warning: No DOCTYPE found! Checking XML syntax only. It's clearly there. That's how other sites have done it and they validate... so what am I doing wrong? Well, this is how it started - I'm using XHTML strict but by accident I placed the doctype after the <html> tag. I've now finished the website and realised the error, so I moved it above <html>. The problem is that now in IE it looks like this: http://img187.imagevenue.com/img.php..._122_350lo.jpg but in Firefox, it renders perfectly like this: http://img150.imagevenue.com/img.php..._122_842lo.jpg As you can see in IE it produces a big gap between the logo and the login form. Edit Figured it out - a very stupid mistake I was floating the logo to the left and the form to the right but I'd set the logo div's width at 25% and the form div's width at 100%. Just out of curiosity - anyone know why this error wouldn't show until the doctype was enforced and why it didn't show in firefox? I am totally confused about DOCTYPE code. My site does not have any doctype code on it and works fine, however been playing about with some jquery script and it wanted a doctype on my site to work. I have tried all the different doctypes listed on the w3 site and all make my site look strange and text/images all over the place the only way the site looks ok is without doctype. please advise the site in question is http://virtualhunterston.eu.org example test page with doctype added http://www.virtualhunterston.eu.org/...0-%20Copy1.htm im using the following doctype: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> however when you add a table in I.E. it is creating a space between the top of the table and where it is inserted... why is this? any ideas how to solve this? thanks J. Do I have an incorrect doctype set for my new layout? www.bkriegtech.net I have a huge amount of errors when I run the w3c validator... Im using the following doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> Without this doctype my header menu does not work. However when I include it I get a display error in IE 6 and 7 and opera, Mozilla displays fine. I have the main page in a table with two rows. inside each row I have a nested table each with 2 table cells (making a simple 2 x 2 table). I then render my content inside each cell with a table itself. Every table is set to 100% in height however the internal tables only render to the browser with the height of the content so the content does not line by filling out the full table cell area. I realise this is not a great deal of info but I don't have access to image editing software to show you atm. I just wondered if you could give me any ideas as to why this might happen. so far I've checked: for any open tags. all okay none found for any table or td references in the style sheets. all okay, all accounted for in seperate classes closed with clear divs tried to align to the top. works but does not fix the height Ive tried inline styles to set the internal table height to 100%. Does not have any effect. I've even tried over riding the tables with seperate classes in css. I can set the table background to a color to show that it does indeed act on the table but setting height to 100% has zero effect to the internal table height. really baffled and confused and err...annoyed any ideas appreciated and welcome. Thanks in advance Hello I have this weird problem with the following simple code HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml' dir="ltr">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="includes/js/general.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
</head>
Fire fox and chrome thinks that everything is fine, On internet explorer the stylesheet is not working When I take off the DOCTYPE it works in explorer as well what is my problem ? Thanks Lior Hi everyone. This is my 1st msg on this forum so a BIG HELLO to everyone out there. Here's my problem. In my HTML I have the following DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> and a bunch of javascript and HTML to implement a rich-text editor (this is actually a pre-written component that I'm using on the page). On Firefox the page views perfectly - no problems. On IE 6, all the buttons etc are displayed but the actual text are where the user can type is not visible so the component doesn't work properly. The strange thing is, if I change the DOCTYPE declaration to : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> then everything works fine in both IE and FF. My problem is that I need to keep the 1st DOCTYPE and can't use the second. Would appreciate if someone could help me figure out why the page does not work in IE. The attached ZIP file contain the code in testAction.do.htm and the supporting files under testAction.do_files Hi folks, I have a simple centered web page that does not show the same in IE and Firefox. The problem just seems to be the first occurrence of position:relative which I used to center the page in a 'container'. Experts in this forum and others say I should fix this by using the right Doctype statement. But when I tries using any of the recommended Doctypes, the display was totally skewed in both IE and FF. You can see the normal page with no Doctype statement at: http://www.documents4u.com/Document-...Contactus.html It displays fine in IE but notice in FF the top horizontal bars are higher. When I put in a Doctype statement, everything is messed up in both IE and FF, as you can see in: http://www.documents4u.com/Document-...ontactus2.html Any suggestions on how I can fix this discrepancy? Is it my code or am I not using the right Doctype? Hi Please tell whats wrong with this header for pages besides the missing meta. <?php include "include/session.php"; ?> <html><head><title>Blobbytop</title> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <link rel="stylesheet" type="text/css" href="style_firefox.css"> <!--[if IE]><link rel="stylesheet" type="text/css" href="style.css"><![endif]--> </head> <body> |
|||||||