SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: IE9 Issues

  1. #1
    SitePoint Evangelist Ian R. Gordon's Avatar
    Join Date
    Feb 2004
    Location
    New York
    Posts
    474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post IE9 Issues

    I viewed this layout in IE9 and the columns are all wacky, I've been up for the past 4 hours looking at the code and seeing double.

    Can you please take a look at the code and tell me what's wrong.

    If you come across any other errors, please let me know so I can correct them.

    Here is what its supposed to look like: http://i.imgur.com/d3yxq.jpg

    CSS
    Code:
    html {
      background: url("../images/wood.jpg");
      font-family: Arial, Helvetica, Verdana, San-serif;
      font-size: 14px;
      color: #000;
      text-align: center;
      margin-top: 50px;
      margin-bottom: 25px;
    }
    
    h1 { background:url("../images/logo.png") no-repeat top left; display:block; float:left; width:366px; height:126px; text-indent:-9999px;}
    
    h2 {
      font-family: 'Open Sans', Arial, Helvetica, Sans-serif;
      font-size: 21px;
      font-weight: 600;
      color: #2c87cc;
      margin: 8px 0 8px 0;
    }
    
    h3 {
      font-family: 'Open Sans', Arial, Helvetica, Sans-serif;
      font-size: 17px;
      color: #2c87cc;
    }
    
    p {
      margin: 12px 0 12px;
      line-height: 1.5em;
    }
    
    a, a:link, a:visited { color:#3d8fce; text-decoration:none; }
    a:hover { color:#2976b1; }
    
    strong { font-weight:700; }
    
    #site-wrapper { width:978px; margin:0 auto;}
    
    #page-wrapper { background:#fff url("../images/watermark.gif") no-repeat top right; text-align:left; padding:20px; overflow:auto;}
    
    #navigation { float:right; width:545px; text-align:right; }
    ul#navigation { margin:0; list-style-type:none;}
    ul#navigation li { display:inline; }
    ul#navigation li a, ul#navigation li a:link, ul#navigation li a:active { color:#184a70; text-decoration:none; font-family: 'Open Sans', Arial, Helvetica, Sans-serif; font-size:16px; font-weight:600; padding-left:12px;}
    
    img.slide { margin: 15px -20px 0; }
    
    #footer { color:#7c4a12; margin-bottom:15px; }
    #footer p { font-family: 'Open Sans', Arial, Helvetica, Sans-serif;}
    #footer ul { list-style-type:none; }
    #footer ul li { display:inline; }
    
    .one-third {
      display:inline;
      float:left;
      margin-left:10px;
      margin-right:10px;
      width:220px;
    }
    
    .intro-text {
      font-family: 'Open Sans', Arial, Helvetica, Sans-serif;
      font-size: 19px;
      font-weight: 400px;
      color: #9a9a9a;
    }
    
    .highlight { float:right; font-size:18px; font-family:"Open Sans", Arial, Helvetica; font-weight:400; display:block; color:#8e8e8e; width:500px; text-align:center; }
    .hightlight strong { font-weight:600; }
    .small-text { font-size:14px; }
    
    .subtitle { color:#909090; font-size:15px; margin-top:-10px;}
    .top-bar { background:#955917; color:#fff; width:320px; margin:-25px 0 10px; padding:7px;}
    
    .grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11 {
        float: left;
        display: inline;
        margin-left:30px;
    }
    .grid1 {
        width: 14px;
    }
    .grid2 {
        width: 98px;
    }
    .grid3 {
        width: 182px;
    }
    .grid4 {
        width: 276px;
    }
    .grid5 {
        width: 350px;
    }
    .grid6 {
        width: 434px;
    }
    .grid7 {
        width: 518px;
    }
    .grid8 {
        width: 602px;
    }
    .grid9 {
        width: 686px;
    }
    .grid10 {
        width: 770px;
    }
    .grid11 {
        width: 854px;
    }
    .first {
        margin-left: 0;
        clear: left;
    }
    .last{margin-right:0;}
    
    /* clearfix */
    .clearfix:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }
    * html .clearfix {
        zoom: 1;
    } /* IE6 */
    *:first-child+html .clearfix {
        zoom: 1;
    } /* IE7 */
    
    
    /* Prefix/Suffix classes for adding spacing in between divs */
    
    .container .prefix1{padding-left:84px}
    .container .prefix2{padding-left:168px}
    .container .prefix3{padding-left:252px}
    .container .prefix4{padding-left:336px}
    .container .prefix5{padding-left:420px}
    .container .prefix6{padding-left:504px}
    .container .prefix7{padding-left:588px}
    .container .prefix8{padding-left:672px}
    .container .prefix9{padding-left:756px}
    .container .prefix10{padding-left:840px}
    .container .prefix11{padding-left:924px}
    
    .container .suffix1{padding-right:84px}
    .container .suffix2{padding-right:168px}
    .container .suffix3{padding-right:252px}
    .container .suffix4{padding-right:336px}
    .container .suffix5{padding-right:420px}
    .container .suffix6{padding-right:504px}
    .container .suffix7{padding-right:588px}
    .container .suffix8{padding-right:672px}
    .container .suffix9{padding-right:756px}
    .container .suffix10{padding-right:840px}
    .container .suffix11{padding-right:924px}
    
    /* Push/Pull classes for switching the order of divs */
    
    
    .container .push1{left:84px}
    .container .push2{left:168px}
    .container .push3{left:252px}
    .container .push4{left:336px}
    .container .push5{left:420px}
    .container .push6{left:504px}
    .container .push7{left:588px}
    .container .push8{left:672px}
    .container .push9{left:756px}
    .container .push10{left:840px}
    .container .push11{left:924px}
    
    .container .pull1{left:-84px}
    .container .pull2{left:-168px}
    .container .pull3{left:-252px}
    .container .pull4{left:-336px}
    .container .pull5{left:-420px}
    .container .pull6{left:-504px}
    .container .pull7{left:-588px}
    .container .pull8{left:-672px}
    .container .pull9{left:-756px}
    .container .pull10{left:-840px}
    .container .pull11{left:-924px}
    
    .push1, .push2, .push3, .push4, .push5, .push6, .push7, .push8, .push9, .push10, .push11, .pull1, .pull2, .pull3, .pull4, .pull5, .pull6, .pull7, .pull8, .pull9, .pull10, .pull11{position:relative;}
    HTML
    PHP Code:
    <!DOCTYPE html
      <
    html dir="ltr" lang="en-US">
        <
    head>
          <
    title>Universal Martial Arts Center &mdashA Complete School of Self Defense</title>

          <
    meta name="viewport" content="width=device-width,initial-scale=1" />
          <
    meta charset="UTF-8" />

          <
    meta name="keywords" content="taekwondo, hapkido, judo, karate, mma, mixed martial arts, taichi, tai chi, capoeira, jujutsu, jiujustsu, martial arts, bushido, jidokwon, kids, afterschool, grappling, thai, boxing, sambo, combat, army, military, defense, combatives"/>
          <
    meta name="description" content="Universal Martial Arts Center is a professional martial arts school teaching: Taekwondo, Hapkido, Judo and MMA. Call (718)276-5516 or (516)424-3567 for more information."/>
          <
    meta name="author" content="Universal Martial Arts Center" />
          <
    meta name="copyright" content="&copy;2011 Universal Martial Arts Center, Inc." />
          <
    meta name="revisit-after" content="1 day" />

          <
    link rel="stylesheet" type="text/css" media="all" href="stylesheets/reset.css" />
          <
    link rel="stylesheet" type="text/css" media="all" href="stylesheets/site.css" />
          <
    link rel="stylesheet" type="text/css" media="all" href="stylesheets/978_grid.css" />
          <
    link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
          
          <
    script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
          <!--[if lt IE 9]>
            <script src="scripts/modernizr-2.0.6.min.js"></script>
          <![endif]-->
        </head>

        <body>
          <div id="site-wrapper">
            <div id="page-wrapper">
              <!-- Header -->
              <h1>Universal Martial Arts Center</h1>
              <p class="highlight">The Home of <strong>Universal MMA Fight Team</strong><br />Team Universal <span class="small-text">(Taekwondo, Judo &amp; MMA)</span>
              <ul id="navigation">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About Us</a></li>
                <li><a href="#programs">Programs</a></li>
                <li><a href="#schedule">Class Schedule</a></li>
                <li><a href="#media">Media</a></li>
                <li><a href="#contact">Contact Us</a></li>
              </ul>
              <!-- / Header -->
              <div id="slider">
                <img src="http://www.sitepoint.com/forums/images/slide_2.jpg" width="978" height="300" class="slide" alt="" />
              </div>
              <div class="grid8 first">
                <p class="intro-text">Welcome to Universal Martial Arts Center, a school of professional martial arts instruction for over 10 years. We have a team of dedicated instructors who have produced champions in life, as 
    well as in the martial arts.</p>
              </div>
              <div class="grid4">
                Twitter Widget
              </div>
              <div class="grid4 first">
                <h2>News &amp; Updates</h2>
                <h3 class="subtitle">School News &amp; Class Updates</h3>
                
                <p>Quo ut ubique civibus. Vim cu inimicus vituperatoribus. Vocibus mentitum eu vim, sea ut alienum suavitate gloriatur. Per error denique delicata ex, pro et omnium corpora temporibus, eu nullam menandri eos. Mea et solet deleniti, aperiam delectus interesset ad usu, inani impetus gubergren his in.</p>
              </div>
              <div class="grid4">
                <h2>Upcoming Events</h2>
                <h3 class="subtitle">Tournaments &amp; Seminars</h3>
                
                <p>An pro quot harum, elit minim fuisset mea no, at quo affert tantas meliore. Per id suas ferri dissentiet. Ne mea graecis accumsan, mel meis quidam essent ut, cu quo voluptaria constituam disputationi. Euismod suscipit ea eam. Nam in error urbanitas, his ex nusquam tibique disputationi. Est ea oratio delicatissimi.</p>
              </div>
              <div class="grid4">
                <h2>Tournament Results</h2>
                <h3 class="subtitle">Taekwondo, Judo &amp; MMA</h3>
                
                <p>Ea ius tale facete impetus, et zril saperet reprehendunt eam, clita labores expetenda has eu. Electram concludaturque id eum. Eos no elit maiestatis reprimique. Mel labore deserunt ea, ne sint facilisi sea. Quo verear vituperata ad, vel eros vulputate ne, pri vidit iusto latine ei. Suas ipsum essent ea mea.</p>
              </div>
            </div>
            <div id="footer">
              <p>&copy;2011 Universal Martial Arts Center</p>
              <ul>
                <li><a href="#legal">Terms of Use</a></li>
                <li><a href="#privacy">Privacy Policy</a></li>
                <li><a href="#legal">Legal Information</a></li>
              </ul>
            </div>
          </div>
          <!-- Google Analytics -->
          <script>
            window._gaq = [['_setAccount','UA-XXXX-1'],['_trackPageview'],['_trackPageLoadTime']];
              Modernizr.load({
                load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
              });
          </script>     
        </body>
      </html> 
    Last edited by Ian R. Gordon; Aug 20, 2011 at 06:12. Reason: Update Text
    Ian Gordon
    CSS / XHTML / PHP Programmer
    http://www.iangordon.us

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,333
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Do you have a live link to this?

  3. #3
    SitePoint Evangelist Ian R. Gordon's Avatar
    Join Date
    Feb 2004
    Location
    New York
    Posts
    474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ian Gordon
    CSS / XHTML / PHP Programmer
    http://www.iangordon.us

  4. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Step 1, lose the HTML 5 nonsense since you aren't actually using it. Let's you axe that 'modernizr" script which frankly, is probably contributing to it looking disastrously bad in IE 6, 7 and 8 here.

    Step 2, swing an axe at that "grid" framework nonsense, as that's basically forcing you into using presentational classes defeating the entire point of using CSS. (grid4? Grid8? That's not saying what things ARE!)

    Step 3, Your h3.subtitle are NOT the starts of new subsections, so they should NOT be their own heading tags. Thats what SMALL inside your H2 is for, as that's all the same heading.

    Step 4, Ease up on the DIV. You've got WAY more of them than you need given what's going on with the page.

    Step 5. Adjust the color contrasts on much of your text to be LEGIBLE.

    Some other advice -- neuter the keywords down to 8 or 9 words and less than 128 characters. Lose the meta tags that do nothing useful... STOP sending CSS that's only really useful for "screen" to "all", lose the jquery for nothing bloat, etc, etc, etc...

    Also, if you were planning on a image rotator for the parts labelled "slider" -- I say don't. With images that large you'll flush the desire of most people to even visit the site more than once.

    Which would turn the HTML into this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <meta
    	name="Keywords"
    	content="taekwondo, hapkido, judo, karate, mma, mixed, martial, arts, taichi, tai chi, capoeira, jujutsu, jiujustsu"
    />
    
    <meta
    	name="Description"
    	content="Universal Martial Arts Center is a professional martial arts school teaching: Taekwondo, Hapkido, Judo and MMA. Call (718)276-5516 or (516)424-3567 for more information."
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    
    <title>
    	Universal Martial Arts Center &mdash; A Complete School of Self Defense
    </title>
    
    </head><body>
    
    <div id="pageWrapper">
    	<h1>
    		Universal Martial Arts Center<br />
    		<small>A Complete System of Self-Defense</small>
    		<span><!-- image replacement --></span>
    	</h1>
    	
    	<p class="standout">
    		Home of <strong>Universal MMA Fight Team</strong><br />
    		Team Universal <small>(Taekwondo, Judo &amp; MMA)</small>
    	</p>
    	
    	<ul id="mainMenu">
    		<li><a href="#home">Home</a></li>
    		<li><a href="#about">About Us</a></li>
    		<li><a href="#programs">Programs</a></li>
    		<li><a href="#schedule">Class Schedule</a></li>
    		<li><a href="#media">Media</a></li>
    		<li><a href="#contact">Contact Us</a></li>
    	</ul>
    	
    	<img
    		src="http://www.sitepoint.com/forums/images/slide_2.jpg"
    		width="978" height="300"
    		class="banner"
    		alt=""
    	/>
    	
    	<p id="welcomeText">
    		Welcome to Universal Martial Arts Center, a school of professional martial arts instruction for over 10 years. We have a team of dedicated instructors who have produced champions in life, as well as in the martial arts.
    	</p>
    	
    	<div id="twitterWidget">
    		Twitter Widget
    	</div>
    	
    	<div id="newsUpdates">
    		<h2>
    			News &amp; Updates<br />
    			<small>School News &amp; Class Updates</small>
    		</h2>
    		<p>
    			Quo ut ubique civibus. Vim cu inimicus vituperatoribus. Vocibus mentitum eu vim, sea ut alienum suavitate gloriatur. Per error denique delicata ex, pro et omnium corpora temporibus, eu nullam menandri eos. Mea et solet deleniti, aperiam delectus interesset ad usu, inani impetus gubergren his in.
    		</p>
    	<!-- #newsUpdates --></div>
    	
    	<div id="upcomingEvents">
    		<h2>
    			Upcoming Events<br />
    			<small>Tournaments &amp; Seminars</small>
    		</h2>
    		<p>
    			An pro quot harum, elit minim fuisset mea no, at quo affert tantas meliore. Per id suas ferri dissentiet. Ne mea graecis accumsan, mel meis quidam essent ut, cu quo voluptaria constituam disputationi. Euismod suscipit ea eam. Nam in error urbanitas, his ex nusquam tibique disputationi. Est ea oratio delicatissimi.
    		</p>
    	<!-- #upcomingEvents --></div>
    	
    	<div id="tournamentResults">
    		<h2>
    			Tournament Results<br />
    			<small>Taekwondo, Judo &amp; MMA</small>
    		</h2>
    		<p>
    			Ea ius tale facete impetus, et zril saperet reprehendunt eam, clita labores expetenda has eu. Electram concludaturque id eum. Eos no elit maiestatis reprimique. Mel labore deserunt ea, ne sint facilisi sea. Quo verear vituperata ad, vel eros vulputate ne, pri vidit iusto latine ei. Suas ipsum essent ea mea.
    		</p>
    	<!-- #tournamentResults --></div>
    	
    <!-- #pageWrapper --></div>
    
    <div id="footer">
    	&copy; 2011 Universal Martial Arts Center
    	<ul>
    		<li><a href="#legal">Terms of Use</a></li>
    		<li><a href="#privacy">Privacy Policy</a></li>
    		<li><a href="#legal">Legal Information</a></li>
    	</ul>
    </div>
    
    </body></html>
    Heading out to dinner, but when I get back I'll belt out working CSS to go with that.

    Basically though, that "grid" css framework you are using? Rubbish. CSS frameworks on the whole down to the very CONCEPT are total rubbish as they defeat one of the entire core concepts of separation of presentation from content -- saying in the HTML what things ARE, not what they look like.

    Though good for a laugh -- your background image is 50% larger than I'd allow for an entire site of HTML+CSS+Images... but then the scripting ALONE is 20% larger than my ideal target.

  5. #5
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    ... and here's what I came up with:

    Universal Martial Arts Center &mdash; A Complete School of Self Defense

    As with all my examples the directory:

    Index of /for_others/ianRGordon

    is unlocked for easy access to the bits and pieces. Valid XHTML 1.0 Strict, would be valid CSS 2.1 if not for some IE workarounds, tested working all the way back to IE 5.5

    Basically, the "throw it out and start over" approach.

    I would SERIOUSLY consider axing the google fonts bit as they aren't properly cached across pages in all browsers (despite wild claims they are) and instead grab fonts from something like Font Squirrel. I don't trust calling scripting for a CSS file, which is what their fonts do.

    Especially since the google fonts do NOT provide proper kerning information for IE8/lower, which is why they render just a bit wider in those browsers. ("just a bit" being sarcasm -- it's 10-20%)

    I also re-optimized all the images to get the page size under control (it's down to 106k, still 36k larger than I'd like ), tweaked your paddings so they're actually consistent, properly implemented images off and/or CSS off graceful degradation, switched it to dynamic fonts on the content area, etc, etc...

  6. #6
    SitePoint Evangelist Ian R. Gordon's Avatar
    Join Date
    Feb 2004
    Location
    New York
    Posts
    474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post

    Thanks a lot deathshadow, I kind of started to do a HTML5 design using <section> tags and <nav> like the HTML spec suggests but, I devolved to regular plain HTML.

    Yes, I kind of do an outline and start expanding outward and some of the presentational does seep into my HTML code, instead of my CSS.

    Thank you for your assistance though, I'm going to look it over and continue.
    Ian Gordon
    CSS / XHTML / PHP Programmer
    http://www.iangordon.us

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Oh, side note -- you also didn't declare your line-heights when you changed font-size. You CANNOT trust the default line-height on layouts. You change font-size, redeclare your line-height!

    ... and avoid PX on fonts unless you have to due to space constraints. Like from the menu up, px is fine... everything after that? Not so much.


Tags for this Thread

Bookmarks

Posting Permissions

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