Vishal Beersye, Mauritian xhtml web designer & developer

CSS affecting layouts of pagesHeight and width attributes

As i described before on the front-page of css-issues, different browsers have different intepretation of some css attributes. And this can prove to be quite a pain when a designer is aiming for pixel-perfect designs on different platforms. Lets take a look at the width and height properties affecting IE and FF.

• If you specify a width of 500px for a particular container, and place contents with width specified 550px, the FF browser may render it quite ok, but on IE, your 500px container stretches to accomodate for the contents.
• SOLUTION : When you specify a width for your container (500px), do not specify any width for the contents. Just give them according margins and they will fit in your container.
• If you specify a height of 500px for a particular container, and place contents that are to overflow the container, your page will automatically grow and accomodate for the excessive contents. However, it will not be the case for FF because of the 500px height specified.
• SOLUTION : Do not specify any height for your container and your container will grow on both browsers to accomodate for the contents. FF does not intepret it in the same way as IE and in case you do not notice it, you will end up tired just trying to figure out where the problem is.

margin and padding issues

• Designers often get the problem that block level elements have default margins and paddings assigned to them. If not removed, the designs tend to get more complicated and the difference in browser rendering gets only bigger.
• SOLUTION : You may either chose to remove the default margins and paddings on block level elements wherever you use one in your document.
  Or, using
  *{
  margin:0;
  padding:0;}
  to remove all the default margins and paddings.