473,406 Members | 2,281 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,406 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" 
  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
1 2892
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. }
  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

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

Similar topics

3
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...
22
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...
19
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...
0
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;
1
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...
1
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.....
1
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...
7
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....
1
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...
1
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...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

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.