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.

No, actually. It’s wrecked in Firefox for me too. Try removing this float:


#header-right {
  [COLOR="#FF0000"]float: left;[/COLOR]
  margin-left: 3px;
}

really? What version of Firefox?

Move what float? Where?

Thanks for the reply.

Version 12, Mac (the latest version).

Move what float? Where?

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.

How is it now? on your Mac?
I removed the float and IE 9 works fine now!

Thanks alot!!!

Yep, it’s fine in Firefox now. :slight_smile:

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. :slight_smile:

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).

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.

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:


#header {
  float: left; // remove
  [COLOR="#FF0000"]height: 270px; // remove[/COLOR]
  width: 1010px;
}

#header-right {
  [COLOR="#FF0000"]margin-left: 3px; // remove[/COLOR]
  float: right;
  [COLOR="#0000CD"]width: 800px;[/COLOR]
}

#menu-bar ul li {
  background: none repeat scroll 0 0 #990000;
  [COLOR="#FF0000"]border: 1px solid #990000; // remove[/COLOR]
  border-radius: 6px 6px 6px 6px;
  display: inline;
  padding: 2px 10px;
}

#all-categories {
  border: 2px solid #990000;
  [COLOR="#FF0000"]float: left; // remove[/COLOR]
  font-family: arial;
  font-size: 14px;
  height: 225px; // remove
  [COLOR="#FF0000"]padding-left: 10px;  // remove
  padding-right: 5px;  // remove
  padding-top: 4px;  // remove[/COLOR]
  [COLOR="#0000CD"]padding: 4px 5px 10px 10px;
  overflow: hidden;[/COLOR]
}

What about the ones not in RED but you have //remove? remove those too?

here is a recent image from thumbalizr
after making the changes you sent last

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:


    <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.

OK, remove the new height on the header and add overflow: hidden instead:


#header {
  [COLOR="#FF0000"]height: 180px;[/COLOR] // remove
  margin: 0;
  [COLOR="#0000CD"]overflow: hidden;[/COLOR] // 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.

I can’t find where you found this


#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