472,989 Members | 3,052 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,989 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 2875
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

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

Similar topics

by: Brian | last post by:
I have a page with content, navigation, and footer divs, in that order. The nav div has position: absolute, width 8em, on green background. The other divs have an 8em green left border, such that...
by: moocow | last post by:
Hi. I am using a background image in a form button. The problem I am having is that there is a 1 pixel margin inside the button on all sides. I would like my background image to fill the...
by: Thomas Mlynarczyk | last post by:
Hello, The following gives different results in IE and "Non-IE" browsers: <div style="background-color: green; width: 200px"> <div style="margin-top: 20px; background-color: red"> Hello...
by: paulroskilly | last post by:
Hello, I have the following css : body { background-color: #CACACA; margin-left: 0px; margin-top: 10px; margin-right: 0px; margin-bottom: 0px;
by: Edward | last post by:
I created a simple CSS layout (code and example below) for bloggin/writing but ran into five issues that I need help with: 1. How do I get rid of the right-margin red line on the last three...
by: Dave Siegel | last post by:
Hi, I've made a container div and put 2 div's inside of that for easy positioning.. The problem is that the container div has a standard 10px or so top margin which makes it go down too much.....
by: superDk | last post by:
Hello, IE6 is adding a large margin between my two containers (container1 & container2) everything works fine in IE7 and Firefox. I've been searching on-line for a fix but I've had no luck. It...
by: GTalbot | last post by:
Hello fellow authoring.stylesheets colleagues, Can someone please explain why the bottom margin of the last inflow block-level child in an overflowed parent should not have its margin reachable....
by: moondaddy | last post by:
I have a group of elements inside a grid and want to align them along the left side of the grid. I also want have this group centered vertically and the xaml below demonstrates the appearance want...
by: innivive | last post by:
I am having a problem with having margins display correctly in IE7, Firefox and Safari. I am not sure if it is the "double margin error" or something else. Any help would be appreciated. The file...
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
by: tracyyun | last post by:
Hello everyone, I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...
by: NeoPa | last post by:
Introduction For this article I'll be using a very simple database which has Form (clsForm) & Report (clsReport) classes that simply handle making the calling Form invisible until the Form, or all...
by: Teri B | last post by:
Hi, I have created a sub-form Roles. In my course form the user selects the roles assigned to the course. 0ne-to-many. One course many roles. Then I created a report based on the Course form and...
by: nia12 | last post by:
Hi there, I am very new to Access so apologies if any of this is obvious/not clear. I am creating a data collection tool for health care employees to complete. It consists of a number of...
by: NeoPa | last post by:
Introduction For this article I'll be focusing on the Report (clsReport) class. This simply handles making the calling Form invisible until all of the Reports opened by it have been closed, when it...
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
by: GKJR | last post by:
Does anyone have a recommendation to build a standalone application to replace an Access database? I have my bookkeeping software I developed in Access that I would like to make available to other...
by: SueHopson | last post by:
Hi All, I'm trying to create a single code (run off a button that calls the Private Sub) for our parts list report that will allow the user to filter by either/both PartVendor and PartType. On...

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.