PDA

View Full Version : IE7 adding left margin



visioncom
Mar 3rd, 2010, 10:27 PM
IE7 being screwy as always. Website on test server http://www.vsncom.com/sterling The site works in every browser except IE7 what a shock right...I can even get it to work in IE 5.2 on mac. IE 7 is adding extra margin to the left hand side and also repositioning some of my <div> I have been looking for solutions for the past week on forums and havent found one that actually made sense and our fixed my problem so here I am asking my own questions about my specific problems. The worse part is I use mac and so I cant even see these problems myself without using net render or something. Therefore I cant explain the full extent of the problem because i only get screenshots. I know that it is adding say about 450 px of margin to the left hand side. It has pushed the left hand group of pictures to the right and equal amount of space. and the footer is now slightly over the text. Those are the problems that I am aware of. Any assistance would be greatly appreciated.

Matt

Excavator
Mar 4th, 2010, 01:41 AM
Hello visioncom,
Your site uses a lot of absolute positioning but I don't see much positioning... Typically you would have an element absolute positioned and then some coordinates of where it's supposed to got, like top:0; left:30px; or some similar.

You have your #wrapper enclosing your entire site and <center> is supposed to center it? HTML <center> (http://www.w3schools.com/TAGS/tag_center.asp) is deprecated and should not be used.
Remove the <center> tags and center your site with margin:auto; ,there is no need for position:absolute here.
Make your CSS look like this -
#wrapper{
margin: 0 auto;
width: 1000px;
position: relative;
}

To center an element you need 3 things:

a DocType Declaration
an element with a width
that elements left/right margins set to auto

I removed the height so the #wrapper can adjust itself to the content you put in it.
I added position:relative; so any ap you use later will position itself relative to the container instead of the body of the document.

There is a lot of ap you can just get rid of ... See the pitfalls of absolute positioning (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/).

visioncom
Mar 4th, 2010, 05:00 PM
So, in getting rid of the absolute positioning should i be then using relative. And if I use relative then I will have a ton of blank space at the bottom of the page where the element was but then I moved it up to get it inline. So, I guess that doesnt make sense to me. However, it does enable the site to work on IE. So, what is the best method to attack this.

Excavator
Mar 4th, 2010, 05:20 PM
Good morning visioncom,
I looks like you've got it working for IE7 now.
I think you mis-understood me. I did not mean to replace absolute positioning with relative. Positioning is required the way you've designed your layout, I was just pointing out that it was also the cause of your problem.

As an alternative, I would remove #background from the markup -
<div id="wrapper"><div id="header"><a href="index.html"><img src="images/header.jpg" border="0"></a></div>
<div id="navigation"><a href="index.html"><img src="images/home.png" alt="index.html" border="0" hspace="12px"></a><a href="about.html"><img src="images/aboutus.png" border="0" hspace="12px">...
And the CSS with indexbg.jpg as a background
/************************* ID's *************************/

#wrapper{
margin: 0 auto;
width: 1000px;
background: url(images/index/indexbg.jpg);
position:relative;
}

#header {
width:1000px;
height:210px;

}

/*#background{
position:relative;
z-index:1;
width:1000px;
height:768px;
top:-210px;
}*/
#navigation {
margin: 20px auto 0;
text-align:center;
width: 1000px;
height: 40px;
font-weight: normal;
}

visioncom
Mar 4th, 2010, 05:50 PM
Yes, I have the home page working for IE7 now. I did that by changing to relative positioning. The problem with taking the background image out of the markup is that it is a different bg image for each page so I cant really add that to the css. I ended up using relative positioning and then ending up using negative numbers to get the elements positioned where I needed them. However, that doesnt seem to be a very effective way to do it. That also adds dead space at the bottom of the page where the elements would have been had I not moved them. That being said. I also put overflow:none; in the wrapper and set it to a constant Height(against your suggestion) only because this page is designed to stay within that background image. That seemed to take care of the dead space. I appreciate your help and if there is something else I am missing feel free to let me know. I appreciate it.

Excavator
Mar 4th, 2010, 05:58 PM
The problem with taking the background image out of the markup is that it is a different bg image for each page so I cant really add that to the css.

Just each page's body an id and apply the different backgrounds there.

body#home #wrapper gets background: url(images/index/indexbg.jpg);
body#nextpage #wrapper gets background: url(images/index/nextpagebg.jpg);
body#third gets #wrapper background: url(images/index/thirdbg.jpg);

visioncom
Mar 4th, 2010, 10:25 PM
I didnt quite understand what you wanted me to do with the background however the site is now functional and I really appreciate your help.

Matt

Excavator
Mar 4th, 2010, 10:45 PM
I didnt quite understand what you wanted me to do with the background however the site is now functional and I really appreciate your help.

Matt

It's not important, as long as your site is working.


If you're interested though, you can asign each page an id which will enable you to style each #wrapper with a different background.
<body id="home">could be the page we've been working on here.
In the CSS then would be

body#home #wrapper {
background:url(images/index/indexbg.jpg);
}
#wrapper {
margin: 0 auto;
width: 1000px;
position:relative;
}




The #wrapper styling would be things that would apply to every page that has a #wrapper.
The body#home #wrapper styling would be stuff you only want to apply to that one page.

This can be used in several places once you have seperate id's on each body. Look at this php include menu that indicates what page your viewer is on - http://nopeople.com/CSS/h_ul_menu-with_images/index.html