5 Replies Latest reply on Oct 23, 2012 11:57 AM by heathrowe

    Edge Runtime Nudging My Layout!

    HyperNurb

      Hi guys,

       

      I really want to love Edge, but I'm running into a headache that is making me weary. I have an HTML file created externally that I would like to work with inside Edge. It features nested divs and absolute positioning. When I import it into Edge everything seems fine. However, the runtime code injected into the HTML is nudging my divs out of alignment! This is only seen in Safari and Chrome. It still looks proper in Firefox. Any help, please? help.jpg

       

      Here is my HTML:

      <div id="mainContainer"></div>

             

                  <ul id="tabContainer">

                  <li id="tab1" onclick="play1()" onmouseover="over1()">Office Visit Payments</li>

                  <li id="tab2" onclick="play2()">       

                  Mammograms        </li>

                  <li id="tab3" onclick="play3()">Covered Numer Of <br /> Office Visits</li>

                  </ul>           

      </div>

       

      and the CSS:

       

      #bgContainer {

          background:url('../img/main_bg.png') no-repeat;

          margin:0px auto;

          width:800px;

          height:1100px;

      }

       

      #mainContainer {

          background:url('../img/container.png') no-repeat;

          position: absolute;

          top: 343px;

          margin-left: 68px;

          width:670px;

          height:407px;

      }

       

      #tabContainer {

          font-size: 15px;

          font-weight: bold;

          color: #000;

          text-transform: uppercase;

          margin-left: 32px;

          margin-top: 24px;

          width:670px;

          height:407px;

          list-style: none;

      }

       

      #tabContainer li {

          display: inline;

          padding: 20px 22px 80px 22px;

          float: left;

          width: auto;

          margin-right: 4px;

          background-color: #ddd;

          border-radius: 8px;

          text-align: center;

          cursor:pointer;

      }

        • 1. Re: Edge Runtime Nudging My Layout!
          heathrowe Most Valuable Participant

          You have an extra closing div tag </div> Remove the first one, noted in italics below.

           

          <div id="mainContainer"></div>

           

          <ul id="tabContainer">

          <li id="tab1" onclick="play1()" onmouseover="over1()">Office Visit Payments</li>

          <li id="tab2" onclick="play2()">

          Mammograms </li>

          <li id="tab3" onclick="play3()">Covered Numer Of <br /> Office Visits</li>

          </ul>

          </div>

           

          Darrell

          • 2. Re: Edge Runtime Nudging My Layout!
            HyperNurb Level 1

            Hi Darrell,

             

            Thanks for your reply! That mainContainer and the immediate closing DIV is just for the grey rectangle area set as a background image in CSS. I'll be loading videos ontop of it. I did try removing the DIV just to see and it broke everything. Still not sure why the nudge is happening. If I remove just the Adobe Edge Runtime that is injected into the HTML, it goes away...

             

            Here is the more recent code:

             

            <div id="bgContainer">

               

                    <header></header>

               

                    <h1>

                    Name, <br />

                    Score more clients with <br />

                    these game-changing plays!

                    </h1>

               

                    <div id="mainContainer">

                   

                        <video id="video1" width="626">

                        <source src="img/vid1.mp4" type="video/mp4">

                        <source src="img/vid1.ogv" type="video/ogg">

                        Your browser does not support HTML5 video.

                          </video>

                         

                          <video id="video2" width="626">

                        <source src="img/vid1.mp4" type="video/mp4">

                        <source src="img/vid1.ogv" type="video/ogg">

                        Your browser does not support HTML5 video.

                          </video>

                         

                          <video id="video3" width="626">

                        <source src="img/vid1.mp4" type="video/mp4">

                        <source src="img/vid1.ogv" type="video/ogg">

                        Your browser does not support HTML5 video.

                          </video>

                   

                    </div>

                   

                        <ul id="tabContainer">

                        <li id="tab1" onclick="play1()" onmouseover="over1()">Office Visit Payments</li>

                        <li id="tab2" onclick="play2()">       

                        Mammograms        </li>

                        <li id="tab3" onclick="play3()">Covered Numer Of <br /> Office Visits</li>

                        </ul>

                   

                </div>

            • 3. Re: Edge Runtime Nudging My Layout!
              heathrowe Most Valuable Participant

              Best bet is to post a link to the .zipped contents of your project files. Its hard to decipher when you have more items invloved than the snippets posted.

               

              Darrell

              • 5. Re: Edge Runtime Nudging My Layout!
                heathrowe Most Valuable Participant

                I don't see anything immediate that would cause it, unfornately. Hopefully someone else can spot it.

                 

                 

                D