Hi guys and girls.

 

I am currently designing my first elestic site and i just need a little help.

 

i can deal with the layout and positioning n that but i just need help with borders and font size...

 

Can anyone advise

 

 

Cheers in advance.

 

Craig

If you are designing a fluid width site you need to use % widths for all elements including their side margins and side padding and also for images (if images stay fixed width in px they will never fit a fluid width container). Don't state a height for images and the height will vary in proportion to the width. Total of widths should be 100%.

 

Borders can't be sized in % so you have to leave them in px and total the other % elements 97% or 98%.

 

However, your page may look very squashed up in small windows or very spaced out in large windows. Many people now don't use % widths, they set up a wrapper div with a min-width and max-width and the page varies between those limits. IE6 has to have a fixed with in a conditional comment as it doesn't process min or max-width.

 

For font sizes you can use em instead of px and em for all element and margins and padding so that font-size is always proportional to the element size. This can be tricky to get right. Most browsers now have a zoom so people with bad eyesight can enlarge the whole page, but earlier versions had to use View/Text Size and using ems for the containing elements means that they when enlarging text size the elements expand as the font-size expands.

If you are designing a fluid width site you need to use % widths for all elements including their side margins and side padding and also for images (if images stay fixed width in px they will never fit a fluid width container). Don't state a height for images and the height will vary in proportion to the width. Total of widths should be 100%.

 

Borders can't be sized in % so you have to leave them in px and total the other % elements 97% or 98%.

 

However, your page may look very squashed up in small windows or very spaced out in large windows. Many people now don't use % widths, they set up a wrapper div with a min-width and max-width and the page varies between those limits. IE6 has to have a fixed with in a conditional comment as it doesn't process min or max-width.

 

For font sizes you can use em instead of px and em for all element and margins and padding so that font-size is always proportional to the element size. This can be tricky to get right. Most browsers now have a zoom so people with bad eyesight can enlarge the whole page, but earlier versions had to use View/Text Size and using ems for the containing elements means that they when enlarging text size the elements expand as the font-size expands.

 

Very clear explaination... Thank you..

I got cracking with the fonts and em i used this with the borders to... i like the idea of building the site with % rather than px as i think it works better with different screen res.

 

Obviously internet explorer 6 is a right pain and doesnt understand basic math.. is there any hack you can advise for this. or shall i just create a new style sheet and detect the browser witha php script..

 

 

Cheers

Edited December 27, 201015 yr by craigpettit

Obviously internet explorer 6 is a right pain and doesnt understand basic math.. is there any hack you can advise for this. or shall i just create a new style sheet and detect the browser witha php script..

 

You don't have to use PHP to target IE6. Always code a page for Firefox first and it will probably be OK in Opera, Safari and Chrome and IE8. Then check IE7 and lastly check IE6.

 

If you need special codes for IE7 or IE6 you use a conditional comment with just a few revised styles in the head section, like this (the code should always be after the main stylesheet link so that the conditional comment is processed last and overides the styles in the main stylesheet. Inline styles (in the html markup) should be avoided as they take priority over styles in the head section and separate stylesheets):-

 

<!--[iF IE 6]>
<style type="text/css">
Put any revised styles here (only those that need to be different from the main stylesheet style)
</style>
<![endif]-->

 

You can if you want create a separate stylesheet for IE6 if there are a lot of styles that need to be different (but as before you only need to include those that are different) and link it in the conditional comment:-

<!--[iF IE 6]>
<link href="styles-ie6.css" rel="stylesheet" type="text/css" media="all" />
<![endif]-->

 

You can add another conditional comment for IE7 if necessary (note the space between IE and 6 or 7 in the code). See http://www.javascriptkit.com/howto/cc2.shtml