8 Replies Latest reply: Feb 22, 2013 11:44 AM by Kim Knight RSS

    Site not viewing properly on iPad

    Kim Knight Community Member

      Hi - i'm hoping someone can help me. The site i'm working on centers properly on everything i've tested except on my ipad. The beige background you can only see on the top and left hand side, but not on the right side. Also, there appears to be some fragmenting (?) going on where the background shows through in very fine lines around my tables. I'm wondering if there is any way of fixing this? Site link is www.theoldsaltboxco.com

        • 1. Re: Site not viewing properly on iPad
          Jon Fritz II MVP

          I don't have access to an ipad right now to verify the below, so this "may" not fix all of the issues (but it's a good place to start)...

           

          You have some errors in your html. Mainly the use of deprecated attributes like marginheight, topmargin and background. You should be using css for these instead.

           

          Code errors are the number one cause of display issues between different browsers. Run your site through this validator and clear out the errors...

           

          http://validator.w3.org/

           

          You are missing your Doctype Declaration (DTD). Go to Modify > Page Properties and select Title/Encoding. Given the code you currently have, I would choose HTML 4.01 Transitional or XHTML 1.0 Transitional.

           

          For the margin issues, remove all 4 of the attributes from the body tag and add this to your css...

           

          body {

               margin:0;

          }

           

          For the background image issue, remove the background tag and add this to your css...

           

          #textarea {

               background-image:url(images/text-area.jpg);

          }

           

          Then in the <td> for that text area, add this to the html in place of the background="images/text-area.jpg"...

           

          id="textarea"

           

          You can also get rid of all the border="0" on your linked images and add this to your css...

           

          a img {

               border:none;

          }

           

          Since you are using tables for your layout, you'll need to collapse the borders in your css as well (this "may" be why there is that "fracturing" effect) Mobile browsers were invented after most designers stopped using tables for layout, so there are some items they were never really programmed to handle without explicit css instructions...

           

          table {

               border-collapse:collapse;

          }

           

          If is still isn't working right after the above fixes, let us know and we can take a closer look.

          • 2. Re: Site not viewing properly on iPad
            Kim Knight Community Member

            Thanks Jon - that was very helpful. I have been able to fix the margin issue which is great and it has also fixed SOME of the fragment issues on the site. However, now I have a line beside my text (white line to the right of the text box) on the index page, as well as a white line under my menu bars appearing. I've run the file in the validator, and everything looks okay now (thank you for this link too). Why would these lines be appearing? Thanks!

            • 3. Re: Site not viewing properly on iPad
              Jon Fritz II MVP

              I'm sorry I can't see the actual issues you are having in ipad to tell you exactly what needs to be done.

               

              Part of that new problem is likely that some browsers will collapse empty table cells.

               

              You can work around that issue by making a small completely transparent .gif.

               

              Then place the gif into the empty table cells and resize it to force the cell open to whatever amount you need.

               

              Before you start adding code to fix the quirks of tables though, I would recommend abandoning tables as a layout tool all together. You will constantly need to add objects and code to get them to behave themselves cross-browser. I suggest moving to a css <div> based layout as it will act much more predictably across a  multitude of browsers.

               

              Run the tutorials here for css: http://www.w3schools.com/css for the basics. Pay particular attention to the section on "floats" and "aligning elements". Ignore anything they say about absolute positioning, it's a trap, it will sound very interesting and usable, but in the end will cause more headaches than tables. You will definitely not need it.

              • 4. Re: Site not viewing properly on iPad
                Kim Knight Community Member

                Thanks Jon - I've taken your advice and I've used div's instead of tables for the home page. One more question for you, now that i've used divs instead of tables, how would i go about getting it to align center on the page? Right now it's in a fixed position...

                • 5. Re: Site not viewing properly on iPad
                  Jon Fritz II MVP

                  Ah, that's pretty easy, as long as you didn't get caught in the trap of APDivs...

                   

                  Wrap all of your content (within the <body> tags, but not including the <body> tags) in...

                   

                  <div id="wrapper"> all current content here </div>

                   

                  In the css, do this...

                   

                  #wrapper {

                       width:##px;

                       margin:auto;

                  }

                   

                  For the ## use the total width of your elements in pixels.

                  • 6. Re: Site not viewing properly on iPad
                    Kim Knight Community Member

                    oh dear. i think i got trapped in the APDivs...

                    • 7. Re: Site not viewing properly on iPad
                      Jon Fritz II MVP

                      Yup, you did.

                       

                      You can fix it one of 2 ways.

                       

                      The best way would be to redo the layout again, without using any form of positioning, but rather, using floats and placing everything within a centered <div id="wrapper"> using post #5 above.

                       

                      The "other" way would be to create a wrapper div, as described above, with an addition of...

                       

                      position:relative;

                       

                      You would then change the values of the left:##px of all your APDivs to be based on zero being the left edge of the wrapper <div>, rather than zero being the left edge of the browser window.

                       

                      It would be easiest to make sure everything is up against the left of your design view before adding the wrapper around it all.

                      • 8. Re: Site not viewing properly on iPad
                        Kim Knight Community Member

                        Thank you SO much for your help. I have fixed it.