Different browser behavior in the sizing of web app

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

Thank you for your quick reply. I will do a test tomorrow and let you know.

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.

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?

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.

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.

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.

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.

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.

Yoiu should check if computers where problem happens have different sizes and resolutions than yours

Resolutions are the same. Size is different. Where do I check the size?

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

Divs are using percentage. Not wondering about mobile right now. Will check size. Thanks.

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>

Select all Open in new window

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?

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

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.

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.

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.

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.

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.

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).