Different browsers and different screen sizes

+2 Brandon Ragoo · December 2, 2014
Good day my fellow geeks, so I'm having an issue with a website I'm developing for my web design project at school. The problem is that for some reason in different browsers it displays different and with different screen sizes it displays different also even if I make my browser window small it causes the website to display differently. I noticed the New Boston Website and any other website I visit online does not have this issue. How do I solve this issue? Do I have to create a file to somehow detect the different browsers and screen sizes ?? 

Post a Reply


Oldest  Newest  Rating
0 Ron Butcher · December 2, 2014
Percentages is usually the way to go so that the elements will grow and shrink with the browser window.  If you are floating a lot of your elements they will move as the browser grows and shrinks as well.  This can be both a good and bad thing.  If you want a page that does not change with the browser window, use fixed widths and heights, and use absolute positioning rather than float.

For your pages showing up differently with different browsers, your problem will mostly be with Internet Explorer.  Chrome, FireFox, and Safari are usually kept up to date so they do not have issues with newer elements, but for some reason people do not update IE like they are supposed to.  The easiest way to get around people using older browsers is to use a script like Modernizr (http://modernizr.com).  This is a JavaScript library that detects if your browser does not support HTML5 elements and renders the elements properly.

Even if IE is updated though, they for some reason do not follow the same rules that all other browsers do.  To fix the problems with IE displaying differently, a lot of times I just write a separate CSS file specifically for IE.
0 Neil Hawkins · December 2, 2014
If you do decide to use the percentages option, remember that the element you scale will need to be worked out so as to be a percentage of its parent element :)
-1 shanzi own · December 2, 2014
you can use media queries to change the sizes for different sizes. you can also try to use more % and less PX. for the different browsers use webkit and moz in ur css or you can code for one browser and let the teacher know 
  • 1

HTML / CSS / Web Design


Discuss, share, ask, learn and teach HTML5 and CSS3.