Fluid Layout - problem in IE Browser

Discussion in 'HTML & Website Design' started by wilvyrux, Apr 9, 2013.

  1. #1
    Hi Guys,

    Im doing a responsive layout and i got a trouble in viewing in ie explorer. Theres anyone can solve this problems?..
    i noticed if i run in iexplorer browser the default structure is mobile layout. and not a desktop layout. but in firefox and chrome the layout if good and working.



    heres the output screenshot >>>
    [​IMG]


    heres the live view link>> http://dotpxelz.com/symphinite/fluid.html

    Thanks :)
    wilvyrux
     
    wilvyrux, Apr 9, 2013 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Well, your problems are multifold... first if you give a *** about any version of IE prior to 9, you shouldn't even be using a HTML 5 document -- and no, the bloated javascripted garbage is NOT a real fix.

    But really you've got gibberish markup all over the place, for example:
    
     <div id="menutablet">
      <ul>
      <a href="#"><li class="c0 btn"><p>home</p></li></a>
      <a href="#"><li class="c0 btn"><p>About <br>Us</p></li></a>
      <a href="#"><li class="c0 btn"><p>Faq</p></li></a>
      <a href="#"><li class="c0 btn"><p>NEWS</p></li></a>
      <a href="#"><li class="c0 btn"><p>more</p></li></a>
      </ul>
    
      </div>
    Code (markup):
    Looks tiny -- it is filled with problems... problems like anchors cannot wrap the LI as the only tag that's a proper child of a UL is LI... you can't put <a href="#"> between <ul> and <li> -- EVER, EVEN in the idiotic train wreck of stupidity known as HTML 5. (hardly a shock IE chokes on that part, it's shocking it works right in any browser) -- much less the paragraphs inside the LI for christmas only knows what since single words are NOT paragraphs... of course it has the DIV around it for nothing since UL is a perfectly good block-level wrapper in it's own right... and here's a really big tip -- if all your elements of the same type inside a perfectly good container are getting the exact same classes, like say "c0 btn", NONE of them should have classes.

    The whole page is filled with that type of broken/pointless gibberish markup -- it's a bit shocking it's only reporting 40 errors, but with HTML 5's lip service around it ... well, it's not like validation means a blasted thing. Pointless object embeds, endless DIV and classes for Christmas only knows what, clearing DIV like it's still 2001, nonsensical heading orders (h4 before there's even a H1, no H1, H3 without H2 or H1...) -- in a lot of ways it proves what I say about HTML 5 as a whole, it's target audience is the people who still write HTML 3.2 and until a couple years ago were slapping 4 tranny on it.

    Of course the whole thing isn't even DESIGNED for fluid layout much less responsive -- with the giant blasted image rotator, multiple equal-height equal-width elements, px metric fonts on damned near everything, it's another of these laundry lists of how not to put a site together if you are going to try and be accessible. You might have semi-fluid semi-working and responsive layout semi-working, but you did so on a foundation that isn't real world deployable if you care about accessibility -- using a number of layout concepts that are just NOT compatible with semi-fluid layout and responsive layout.

    Again, I wouldn't try to throw any silver bullet fixes as this as the problems run right to bone. Time to toss it and start over.
     
    deathshadow, Apr 9, 2013 IP
  3. wilvyrux

    wilvyrux Greenhorn

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #3
    Thank you for you advice sir deathshadow. its really help me. especially in this code

    1. <div id="menutablet">
    2. <ul>
    3. <a href="#"><li class="c0 btn"><p>home</p></li></a>
    4. <a href="#"><li class="c0 btn"><p>About <br>Us</p></li></a>
    5. <a href="#"><li class="c0 btn"><p>Faq</p></li></a>
    6. <a href="#"><li class="c0 btn"><p>NEWS</p></li></a>
    7. <a href="#"><li class="c0 btn"><p>more</p></li></a>
    8. </ul>
    9. </div>
      Now i know.
      Maybe i try to do it again and fix some of my codes.
      Thanks a lot :)
     
    wilvyrux, Apr 9, 2013 IP