7 {{ upvoteCount | shortNum }}
7 {{ upvoteCount | shortNum }}

CSS noobie question...

by Nick Brighton
6 replies
  • WEB DESIGN
    • |
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
#css #noobie #question
  • Profile picture of the author SethTheUBotGuy
    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
    Signature
    UBot Studio - Sell Products, Make Money, and Automate your Marketing
    {{ DiscussionBoard.errors[899316].message }}
  • Profile picture of the author RedMatrix
    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
    Signature

    ~Dave

    {{ DiscussionBoard.errors[902615].message }}
    • Profile picture of the author Nick Brighton
      Originally Posted by RedMatrix View Post

      Use "em"s. This unit of measurement is based on the size of the capital letter "M" in the current font. If the size is 18px, 24px, or 32px, 1em is the same as that font size.

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

      Cheers,

      Nick
      {{ DiscussionBoard.errors[903061].message }}
    • Profile picture of the author circle1ne
      Originally Posted by RedMatrix View Post

      Use "em"s. This unit of measurement is based on the size of the capital letter "M" in the current font. If the size is 18px, 24px, or 32px, 1em is the same as that font size.
      That's the best explanation of "em"s that I have come across so far. Good stuff.
      {{ DiscussionBoard.errors[903281].message }}
  • Profile picture of the author RedMatrix
    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: font-size:120%; 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. font-size:1.2em is equivalent. The best part of ems is that it can go 3 decimal places!
    • font-size:2.125em
    • letter-spacing:-.025em
    • word-spacing:1.333em

    It's great!
    Signature

    ~Dave

    {{ DiscussionBoard.errors[903642].message }}
    • Profile picture of the author Adi E
      Have you used a DOCTYPE at the top of each page to ensure each browser is using the same set of rules?

      Adi
      {{ DiscussionBoard.errors[904304].message }}

Trending Topics