Help with Minor Website Display Issue on iOS Browser:

Hopefully this is a quick fix for someone experienced in HTML.
The Safari web browser on iPhone 4 and 5S (iOS7) doesn't seem to display the lower "projects" on THIS page properly.
This was working OK up until a month or so ago.
Can't figure it out.
In the center of the page there are 3 "branch" buttons (Wayne,NJ  |  Lakewood, NJ  |  Fairless Hills, PA).
It defaults to Wayne, NJ and you'll see the issue towards the bottom.
The same thing happens on the projects listed for Lakewood, NJ.
The Fairless Hills, PA projects display properly.
These look fine on other browsers (Chrome, IE, Firefox, IE for WP8.1, etc).
It seems to only be an issue on the iPhone (possibly iPad as well).
I thought it was an overflow issue of sorts so I tried shortening the names as much as possible but it doesn't seem to help.
LVL 1
homerslmpsonAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
What is supposed to be going on here?
You have opening anchor tags with no closing tag - probably part of if if not the problem

				<div style="width:960px; display: table-cell; vertical-align:middle; text-align:center; margin-bottom:20px">	
					<a class="current" href="#" 				title="Lakewood"	id="id0" style="width:300px; height:65px; float:left">
      				<a href="active_projects-lakewood-pg1.html" title="Lakewood"	id="id1" style="width:300px; height:65px; float:left; margin-left:30px">
      				<a href="active_projects-bensalem-pg1.html" title="Bensalem"	id="id2" style="width:300px; height:65px; float:right"></a>
      			</div>

Open in new window

Also here
<div style="padding-top:15px "class="wrapper row2">

Open in new window

You should run the page through the W3C Validator
0
homerslmpsonAuthor Commented:
Thank you for pointing out the anchors. I've went ahead and corrected them.
I'm not sure what you're referring to when you say "ALSO HERE" and have that 1 line.  Is there something wrong with it?
The closing of the anchor tags didn't fix the issue I'm having in the iOS browsers though.
0
GaryCommented:
It's fixed the buttons that were not showing at all

<div style="padding-top:15px "class="wrapper row2">
Should be
<div style="padding-top:15px" class="wrapper row2">

To the projects container add
overflow:auto;
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

homerslmpsonAuthor Commented:
Was I supposed to add the overflow:auto; to the area shown in the image below on each page or in a different area?
If so, it didn't help the issue.
overflow
0
GaryCommented:
Can you post a screenshot of the problem.
0
homerslmpsonAuthor Commented:
You can see what I'm referring to in the attached image.
Screenshot
0
GaryCommented:
Wrap each block of 2 properties in a div
0
homerslmpsonAuthor Commented:
I just tried this but it didn't help.
I didn't add any actual properties to the divs.
I just placed a <div> at the beginning of the block and a </div> at the end of the block.
0
GaryCommented:
Remove the div around each image.
0
homerslmpsonAuthor Commented:
Just tried that.
No dice.
Why would it happen on the Wayne and Lakewood pages but not the Fairless Hills page?
They are nearly identical.
0
GaryCommented:
Make sure the page isn't cached
0
homerslmpsonAuthor Commented:
I went ahead and created a copy of the active projects page, changed the name and navigated to it on the iPhone to make sure it was loading a new/fresh page but it still doesn't load the way it should.
I made a copy of the initial page and changed all of the details to one character and it loads as it should.
Ex:
Location:A
Completion Date: 4
Project Type: M
Scope: S

So it looks like it has something to do with the names being too long in one area or another.  Unfortunately I can't see where the actual issue is.
I'm going to have to start with the initial page, shorten the 2nd and 3rd block and see what happens.
If it loads fine, I'll start with the initial page and shorten just the 3rd block.
At that point we will see if the issue is with the 2nd block or the 3rd block and I'll have to look at the naming to see what can be shortened.
0
GaryCommented:
It must be the floats pushing out of line, but I'm not seeing where
Can you change them to display:inline-block
0
homerslmpsonAuthor Commented:
I'm not sure where I'd be adding the "display:inline-block".
Would it be put in the div that surrounds the 2 projects or does it get put per project?
0
GaryCommented:
For the image remove float:left
For the div after the image (that one that contains the address etc) add
display: inline-block;
vertical-align: top;


and remove
margin-left: 270px;
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
homerslmpsonAuthor Commented:
Thanks for the help! That did it!!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.