471,598 Members | 1,224 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,598 software developers and data experts.

Issues with my layout regarding px

219 100+
I'm having an issue with my layout, and am looking for some advice. The layout looks fine until the user changes the font size in the browser. Then my footer and navigation bar push down to another line and aren't lined up properly.

Should I be creating all of my layouts with em or % rather than px? I'm pretty much screwed now because I've already launched the site, and it would take some work to do a re-design, but I never tested the change of font in the browser ... I'm a dummy

Here is a portion of my css code.

Expand|Select|Wrap|Line Numbers
  1. *{
  2.    font-family: "Arial","sans-serif";
  3. }
  4. html{
  5.     font-size:125%;
  6. }
  7. body{
  8.     font-size:50%;
  9. }
  10. html, body {
  11.     background-color:#F4F6FD;
  12. }
  13. h1, h2, h3, h4, h5, h6, p, form {
  14. margin : 0;
  15. padding : 0;
  16. }
  17. .clear{
  18.   clear:both;
  19. }
  20. /***** Main Containers*****/
  21.  
  22. #mainContainer {
  23.     width : 800px;
  24.     background-color:#FFF;
  25.     margin : 10px auto 0 auto;
  26. }
  27. #content {
  28.     width : 778px;
  29.     margin : 0 auto;
  30. }
  31. /***** Start of Footer *****/
  32. #footer{
  33. clear : both;
  34. height : 25px;
  35. margin-top:15px;
  36. padding-top:2px;
  37. }
  38. #appTitle{
  39. float : left;
  40. width : 500px;
  41. background-color:#369;
  42. color:#FFF;
  43. height : 27px;
  44. padding-top: 5px;
  45. }
  46. #appTitle p{
  47.     font-size: 1.1em;
  48.     letter-spacing:1px;
  49.     padding:2px 0 2px 10px;
  50.     border-top:1px solid #8CB2D8;
  51.     border-bottom:1px solid #8CB2D8;
  52. }
  53. #copyright {
  54.     float : left;
  55.     width : 278px;
  56.     background-color : #369;
  57.     color:#FFF;
  58.     height : 27px;
  59.     padding-top : 5px;
  60. }
  61. #copyright p{
  62.     font-size:1.1em;
  63.     letter-spacing:1px;
  64.     text-align:right;
  65.     padding:2px 10px 2px 0;
  66.     border-top:1px solid #8CB2D8;
  67.     border-bottom:1px solid #8CB2D8;
  68. }
  69.  
Here is the template that I created which I work from.

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Hospital Capacity Status Application</title>
  6.     <link rel="stylesheet" type="text/css" href="codegrey_v3.css" />
  7.     <script type="text/javascript" src="../js/jstoolkit.js"></script>
  8. </head>
  9. <body>
  10. <div id="mainContainer">
  11. <div id="content">
  12.     <div id="headerContainer">
  13.         <div id="title">
  14.             <h1>HealthAlliance Hospital</h1>
  15.             <h4>Capacity Status</h4>
  16.         </div>
  17.         <div id="section">
  18.                <h4>The Big Picture</h4>
  19.         </div>
  20.     </div>
  21.     <div id="navBar">
  22.         <div id="mainNav">
  23.         <h4>Main Navigation</h4>
  24.         <ul>
  25.             <li><a href="BigPic_dt_v4.cfm">Home</a></li>
  26.             <li><a href="EDV2Status.cfm">ED Dashboard</a></li>
  27.             <li><a href="V3-Master-Capacity-snap-shot.cfm">IP Dashboard</a></li>
  28.             <li><a href="information.cfm">Information</a></li>
  29.         </ul>
  30.         </div>
  31.         <div id="dataEntryNav"> 
  32.         <h4>Data Entry Navigation</h4>
  33.         <ul>
  34.             <li><a href=javascript:validate("codeGreyDiv.cfm")>Capacity Status</a></li>
  35.             <li><a href=javascript:validate("icudata_v2.cfm")>CCU</a></li>
  36.             <li><a href=javascript:validate("FosterWingData_v2.cfm")>FWPC</a></li>
  37.             <li><a href=javascript:validate("medsurgdata_v2.cfm")>MSU</a></li>
  38.             <li><a href=javascript:validate("3cdata_v2.cfm")>3CN</a></li>
  39.             <li><a href=javascript:validate("4data_v2.cfm")>4th Floor</a></li>
  40.             <li><a href=javascript:validate("PediData_v2.cfm")>Pedi</a></li>
  41.             <li><a href=javascript:validate("EDData_v2.cfm")>ED</a></li>
  42.             <li><a href=javascript:validate("admin_v2.cfm")>Admin</a></li>
  43.         </ul>
  44.         </div>
  45.         <div class="clear"></div>
  46.     </div>
  47.  
  48.     <!-- Insert Page Content Here -->
  49.  
  50.     <div class="home">
  51.            <a href="bigpic_dt_v4.cfm">Return to Big Picture</a>
  52.     </div>
  53. <!-- Begin the Footer -->
  54. <div id="footer">
  55.   <div id="appTitle"><p>Code Grey Application</p></div>
  56.   <div id="copyright"><p>Copyright &copy; 2007 - HealthAlliance Hospital</p></div>
  57. </div>
  58.  
  59. </div>
  60. </div>
  61. </body>
  62. </html>
  63.  
Nov 14 '07 #1
5 1430
drhowarddrfine
7,435 Expert 4TB
This is an issue discussed in many online articles. Using a fixed layout, ie, one completely using px, is frequently preferred by those from the graphics industry, especially magazines and newspapers; but there are many who also believe sites should be completely fluid and go with the flow. Even if you set your text with px, only IE will remain fixed while all other modern browsers properly let the user to zoom the text as needed.

If it is too much trouble/difficult to change the layout, I would just fix it with px and don't worry about it. Or you can try using em/% but a good font resize test is just two levels of zoom and that should be good enough in most cases.

People are used to this problem on the 'net. Now that you know, you can allow for it on your next page/project.
Nov 14 '07 #2
dmorand
219 100+
Excellent thanks for the info, that clears things up now.

Do you normally use px or em/% in your designs? Which should I go towards now?
Nov 14 '07 #3
dmorand
219 100+
So it seems like I should stick to em for my fonts, and then I can still use px for my layout, but I need to make sure that the font resize can be contained in the container it's in or the layout will be thrown off.
Nov 14 '07 #4
drhowarddrfine
7,435 Expert 4TB
Both. Just depends on the situation. Google for 'styling ems' or 'ems vs px' and you'll find some good articles on all that.
Nov 14 '07 #5
dmorand
219 100+
Cool thanks I'll do that.
Nov 14 '07 #6

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

4 posts views Thread by Brian Horwitz | last post: by
47 posts views Thread by Neal | last post: by
49 posts views Thread by lime | last post: by
30 posts views Thread by Diane Wilson | last post: by
2 posts views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by Anwar ali | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.