Hello everyone, Whatever I do, my subtle theme wordpress blog looks ok in firefox, but with defaulted sidebars on top of each others in explorer. Do you see the same thing? Please advise... here is the blog: Autoincome Online Money Making Systems ....
Wow, 223 errors when validated . That must be some kind of a record. It's hard to find a single cause for your problem when the code is such disarray. For example, I counted 3 <html> tags within your document - it should have only one. Clean up your html and attempt to validate the output using the w3c validator, http://validator.w3.org. When you get close to validating it, feel free to PM me and I'll take another look.
Ok, where exactly do you want me to start cleaning up my html? I would be very grateful if I can pinpoint the exact errors.
Which part should I edit? Isn't there a way to automatically fix the errors, since you say they are 200+..... I don't think it'd be wise to fix them manually one by one!
Nah, you go to the website Martino listed ( http://validator.w3.org ), and start with the very first error. Often one real error can cause multiple other errors in the validator. The hardest thing is, you need to understand how HTML works, otherwise you don't know what the errors mean. The first thing I saw, the validator didn't even say anything about... at the very top of your HTML you have <!--header start--> or something like that. First, that's not the header of the page. Second, ANYTHING (even a space) before the <!DOCTYPE line screws with IE, throwing it into quirks mode (it interprets and displays the page differently). Get rid of it. First error on the validator is that you have a script at line 289 and didn't say what it was. <script> <!-- Cookie_unique = 'Cookie_ID_166850687'; image_width = 500; image_height= 500; etc... </script> It needs to say what your other scripts say, if it's Javascript. type="text/Javascript" or something similar. Next error: line 357 you have a br without a closing tag. Now, br, like img and meta and link, are one of those tags which don't get the normal </end> tag. They are called "self-closing" and since you've stated in your doctype that you are running XHTML transitional, then you need to use this style of closing: <br />, <img src="whatever" /> <meta ...whatever... /> Currently you have the old html4 br tags <br> which are not valid with your current doctype. Line 359 you are using the <center> tag. This was deprecated long ago. Centering is now done with css. For block elements, you make the top-bottom margins 0 (or whatever you want) and the sides "auto" which means it tries to have an equal amount of space on each side, changing with the size of the browser window. It's neato. For inline elements, text-align: center in the CSS will do. You've got names in your forms (can't have them), something called hspace="" (never heard of that tag and neither has the validator...), more than one <html> tag (you only get to use one : ) and... you've been trying to put block elements like <div> and <p> inside inline elements like <b> and <a>. Inline's can't hold blocks inside them, though blocks CAN hold inlines. Also, there are special characters that XHTML and HTML can't handle, like the &. Wherever you have an &, change it to & and the browsers will automatically render it properly as &. There's a site I go to to check what can be a parent and what can be a child of a particular element: http://learningforlife.fsu.edu/webmaster/references/xhtml/tags/ I hope alll this diarrhea I've spewed at you helps and gets you started... stay on these forums and you'll learn a lot. Many of the errors you have, I learned also from the validator (I never new a form couldn't have name either). All that aside, I do like the look of your site. It's fairly easy to read, nice colours, etc. You've got something good here, keep working on it!
Thanks very much Stomme poes for taking the time to provide this detailed help! Rep added! Ok, so I was looking for this <!-- Header Start --> to remove it, and I have the following files to edit: # Stylesheet # advert.dist.php # Archives # Archives # Comments # Footer # functions.php # Header # home.php # Main Index Template # Page Template # Page, No Sidebar # Search Results # Sidebar # Single Post I found it in the "Header" file, removed it, and now the sidebars look fine in explorer, and when viewing the pagesource, no <!-- Header Start --> shows but only the <!DOCTYPE line as the very first thing... did I do it the right way? is there a <!-- Header Close or End that I need to remove too? The next error at line 289: <script> <!-- Cookie_unique = 'Cookie_ID_166850687'; image_width = 500; image_height= 500; etc... </script> I can only view it in the page source.... but can't find it anywhere... from the page source I can tell it is related to a certain plugin because its name is shown... I searched the files of that plugin, but can't find the script mentioned. Ok, next error (the <br>) is removed so no need for a closing tag. Next... the <center> tag.... I want to replace it with the css text-align: center... can you show me how it is written exactly? is it: <text-align: center>? and how about closing it? Then the names in the forms and other errors.... like the hspace= thing.... it is in the plugin "buy me a beer!" and I don't know whether or not I should be changing it, and to what. Removed the extra <html> tags... funny.. shouldn't have used them in the text widgets... everthing is html by default I guess. Can you point me please as to which line and where I've placed block elements like <div> and <p> inside inline elements like <b> and <a>? Finally, the & are already included either in theme files like function.php, or in some plugings.... don't know if I should change those.. also noticed in the firefox page source, that the & in the post showing in homepage are considered errors (marked with red).... I didn't use them,,, I type in the text editor... should I after typing the post, go the the code editor and change them to &? I also noticed some double &&.. I suspect those should be change to && too... Thanks very much for your help, and any more input to the above is appreciated...
I'm a bit reluctant to wade too far into this... as all this is some sort of template mess. Templates (esp badly written ones like this, plus with lots of scripts, widgets, and bs) are very difficult to edit, and in some places you can't depending on how the other person wrote it. Looks correct. How it looks when you View Source on the page is what the browser sees. It looks like a simple stupid comment. It's not a tag, so there is no closing version. This is the only clue I have: action = "HREF='http://www.homebiz-pioneer.com/Supertip-report.htm'"; That may be where the script was originally from. It's hard to search for it since in the source there's no name. However, there are many many many <br>s in the source... they either need to leave OR get closed. I also saw some <p>s sitting all alone with no text or anything and no closing </p> (when there's text, the <p>s ARE closed, so I think they were being used as line breaks like <br>). They should go instead of being empty and closed (like <p></p>... better to just get rid of it entirely). The reason <center> was deprecated is because the Web Dudes Group (W3C.org) is trying to get everyone on the same page... and that means HTML has only content, CSS styles and positions the page, and Js (or other scripts) do things (behaviour). The <center> tag was sitting in the HTML, but its purpose was to STYLE which is not what we want. Unfortunately for you, this template thingie has like 3 or 4 css sheets. I think the one you need to work with is the one between the <style> tags near the top of your document. There's more than one-- you don't want the first one as it's been (incorrectly) commented out (it's like <!-- header style blah blah... incorrectly using an HTML comment "tag" to cancel out CSS (CSS uses something different to comment out stuff)). text-align: center; works only on inline elements. Divs are not inline, they are blocks. p is also a block, but because it only ever (should) contain inline elements (text), it WILL work with p. In order to sit this in your CSS, you need to use whatever id or class names in the element that you want centered. So like, the first one I saw was this: <p> <center><h4><strong><span style="color: #E1771E">SPECIAL BONUSES For Each Item Purchased Through Our Links In This Blog!<br> To Take Advantage Clear Your Cookies Now!</span></strong></h4></center> </p> Since h4 is already a block (but with only text inside) you can remove the wrapping <p>s as they're doing nothing. Strong tags should also not be needed as all browsers by default BOLD the <h#> tags. The span also isnt' needed because in the css you could say h4 { text-align: center; color: #e1771e; } Code (markup): If the text-align:center doesn't work (I'd have to test it because h4 is a block really) then you'd instead set a width on it (however wide you want it) and use the centering technique used for block elements like divs: h4 { width: 300px; /*just a guess on my part*/ margin: 0 auto; /*this is what does the centering... auto means equal space on each side, while 0 is 0px margin on top and bottom*/ color: #e1771e; } Code (markup): Anyway since it's not an HTML tag, there's nothing to close. : ) That's the source of many of the invalid stuff-- plugins. There's not a whole lot you can do about them, unless you're able to edit them. As far as I know, the hspace thing does nothing, so removing it shouldn't make a difference... maybe it's a throwback to some old browser like Nutscrape 4. ? Yeah, including Flash's HTML too. Those are there simply so that if you wanted to only see the widget thingie in a browser, there's the full html (like, if I made a Flash movie and wanted to see what it looks like playing in FireFox, I'd need its HTML around it so FF can play it. However, once inside a page with html tags of its own, the extra ones are not needed and in fact are invalid). Those were guesses on my part as the validator is saying stuff like "You can't have a div here" or "you can't have a form here" which is usually when an inline is trying to contain a block. There is, however, inlines holding <h#>s which are blocks, like on line 543 where there's center, then b (bold), then <h4> which if you really insisted on adding the <b> tag (which should'nt be needed as <h#>s are bold by default) then it must be inside the <h4> tag (<h4><b>whatever</b></h4>). The same goes for anchors-- they are inline and need to be inside the blocks. <h4><a href="#">blah</a></h4> not <a href="#"><h4>blah</h4></a> for example. Also, in addition to forms not being able to have names, the stuff inside a form must have a block element around it (apparently the form itself is not enough). Usually this is either a div or the fieldset--- but a fieldset MUST have a legend and if there's no text for a legend, a div might be better. So, <form action="http://www.mysteryautoincome.com/" id="search_box" method="get"> [b]<div>[/b] <label for="input_search">Find this</label> <input type="text" id="input_search" class="input" name="s" /> <input type="image" src="http://www.mysteryautoincome.com/wp-content/themes/gluedideas-subtle/assets/images/icon_search.gif" align="top" id="button_search" value="Search" /> [b]</div>[/b] </form> Code (markup): as example. When it's in the text or a URL you can always get away with replacing & with & (don't forget the ; at the end). However, when you see &&, that's part of the programming language. You can't change that as PHP doesn't know what & is. Instead, you need to make sure that the PHP etc DOES NOT SHOW in the source. The validator only sees what's in the source, not any of the background stuff. Here's the validator I'm looking at: http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0 I went to the validator site and typed in your site's URL. You can slowly go through many of these errors yourself now, while other things you won't know WHY it's a problem because, frankly, you don't (yet) know html. ...And you're using an evil, evil (but pretty) template. There comes a point when you just can't fight them and their stupid useless plugins and excess bloated Javascript and other BS. Just nothing. You may never get your page fully validated... however, if you can get everything that's not a plugin to validate, your page should look the same to all browsers, and then you can start working on CSS errors or browser incompatabilities. If you really really really want to learn html and css, start with a book at the library: Build Your Own Web Site Using HTML and CSS by Ian Lloyd. Like it? Follow up with HTML Utopia: Designing Without Tables Using CSS by Rachel Andrew and Dan Shafer. That and reading articles at A List Apart and 456bereastreet.com, while reading other people's posts here and at other html forums, you'll learn at least the basics of current html (and the differences between transitional and stric doctypes, IE bugs, and difference between HTML and XHTML). Hope this helps. Not sure I can do any more.
Thanks Stomme poes! You've helped me a lot... I will soon be going through all of the errors the validator points out, and try to fix them one by one... The very few that I've already fixed decreased the no. of errors from 223 to 193, but it is still a long way. If I encounter any difficulty, I'll ask. Also found out that I have forgotten to include meta tags, keywords or define a lot of the alt title tags etc. Although they aren't as much effective nowadays, but I prefer to have them in. Thanks again and appreciate the help!
WTF! Not again! The design looks fine in both firefox and explorer latest versions..... (it still has coding errors, but looks fine)... However when I access it from work PC (Company PC), it looks fine in firefox BUT screwed up BIG TIME in explorer same version I'm using at home! It shows text to be out of margins and bottom part text to be very huge! also further right sidebar dropped down again!
Is the text size set to a different setting on PC at work? That would make text break out of boxes, and could also push sidebar down (as IE now thinks there's not enough room for the sidebar to stay at the side). Validating code is only ever the first step : ) Its purpose is to make sure that the page looks screwy because of a css set-up and NOT because of a bad HTML coding. Try reducing text size and see what (if anything) changes.