Link to home
Start Free TrialLog in
Avatar of homerslmpson
homerslmpsonFlag for United States of America

asked on

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.
Avatar of Gary
Gary
Flag of Ireland image

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
Avatar of homerslmpson

ASKER

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.
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;
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.
User generated image
Can you post a screenshot of the problem.
You can see what I'm referring to in the attached image.
User generated image
Wrap each block of 2 properties in a div
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.
Remove the div around each image.
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.
Make sure the page isn't cached
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.
It must be the floats pushing out of line, but I'm not seeing where
Can you change them to display:inline-block
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?
ASKER CERTIFIED SOLUTION
Avatar of Gary
Gary
Flag of Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanks for the help! That did it!!