SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot greeneye's Avatar
    Join Date
    Apr 2006
    Location
    London
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE bugs are evil

    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
    Hello

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Hey greeneye,

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

  3. #3
    SitePoint Zealot greeneye's Avatar
    Join Date
    Apr 2006
    Location
    London
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Last edited by greeneye; Jun 19, 2006 at 09:12.
    Hello

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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

  5. #5
    SitePoint Zealot greeneye's Avatar
    Join Date
    Apr 2006
    Location
    London
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Hello

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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

  7. #7
    SitePoint Zealot greeneye's Avatar
    Join Date
    Apr 2006
    Location
    London
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Hello

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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

  9. #9
    SitePoint Zealot greeneye's Avatar
    Join Date
    Apr 2006
    Location
    London
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!
    Hello


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •