Change HTML5 tags to divs

[Tony5787]

Hey guys I'm fairly new to coding and I've been designing a Wordpress theme from scratch. I had everything laid out fine with the use of the HTML5 tags of <header>, <nav> and <menu> but I decided to replace these tags with divs instead because Internet Explorer didn't seem to recognize these tags and wouldn't display any of those portions of my site correctly. They worked fine in every other browser except IE but I want my site to work in every browser possible. My only problem now is that my nav bar won't display horizontally and the background that I had for when i would hover over a selection has disappeared. My website is filmonfire.net and the portions that I am referring to here are <div id="nav"> and in my stylesheet anything that deals with the #nav under the section /* NAV */. Thanks in advance.

[teedoff]

You could also still use html5 and google for some scripts that force IE to recognize html5 tags. Not hard to find.

[Tony5787]

Cool I'll look for some of those. It looked perfect with the HTML5 elements in everything except IE. I hate IE so much.

[teedoff]

Cool I'll look for some of those. It looked perfect with the HTML5 elements in everything except IE. I hate IE so much.

Just still be aware of the fact that html5 is still experimental and not fully supported. I only mentioned the IE hacks as an option. If your not very deep into your site design and coding, it may still be better to resort to falling back to a fully supported doctype and code.

[Tony5787]

I'm pretty far in (almost done actually) so I am going to try these javascript hacks I found. For some reason Internet Explorer is still displaying my old code even after I re-saved it on my host. Also, I used linear gradients for many parts of my layout but none of these gradients will show up in IE even if I use the filter tag in my CSS. Do you know why this would be and how I could make it work? Everything is displayed correctly that utilizes a background like this I just can't seem to get these backgrounds to display. I think it might be backgrounds in general because I have a general "fallback" option of a solid color background too and that isn't showing up either.

[VIPStephan]

You can easily use HTML 5 and HTML 4 in the same document like:

<header>
  <div class="header">
   (content)
  </div>
</header>

This is a little redundant but you have the HTML 5 elements for the semtantics and can still style the section by addressing the div in case a browser doesn’t support HTML 5.

[teedoff]

You can easily use HTML 5 and HTML 4 in the same document like:

<header>
  <div class="header">
   (content)
  </div>
</header>

This is a little redundant but you have the HTML 5 elements for the semtantics and can still style the section by addressing the div in case a browser doesn’t support HTML 5.

Stephan, I've seen this suggested before, but was curious. Does this not bloat the code a great deal? Or is it really not an issue?

[Tony5787]

Can I have more than one class per div? I used the 960 grid (in hindsight I wish I wouldn't have because it makes everything more complicated than it should be probably) so I have classes already for basically every div in my index.php. I googled it and people said you can just do something like <div class="class 1" "class 2"> </div>. Is this true? I can't test it out right now to confirm it or not because I'm on campus right now and my college has the ports for my cpanel blocked and no proxies work. I was using id's instead of classes too but that wasn't allowing me to display my header ul horizontally with either "display: inline;" or "float: left;".

[VIPStephan]

Stephan, I've seen this suggested before, but was curious. Does this not bloat the code a great deal? Or is it really not an issue?

Depending on the amount of code, yeah, this could bloat it a bit. As always one should use common sense. If support in all major browsers is a requirement it’s currently probably better to stick with HTML 4/XHTML 1 rather than using experimental code in production websites.

Tony:

<div class="example yeah here-we-go">…</div>

.example {…}
.yeah {…}
.here-we-go {…}
.yeah.example {…}
.example.here-we-go {…}
…
…

[Tony5787]

Alright that seems to solve the problem I just have to adjust the margin on top of the list. Thanks guys! I can't wait until HTML5 is the standard though the semantic tags are so much easier to use than divs with specific classes assigned to each.

One last thing though. For some reason IE keeps displaying old code that I've updated quite a few times since and even clearing the cache won't get the browser to show the new source code. Do you know why this might be?

[teedoff]

One last thing though. For some reason IE keeps displaying old code that I've updated quite a few times since and even clearing the cache won't get the browser to show the new source code. Do you know why this might be?

And you're uploading the reworked files to your remote server correct? Can you show us some "old" code and then what it should now look like in your page source?

[Tony5787]

If you canview my source in IE at filmonfire.net and the head has an unfinished link tag at the very end then it isn't updated. Ive resaved my new source several times on my cpanel and it just wont change the code to the new source.

[teedoff]

If you will go ahead an fix these errors, I think you'd be good to go.

One question. Are you changing your code directly on your remote server? If so, I recommend working and testing code locally before uploading files to your remote server that you KNOW is correct. Just saves some headache I believe.

[Tony5787]

Yeah I test them locally except when I'm fine tuning things like padding and margins. The div with two classes has worked for IE so I'm just going to change my doctype back to XHTML I think. Those errors will be corrected soon I haven't gotten around to creating the actual search function yet so that's why that's like that.

A few last things though. I'm using separate stylesheets to fix some errors in different versions of IE and when I try to move my nav's ul li's down they won't move. I've tried margins, absolute positioning, and padding-top. Do you know of a way to get these items to shift down in IE 7 and earlier?