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:
Sorry if these questions have an obvious answer - i'm more than new to this! I'm open to any suggestions.