471,090 Members | 1,702 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

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

margin gap in ie7

i am having a serious issue with ie 7 i really need help.

i am using a center layout using 900px the center layout looks and works fine

in all browsers except for ie7 i have used a border for the wrapper tag.
what i have noticed only in the case of ie7 is the left border for the wrapper

tag starts a few pixels 2px or 3px before compared to all other browsers and

due to this in ie7 the right border ends a few pixels when compared to all

other browsers. so if i can fix the left border the right border for the

wrapper tag will adjust automatically.

i am using a valid xhtml transitional document. following is my code.

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head>
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8. <title>Background image</title>
  10. <style type="text/css">
  12. body {
  13. text-align: center;  
  14. margin: 0; 
  15. font-family: Verdana; 
  16. font-size: 10px;
  17. }
  19. #wrapper { 
  20. width: 900px;   
  21. text-align: left; 
  22. margin: 0 auto; 
  23. border: 1px solid #ffff00; 
  24. }
  26. p{
  27. margin: 0;
  28. padding: 0;
  29. }
  31. </style>
  33. </head>
  35. <body>
  37. <div id="wrapper">
  38. <p>Content </p>
  39. </div></body></html>
can someone please tell me what the issue is and what the code should be. i

would highly appreciate any help as this is an issue in ie7 and not in other


Feb 15 '09 #1
1 2831
David Laakso
397 Expert 256MB
Unable to reproduce that in XP IE 6 or 7 with your CSS (even if it were valid). Nor with mine (below).

For forward compatability reasons validate to a strict doctype (and that will not resolve whatever the issue is either).

Aside: Not everyone in the universe defaults to a white screen. And a yellow 1px border will not be seen by everyone. Some of us run minimum font size 14px. User default is 16px. Best set user default. Better yet best set user default in percent(100%) so IE users can scale the fonts more easily (providing they know how to use their machine). When fonts are set in pixels, IE users have to jump through hoops to scale them.

Verdana only looks good when set as mousetype (smaller than user default). And it is clumsy and rather ugly when scaled. So you may want to change the font string and feed Mac users Helvetica-- PCs might get Arial, those who have neither Helvetica or Arial will get their particular machine default sans font.

Something like this (1.4 is the line-height):
Expand|Select|Wrap|Line Numbers
  1. html, body {background:#fff;color:#000;margin:0;padding:0;}
  2. body {
  3. text-align: center;
  4. /*margin: 0;
  5. font-family: Verdana;
  6. font-size: 10px;*/
  7. font: 100%/1.4 Helvetica, Arial,sans-serif;
  8. }
  10. #wrapper {
  11. width: 900px;
  12. text-align: left;
  13. margin: 0 auto;
  14. border: 1px solid /*yellow*/red;
  15. }
  17. p{
  18. margin: 0;
  19. /*padding: 0;*/
  20. }
Feb 15 '09 #2

Post your reply

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

Similar topics

3 posts views Thread by Brian | last post: by
22 posts views Thread by moocow | last post: by
19 posts views Thread by Thomas Mlynarczyk | last post: by
reply views Thread by paulroskilly | last post: by
1 post views Thread by moondaddy | last post: by
1 post views Thread by innivive | 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.