HTML - Ie And Ff Use Of Position:relative - Can Doctype Help?
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? Similar TutorialsHello All, I have a problem with div position in my html page. I need two divs position=relative aligned with a single div. Basically I have a header panel, content panel (have two vertical column height changed dynamically) and a footer panel. So Content panel vertical column needs to align with header panel. I need all div tags position relative, so when every div increases in height bottom div sifted down automatically. I have this http://www.arunverma.info/webmaster_help/ Can sombody help me to short it out. Thanks in advance Sunil Hi Folks, I have multiple objects which are positioned relative to one another. The position of the first object is fine but the subsequent ones reference the position of the previous one. Is there any way I can make a hidden "base" object and position relative to that without re-creating it for each object? Thanks! Hey everyone, got a problem with an element that is relatively, or absolutely, positioned (I've tried both methods and both produce the same results). Take a look here with anything but Internet Explorer: http://zachi.teamtreetops.com *Screenshots of whats wrong in IE* The "bottom" div element is off in both cases. ie5 ie7 Code: div#bottom{ height:11px; width:411px; background-image: url(images/bottom.png); position:absolute; } Complete style sheet Any insight on the issue would be much appreciated! Hi, I need to embed some HTML content in a container, so that the content's elements anchored at absolute position 0 will actually follow the container's position. What should I use as container? Frame, DIV, IFrame? Thanks! Howdy all, I have three scrolling divs that i want to be the height of the page, so i'm guessing position:absolute and height:100% will do that just fine. But i want these three scolling divs to be inside a position:fixed element so that they stay put when scrolling down the page. Is this possible? I dont think a pos:absolute will work nested inside a pos:fixed. How could i work around it? thanks! 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 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. <!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 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 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 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? 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... 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! 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. 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. 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? Hey, 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. This image only shows when the doctype is NOT declared, and I can't figure out why. Code: <img src="images/logo.jpg" alt="" /> And here is my doctype: 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"> I ran the page through the W3C validator and there's no errors.... I'm pulling my hair out because I don't understand why an image would disappear when the doctype is removed. Anybody know why? |