IE bugs are evil

**greeneye** · Jun 19, 2006 07:53

Hi guys,

Am trying to centre my webpage after some great pointers in the review forums but am having this problem with positioning. I'v gone through a lot of different sites trying to figure out the problem myself but to no avail. The problem is described but not how to fix it.

Basically I centre my main div inside a container div which gets it centred, then when I move all my other elements into the main div using relative positioning.

In firefox, it aligns beautifully, in IE everything is like 350 pixels to the right...

Here is a screenshot of the 2 pages.

http://www.blueeye.me.uk/bug.htm

Any help appreciated, if you need to see teh CSS or something let me know!

Thanks,

greeneye

**Egor** · Jun 19, 2006 08:05

Hey greeneye,

You know, what would really help is a link to the problem or some code. Pictures don't really help much.

**greeneye** · Jun 19, 2006 08:20

OK here goes. Below is the CSS I used.

The elements are as follows:
#container - outside most div
#rbbg - inside #container and holds all other elements
#navbar + #contact = the 2 elements in teh page that won't align.

I hope that makes sense.

Thanks for your help!

Code:

body {
	background-color: #14265E;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	width: 768px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	
	}

#container {
	text-align: center;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	left: 0px;
	top: 0px;

}


#rbbg {
	width: 740px;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	z-index: 1;
	height: 410px;



}

#contact {
	height: 62px;
	width: 255px;
	z-index: 5;
	position: relative;
	left: 450px;
	top: -400px;
	
	}
	
	
#navbar {
	height: 212px;
	width: 148px;
	z-index: 10;
	position: relative;
	top: -300px;
	}

greeneye

update: I removed the irrelevant:

Code:

margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	width: 768px;

from the #body

**Paul O'B** · Jun 19, 2006 09:42

then when I move all my other elements into the main div using relative positioning

Just don't do it

relative positioning is not meant to be used like that (unless you know exactly what you are doing)

You should be floating any elements that you want to line up horizontally and not use relative positioning as relative positioning ohnly moves elements visully not physically. The element is in fact still occupying its original positioning as the spacve is preserved.

This style is just a waste:

Code:

#container {
	text-align: center;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	left: 0px;
	top: 0px;
}

Because the elements is 100% wide then margin:auto means nothing because there is nothing to center. left and top do not apply to non-positioned elements either so they are superfluos in this example.

Dont give the body a width in order to center as some browers have a lot of trouble with that. The faqw on centering explains all that is needed to center in all browsers and then you just float your inner elements left or right as required and push them into place with margins (although you will need to add display:inline to the floats to cure an ie margin bug).

If you can supply the html you are using then you will get a coded answers instead of a written one

**greeneye** · Jun 19, 2006 10:09

I removed all the javascript from it, as it wasn't relevant and took up loads of space, would be annoying for you to look at.

Not sure what this will show you but with the CSS I showed you in previous doc should make sense?

HTML Code:

<body>

 <div id="container">
  <div id="rbbg"><img src="../images/rbbg.jpg" alt="Roger Bloxham, The people Photographer" width="740" height="410" border="0" usemap="#Logo" /> 
        
  <div id="contact"> 
    <h3>email: [email]enquiries@rogerbloxham.co.uk[/email]<br />
      phone/fax: 01728 602810<br />
      mobile: 07768 172579</h3>
  </div>
    <div id="navbar"><!--lots of javascript relating to navigation bar--!>

    </div>

    <!-- TemplateBeginEditable name="EditRegion1" --> 
    <div id="editright"></div>
    <!-- TemplateEndEditable --> 

<!-- TemplateBeginEditable name="EditRegion2" --> 
    <div id="editleft"></div>
    <!-- TemplateEndEditable -->
 
</div>
</div>
</body>

**Paul O'B** · Jun 19, 2006 11:52

Hi,

Well i'm still not sure whay you have got but here goes anyway

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body {
 background-color: #14265E;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 text-align:center;
 }

#rbbg {
 width: 740px;
 margin: 10px auto 0;
 height: 410px;
 text-align:left;
 position:relative;
}
#contact {
 height: 62px;
 width: 255px;
 z-index: 5;
 position: absolute;
 left: 450px;
 top: -10px;
 color:#fff;
 }
 
 
#navbar {
 height: 212px;
 width: 148px;
 z-index: 10;
 position: relative;
 margin-top: -300px;
 float:left;
color:#fff;
}
.clearfix:after {
  content: ".";
  clear: both;
  height: 0;
  visibility: hidden;
  display: block;
}
.clearfix {
  display: inline-block; /* Fixes IE/Mac */
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */ 
</style>
</head>
<body>
<div id="rbbg" class="clearfix"><img src="../images/rbbg.jpg" alt="Roger Bloxham, The people Photographer" width="740" height="410" border="0" usemap="#Logo" />
 <div id="contact">
  <h3>email: enquiries@rogerbloxham.co.uk<br />
   phone/fax: 01728 602810<br />
   mobile: 07768 172579</h3>
 </div>
 <div id="navbar">
  <p>hello</p>
  <!--lots of javascript relating to navigation bar-->
 </div>
</div>
</body>
</html>

Thats the sort of code you should post so that I can just copy it and test. If you supply a working example of the problem its much easier for use to help as it takes time to build a page otherwise

I'm assuming that you want that big logo image in the foreground as it could go in the background instead. The contact div is placed absolutely on top of the image on the right side (although i don't know where you got your 65px height from unless that was omitted also).

The navbar is floated and then dragged upwards with a negative margin as i assume you want to preserve the flow of the document. The float is then cleared by using PIE's easyclearing method on #container.

Hope it helps anyway

**greeneye** · Jun 19, 2006 13:31

thanks very much Paul O'B!

That worked. I think I will need to examine exactly why though so I don't get stuck again in the future. That clearfix bit was what I needed mainly right?

Thanks again!

greeneye

**Paul O'B** · Jun 19, 2006 13:50

That clearfix bit was what I needed mainly right

the clearfix was to make sure the parent container will enclose any floats (you can read up on floats in the faq

).

The main problem in your code was the relative positioning which wasn't required and wasn't suitable in this instance.

You need to always try and preserve the flow of the document so floats are the best choice along with static positioning. This makes sure that the documnet flows logicallly and content can follow content without too much trouble.

Of course things can get complicated but its best to try and keep things simple and straight forward where possible

**greeneye** · Jun 19, 2006 14:19

I will definitely be doing lots of reading up! I have so many ideas and just come a cropper on the technical side.

Thanks again!

User Tag List

Thread: IE bugs are evil

Thread Tools

Display

IE bugs are evil

Bookmarks

Bookmarks

Posting Permissions