homerslmpson
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.
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.
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.
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;
<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;
ASKER
Can you post a screenshot of the problem.
Wrap each block of 2 properties in a div
ASKER
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.
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.
ASKER
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.
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
ASKER
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.
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
Can you change them to display:inline-block
ASKER
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?
Would it be put in the div that surrounds the 2 projects or does it get put per project?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks for the help! That did it!!
You have opening anchor tags with no closing tag - probably part of if if not the problem
Open in new window
Also hereOpen in new window
You should run the page through the W3C Validator