Alignment problem

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • jmcpa
    New Member
    • Sep 2006
    • 5
    #1

    Alignment problem

    I have put together a web page for a group and I am having an alignment problem.

    The page is at:

    I have a top banner divided into two parts - a top piece and a small clice at the bottom for the page name. Then I have a navigation div on the left. In IE the navigation div works fine at L: 10px T: 202px but in Firefox the div appears shifted up 5 px and to the right by 2 px.

    I tried setting a page up with the div at L: 8px T: 197px and it looks fine in Firefox but is too low and pushed to the left.

    How can I get this to work in both browsers?

    Here is the code:

    <div>
    <table border="0" cellpadding="0" cellspacing="0" width="858">
    <!-- fwtable fwsrc="TopBanne rAGAtest.png" fwbase="TopBann erAGAtestslice. gif" fwstyle="Dreamw eaver" fwdocid = "1614099162 " fwnested="0" -->
    <tr>
    <td><img src="Images/spacer.gif" width="858" height="1" border="0" alt=""></td>

    </tr>

    <tr>
    <td><img src="Images/TopBannerAGAtes tslice_r1_c1.gi f" class="noSpace" alt="" name="TopBanner AGA" width="858" height="145" border="0" usemap="#m_TopB annerAGAtestsli ce_r1_c1" ></td>

    <tr>
    <td><img name="TopBanner Home" src="Images/TopBannerAGAHom e_r2_c1.gif" width="858" height="42" border="0" alt=""></td>

    </tr>
    <map name="m_TopBann erAGAtestslice_ r1_c1">
    <area shape="rect" coords="0,0,173 ,111" href="http://www.agacgfm.org " target="_blank" alt="" >
    </map>
    </table>
    </div>
    <!-- Navigation Div -->
    <div id="Side">
    <table align=center width=0 id="free-buttons.org:scr exst0" cellpadding=0 cellspacing=0 border=0><tr>
    ...

    and the CSS for #Side:

    #Side {
    width:160px;
    position:absolu te;
    padding:0;
    border-bottom:0px solid #fff;
    top:202px;
    left:10px;
    z-index: 0;
    height: 600px;
    border: 0;
    background-color: #0900B2;
    }
    Tags: None
    • drhowarddrfine
      Recognized Expert Expert
      • Sep 2006
      • 7434
      #2
      Your link didn't show and, without the complete code, it is difficult to pinpoint the problem; especially since you use tables for layout (which you should never do).

      Browsers have their own default margin and padding settings. It is usually best to set all these to zero at the head and give each their own setting. If not, then setting something to look right in IE may not look right in other browsers, and vice-versa.

        Comment

        • jmcpa
          New Member
          • Sep 2006
          • 5
          #3
          Sorry, the page is at www.kcaga.org

            Comment

            • drhowarddrfine
              Recognized Expert Expert
              • Sep 2006
              • 7434
              #4
              First, you should not be using xhtml 1.1. It's being served as text/html so you will only cause yourself grief.

              Second, you have 120 html errors. Validate and fix these errors. Then come back.

              Third, Firefox is displaying what you wrote. So get your code to work correctly in Firefox. Then we can adjust for IEs quirks and bugs.

                Comment

                • jmcpa
                  New Member
                  • Sep 2006
                  • 5
                  #5
                  This was posted on the Adobe, sorry, HTML discussion board:

                  "Here's a fix that works for me. It has the added advantage of correcting that annoying shift in positioning between IE and Firefox, so it's especially great for positioning CSS menus:

                  1. Make sure that the layer that's now floating is in the same div as your background image, or that they're both within the same container. The easiest way is to create a container that holds everything within the <body></body> tags.

                  2. Make the positioning of the outer div relative, for example, <div id="container" style="position :relative">

                  3. Set the positioning of the inner div (or both inner divs) to absolute, for example,
                  <div id="menu" style="position :absolute; left: 10px; top: 150px; width: 800px; height: 30px; z-index:10">

                  Sounds counterintuitiv e, I know, but it works. Note that as soon as you change the positioning of the div from relative to absolute or vice-versa, it will jump wildly to a different part of your page, and you may not be able to move it using drag-and-drop. No worries - just change the appropriate values in code view until it's exactly where you want it."

                  I tried it and it works. The side div now displays the same in both browsers.

                  That's not to say I don't need to fix the other problems. Thanks for the comments.

                    Comment

                    • drhowarddrfine
                      Recognized Expert Expert
                      • Sep 2006
                      • 7434
                      #6
                      The problem is debugging web pages is hard enough without having to debug pages with tons of errors built in. Some little things can be dealt with or ignored but when you get into the 120 area, it's just a house of cards and not worth dealing with until it's fixed. One little move and you'll have another problem.

                        Comment

                        Previous template Next
                        Working...