By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
449,213 Members | 1,984 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 449,213 IT Pros & Developers. It's quick & easy.

margin gap in ie7

P: 54
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" 
  2.  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5.  
  6. <head>
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8. <title>Background image</title>
  9.  
  10. <style type="text/css">
  11.  
  12. body {
  13. text-align: center;  
  14. margin: 0; 
  15. font-family: Verdana; 
  16. font-size: 10px;
  17. }
  18.  
  19. #wrapper { 
  20. width: 900px;   
  21. text-align: left; 
  22. margin: 0 auto; 
  23. border: 1px solid #ffff00; 
  24. }
  25.  
  26. p{
  27. margin: 0;
  28. padding: 0;
  29. }
  30.  
  31. </style>
  32.  
  33. </head>
  34.  
  35. <body>
  36.  
  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

browsers.

thanks.
Feb 15 '09 #1
Share this Question
Share on Google+
1 Reply


Expert 100+
P: 397
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. }
  9.  
  10. #wrapper {
  11. width: 900px;
  12. text-align: left;
  13. margin: 0 auto;
  14. border: 1px solid /*yellow*/red;
  15. }
  16.  
  17. p{
  18. margin: 0;
  19. /*padding: 0;*/
  20. }
  21.  
  22.  
Feb 15 '09 #2

Post your reply

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