dbrimlow

It has not been released yet, it is still in "working draft" - http://www.w3.org/TR/xhtml2/Overview.html#toc . You should check out the working draft, to see what the major changes are going to be and how they will impact IE. I'm certainly no "expert" on this, but, if you use proper content-type for modern browsers and have a sniffer for IE that switches it to text/html, then it sees the page as html anyway ... potentially you wouldn't even NEED a doctype for IE and may as well have it default to what IE lives for ... quirks mode. But, realistically, since you already have your sniffer switch the content-type for IE, I would recommend having your sniffer also switch the doctype to xhtml 1.0 strict. The whole thing (in my opinion) comes down to whether or not you are actually parsing XML to populate the xhtml. If not, then there is no point in using xhtml at all. This was the sad truth I discovered a few months ago. I, personally have begun converting all of my xhtml pages to html 4.1 strict - incidentally, I've discovered that XHTML 1.0 strict, when served as text/html, does NOT even validate to the rules of html 4.1 strict. It still allows some element syntax that html 4.1 strict would not. You can still use all of the well-formedness coding of your xhtml code with HTML 4.1 (just change all the closing tags slashes - then use the validation tool to see what html syntax is not allowed that the xhtml validation had allowed , if any - the major issue I found being with my forms). Good luck, Dave

Brilliant. That's forward thinking. Do you use a php sniffer? There are a few good ones out there. Obsidian, I hate to contradict you, man, but that is not true at all. It isn't as simple as that. And you are ONLY talking about XHTML 1.0 (no subsequent versions are allowed to be served as html). But here is the actual guidelines for xhtml: So, what that means is that the page must "work" (not display) when served as originally intended in order for it to be permitted to be served as html. Also, that W3C Schools XHTML tutorial is really really OLD and only applied to xhtml 1.0. It was written when most of the world still used IE 5.5 and actually adding a doctype was only around for a year or two!!! Quote from the tutorial: Furthermore, that old tutorial mentions NOTHING about the "content-type" issue (one of the most crucial issues for serving as html). In essence, THIS is what led us all down the xhtml vs html path to begin with - and it is surprising, in light of what we now know, that they have not updated the information there. However, people who want to still use xhtml 1.0 should feel free to do so; there is absolutely nothing wrong with it ... just know that it is the last xhtml you will be able to ever use as text/html - which is fine if you are satisfied with that - since XHTML 1.1 should NOT be served as such and 2.0 MUST NOT be served as such. I recommend very STRONGLY that everyone who wants to continue using xhtml 1.0 read this short article to understand EXACTLY what the hell content-type and mime-type is and how it impacts xhtml 1.0. doctype-declaration-and-content-type-headers

This is where most of the beginners and pros alike who started using xhtml 1.0 as an html replacement are in trouble. XHTML needs to be served by your server as CONTENT-TYPE "application/XHTML+XML" in order to parse xml. The only problem (and its a doozy) is that IE has no clue what "application/XHTML+XML" content-type is. So it is basically a dead end language until IE eventually recognizes "application/XHTML+XML". Period. The way 99% of the people have served xhtml 1.0 is by using the content-type "text/html". Basically all this does is tell the browser to display the page as "HTML"! So the benefit of parsing xml is lost. And XHTML 1.1 (and forward) does NOT support it being served as "text/html" anyway, so there is really no point in using xhtml at all. Here is the situation with mime type: xhtml was/is a noble idea. Create an XML application version of html to enforce well-formedness in order to eliminate the errors when xml hits "optional" html tags. So, interestingly enough, to answer your question of what language is extensible? ... well, XML is. But to get it to work in IE you need to use html custom parsing. It can be done, but I ain't doing it.

TM is right, lists are the best way to make any menu (vertical or horizontal). In the css, designate an ID (not a class) for the site's main navigation menu. IDs are used once per page (you can do classes later for other menus or navigation that you want to repeat on a page). You want a container, then the menu. So, for a "centered" horizontal nav bar, you could do it like this: <div id="navcontainer"> <ul id="navlist"> <li><a href="#">Item one</a></li> <li><a href="#">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">Item four</a></li> <li><a href="#">Item five</a></li> </ul> </div> the CSS is: #navcontainer ul { padding: .2em 0; margin: 0; list-style-type: none; background-color: #1A5184; color: #FFF; width: 100%; font: normal 90% arial, helvetica, sans-serif; text-align: center; } #navlist li { display: inline; }<!--this is what makes it horizontal, without it the list displays vertical--> <!-- it is good practice for beginners to use the four link elements in proper order - link, visited, hover, active--> #navlist li a:link, #navlist li a:visited { text-decoration: none; background-color: #1A5184; color: #FFF; padding: .2em 1em; border-right: 1px solid #002E64; } #navlist li a:hover, #navlist li a:active { background-color: #002E64; border-right: 1px solid #1A5184; color: #fff; } And here it is complete - copy and paste this into notpad and save as menutest.html then open it in a browser: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Title</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style type="text/css"> #navcontainer ul { padding: .2em 0; margin: 0; list-style-type: none; background-color:#1A5184; color: #FFF; width: 100%; font: normal 90% arial, helvetica, sans-serif; text-align: center; } #navlist li { display: inline; } #navlist li a:link, #navlist li a:visited { text-decoration: none; background-color: #1A5184; color: #FFF; padding: .2em 1em; border-right: 1px solid #002E64; } #navlist li a:hover, #navlist li a:active { background-color: #002E64; border-right: 1px solid #1A5184; color: #fff; } </style> </head> <body> <div id="navcontainer"> <ul id="navlist"> <li><a href="#">Item one</a></li> <li><a href="#">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">Item four</a></li> <li><a href="#">Item five</a></li> </ul> </div> </body> </html> Lists are VERY powerful using css. Here is the best tutorial online for all kinds of list making for beginners. listomatic The menu above was based on this tutorial specifically: centered horizontal menu Bookmark max design. You will eventually want to learn about floats and the most important aspect of css and the rules, Selectutorial. Good luck, Dave

bronzemonkey touched on important points ... 1. the horizontal-rule tag is NOT cross-browser friendly at all. 2. xhtml 1.1 is (in essence) a very strict doctype. It is unforgiving and does not allow deprecated tags or improper syntax. It should never have been allowed to be served as text/html, but it was, so you have to be extremely tight and proper in your coding. The reason it is working for you in IE, is because IE does not render xhtml 1.1 properly. So, IE is defaulting the page into quirks mode (which IE lives for). In quirks mode, IE will render it as if it was a strange form of basic html. 3. change the doctype to HTML 4.1 strict - (this way you can keep the code almost as you did with xhtml - just lose the single tag closing slashes for imgs, hr, etc). You can emulate the hr tags using borders and properly floated ids or classes (divs).

Well, along the idea of what sinus dais, I would just make a border for #contentbox and lose the image ids - why add to the page weight and download time with graphics when color will do it easier? Try this, add the following to to #contentbox: "border: 3px solid #FFFFFF" In the html markup, remove the 2 divs ids for content_box_top_image and content_box_bottom_image (they are, at the moment, not even present in your css anyway). The border performs the same function. You just have to tweak the id's margin/padding and width, and height relative to the border size, for example, use width:478px; height:386px; because you added 3px solid border to the id (which made it wider and higher).

You need to show us a sample of the html and css code that you are using. There are many easy techniques for positioning images, but each depends on the settings of ids and classes around them. The easiest is to set the background image of the id or class itself, ex: #content {background: #000000 url(images/someimage1.jpg) top left repeat-x} #content1 {background: #000000 url(images/someimage2.jpg) top left no-repeat} #content2 {background: #666666 url(images/someimage3.jpg) bottom right no-repeat} Of course, setting the containers properly is crucial and, again, each impacts on how the other is positioned. An absolute positioned container can be forced to stay relative to another container (and not the browser window itself), but your results is what leads me to believe you have general layout issues.

While bronzemonkey pointed out that you have errors all over, the specific issue is here: <div id="blue"><div class="newmaintext">You will receive: </div> <ul> <li>Free website</li> <li>Free CMS - easily update your site</li> <li>Free email addresses - unlimited</li> <li>Free website development </li> <li>Free domain name - www.your-site.co.nz</li> <li>Free webstats</li> <p>All you pay is $39^.95 per month for hosting which is mandatory with every website</p> <p align="right"><strong>... now there's one great deal!</strong></p> </ul> </div> "You will receive:" is basically text hanging out in the middle of no where alone and naked. Put some clothes on it! Text should be contained in a block element - paragraph, heading, etc. But that's just a contributer to the real issue - you put paragraphs inside of a list (a no-no). Move the closing /ul to after the last list item. I also recommend setting a default font-size in your body tag. You have a lot of errors that are easily fixed. Just use the validation tool to find them.

LOL, we ALL feel your pain. But, don't punch the screen, yet. I know there are a few others here, like me, who can NEVER accept defeat ... THERE IS ALWAYS A WAY! First, using a regular expression has nothing to do with standards or css or even where the tags are located (inline or otherwise). It simply replaces any instance of the element specified with the new elements you specify in the regex. Particularly what I was suggesting was using a "Preg_replace". This will scan the document and simply replace any instance of a:link{}, a:visited{}, a:hover{} and a:active{} with a:link {color: #000000; text-decoration: none} a:active {color: #000000; text-decoration: none} a:visited {color: #000000; text-decoration: none} a:hover {color: #ff0000; text-decoration: none} before displaying the browser side html ... powerful stuff, preg. I assume you are doing a "PHP includes" which means your client pages are php. You can simply include the Preg_replace code within your includes file. It can't hurt to ask the mavens at the Regex with PHP, thread

Changing web pages over from table based to css is what I have been doing for close to a year now - lately close to 12 hours a day! So believe me when I say that I have a system that streamlines the whole process. And it all comes down to what others have said ... starting with solid semantic markup. The best way to do it is to forget about layout entirely ... just concentrate on creating a proper, no-frills "semantic" html markup page. Here is a page I use to explain to customers how to submit text (fully styled): fully styled Here is how I want them to see it without a "my" style - to give an idea how to create a semantic text document that I can easily convert to a semantic html document: basic semantic html no frills style And here is the same page with absolutely no styling or stylesheet elements added ... just a straight up semantic html document ready for styling: no style, plain semantic html structure You want to start from scratch and properly build ONE solid template based on good semantic markup (you will be using this template often once finished). We will use an existing, table based web page you already have to start the template creation with some relevant focus. During this process, use either a plain text editor (notpad, or similar) or code view of a wysiwyg editor like DreamWeaver. NEVER LOOK AT A "DESIGN VIEW" UNTIL YOU ARE READY TO ADD COLORS, GRAPHICS AND LAYOUT TWEAKS. 1. Create a simple html document without any color or graphics or styling whatsoever. Use a PROPER doctype (I suggest html 4.0 Strict). 2. Then take your table based web page and copy and paste any text in table cells into a proper plain html block level tag (headings, paragraphs, lists, etc.), include link tags - remove any fonts and/or every other "style" element in the text - except for strong for bold, and em for italics. 3. Make or borrow a good, solid tried and true simple css based template that starts with the basics - heading, navbar (horizontal or vertical), body (columns) and footer. 4. Add the ID and class divs to the blocks of text that belong within them to the markup. NOW look at it in a browser or design view. Since the markup is semantic, linear, and properly contained in the id or class div, you can start to fine tune the css to make it look like you want it to. You DON'T have to touch the markup to do it, just adjust the css. Once you have one base template finished, then making any design change in the future is a snap - just a few changes in the css text. Now you can simply save the template. When ready to make a page, open the template, "save as" a copy using the name of the page you want to make, then copy and paste the text from table based page into the block level tags that correspond to it in the new template based version. Here is an example of a table based page on our site that I started the first step of creating the template from so I can convert all the other pages to css based. Original page Here is the new template: New template I have @ 300 more pages to go until completely finished. Then I will go live with the whole new site of over 2,500 pages. If you just have relatively few pages, 20 or so, the you should have the whole converion finished (with tweaking) within a month or two (extra time for learning some tricks). Good luck. Dave

It is hard to replicate, then debug, your problem without the images. Just using standard css layout concepts and straight up semantic markup (using color as background for testing) the layout itself does not hold up on its own. This is usually how we judge the soundness of a layout. You shouldn't leave text just sitting alone and naked within a class or id ... text should be in a block level element (paragraph, list, heading, etc.). So when testing your layout, don't forget to include them because your layout will not be true ... and will blow up when you add them later. If you have a test version online with the background images that will help a lot. Dave

With all that tag soup, if you make it xhtml 1.1 "aka, strict" , it will still be quirks mode until it validates to the doctype. Using html 4.0 strict for one page and xhtml for another doesn't affect anything. The XHTML is defaulting to html anyway - if you are using text/html mime type. But the page STILL is invalid code and will NOT layout right in FF. PLEASE tell your colleague to Kill that xhtml closing tag in the css link, and shame on anyone who still uses the old html 3.0 body tags of (bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"), remove width="" and height="" from the table tags, and for goodness sake put SOMETHING in all of the naked alt="" tags. An actual "tech" company and product website that uses such frightening, old deprecated code and heavy handed 1995 photoshop graphics is scary. I've seen YOUR website(s). THAT is how professional business websites look! (although, you need to fix the invalid UTF-8 character line 96 of your home page; it is blowing up the validator - and the embedded video doesn't play in Firefox).

The problem in a nutshell (as I'm sure you suspect) is that it is 100% quirks mode - IE's best friend. Also, since there is no doctype, you have an xhtml closing tag here: <link rel="stylesheet" type="text/css" href="buttonglow.css" /> This makes it even worse. Modern browsers hate this. Slap an html 4.0 strict doctype on it and clean up the tag soup. THEN advanced css tricks may work in modern browsers. As is, this html and css has no chance in anything but IE.

Without seeing it in relation to other elements in your html it is impossible to help. Show us a copy of your html and css.

Whoa. First, if YOU are making a site for "Fun", entertainment or even just personal use, and don't care how many visitors may not be able to view the site, then do whatever you want. But if you create sites for any type of business or e-commerce, that actually relys upon at least in part their website, then you DON'Twant to lose ANY potential visitor if avoidable. Never assume why someone does something for security on their computer. Once you see how easy it is to take over a site, hack a server or hijack forms using jscript (simply by typing it in the location bar) you understand its potential power for evil. And a large percentage of the millions of people who DID get burnt by jscript, at one time or another over the past 12 years or so, DO turn it off. Up until two years ago, many web creators ignored any web browser other than IE. The rationale was similar to your jscript rationale ... "Most people only use IE anyway, so why bother with the 10% or so people with other browsers." (and believe it or not, there are still millions of people who think IE is the only browser that matters). But, now, it is absolutely foolish to craft a website for IE only since @ 30% of visitors now don't use it. 30%! Between FF and safari alone my server stats show 28% Never make something as crucial as your site layout rely on jscript. You are better off writing a seperate css just for IE.

"align: center;" is not a proper css command. Try "text-align: center;" in the .toplinks li and lose the float:left. Also, since this is a horizontal navbar and only used once per page, change toplinks from a class to an ID (don't forget to change the html from "div class=" to "div id="). You also should set the initial margin and paddings to 0 - and add padding to the li a (play @ with the sizes to suit). Whenever you float:left you will not be able to "center" items floated ... because ... well, they FLOAT:LEFT. So lose display:block to retain the display:inline. Do you want the background image to repeat? Also, always designate a color along with a background. Search engines do not like seeing no color designation AND white text "color:#000000"! Here is a sample of the whole thing. You will need to play with and adjust the paddings and heights to work with your images if they are fixed width/height and not just repeated small images: #toplinks { height:30px; margin: 0; padding: 10px; background:#000000 url(imgs/topmenu_bg.png) top repeat-y; } #toplinks ul { list-style-type: none; margin: 0; padding: 0; text-align: center; } #toplinks ul li { display: inline; } #toplinks ul li a:link, #toplinks ul li a:visited { background: #555555 url(imgs/button_bg.png) center no-repeat; height:30px; width: 100px; padding: .3em; text-decoration: none; color: #FFFFFF; } #toplinks ul li a:hover, #toplinks ul li a:active { color: #FFFFCC; } HTML CODE: div id="toplinks"> <ul> <li><a href="#">home</a></li> <li><a href="#">about</a></li> <li><a href="#">product</a></li> <li><a href="#">contact</a></li> <li><a href="#">site map</a></li> </ul> </div>

Actually, I just wondered. Maybe you can include a php "preg_replace" expression in your includes file to replace all instances of a:link, a:visited, a:hover and a:active. This wouldn't insert the link changes in your body, it would replace instances of the link tags with yours. As the guys in the regex with php thread They can advise you on how to create the expression. This would save you days.

Actually, it blows up in FF, too. There are just WAY too many individual css files for me to event get a handle on which is what. It is very important when using PHP, to FIRST get your html markup and css layout working as a general template. You have syntax and markup errors for the xhtml transitional doctype. you site's validation page. xhtml requires ALL lowercase. <SCRIPT> must be <script>. Also, the <form> tag cannot be embedded in a <p> tag - change p class="select" to div class="select" . Change the mime-type charset to utf-8, and convert your & to & (and any other characters to html characters). Actually, you are even better off using an HTML 4 strict DOCTYPE. Since it seems as if you are more comfortable coding with less restriction and a little more "optional" tag syntax. It's easy, all you need to do is "find and replace" the free standing closing tags from "/>" to ">", and remove the language="" from your scripts. I'll look at the layout, but off the bat I see you have no main container. You will have to use block level tags inside your form inputs

Interesting. While it makes "logical" sense in the usual specificity flow, I never expected using <a href="??" style="color:red;">test</a> would override all previously styled selects INCLUDING pseudo elements. While it isn't something I would do, or recommend doing, for general usage, for AV1611's purpose, it is perfect. Cool.

pseudo classes are a given. What I said was I believe he cannot override the default a element just using the style= attribute within a link tag. That would be like trying to use a span class to change the style of an a element. Remember, he is dropping his include into many websites, each with its own css (style inline, @import or external). Some of these will not even have just a basic "a {}" selector (I know I only use the 4 a pseudo classes). So even if he wants to just style the <a href=> tag it will default to the page css.

I don't think the inline will over-rule the specificity of the css. The "type" (tag), "class" or "id" selectors will still over-ride the markup level styling. default "type" selector, id= or class= takes precedent over tag designated "style=". So if you are dropping an include into a document with a css, even if it is out of the flow and not using a class or id, it will use the default css designated a tag.

Which version of Opera? Opera is very strange. Sometimes it follows standards and sometimes it has a mind of its own. Usually Opera has a problem with 100%. I don't know why. I would need to see the code again. But the link is down.

It isn't a good idea. Sure you can do it, but you will eventually get into problems with "specificity" (where one element specifies the order of other similar elements). But, your link order is wrong and WILL cause problems. When using the "pseudo elements" for a link (":link", ":visited", ":hover", ":active:), the correct order REQUIRED is - a:link, a:visited, a:hover, a:active (think of it as LVHA or LoVeHAte). So change your order to this: a:link {color: #000000; text-decoration: none} a:visited {color: #000000; text-decoration: none} a:hover {color: #ff0000; text-decoration: none} a:active {color: #000000; text-decoration: none} Rather than style within the markup tag level, you are better off designating all links "pseudo elements" for every specific "select" (tag element, ID element or Class element) in your css, like this: tag element select: a:link {color: #000000; text-decoration: none} a:visited {color: #000000; text-decoration: none} a:hover {color: #ff0000; text-decoration: none} a:active {color: #000000; text-decoration: none} ID element select: #footer a:link {color: #FFFFFF; text-decoration: underline} #footer a:visited {color: #FFFFFF; text-decoration: underline} #footer a:hover {color: #006699; text-decoration: underline} #footer a:active {color: #000000; text-decoration: underline} Class element select: .nav li a:link, .nav li a:visited {color: #800000; text-decoration: none} .nav li a:hover, .nav li a:active {color: #555555; text-decoration: none} A simple tutorial you should bookmark that is important for anyone using css is: http://css.maxdesign.com.au/selectutorial/selectors_pseudo_class.htm. This will easily explain about "selects" and the rules of order and syntax.

First, without looking at anything else, there is no such thing as "float: center;" Change them all to float:left. You should also check out this tutorial about floats. http://css.maxdesign.com.au/floatutorial/

LOL. Okay. bronzemonkey, let's get down to the REAL nitty-gritty (and this is why those of us who already "know" this stuff still refer to the newbie links we provide). We BOTH know better. And since this is pretty advanced stuff, we both opted to give the simple, old school reply rather than get into the true "monster fix". So the following is going to be somewhat confusing to the newbies - but bare with me, I will provide a link at the end. This is more a reminder to those of us who need reminding of things we've forgotten but should remember. The fact is, for true cross-browser integration, neither of our clearing solutions are optimal ... - believe it or not, EXCEPT in IE!! This is actually a case where IE does the right thing most of the time, and all Real Browsers don't. Our solutions are both 20th century CSS and each has its potential pitfall In FF and can cause a huge headache. First, let me say that I had to actually go back to the source link to remind myself of all this. Solution A (using "clear:both" in the select element's css): Problem caused in Real Browsers: "What this does is extend the margin on the top of the cleared box, pushing it down until it "clears" the bottom of the float. In other words, the top margin on the cleared box (no matter what it may have been set to), is increased by the browser, to whatever length is necessary to keep the cleared box below the float.” So in effect, such a cleared box cannot be at the same horizontal level as a preceding float. It must appear just below that level." What happens is that instead of clearing the element that is floated before it, it acts like an "absolutely positioned element" (or "layer" for those who use DreamWeaver) and sits "on top" of the previously floated element (which slides beneath it. Solution B (using a separate div just to clear): As bronzemonkey correctly points out, putting empty divs in the markup just to clear floats isn't semantic or a reliable way to clear floats properly. And, more importantly, this clearing method is not at all intuitive, requiring an extra element be added to the markup. One of the major premises of CSS is that it helps reduce the bloated HTML markup found it the average site these days. So having to re-bloat the markup just so floats can be kept within their containers is not an ideal arrangement. Besides that, by "reliable", bronzemonkey means that some browsers can have trouble with certain kinds of clearing elements in some situations. So, what IS the solution? Creating a class as follows for just clearing the element you need to (in this case it would be in #footer): .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ I've used this in many sites - and even tested it in IE 5.03 Mac - but I actually forgot about it and have gotten lazy. THIS IS the best clearing solution. Here is the link positioniseverything easy clearing. Now that I went through all that! I'll give you the bad news. It still CAN cause a problem in certain browsers and in certain specific layout conditions ... but there is a fix in the link for those who actually get this problem. Good luck. Dave