Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Change HTML5 tags to divs

    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.

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    You could also still use html5 and google for some scripts that force IE to recognize html5 tags. Not hard to find.
    Teed

  • #3
    New Coder
    Join Date
    Sep 2011
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Cool I'll look for some of those. It looked perfect with the HTML5 elements in everything except IE. I hate IE so much.

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Tony5787 View Post
    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.
    Teed

  • #5
    New Coder
    Join Date
    Sep 2011
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,706
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    You can easily use HTML 5 and HTML 4 in the same document like:
    Code:
    <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.

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by VIPStephan View Post
    You can easily use HTML 5 and HTML 4 in the same document like:
    Code:
    <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?
    Teed

  • #8
    New Coder
    Join Date
    Sep 2011
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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;".

  • #9
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,706
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Quote Originally Posted by teedoff View Post
    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:

    Code:
    <div class="example yeah here-we-go">…</div>
    Code:
    .example {…}
    .yeah {…}
    .here-we-go {…}
    .yeah.example {…}
    .example.here-we-go {…}
    …
    …
    Last edited by VIPStephan; 09-08-2011 at 05:34 PM.

  • Users who have thanked VIPStephan for this post:

    Tony5787 (09-08-2011)

  • #10
    New Coder
    Join Date
    Sep 2011
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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?

  • #11
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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?
    Teed

  • #12
    New Coder
    Join Date
    Sep 2011
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Netscape

    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.

  • #13
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.
    Teed

  • #14
    New Coder
    Join Date
    Sep 2011
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •