SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Enthusiast nokia3310's Avatar
    Join Date
    Dec 2009
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How can this website be fixed in IE9?

    if you check this website you will notice that it is fine with every other browser except for IE 9.
    What is the problem and what needs to be fixed?
    website is www.fontsbytes.com
    Thank you.

    ?!?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by nokia3310 View Post
    if you check this website you will notice that it is fine with every other browser except for IE 9.
    No, actually. It's wrecked in Firefox for me too. Try removing this float:

    Code:
    #header-right {
      float: left;
      margin-left: 3px;
    }

  3. #3
    SitePoint Enthusiast nokia3310's Avatar
    Join Date
    Dec 2009
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    No, actually. It's wrecked in Firefox for me too. Try removing this float:

    Code:
    #header-right {
      float: left;
      margin-left: 3px;
    }


    really? What version of Firefox?

    Move what float? Where?

    Thanks for the reply.
    ?!?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by nokia3310 View Post
    What version of Firefox?
    Version 12, Mac (the latest version).

    Move what float? Where?
    I quoted it above, from giordani.css, line 59.

  5. #5
    SitePoint Enthusiast nokia3310's Avatar
    Join Date
    Dec 2009
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Version 12, Mac (the latest version).



    I quoted it above, from giordani.css, line 59.
    Okay will try that.
    I am also using Firefox latest version but on Windows 7 and it looks perfect.
    ?!?

  6. #6
    SitePoint Enthusiast nokia3310's Avatar
    Join Date
    Dec 2009
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Version 12, Mac (the latest version).



    I quoted it above, from giordani.css, line 59.
    How is it now? on your Mac?
    I removed the float and IE 9 works fine now!

    Thanks alot!!!
    ?!?

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Yep, it's fine in Firefox now.

  8. #8
    SitePoint Member
    Join Date
    May 2012
    Location
    UK
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it is very simple copy the main css file which show perfectly this page design in other browser. and paste their with the name "ie9" now add the conditional css for ie9 in header file head section. Get the code from google for the conditional css for ie9.

    you add all the css in this file all for which ie have problems.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by mercuro View Post
    it is very simple copy the main css file which show perfectly this page design in other browser. and paste their with the name "ie9" now add the conditional css for ie9 in header file head section. Get the code from google for the conditional css for ie9.

    you add all the css in this file all for which ie have problems.
    Save conditional comments as the very last resort. They are really for older versions of IE. If you need them for IE9, you have done something wrong.

  10. #10
    SitePoint Enthusiast nokia3310's Avatar
    Join Date
    Dec 2009
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Save conditional comments as the very last resort. They are really for older versions of IE. If you need them for IE9, you have done something wrong.

    Something is wrong again. The same problem shows when using IE 9.0.4 using a different computer Windows 7 also.
    The thing is this computer shows fine before, so basically the problem is reversed now. So now shows well on my computer and this one doesn't show well. Same monitor and both same IE9(not sure if versions are different).
    ?!?

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Have you viewed that page in IE9 before? On that computer? You might be seeing an older version of hte page. My IE9 displays just fine.

    Try clearing your cache, see if that helps .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  12. #12
    SitePoint Enthusiast nokia3310's Avatar
    Join Date
    Dec 2009
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Have you viewed that page in IE9 before? On that computer? You might be seeing an older version of hte page. My IE9 displays just fine.

    Try clearing your cache, see if that helps .
    If at all it is cache then it should show fine since it showed fine before...but now it looks like how mine used to look before. Same Monitor too and i mean same IE9 and at home it works fine on my IE9 and same monitor. Very weird.
    ?!?

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    You'd best do a bit of a tidy up of your CSS then. Remove the bits in red below, and add the bits in blue:

    Code:
    #header {
      float: left; // remove
      height: 270px; // remove
      width: 1010px;
    }
    
    #header-right {
      margin-left: 3px; // remove
      float: right;
      width: 800px;
    }
    
    #menu-bar ul li {
      background: none repeat scroll 0 0 #990000;
      border: 1px solid #990000; // remove
      border-radius: 6px 6px 6px 6px;
      display: inline;
      padding: 2px 10px;
    }
    
    #all-categories {
      border: 2px solid #990000;
      float: left; // remove
      font-family: arial;
      font-size: 14px;
      height: 225px; // remove
      padding-left: 10px;  // remove
      padding-right: 5px;  // remove
      padding-top: 4px;  // remove
      padding: 4px 5px 10px 10px;
      overflow: hidden;
    }

  14. #14
    SitePoint Enthusiast nokia3310's Avatar
    Join Date
    Dec 2009
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You'd best do a bit of a tidy up of your CSS then. Remove the bits in red below, and add the bits in blue:

    Code:
    #header {
      float: left; // remove
      height: 270px; // remove
      width: 1010px;
    }
    
    #header-right {
      margin-left: 3px; // remove
      float: right;
      width: 800px;
    }
    
    #menu-bar ul li {
      background: none repeat scroll 0 0 #990000;
      border: 1px solid #990000; // remove
      border-radius: 6px 6px 6px 6px;
      display: inline;
      padding: 2px 10px;
    }
    
    #all-categories {
      border: 2px solid #990000;
      float: left; // remove
      font-family: arial;
      font-size: 14px;
      height: 225px; // remove
      padding-left: 10px;  // remove
      padding-right: 5px;  // remove
      padding-top: 4px;  // remove
      padding: 4px 5px 10px 10px;
      overflow: hidden;
    }
    What about the ones not in RED but you have //remove? remove those too?
    ?!?

  15. #15
    SitePoint Enthusiast nokia3310's Avatar
    Join Date
    Dec 2009
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here is a recent image from thumbalizr
    after making the changes you sent last

    ?!?

  16. #16
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    As a rule of thumb, if it's screwing up in 9, there's something fundamentally flawed with how it's built. Of course, if you have 16 separate CSS files being sent as media="all" and no less than 6 classes on BODY, that goes without saying.

    Of course the lack of semantic markup, hordes of endless wrapping DIV for no fathomable reason, pointless wasteful use of title attributes... Ok, lemme guess, is this poopal or turdpress....oop, it's drupal, never would have guessed. Oh wait, yes I did.

    The laundry list of problems with the HTML and CSS is far, far too long to even try to get into here; this is NOT a case for a silver bullet fix, this is a case for throwing it out and starting over... since it's 50k of HTML doing 10-15k's job, and a disorganized disaster of multiple CSS files I can't imagine anyone wanting to take the time to even try and debug.

    I mean seriously, if this:
    Code:
        <div id="search-box">
          <form action="/search/" accept-charset="UTF-8" method="POST" id="views-exposed-form-font-search-page-1"> <div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='e539a7059f90caa3220910d478364a9e' /></div>
            <div>
              <div class="views-exposed-form">
                <div class="views-exposed-widgets clear-block">
                  <div class="views-exposed-widget views-widget-filter-title">
                    <div class="views-widget">
                      <div class="form-item" id="edit-title-wrapper">
                        <input type="text" maxlength="128" name="query" id="edit-title" size="30" value="" class="form-text" />
                      </div>
                    </div>
                  </div>
                  <div class="views-exposed-widget views-submit-button">
                    <input type="submit" id="edit-submit-font-search" value="SEARCH" class="form-submit" />
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
    Doesn't set off your "whiskey tango foxtrot" radar...

    Bottom line, you've got a laundry list of how NOT to build a website. Chuck it and start over; needs a total reskin which is probably why here the only brower it isn't broken in is Firefox.

  17. #17
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    OK, remove the new height on the header and add overflow: hidden instead:

    Code:
    #header {
      height: 180px; // remove
      margin: 0;
      overflow: hidden; // add
      padding: 0;
      position: relative;
    }

  18. #18
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    20
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    OK, remove the new height on the header and add overflow: hidden instead:

    Code:
    #header {
      height: 180px; // remove
      margin: 0;
      overflow: hidden; // add
      padding: 0;
      position: relative;
    }
    This will solve the problem, and you really have ro review your website from top to bottom and cleanup some div's and css code.

  19. #19
    SitePoint Enthusiast nokia3310's Avatar
    Join Date
    Dec 2009
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    OK, remove the new height on the header and add overflow: hidden instead:

    Code:
    #header {
      height: 180px; // remove
      margin: 0;
      overflow: hidden; // add
      padding: 0;
      position: relative;
    }

    I can't find where you found this

    Code:
    #header {
      height: 180px; // remove
      margin: 0;
      overflow: hidden; // add
      padding: 0;
      position: relative;
    }
    What file name.
    ?!?

  20. #20
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    20
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by nokia3310 View Post
    I can't find where you found this

    Code:
    #header {
      height: 180px; // remove
      margin: 0;
      overflow: hidden; // add
      padding: 0;
      position: relative;
    }
    What file name.
    http://www.fontsbytes.com/static/css/layout.css

    open file and go to line 26


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
  •