Changing text size causing layout problems

I’m in the process of learning XHTML and CSS to design a new website. I’m making sure I get everyhting right on the homepage before replicating the markup for the other pages.

I have a problem with IE when I change the size of the text. I’m using the Sitepoint guides for the site and have set the text size using the standard sizes (small, large, etc.). I have then used CSS to draw a box around the text (set using pixels) and set them to div ID’s. I’ve then positioned these div’s/boxes using pixels. If I now change the text size in IE, the text extends outside the boxes and ruins the layout. My horizontal menu bar is also affected by this. In hindsight, this is pretty obvious why.

I’ve searched the web for a solution to this problem as I’ve noticed that some sites are unaffected by the change in text size. It appears that I cannot simply turn off the text size brower option which is fair enough. It seams I have 2 options:

  • change the size of all objects using em’s
  • or change the font size to pixels too so they are unaffected by the text size option.

The websites that aren’t affected when I change the text size in IE have specified text size in pixels in their style.

So, my question: if i’m going to change my site, should I change my style text size to pixels so the text cannot be changed, or should I change the size of the elements in the layout (like boxes for text) to use em’s so they grow when the text size is changed.

For reference, i’ve uploaded the new homepage here:

http://www.apartment-graukogel.com/test/index.htm

Sorry if these questions have an obvious answer - i’m more than new to this! I’m open to any suggestions.

Thanks
Kersh

Hi Kersh. Welcome to SitePoint. :slight_smile:

From a quick look, the main problem I see is that you have set heights on your boxes. As a general rule, avoid setting heights. Width is OK (it’s necessary) but if you have a fixed height and the text grows in size, there’s nothing it can do but spill out. One option is to use min-height instead of height, but really, you are still on a losing path if your design needs heights at all. Better to let content find its natural height. This is painful for graphic designers, but a reality of the web. :slight_smile:

Hi Ralph,

Thanks for the comments and the welcome! :slight_smile:

I’d specified the height of the boxes so they would fill the space to the footer. Is there some clever css I can use to get the boxes to fill the space?

I have another problem when I resize the text too - when I increase the size, it makes the menu bar longer which pushes it onto another line, behind the slideshow. I can use min height for the boxes but it won’t solve this problem. Any ideas? I have started a new style document specifying the sizes using em’s which solves this problem but i’ll need to apply it to everything for it to work right?

Another quick question: I have specified the size of my images in-line using pixels. Can I use em’s in line?

Thanks
Rich

That’s where display: table and display: table-cell etc come in handy. However, ve aware that older versions of IE (7 and under) don’t recognize it.

I have another problem when I resize the text too - when I increase the size, it makes the menu bar longer which pushes it onto another line, behind the slideshow.

My preference there is to give the #nav overflow: hidden so that it will increase in height if the list items wrap to a new line.

I have specified the size of my images in-line using pixels. Can I use em’s in line?

Yes, you can do that. But it’s not a good idea to use inline styles (as they are hard to update). But I don’t actually see inline styles, so I’m not sure if that’s really what you mean.