Solved

Different browser behavior in the sizing of web app

Posted on 2012-03-28
23
355 Views
Last Modified: 2012-06-05
Hi,

I have a php app which in most of the desktops is cutting the right hand side, which contains some important buttons. However, it is not happening in my laptop, which is rendering the web app as it should be. I took a closer look and the fonts are bigger in the desktop.

Where should I look at to fix this problem?

Thank you.
0
Comment
Question by:DistillingExperts
  • 13
  • 6
  • 4
23 Comments
 
LVL 30

Expert Comment

by:Marco Gasi
ID: 37777690
Maybe the desktops have a lower resolution than your laptop... You have to check your css file: you could wrap your app within a div with

overflow: auto;
This way scroll bar should appear when needed to allow your user to make visible not visible parts of your application.

A more clean , but more complex way could be to rewrite your application layout using a fluid layout: setting all div width using percent values and make them floating left or right as needed. This would ensure an auto-resizing behavior of your app depending on the available space.

Hope this helps
Cheers
0
 

Author Comment

by:DistillingExperts
ID: 37777755
Thank you for your quick reply. I will do a test tomorrow and let you know.
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 37779379
When you have to write CSS for different sized viewports, one of the strategies that my colleagues use, especially useful with mobile devices, is to set all the sizes in percentages, rather than pixels or ems.  It seems to work pretty well.  You might try something like that.
0
 

Author Comment

by:DistillingExperts
ID: 37780727
I've found the problem occurs when there is a long url in the post submitted by an user (the app is a forum). If I remove the url in the computer I found the problem, the app renders correctly. Is there any technique to handle long urls?
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 37780791
Perhaps using CSS with overflow:hidden.  Another technique might be using a URL shortener service like Bit.Ly.  Your PHP script can call the Bitly API as a web service dynamically, getting back a short URL.
0
 

Author Comment

by:DistillingExperts
ID: 37781022
I tried to apply overflow:hidden and overflow:auto and didn't have any effect. Any reason why? FYI, I changed the color in the same css and it took the change.
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 37781025
Do you have Firefox and Firebug?  With those tools you can see whether the CSS cascade applied what you thought your CSS was intended to do.

If you want to post the code and data for a simple test case demonstrating the issue, I will be glad to look at it.
0
 

Author Comment

by:DistillingExperts
ID: 37781040
Like I said, the color in the same css works. I am already using Chrome to see the behavior of the code (like Firebug). I will try to collect a sample and will post it here. Thank you.
0
 

Author Comment

by:DistillingExperts
ID: 37781044
Another thing, it is only happening with some computers. In my computer I cannot simulate the problem. Then, what I am doing is change the code and call the user to refresh the page and see if it has been reflecting.
0
 
LVL 30

Expert Comment

by:Marco Gasi
ID: 37781432
Yoiu should check if computers where problem happens have different sizes and resolutions than yours
0
 

Author Comment

by:DistillingExperts
ID: 37781758
Resolutions are the same. Size is different. Where do I check the size?
0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 30

Expert Comment

by:Marco Gasi
ID: 37781831
Usually, one knows if his monitor is 14 inch 19 inch, widescreen or not and so on. AFAIK It's not a thing you can check via code.

Have you tried to use percentages to size your divs (as suggested in my comment ID: 37777690): this should solve your problem and make your site friendly for mobile devices also.

Cheers
0
 

Author Comment

by:DistillingExperts
ID: 37781873
Divs are using percentage. Not wondering about mobile right now. Will check size. Thanks.
0
 

Author Comment

by:DistillingExperts
ID: 37782062
Please find below the code and the attached images, which show the sample that is not working in the user's machine and the one that's working in my machine. My goal is if not possible to fix the problem right now, would be to simulate the same behavior in my machine, which I am unable to do (sorry but I have to remove some information for confidentiality reasons).

<tbody><tr>
				<td width="100%"><a href="viewtopic.php?p=605#605"><img src="templates/XXXX/images/icon_minipost.gif" alt="Post" title="Post" border="0"></a><span class="postdetails">Posted: 2012-03-7, 10:37 am<span class="gen">&nbsp;</span>&nbsp; &nbsp;Post subject: XXXX Contacts Management Phase II</span></td>
				<td valign="top" nowrap="nowrap"><a href="posting.php?mode=quote&amp;p=605"><img src="templates/xxxx/images/lang_english/icon_quote.gif" alt="Reply with quote" title="Reply with quote" border="0"></a>   </td>
			</tr>
			<tr>
				<td colspan="2"><hr></td>
			</tr>
			<tr>
				<td colspan="2"><span class="postbody">The presentation used at yesterdays meeting is available at the following link:
<br>
<a href="http://wcm1.xxx.com/XXXXX_EDIT/XXXXX/XXXX/Documents/XXXX_Contacts_Management_Phase_II_Kick-Off.pptx" target="_blank" class="postlink">http://wcm1.xxx.com/XXXXX_EDIT/XXXXX/XXXX/Documents/XXXX_Contacts_Management_Phase_II_Kick-Off.pptx</a>
<br>

<br>
Please feel free to add any questions, comments etc. that were not addressed during the meeting as messages on this forum thread and we will try and answer them within a reasonable time frame.<br>_________________<br> </span><span class="gensmall"></span></td>
			</tr>
		</tbody>

Open in new window

workingnot working
0
 

Author Comment

by:DistillingExperts
ID: 37786327
An additional information. The user brought me his laptop. If he access it with his account the web site is cut. If I access the same laptop with my account the web site is rendering normally.

Any tips here? We are under a network that should have the same settings for everyone. However, where should I check to see the difference why it's cutting for some users and not for others? Windows or Browser?
0
 
LVL 30

Expert Comment

by:Marco Gasi
ID: 37787790
It's very strange. It seems like there are some cookies or session variables stored with info about screen size.

First, I would check if accessing from your laptop but with your user account you see the site working or not.
Second, could you create a test account and allow us to see your site directly. we have many different computers and browsers with many different settings so this could help us to help you.
Third, I would like to know how is the css attributes for divs which hold button that are broken.

About your answer "where should I check to see the difference why it's cutting for some users and not for others? Windows or Browser?", I can't imagine a reasonable answer, I'm very sorry.

Cheers
0
 
LVL 108

Accepted Solution

by:
Ray Paseur earned 500 total points
ID: 37787999
sorry but I have to remove some information for confidentiality reasons
Since we are looking at what may be a configuration or data-dependent issue, that's a real problem.  From a computer-science professional point of view, it would make sense to have a test bed for things like this so you can post links to the URLs that demonstrate the issue.

From the images it appears that the two screen captures show different fonts.  Perhaps the client has a local style sheet or setting that overrides the site.

I have installed the table body posted above.  Without the CSS and the rest of the code, it's not very illuminating.  See:
http://www.laprbass.com/RAY_temp_distillingexperts.html
0
 

Author Comment

by:DistillingExperts
ID: 37809942
Hi guys, sorry but this is an internal application which I am not the responsible to expose it for the outside world. In another words, I don't have the technical permission to do so.

We here should have the same setting for all the users. It seems this specific user has different settings. Thus, I ask our IT Service Desk to take a look on the issue, since it doesn't appear to be on application side, even though it should be able to render properly no matter what the settings are.

Ray_Paseur, would you be able to simulate with the table body cutting in the same way as in the screen shot "not working"?

Thank you.
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 37809989
I don't think I can simulate anything meaningful.  We would need the CSS and the rest of the HTML.  And even with that we do not have access to the client's settings.  The notion that a web page should render properly no matter what the client settings are...?  I doubt it.  I think you will find the issue to be the client settings, and when the client has changed back to the standard settings the problem will evaporate.
0
 

Author Comment

by:DistillingExperts
ID: 37810006
I do think a web app should render properly in any client. Think about Amazon, Yahoo, Facebook, etc.

I would send the css to you, but you said you wouldn't be able to do much. I will try to come up with a different approach then.

Thank you.
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 37810249
Suit yourself, but please don't send me the CSS.  Post it here so the EE community can see it.  The client can install a CSS file that overrides the CSS sent by the server.  The client can set font sizes for the browser.  It doesn't matter whether you're Amazon, Yahoo, Facebook or anything else.  The server cannot detect these things, nor can the server override these things.  It makes designers crazy, but that's the way things work.  As a matter of practice most clients do not install their own style sheets.  But some do and in doing so they manage to change the look and feel of the web experience.
0
 

Author Comment

by:DistillingExperts
ID: 37812284
No intention to send css to you, by e-mail or other resource. I meant to post it here. I will do more tests and let you know. Thanks.
0
 

Author Closing Comment

by:DistillingExperts
ID: 38048910
The problem still persists, but after some tests it was identified it is a profile issue. His computer with my profile works. No, it's not a local css. Only people with Administrator access can configure this sort of thing in our environment (I have admin rights).
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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 …
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…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

759 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now