Alignment in Internet Explorer. OMG!

Question

jonsan32 12 Junior Poster in Training

13 Years Ago

I have these brackets I'm trying to apply to my site, but I'm running into some issues when viewing it in I.E.

I'm sure it's something simple, but the teams and scores smush to the right, and the finals part of the bracket floats too far to the right as well. It's such a cool script, but I can't use it if it doesn't work in IE. The website I found it on does NOT have these issues, but I think I've emulated the code exactly.

If anyone can help, that would be awesome. The original site is mentioned in the script.

<script type="text/javascript" src=""></script>

<style>

/*
 *
 * jQuery Bracket
 *
 *
 *
 * Copyright (c) 2011-2012, Teijo Laine,
 *
 * http://aropupu.fi/bracket/
 *
 *
 *
 * Licenced under the MIT licence
 *
 */
div.jQBracket {
  font-family: "Arial";
  font-size: 14px;
  float: left;
  clear: both;
  position: relative;
  background-color: #ffffff;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#ffffff));
  background: -moz-linear-gradient(-90deg, #ffffff, #ffffff); }
  div.jQBracket .tools {
    position: absolute;
    top: 0px;
    color: white; }
  div.jQBracket .tools span {
    cursor: pointer;
    margin: 5px;
    display: block;
    text-align: center;
    width: 18px;
    height: 18px;
    background-color: #666666; }
  div.jQBracket .tools span:hover {
    background-color: #999999; }
  div.jQBracket .finals {
    float: right;
    right: 0px;
    clear: right;
    position: relative; }
  div.jQBracket .bracket {
    float: right;
    height: 400px;
    clear: left; }
  div.jQBracket .loserBracket {
    float: right;
    height: 200px;
    clear: left;
    position: relative; }
  div.jQBracket .round {
    position: relative;
    width: 100px;
    margin-right: 40px;
    float: left; }
  div.jQBracket .match {
    position: relative;
    float: left;
    display: block;
    width: 100%; }
  div.jQBracket .team {
    position: relative;
    z-index: 1;
    float: left;
    background-color: #666666;
    color: white;
    width: 100px;
    height: 16px;
    border-radius: 5px;
    margin: 1px 0px;
    cursor: default;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); }
    div.jQBracket .team b {
      font-weight: normal;
      padding-left: 3px;
      cursor: pointer;
      height: inherit;
      position: absolute;
      width: 70px; }
      div.jQBracket .team b[disabled] {
        cursor: default; }
      div.jQBracket .team b input {
        font-size: 10px;
        padding: 0px;
        width: 60px;
        height: 16px;
        position: absolute; }
    div.jQBracket .team span {
      font-weight: bold;
      float: right;
      cursor: pointer;
      padding: 0px;
      padding-right: 5px;
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 0px 3px 3px 0px;
      text-align: right;
      width: 20px; }
      div.jQBracket .team span[disabled] {
        color: #999999;
        cursor: default; }
      div.jQBracket .team span input {
        font-size: 10px;
        padding: 0px;
        width: inherit;
        height: 16px; }
    div.jQBracket .team b input.error,
    div.jQBracket .team span input.error {
      background-color: #ffcccc; }
    div.jQBracket .team.np {
      background-color: #666666;
      color: #eeeeee; }
    div.jQBracket .team.na {
      background-color: #999999;
      color: #cccccc; }
    div.jQBracket .team.win {
      color: #eeeeee; }
    div.jQBracket .team.win span {
      color: #006600; }
    div.jQBracket .team.lose span {
      color: #990000; }
    div.jQBracket .team.lose {
      background-color: #666666;
      color: #333333; }
    div.jQBracket .team.tie span {
      color: blue; }
    div.jQBracket .team.highlight {
      background-color: #33cc00;
      color: black; }
    div.jQBracket .team.highlightWinner {
      background-color: #ddaa00;
      color: black; }
    div.jQBracket .team.highlightLoser {
      background-color: #cccccc;
      color: black; }
  div.jQBracket .teamContainer {
    position: relative;
    float: left;
    display: block; }
  div.jQBracket .connector {
    border: 2px solid #666666;
    border-left: none;
    position: absolute;
    display: block;
    z-index: 1; }
    div.jQBracket .connector div.connector {
      border: none;
      border-bottom: 2px solid #666666;
      height: 0px;
      position: absolute;
      display: block; }
    div.jQBracket .connector.highlight,
    div.jQBracket .connector div.connector.highlight {
      border-color: #00cc00; }
    div.jQBracket .connector.highlightWinner,
    div.jQBracket .connector div.connector.highlightWinner {
      border-color: #ddaa00; }
    div.jQBracket .connector.highlightLoser,
    div.jQBracket .connector div.connector.highlightLoser {
      border-color: #cccccc; }
  div.jQBracket .np .connector,
  div.jQBracket .np .connector div.connector {
    border-color: #222222; }
  div.jQBracket .bubble {
    display: block;
    width: 30px;
    right: -35px;
    position: absolute;
    text-align: center;
    font-size: 11px;
    height: 16px; }
    div.jQBracket .bubble.third {
      background-color: #996633;
      color: #331100; }
    div.jQBracket .bubble.fourth {
      background-color: #667788;
      color: #ccccdd; }
    div.jQBracket .bubble:after {
      content: "";
      display: block;
      position: absolute;
      top: 3px;
      width: 0;
      height: 0;
      border-top: 5px solid transparent;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 5px solid transparent; }
    div.jQBracket .bubble:after {
      left: -5px;
      border-left: 0; }
    div.jQBracket .bubble.third:after {
      border-right: 6px solid #996633; }
    div.jQBracket .bubble.fourth:after {
      border-right: 6px solid #667788; }
  div.jQBracket .highlightWinner .bubble {
    background-color: #ddaa00;
    color: #996600; }
    div.jQBracket .highlightWinner .bubble:after {
      border-right-color: #ddaa00; }
  div.jQBracket .highlightLoser .bubble {
    background-color: #cccccc;
    color: #333333; }
    div.jQBracket .highlightLoser .bubble:after {
      border-right-color: #cccccc; }

</style>

<script type="text/javascript" src=""></script>

<script type="text/javascript">
$(function() {
    var demos = ['minimal', 'minimal2', 'customHandlers', 'autoComplete', 'doubleElimination', 'big']
    $.each(demos, function(i, d){
      var demo = $('div#'+d)
      $('<div class="demo"></div>').appendTo(demo)
      var pre = $('').appendTo(demo)
      var script = demo.find('script')
      pre.text(script.html())
    })
  })
</script>






<center>
<table height="600"><tr><td valign="top"><b>Boys Bracket</b><br>
<div id="minimal">
  <script type="text/javascript">
  var minimalData = {
      teams : [
        ["Team 1", "Team 8"], /* first matchup */
        ["Team 4", "Team 5"],  /* second matchup */
        ["Team 2", "Team 7"], /* third matchup */
        ["Team 3", "Team 6"]  /* fourth matchup */
      ],
      results : [
        [[10,2], [3,4], [3,4], [10,2]],      /* first round */
        [[66,6], [22,31]],        /* second round */
        [[1,2], [39,34]]      /* third round */
      ]
    }

  $(function() {
      $('#minimal .demo').bracket({
        init: minimalData /* data to initialize the bracket with */ })
    })
  </script>
</div>

<//td></tr>


<tr><td valign="top"><b>Girls Bracket</b><br>
<div id="minimal2">
  <script type="text/javascript">
  var minimalData = {
      teams : [
        ["Team 1", "Team 8"], /* first matchup */
        ["Team 4", "Team 5"],  /* second matchup */
        ["Team 2", "Team 7"], /* third matchup */
        ["Team 3", "Team 6"]  /* fourth matchup */
      ],
      results : [
        [[10,2], [3,4], [3,4], [10,2]],      /* first round */
        [[66,6], [22,31]],        /* second round */
        [[1,2], [39,34]]      /* third round */
      ]
    }

  $(function() {
      $('#minimal2 .demo').bracket({
        init: minimalData /* data to initialize the bracket with */ })
    })
  </script>
</div>

</td></tr></table></center>

javascript:jquery web-design

2 Contributors
5 Replies
327 Views
11 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by jonsan32

Dani AI

Generated 9 Months Ago

Brief diagnostic summary and practical fixes tied to the thread: the most likely causes are (a) the page running in IE quirks/compatibility mode, (b) differences between a Chrome-based “IE” emulator and real Internet Explorer, or (c) subtle float/hasLayout interactions that older IEs handle differently. is using a Chrome extension to emulate IE (Post #3) while tested in a real IE9 (Post #2) and saw no problem — that mismatch strongly suggests the emulator is the unreliable piece, not necessarily the bracket plugin.

Quick checklist to narrow it down

Ensure a standards DOCTYPE and an X-UA-Compatible header so IE uses the right engine. Add this at the top of the HEAD:
```
<!DOCTYPE html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
```
Open Internet Explorer and press F12. Confirm Document Mode/Browser Mode are the expected values (not "Quirks" or an older IE7/8 mode).
Disable Compatibility View and any intranet/site-specific forced modes.

Small CSS changes that often fix IE float/position oddities

/* trigger hasLayout in old IE (fixes many float/stacking bugs) */
.jQBracket, .jQBracket .round, .jQBracket .team { zoom: 1; }

/* alternative: anchor finals to the container instead of double-floating */
.jQBracket { position: relative; }
.jQBracket .finals { position: absolute; right: 0; top: 0; float: none; }

Use the devtools to toggle those rules live. If switching .finals from float:right to position:absolute fixes the offset, keep the absolute approach or give the container a fixed width so floats don’t compete.

Practical testing workflow

Test in an actual IE install (or a reputable cross-browser testing service), not only in an emulator.
Reduce to a minimal HTML/CSS case (strip the plugin) to see whether the problem is layout or script-related.
If the minimal case works in real IE but fails in the emulator, treat the emulator as unreliable and proceed with fixes verified in real IE.

All 5 Replies

JorgeM 958 Problem Solver

13 Years Ago

I tried your code using IE9 and Chrome 24 and it appears to work and display the same in both browsers.

What versions of IE have you tried?

Capture5

Edited 13 Years Ago by JorgeM

JorgeM 958 Problem Solver

13 Years Ago

You can also use some free online sites to see how different browsers handle your site.

Adobe labs, also browsershots.org.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

jonsan32 12 Junior Poster in Training · Answer 1 · 2013-02-15T16:13:10+00:00

I use a chrome extension for IE. It's the worst thing ever, so I use it as my baseline for everything so that my stuff is viewable to absolutely everyone. Do you think that's a good strategy, or should I just stick to checking IE's capability based on its most updated incarnations?

jonsan32 12 Junior Poster in Training · Answer 2 · 2013-02-15T16:16:03+00:00

PS. Again, the IE extension showed everything perfect with the original guy's site.

jonsan32 12 Junior Poster in Training · Answer 3 · 2013-02-15T17:10:06+00:00

jonsan32 12 Junior Poster in Training

13 Years Ago

Thank you for those links.

Alignment in Internet Explorer. OMG!

Dani AI

Recommended Answers Collapse Answers

All 5 Replies

Recommended Answers