Hi folks
I’m putting together a page template and using dreamweaver CS4.
I normally use firefox or chrome browsers and so once I’d finished the template I had a look and all is fine.
Then i check it in IE and it’s all over the place!!!
I ran the CS4 browser compatibility and and validation tools both came up ok.
Can anyone help me sort this mess out?
The template is here: www.wowessentials.co.cc/index.php
Thanks a lot
Line 41 and Line 44 seem to have problems.
[Invalid] Markup Validation of http://www.wowessentials.co.cc/index.php - W3C Markup Validator
Thanks for the comments,but those mark up errors, don’t seem to be a problem, as in they aren’t actually there in the script!
I think it is more to do with how IE processes background images compared to other browsers, but not sure how to resolve it!
According to the validation errors, it sounds like you either have an extra or are lacking a closing tag, or have an incomplete tag somewhere.
The point at which the error is caught is not the place where the error actually is. Check earlier in your code.
In line 42-49, you only use the tbody tag once per table tag. You have extras.
[edit]: In line 39, you don’t have a matching closing tag for your <tr> tag. The only thing that matches up is down in 154, but it’s outside of the table tag.
Fix that issue and try validating your code again.
Hi Force Flow and thanks a lot for your comments, I’ve been through all the code again and removed as many errors as I can, now when I check I get 2 errors:
But I don’t understand why these are errors as both of the lines DO include those attributes. Unless I mis-interpreted it and it means I shouldn’t use that attribute in that location, but if that’s the case I’m really confused as I have used it else where and it isn’t causing any errors there.
I’m not sure where to go from here so any further advice you could offer would be great.
Thanks a lot
With the doctype you’re using, those attributes are invalid for those elements.
For the first error, you can delete the background attribute and apply the background image using CSS.
For the second error, you can delete the height attribute and apply the height using CSS.
Would I be better to rebuild the template using div’s and css rather than a table?
I’ve not really used div’s much but if that’s the correct way I might as well start to learn!
OK I’ve placed all the background images in css and removed them from the htlm.
I can validate and pass 
But the site looks exactly the same! perfect in FF dodgy in IE!
Have you got any other ideas I could try?
Cheers
I can’t access the site anymore. Did you change something with the domain?
I’ve been changing things all morning to get the validation complete, but it’s still up and still has the same problems!
Perhaps you were trying to access it at the same time i was FTP’ing (not sure if that would make any difference tho!)
It has nothing to do with the file you were working with…the domain appears to be unavailable. I can’t seem to ping it either. Did you make any DNS changes?
no none at all!!
Very odd because I can still access it, and I’ve just logged into my hosting provider and there are no suspensions happening.
I’m not having any problem reaching the site, either. Perhaps whatever DNS server(s) Force Flow is using is (are) having problems?
Mistake #1 – Thinking you can actually use Dreamweaver to build a decent website.
Mistake #2, coding an entire layout before testing that ANY of your code works in IE.
Mistake #3, thinking that CS4’s “compatibility and validation” have ANYTHING to do with compatibility and validation.
So far you have a page with no actual content - 281 bytes of plaintext… and you are already up to 5.3k of markup… that alone (20:1 code to content ratio) means that the ENTIRE thing needs to be thrown away and started over clean; ENTIRELY typical of what I expect from something built in Dreamweaver – and that’s before I even look at the code…
Where it relies on tables for layout, non-breaking spaces to do empty-cell’s job, fixed width that isn’t even 1024 friendly, cryptic/pointless/meaningless classnames that appear to be used in a presentational manner (at which point you might as well take a trip back to 1997 and use HMTL 3.2), paragraphs around non-paragraph elements, paragraphs around non-breaking spaces for NOTHING, empty elements used to do padding’s job, and outdated attributes like align and valign that have no business being on a website written after 2003. (when we stopped caring about supporting nyetscape 4)
Throw it away, throw the steaming pile of manure dreamweaver away, and do yourself a huge favor and take the time to learn semantic markup, CSS, and write the page using a flat text editor (crimson, editplus, notepad++) testing at each and every stage in the most recent releases of each browser, as well as the past FOUR versions of IE.
As a dearly departed friend used to say “The only thing you can learn from Dreamweaver is how NOT to build websites, and the only thing about Dreamweaver that can be considered professional grade tools are the people promoting it’s use!”
If I have time later I’ll take a stab at showing you what I mean – I’m on the laptop right now and can’t code on these crappy keyboards and minuscule displays worth ****… that’s assuming I can figure out what it’s supposed to look like since I’m seeing four different layouts in four different browsers, NONE of them looking like an intentional design.
Wow, you don’t hold back do you!?
Erm…well this is the first time I’ve ever tried to do a graphical layout, and the first time I haven’t just stolen a freebie css layout.
So I certainly qualify as noob and non-‘wizard’ unlike you good self.
I did ask the question earlier in the thread about starting over in divs and ditching the table, and if I’m understanding your … erm… advice correctly that seems to be what I should do.
Have I understood that correctly?
Indeed, that is the implication – though it’s not just “use div’s instead of tables” as that leads to using div for nothing as well. DIV have their place in layouts but non-table layouts aren’t JUST about “wrap everything in DIV tags”.
But that’s why usually you’re best off marking up you content semantically first – right now I can’t exactly figure out what your content IS – and content should dictate layout, NOT the other way around.
Which is generally why despite it being the “norm” for many people, drawing a pretty picture before you have HTML written is basically putting the cart before the horse.
Due to the shadow image around the outer edge that IS going to take several extra DIV; Or you could use CSS3 shadows if you don’t mind slow scrolling in FF and them not even appearing in IE8 or lower… but those should be added after all the content on a normal page is present and marked up.
For example, where you have:
table width="1040" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td id="TLCB" height="45" width="45" align="center"> </td>
<td id="TB" height="45" colspan="7" align="center" > </td>
<td id="TRCB" width="45" align="center"> </td>
</tr>
<tr>
<td id="LB" width="45" rowspan="7" align="center" > </td>
<td id="WPH2" colspan="7" height="200" align="center" > </td>
<td id="RB" width="45" rowspan="7" align="center" > </td>
</tr>
<tr align="center" valign="middle">
<td class="HUBG" colspan="3"> </td>
<td rowspan="4">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr class="HUBG">
<td colspan="8"><ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemHome" href="#">Home</a></li>
<li><a class="TOPMenuBarItemSubmenu" href="#">Leveling Guides</a>
<ul>
<li><a href="#">Zygor's Guide</a></li>
<li><a href="#">Cataclysmic</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Gold Guides</a>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Reputations Guides</a>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Addons</a></li>
</ul>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"/SpryAssets/SpryMenuBarDownHover.gif", imgRight:"/SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</td>
</tr>
I would probably have:
<div id="pageWrapper">
<div class="borderTop"></div>
<div class="borderSides">
<h1>
WoW Essentials
<span></span>
</h1>
<ul id="mainMenu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Leveling Guides</a>
<ul>
<li><a href="#">Zygor's Guide</a></li>
<li><a href="#">Cataclysmic</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</li><li>
<a href="#">Gold Guides</a>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</li><li>
<a href="#">Reputations Guides</a>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</li>
<li><a href="#">Addons</a></li>
</ul>
Swinging an axe at the “spry menu” nonsense (aka javascript for NOTHING) while at it. Spry menus are a perfect example of what is meant by “how not to build a website” and how that’s exactly what DW teaches you.
As to not holding back – it’s better someone tell you this now than try to silver-bullet fix your issues. That’s NOT helping anyone no matter how much syrup is poured on it. Honesty often hurts, but it’s a hurt you can learn from. Life is pain. Anyone who says differently is selling something. I heard that somewhere once…
Hi again,I was being a little facetious, and do appreciate the truth, hopefully one day I will eventually master all this (to some degree at least).
Now the code you suggested I replace is a combination of an include and the main html page, which in it’s self is not a major problem.
But since my previous post I’ve made multiple changes (none of which actually worked) so may code doesn’t really resemble your quoted section much anymore!
So rather than try to stop the cart so the horse can catch up, I think I should start this journey again.
The original plan was simply to create a template, hence the lack of content. The plan was to reuse the graphical template for every page in the site. I intended to use a simple menu along the top (that much despised spry one) have four sections with several pages in each. each page reviewing a particular guide with links to the creators own page.
I had assumed that by creating a template that I could simply drop in the text and images for each page into the relevant pages and update the menu include appropriately.
Maybe, though I was able to access it earlier in the day. I can access it again now.