?
Solved

Help with Minor Website Display Issue on iOS Browser:

Posted on 2014-08-06
16
Medium Priority
?
227 Views
Last Modified: 2014-08-11
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.
0
Comment
Question by:homerslmpson
  • 8
  • 8
16 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40243674
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
 
LVL 1

Author Comment

by:homerslmpson
ID: 40243719
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
 
LVL 58

Expert Comment

by:Gary
ID: 40243730
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 1

Author Comment

by:homerslmpson
ID: 40243833
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
 
LVL 58

Expert Comment

by:Gary
ID: 40244781
Can you post a screenshot of the problem.
0
 
LVL 1

Author Comment

by:homerslmpson
ID: 40245715
You can see what I'm referring to in the attached image.
Screenshot
0
 
LVL 58

Expert Comment

by:Gary
ID: 40246040
Wrap each block of 2 properties in a div
0
 
LVL 1

Author Comment

by:homerslmpson
ID: 40246063
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
 
LVL 58

Expert Comment

by:Gary
ID: 40246088
Remove the div around each image.
0
 
LVL 1

Author Comment

by:homerslmpson
ID: 40246102
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
 
LVL 58

Expert Comment

by:Gary
ID: 40246120
Make sure the page isn't cached
0
 
LVL 1

Author Comment

by:homerslmpson
ID: 40246162
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
 
LVL 58

Expert Comment

by:Gary
ID: 40246251
It must be the floats pushing out of line, but I'm not seeing where
Can you change them to display:inline-block
0
 
LVL 1

Author Comment

by:homerslmpson
ID: 40252910
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
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 40253128
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
 
LVL 1

Author Closing Comment

by:homerslmpson
ID: 40253357
Thanks for the help! That did it!!
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question