scout1idf Posted July 19, 2010 Share Posted July 19, 2010 I have a display problem that I can't figure out.On my computer, no matter which browser I use (FireFox, IE8, Google, Orera, or Safari) or what screen resolution, my pages layout looks the same. (see attachment)On a friends computer using the same version of FireFox that I use, some parts of the layout runs over other parts of the layout. (see attachment)I use Windows Vista and she uses Windows XP. What is causing this and how do I plan for the possibility of it happening elsewhere?NOTE:The provided code has parts that doesn't matter removed to help with space. CODE REMOVED AND LINK ADDED BELOW Thanks in advance for any help..... Link to comment Share on other sites More sharing options...
thescientist Posted July 19, 2010 Share Posted July 19, 2010 your page is missing a couple things to ensure validation, which might not be the cause, but wouldn't hurt to fix. I'm not sure if it matters but it seems kind of redundant to give you're body tag a class of body, when you can just target the body tag in your CSS directly. body{//styles} Do you have a link by any change? It makes it easier to play around in Firebug with. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 19, 2010 Share Posted July 19, 2010 can't really tell for sure but they do look slightly different fonts?could be couple of of reasons1) one computer does not have the font Toledo so is uses an alternative.2) one browser is using its own set font, instead of the font set by webpage css styling. Link to comment Share on other sites More sharing options...
scout1idf Posted July 19, 2010 Author Share Posted July 19, 2010 your page is missing a couple things to ensure validation, which might not be the cause, but wouldn't hurt to fix. I'm not sure if it matters but it seems kind of redundant to give you're body tag a class of body, when you can just target the body tag in your CSS directly. body{//styles} Do you have a link by any change? It makes it easier to play around in Firebug with. LINK REMOVED---> PAGE HAS BEEN TAKEN DOWNGood point about the body style. (CHANGED)can't really tell for sure but they do look slightly different fonts?could be couple of of reasons1) one computer does not have the font Toledo so is uses an alternative.2) one browser is using its own set font, instead of the font set by webpage css styling.I'll try an alt. font style.I just added Times New Roman and will have my friend check it out when she has time..... Link to comment Share on other sites More sharing options...
dsonesuk Posted July 19, 2010 Share Posted July 19, 2010 just looked at your site, and it looks like number 1 is the problem, i don't have Toledo (i have 'Toledo SF' which will show if this was used) so it shows it as something that looks like Arial.try to use commonly used fonts with alternative such asfont-family: Verdana, Arial, Helvetica, sans-serif; Link to comment Share on other sites More sharing options...
scout1idf Posted July 20, 2010 Author Share Posted July 20, 2010 just looked at your site, and it looks like number 1 is the problem, i don't have Toledo (i have 'Toledo SF' which will show if this was used) so it shows it as something that looks like Arial.try to use commonly used fonts with alternative such asfont-family: Verdana, Arial, Helvetica, sans-serif;After work, I did some testing and come up with (font-family: Toledo, Cambria, Times New Roman;) as the best choices as far as size.Some of the different fonts I tested, gave me the same results as my friend had. Link to comment Share on other sites More sharing options...
Synook Posted July 20, 2010 Share Posted July 20, 2010 You should always end your font list with a generic option (e.g. serif), just in case the user agent does not have any of the specific fonts handy. Link to comment Share on other sites More sharing options...
scout1idf Posted July 20, 2010 Author Share Posted July 20, 2010 You should always end your font list with a generic option (e.g. serif), just in case the user agent does not have any of the specific fonts handy.I added 'sans-serif' to the end of the list. Just 'serif' made the same problem that I was having (text over run) but 'sans-serif' didn't.********************************I got some new info that I just tested.My friend's computer is set to 120 DPI while mine is 96 DPI.When I switched and had a look, the page was just like the screen shot she sent me.So the new Question is, how do you plan for people that use a different DPI than you design with?********************************I just switched over to %'s instead of px's. I don't know if that will help with the DPI issue or not, but when I zoomed in, the text fared a bit better. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 20, 2010 Share Posted July 20, 2010 Its because you were using a fixed height, is the reason that the text overlaps, revert to original width, and remove height (this will revert to height:auto), then it willl not matter what resolution/dpi a user use as the height will adjust to its content.You will stilll have the problem of, if a user does not have the font you specified it willl revert to an alternative set by the browser unless you have specified an alternative font, which is commonly used. Link to comment Share on other sites More sharing options...
thescientist Posted July 20, 2010 Share Posted July 20, 2010 I added 'sans-serif' to the end of the list. Just 'serif' made the same problem that I was having (text over run) but 'sans-serif' didn't.********************************I got some new info that I just tested.My friend's computer is set to 120 DPI while mine is 96 DPI.When I switched and had a look, the page was just like the screen shot she sent me.So the new Question is, how do you plan for people that use a different DPI than you design with?********************************I just switched over to %'s instead of px's. I don't know if that will help with the DPI issue or not, but when I zoomed in, the text fared a bit better. em is a good relative size unit for fonts. Link to comment Share on other sites More sharing options...
scout1idf Posted July 20, 2010 Author Share Posted July 20, 2010 I just made changes and it looks good.I never used 'em' before so finding a size I liked took a bit. Thanks for the help.... Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.