CODEWITHSUNDEEP
javascripthtmlcssgoogle-chromefirefox
Kevin Ko
Kevin Ko

Reputation: 31

Slight CSS Alignment issues in Chrome

While I am new to stack oveflow, it has always been a great source for answers for me, and I've largely been successful in my work. I've built quite a lot of HTML 5 banner ads using GSAP (Greensock Animation Platform) in my time, but now I am stumped with this ever so slight CSS alignment issue that is driving me nuts and I would like to understand why it is happening on Chrome, but not on Firefox.

I have screenshots to better illustrate the alignment issues:

https://dl.dropboxusercontent.com/u/38891777/Outbox/Frame1.jpg https://dl.dropboxusercontent.com/u/38891777/Outbox/Frame2.jpg

if (!window.console) {
  window.console = {};
}
if (!console.log) {
  console.log = function() {};
}
var clickArea = document.getElementById("clickArea");
try {
  clickArea.href = clickTAG;
} catch (e) {
  console.log("Tried to assign 'clickTAG', but failed, continuing with animation");
}
//Defining General Variables
var _transTime = 0.5; //Global transition time
var _delayTime = 3;
window.onload = function() {
  //ClickTag Functions
  container.onclick = function(e) {
    console.log("Mouse Click(" + this.id + ")");
    EB.clickthrough();
  };
  container.onmouseover = function(e) {
    console.log("Mouse Over(" + this.id + ")");
    TweenLite.to(CTA, 0.5, {
      className: "CTA_Button_On",
      overwrite: 0
    });
    TweenLite.to(CTA_Text, 0.5, {
      className: "CTA_Text_On Absolute-Center",
      overwrite: 0
    });
  };
  container.onmouseout = function(e) {
    console.log("Mouse Out(" + this.id + ")");
    TweenLite.to(CTA, 0.5, {
      className: "CTA_Button_Off",
      overwrite: 0
    });
    TweenLite.to(CTA_Text, 0.5, {
      className: "CTA_Text_Off Absolute-Center",
      overwrite: 0
    });
  };
  //Animation via GSAP
  execFrame1();

  function execFrame1() {
    console.log("execFrame1");
    TweenLite.set([Model_Year, Frame1], {
      visibility: "visible"
    });
    TweenLite.from(Jelly1_LG, _transTime * 2, {
      left: "+=100%",
      delay: 0.50
    });
    TweenLite.from(Model_Year, _transTime * 2, {
      left: "+=100%",
      delay: 0.75
    });
    TweenLite.from(Model1, _transTime * 2, {
      left: "+=100%",
      delay: 1.0
    });
    TweenLite.from(Copy1_1, _transTime, {
      scale: 10,
      opacity: 0,
      delay: 2.0,
      ease: Quad.easeIn
    });
    TweenLite.from(Copy1_2, _transTime, {
      scale: 10,
      opacity: 0,
      delay: 2.25,
      ease: Quad.easeIn
    });
    TweenLite.from(Copy1_3, _transTime, {
      scale: 10,
      opacity: 0,
      delay: 2.5,
      ease: Quad.easeIn
    });
    TweenLite.to(Frame1, _transTime, {
      top: "+=50px",
      opacity: 0,
      delay: 5.25,
      ease: Quad.easeIn,
      onComplete: execFrame2
    });
  }

  function execFrame2() {
    console.log("execFrame2");
    TweenLite.set([Frame2], {
      visibility: "visible"
    });
    TweenLite.from(Jelly2_LG, _transTime * 2, {
      left: "+=100%",
      delay: 0.0
    });
    TweenLite.from(Model2, _transTime * 2, {
      left: "+=100%",
      delay: 0.5
    });
    TweenLite.from(Copy2_1, _transTime, {
      scale: 10,
      opacity: 0,
      delay: 1.5,
      ease: Quad.easeIn
    });
    TweenLite.from(Copy2_2, _transTime, {
      scale: 10,
      opacity: 0,
      delay: 1.75,
      ease: Quad.easeIn
    });
    TweenLite.from(Copy2_3, _transTime, {
      scale: 10,
      opacity: 0,
      delay: 2.0,
      ease: Quad.easeIn
    });
    TweenLite.to(Frame2, _transTime, {
      top: "+=50px",
      opacity: 0,
      delay: 5,
      ease: Quad.easeIn,
      onComplete: execFrame3
    });
  }

  function execFrame3() {
    console.log("execFrame3");
    TweenLite.set([Frame3], {
      visibility: "visible"
    });
    TweenLite.from(Jelly3_LG, _transTime * 2, {
      left: "+=100%",
      delay: 0.0
    });
    TweenLite.to(Model_Year, _transTime * 2, {
      left: "-=20px",
      delay: 0.0
    });
    TweenLite.from(Model3, _transTime * 2, {
      left: "+=100%",
      delay: 0.5
    });
    TweenLite.from(Copy3_1, _transTime, {
      scale: 10,
      opacity: 0,
      delay: 1.5,
      ease: Quad.easeIn
    });
    TweenLite.from(Copy3_2, _transTime, {
      scale: 10,
      opacity: 0,
      delay: 1.75,
      ease: Quad.easeIn
    });
    TweenLite.to([Model_Year, Frame3], _transTime, {
      top: "+=50px",
      opacity: 0,
      delay: 4.75,
      ease: Quad.easeIn,
      onComplete: execFrame4
    });
  }

  function execFrame4() {
      console.log("execFrame4");
      TweenLite.set([CTA, Frame4], {
        visibility: "visible"
      });
      TweenLite.to(Brand_Logo, _transTime * 2, {
        scale: 1,
        ease: Quad.easeInOut,
        delay: 0.0
      });
      TweenLite.from(Header2, _transTime * 2, {
        left: "+=100%",
        ease: Quad.easeOut,
        delay: 0.25
      });
      TweenLite.from(Jelly1_SM, _transTime, {
        left: "+=100%",
        ease: Quad.easeOut,
        delay: 1.25
      });
      TweenLite.from(Copy4_1, _transTime, {
        scale: 10,
        opacity: 0,
        delay: 1.25,
        ease: Quad.easeIn
      });
      TweenLite.from(Jelly2_SM, _transTime, {
        left: "+=100%",
        ease: Quad.easeOut,
        delay: 1.75
      });
      TweenLite.from(Copy4_2, _transTime, {
        scale: 10,
        opacity: 0,
        delay: 1.75,
        ease: Quad.easeIn
      });
      TweenLite.from(Jelly3_SM, _transTime, {
        left: "+=100%",
        ease: Quad.easeOut,
        delay: 2.25
      });
      TweenLite.from(Copy4_3, _transTime, {
        scale: 10,
        opacity: 0,
        delay: 2.25,
        ease: Quad.easeIn
      });
      TweenLite.from(CTA, _transTime, {
        top: "+=50px",
        delay: 2.5,
        ease: Quad.easeOut
      });
    }
    //End Animation via GSAP
}
@charset "UTF-8";

/* CSS Document */

body {
  margin: 0;
}
#container {
  /*Outter most container that could be considered the "Stage"*/
  position: absolute;
  overflow: hidden;
  height: 600px;
  width: 160px;
  cursor: pointer;
}
#content {
  /*Foreground Container for Content*/
  position: absolute;
  height: 100%;
  width: 100%;
  margin: 1px;
}
#Border {
  position: absolute;
  top: -1px;
  left: -1px;
  height: 598px;
  width: 158px;
  border: solid #000000 1px;
}
#Frame1,
#Frame2,
#Frame3,
#Frame4,
#Frame5 {
  position: absolute;
  height: 100%;
  width: 100%;
  visibility: hidden;
}
/*Utilities*/

.Absolute-Center {
  /*Centers this element within a div*/
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  /* IE 9 */
  -webkit-transform: translate(-50%, -50%);
  /* Chrome, Safari, Opera */
  transform: translate(-50%, -50%);
}
sup,
sub {
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
  font-size: 60%;
}
sub {
  top: 0.5em;
}
/*CTA Elements*/

#CTA {
  position: absolute;
  top: 568px;
  left: 3px;
  height: 26px;
  width: 151px;
  cursor: pointer;
  visibility: hidden;
}
#CTA_Text {
  width: 100%;
  cursor: pointer;
  font-family: "Arial Black", Gadget, sans-serif;
  font-size: 11px;
  text-align: center;
}
.CTA_Button_Off {
  background-color: #e79c0b;
  border: 1px solid #ffffff;
}
.CTA_Button_On {
  background-color: #FFFFFF;
  border: 1px solid #e79c0b;
}
.CTA_Text_Off {
  color: #FFFFFF;
}
.CTA_Text_On {
  color: #E79C0B;
}
/*Non-Copy Elements*/

#BG {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  background-image: url(../images/BG.jpg);
  background-repeat: no-repeat;
}
#Brand_Logo {
  position: absolute;
  left: 33px;
  top: 14px;
  width: 94px;
  height: 63px;
  background-image: url(../images/Brand_Logo.jpg);
  background-repeat: no-repeat;
}
#Header2 {
  position: absolute;
  top: 101px;
  font-size: 23px;
  line-height: 23px;
  width: 100%;
  text-align: center;
}
#Model_Year {
  position: absolute;
  top: 104px;
  visibility: hidden;
  font-size: 17px;
  text-align: center;
  width: 100%;
}
#Model1,
#Model2,
#Model3 {
  position: absolute;
  top: 123px;
  font-size: 23px;
  text-align: center;
  line-height: 23px;
  width: 100%;
}
.Jelly1 {
  position: absolute;
  background-repeat: no-repeat;
  width: 155px;
  height: 73px;
  background-image: url(../images/Jelly1.png);
}
.Jelly2 {
  position: absolute;
  background-repeat: no-repeat;
  width: 149px;
  height: 73px;
  background-image: url(../images/Jelly2.png);
}
.Jelly3 {
  position: absolute;
  background-repeat: no-repeat;
  width: 156px;
  height: 83px;
  background-image: url(../images/Jelly3.png);
}
#Jelly1_LG {
  left: 7px;
  top: 244px;
}
#Jelly2_LG {
  left: 6px;
  top: 241px;
}
#Jelly3_LG {
  left: 6px;
  top: 235px;
}
#Jelly1_SM,
#Jelly2_SM,
#Jelly3_SM {
  -ms-transform-origin: 0% 0%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
#Jelly1_SM {
  left: 7px;
  top: 242px;
}
#Jelly2_SM {
  left: 5px;
  top: 345px;
}
#Jelly3_SM {
  left: 5px;
  top: 448px;
}
/* Copy Elements */

#Copy1,
#Copy2,
#Copy3 {
  position: absolute;
  line-height: 20px;
  top: 390px;
  width: 100%;
  text-align: center;
}
#Copy1_1 {
  font-size: 14px;
}
#Copy1_2 {
  font-size: 17px;
}
#Copy1_3 {
  font-size: 17px;
}
#Copy2_1 {
  font-size: 14px;
}
#Copy2_2 {
  font-size: 17px;
}
#Copy2_3 {
  font-size: 17px;
}
#Copy3_1 {
  font-size: 14px;
}
#Copy3_2 {
  font-size: 17px;
}
#Copy4_1,
#Copy4_2,
#Copy4_3 {
  position: absolute;
  top: 190px;
  font-size: 10px;
}
#Copy4_1 {
  top: 414px;
  width: 100%;
  text-align: center;
}
#Copy4_2 {
  top: 314px;
  width: 100%;
  text-align: center;
}
#Copy4_3 {
  top: 528px;
  width: 100%;
  text-align: center;
}
.light-text {
  font-family: Arial, Helvetica, sans-serif;
  display: inline-block;
}
.heavy-text {
  font-family: "Arial Black", Gadget, sans-serif;
  display: inline-block;
}
<!doctype html>
<html>

<head>
  <script type="text/javascript" src="https://secure-ds.serving-sys.com/BurstingScript/EBLoader.js"></script>
  <meta charset="UTF-8">
  <title>All Out Clear Out - Closer</title>
  <link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <a id="clickArea" target="_blank">
    <div id="container">
      <!--Global or Static Elements (BG, Logos, etc)-->
      <div id="BG"></div>
      <div id="Brand_Logo"></div>
      <div id="Model_Year" class="light-text">2015</div>
      <div id="content">
        <!--Frame Contents-->
        <div id="Frame1">
          <div id="Model1" class="heavy-text">RAM 1500</div>
          <div id="Jelly1_LG" class="Jelly1"></div>
          <div id="Copy1">
            <div id="Copy1_1" class="light-text">CANADA’S</div>
            <br/>
            <div id="Copy1_2" class="heavy-text">MOST FUEL-
              <br/>EFFICIENT</div>
            <br/>
            <div id="Copy1_3" class="heavy-text">PICKUP
              <br/>EVER</div>
          </div>
        </div>
        <div id="Frame2">
          <div id="Model2" class="heavy-text">RAM
            <br/>HEAVY
            <br/>DUTY</div>
          <div id="Jelly2_LG" class="Jelly2"></div>
          <div id="Copy2">
            <div id="Copy2_1" class="light-text">CANADA’S</div>
            <br/>
            <div id="Copy2_2" class="heavy-text">BEST-SELLING
              <br/>LINE OF</div>
            <br/>
            <div id="Copy2_3" class="heavy-text">DIESEL
              <br/>PICKUPS</div>
          </div>
        </div>
        <div id="Frame3">
          <div id="Model3" class="heavy-text"><span style="position: absolute; top: -22px; left: 82px; font-size: 17px;" class="light-text">RAM</span> ProMaster City<sup>™</sup>
          </div>
          <div id="Jelly3_LG" class="Jelly3"></div>
          <div id="Copy3">
            <div id="Copy3_1" class="light-text">LOADED WITH</div>
            <br/>
            <div id="Copy3_2" class="heavy-text">BEST-IN-CLASS FEATURES</div>
          </div>
        </div>
        <div id="Frame4">
          <div id="Header2" class="heavy-text">EXCEED
            <br/>EVERY
            <br/>JOB
          </div>
          <div id="Jelly1_SM" class="Jelly1"></div>
          <div id="Jelly2_SM" class="Jelly2"></div>
          <div id="Jelly3_SM" class="Jelly3"></div>
          <div id="Copy4_1" class="heavy-text">1500</div>
          <div id="Copy4_2" class="heavy-text">Heavy Duty</div>
          <div id="Copy4_3" class="heavy-text">Promaster City<sup>™</sup>
          </div>
        </div>
        <!--CTA and Border-->
        <div id="CTA" class="CTA_Button_Off">
          <div id="CTA_Text" class="CTA_Text_Off Absolute-Center">BUILD &amp; PRICE ></div>
        </div>
        <div id="Border"></div>
        <!-- End Contents-->
      </div>
      <!-- End Container-->
    </div>
  </a>
  <!--CDN links for the latest TweenLite, CSSPlugin, and EasePack-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/CSSPlugin.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/easing/EasePack.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenLite.min.js"></script>
  <!--relative link to main.js-->
  <script src="js/main.js"></script>
</body>

</html>

Upvotes: 2

Views: 284

Answers (2)

Invader
Invader

Reputation: 105

If you consider four spaces instead of tabs as bug/workaround, then why not to think about rendered page without tabs (assume they were not replaced) as malfunction?

Using spaces only is just another way of code formatting and should not be, in my opinion, confused with tabulation or, like you said, "tab simulation". Word 'indentation' is more accurate I think.

However, replacing tab with spaces is not a bug.

Upvotes: 0

Kevin Ko
Kevin Ko

Reputation: 31

Ok I found out the issue and resolved it.

The reason for this was because I use Sublime Text to edit my HTML files, and I also use a plugin called HTML-CSS-JS Prettify to "clean" up my code. In this cleaning process it auto formats my code by adding carriage returns to <br/> tags and indenting tags which is great.

Unfortunately this plugin has a flaw with it's indentation instead of doing "tab" a bunch of times to indent my code, it simulates this by creating four "space" characters per "tab". These spaces render only as one on HTML, but none the less messed up my alignment.

If anyone else uses this program and this plugin (which are great btw) I got around this by going into HTML-CSS-JS Prettify plugin's preferences, navigated to "unformatted" I added, "br", "BR" to the end of the list.

This will basically ignore trying to auto format any <br/> or <BR> tags with those silly ( ) hack indentation.

Upvotes: 1

Related Questions