What exactly is quirks mode. I have this site I want to move from quirks mode to strict transition mode. I would appreciate a good reference in finding what is the diference and what it is exactly. I need and want to switch this site over to strict transition. I am including a link to the page emaple of what it looks like. Please tell me how to switch it or translate it. http://www.indexedvisuals.com/scripts/homecss.html Thanks in advance.
You need well formed code (no typos in your tags) and a Strict doctype. I recommend HTML 4.01. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML: That needs to be on the first line of your document.
penagate If i insert that into my code it moves things around. I think I need to translate the css positioning to something else but not sure to what. Thanks for the reply
That's because you've written the CSS for quirks mode. The most notable difference between quirks and standards modes in MSIE is the box model. The quirks model takes sizes literally, the W3C model adds padding. I suggest you do your development in Mozilla, it is FAR more standards compliant, and also includes tools such as the DOM Inspector and Firebug that make client-side development much more bearable. Then test it in MSIE and there should not be too much difference, as long as it is in standards mode and valid code. Depending upon how complex your layout is, you may have to make an IE-specific stylesheet to correct some of its anomalies, like this: <!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="ie-fixes.css"> <![endif]--> HTML:
penagate Thanks again for the reply. Is there a way I can translate the current css into the other mode with out the major pain of redesign???? Thanks again for the reply
Not sure. Your page times out for me, so I can't see what it looks like currently. Have a read here if you like. http://www.quirksmode.org/css/quirksmode.html
penagate Thanks for the reference page. I will read this and look into some sort of translation from this mode. I have more than one page with this problem so that is why I asked if it was possible or if some one has a way to translate. Thanks again for the help.
Just a minor correction. Transitional doctypes are perfectly fine for keeping IE in standards mode, so long as the doctype itself is formed properly. Now, I heartily recommend holding yourself to a strict doctype, simply because it strips out markup you should avoid for the sake of being able to meet WCAG standards down the road. But if you must write transitional markup, you can do so while keeping all current release browsers in standards mode. That's not a problem
the_pm Thanks for the response. OK maybe my question is not clear. Sorry. The sample page is written in the quirks mode. How it was made I am not sure. I want to position the objects that are childs of the container in the container using absolute positioning or at least based upon the upper left corner and if the page changes in width the objects move with the container on the page. I hope this makes more sense. I am looking for a possible translation to this mode. Maybe what i need to understand is how the numbers for Top and Left were calculated for quirks mode in the first place. If I have an understanding in this I could make up something I think THanks for the help
That is only indirectly a quirks mode issue. In quirks mode, IE uses the border box model, which means the boxes are (usually) narrower than with the more proper padding edge box model. That would affect the amount of offset required to clear various elements. At issue is the way absolute positioning works. An AP element takes its reference from its nearest positioned ancestor, i.e., one having {position: relative | absolute | fixed;}. If there is none, the initial containing block is the root element, html, which is the size and location of the viewport. In other words, the browser window. If you want those AP elements to move along with an outer wrapper element, that element must be an ancestor and it must have position. You could do the following, and the initial containing block would be centered side to side, 25px down from the top of the window, and the AP elements would move with it. #wrapper { position: relative; margin: 25px 10%; } [various AP element rules] ======== <div id="wrapper"> [various descendant AP elements] </div> Code (markup): Well, it would work in modern browsers. IE has yet another manifestation of the hasLayout bugs. Not only must the initial containing block be positioned, it must have 'layout'. The easiest way to accomplish that is to give the element a dimension. So instead of defining the container as I did above, do it this way. #wrapper { position: relative; width: 80%; margin: 25px auto; } Code (markup): Now for one more bit of IE stupididty; in quirks mode, it doesn't understand {margin: auto;}. So, to get things to work at all properly, IE must be in standards mode and you have to accommodate IE's hasLayout absurdity. cheers, gary
kk5st Thanks for th reply. If i take the container and make it absolute positioned then make the child objects of the container relative I can recalculate the top and left on the fly and replace the valuse in the css string. Does this make any sense. The goal is to make the objects in the container stay where they are as you resize the page. I think this is a good solution. Thanks for the reply
If the inner elements aren't AP, there is no need to make the outer container positioned at all, and to make it AP is to invite unnecessary problems. Look at a few of the pages at my html & css playpen. Most are proportional to the window size, and centered. The fixed width pages are usually centered too, without regard to browser window size. I don't recall that any are AP, though there could be a special purpose usage or two. cheers, gary