Skip navigation
Kim Knight
Currently Being Moderated

Site not viewing properly on iPad

Feb 21, 2013 8:15 AM

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

 
Replies
  • Currently Being Moderated
    Feb 21, 2013 9:14 AM   in reply to Kim Knight

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 21, 2013 1:45 PM   in reply to Kim Knight

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 22, 2013 7:17 AM   in reply to Kim Knight

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 22, 2013 8:18 AM   in reply to Kim Knight

    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.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points