CSS noobie question...

by 6 replies
7
Hey folks,

I'm just playing around with some designs and I want to do this:

Have all the content resize itself for bigger or smaller screen sizes...or when the browser is resized by the user.

I always thought the solution was to create all the widths using % instead of actual pixel values...

(For example, width=85% instead of width=950px)

But when I did this, I get clients who have issues with the layout on different browsers.

Although it looked fine on FF and IE, other browsers it doesn't work.

Basically, I'm containing all the content in a wrapper which I've put at 100% wide. And then all the nested divs are a certain % wide inside the wrapper.

So when I resize the browser window, it all slides and shrinks accordingly.

But I had to set them all to specific widths for a client, because the layout was all stretched and had gaps in his browser.

Any ideas what the problem is?

(Sorry, I know it's a noob question but this web design isn't what I do for a living - as you can tell!)

Cheers,

Nick
#website design #css #noobie #question
  • the answer is that ie sucks. but seriously, the best you can do is just to make sure you're testing your results in multiple browsers. in some cases, you may just have to set specific options depending on the client
  • Use "em"s. This unit of measurement is based on the size of the capital letter "M" in the current font. Even if the size is 18px, 24px, 32px, or w/e... 1em is the same as that font size's "M" in height..

    Dynamic Drive CSS Library- Practical CSS codes and examples
    • [2] replies
    • Ok thanks for the link - I'll look into this a little more!

      Cheers,

      Nick
    • That's the best explanation of "em"s that I have come across so far. Good stuff.
  • Thanks circle 1ne.

    You can also increase or decrease a font's size with percentages. Just remember, CSS inherits declarations. So if the parent element has a font size of 16px, then anything inside that element, when set to 1em will be 16px.

    So, you can use this: to increase by 20% (3px in this case). So all font in that child element is now at 19px.

    You can also just use decimals in your em. is equivalent. The best part of ems is that it can go 3 decimal places!

    It's great!
    • [1] reply
    • Have you used a DOCTYPE at the top of each page to ensure each browser is using the same set of rules?

      Adi

Next Topics on Trending Feed