SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    572
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Could Someone take a look .... div is not lineing up

    Hi

    Could someone take a look at this please http://www.foodservicerecruitment.co.uk/new/

    The black box does not line up with the logo above it and seems to shift to the right by 1px.

    I added

    *html #left {
    margin-right:-2px;
    }

    If i take this out it lines up, but takeing this out leaves a 2px gap between the content div and the left div.

    What have I done!!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Its ie's 3 pixel jog that needs to be accounted for.

    Try this:
    Code:
    *html #left {
    margin-right:-3px;
    }
    /* commented backslash hack v2 \*/ 
    * html #middle {height:1%;margin-left:171px}/* combat ie's 3 pixel jog */
    /* end hack */
    (Note the height:1% should be hidden from ie mac using the commented backslash hack as above).

    Hope that helps.

    Paul

  3. #3
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    572
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul

    That worked for IE but not Firefox etc, i have also noticed that when I add content to the middle layer you get a jog again (only IE) take another look at the updated link.

    Will I have to add a 3px hack for the middle div as well?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Try changing the margin for mozilla as well. You also duplicated the styles I gave you so they were being over-ridden.

    Heres the whole middle section of css.

    Code:
    #left {
    margin-left:-171px;/*must be 1 pixel less than width */
    float:left;
    width:172px;/* this width is the same as the margin on #middle */
    position:relative;
    }
    *html #left {
    margin-right:-3px;
    }
    #left img{
    vertical-align:top;
    }
    #middle {
    background:#fff;/* background colour of right column */
    margin-left:171px;/*this is the space for the left column */
    }
    /* commented backslash hack v2 \*/ 
    * html #middle {height:1%;}/* combat ie's 3 pixel jog */
    /* end hack */ 
    #footer {
    clear:both;
    height:30px;
    border-bottom:6px solid #4B4575;
    }
    I couldn't see where the jog was in the middle you'll have to point it out

    Looking at your layout I don't think you need the negative margin version as you have no columns to equalise. The background color is the same for both so you cold have just put them in one outer and not worry about the negative margin aspect. (Unless of course you plan to do something later )

    Paul

  5. #5
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    572
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the quick response

    The jog in the middle is : if you look at the orange box to the right you will see that it does not line up with the image above it a 1px in IE6 and a 3px in IE5.5

    I plan to add a bground image to the left hand side later on, so I don't suppose I will need the negative margins. If I do go down that route, do I put the left div before the middle div ?

    Let me know

    Thanks Paul

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Ok, I see it

    Just take the width out of orangebox and it will sort itself out.

    I plan to add a bground image to the left hand side later on, so I don't suppose I will need the negative margins. If I do go down that route, do I put the left div before the middle div ?
    In that case you won't need the negative margins if you repeat the bg image on the parent. Move the left div above the middle div and get rid of the negative margins etc. Then it will be easier to work with as you don't have that 1px offset all the time.

    Paul

  7. #7
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    572
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Last question today Paul, I took the negative margins out and re-ordered the divs, but when viewed in IE6 and IE5.5 the middle content does not sit opposite the nav bar it drops below it.

    Any ideas ?

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    something like this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <style>
    *{
     padding:0;
     margin:0;
    }
    body {
     margin:0;
     background:#FFF;
     color:#000;
     text-align:center;/*centre for ie5 */
     font:11px Verdana, Arial,Geneva, Helvetica, sans-serif;
     background: url(http://www.foodservicerecruitment.co...es/bground.jpg) #C1C1AD;
    }
    #wrapper {
     width:750px;
     background:#fff;/*this colour will be left column colour */
     margin:auto;/* centre for compliant browsers*/
     text-align:left;
     padding:5px;
    }
    *html #wrapper{
     width:762px;
     w\idth:750px;
    }
    #header {
     height:100px;
     background:#DEDDDE;
     text-align:center;
     border-top:10px solid #3E3961;
    }
    #header img{
     vertical-align:bottom;
    }
    #left {
     float:left;
     width:172px;/* this width is the same as the margin on #middle */
     position:relative;
    }
    *html #left {
     margin-right:-3px;
    }
    #left img{
     vertical-align:top;
    }
    #middle {
     background:#fff;/* background colour of right column */
     margin-left:172px;/*this is the space for the left column */
    }
    /* commented backslash hack v2 \*/ 
    * html #middle {height:1%;margin-left:169px}/* combat ie's 3 pixel jog */
    /* end hack */ 
    #footer {
     clear:both;
     height:30px;
     border-bottom:6px solid #4B4575;
    }
    p{
     padding: 0px 0px 0px 10px;
     color:#000;
      margin-top:0px;
      font:11px Verdana, Arial,Geneva,Helvetica,sans-serif;
    }
    p.introtext{
     padding: 5px 0px 0px 12px;
     color:#fff;
      margin-top:0px;
      font:bold 11px/18px Verdana, Arial,Geneva,Helvetica,sans-serif;
    }
    p.solutions{
     padding: 2px 0px 0px 40px;
     color:#000;
      margin-top:0px;
      font:11px/14px Verdana, Arial,Geneva,Helvetica,sans-serif;
    }
    a.omega{
     font:9px Verdana, Arial,Geneva,Helvetica,sans-serif;
     text-decoration:none;
     color:#CBCBCB;
    }
    a.omega:hover{
     font:9px Verdana, Arial,Geneva,Helvetica,sans-serif;
     text-decoration:underline;
     color:#CBCBCB;
    }
    #navcontainer {
     height:164px;
     background: #E8E7E8;
     color:white;
    }
    #pagetitle {
     height:50px;
     background: url(http://www.foodservicerecruitment.co...contenttop.jpg) #49446A;
    }
    #orangebox {
     height:80px;
     background: #D1631A;
    }
    #solutions {
     width:578px;
     height:85px;
     background: url(http://www.foodservicerecruitment.co...-solutions.gif) #fff;
    }
    #omega {
     text-align:right;
     padding:5px;
    }
    
    </style>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body>
    <div id="wrapper"> 
      <div id="header"><a href="index.htm" onFocus="if(this.blur)this.blur()"><img src="http://www.foodservicerecruitment.co...mages/logo.gif" width="172" height="100" border="0" alt="Foodservice Recruitment Home" /></a><img src="http://www.foodservicerecruitment.co...der-image1.jpg" width="111" height="100" border="0" alt="" /><img src="http://www.foodservicerecruitment.co...der-image2.jpg" width="301" height="100" border="0" alt="" /><img src="http://www.foodservicerecruitment.co...der-image3.jpg" width="166" height="100" border="0" alt="" /></div>
      <div id="left"> 
    	<div id="navcontainer"><img src="http://www.foodservicerecruitment.co...images/nav.gif" width="172" height="164" border="0" alt=""></div>
      </div>
      <div id="middle"> 
    	<div id="pagetitle"><img src="http://www.foodservicerecruitment.co...pecialists.gif" width="200" height="50" border="0" alt=""></div>
    	<div id="orangebox">
    	  <p class="introtext">In the rapidly developing foodservice industry, Foodservice 
    		Recruitment provides bespoke recruitment solutions for clients that operate 
    		within, or have an interest in, the European foodservice sector. We offer:</p>
    	</div>
    	<p>Middle Content</p>
    	<p>hello</p>
    	<p>hello</p>
    	<p>hello</p>
    	<p>hello</p>
    	<p>hello</p>
    	<p>hello</p>
    	<p>hello</p>
    	<p>hello</p>
    	<p>hello</p>
    	<p>hello</p>
    	<p>hello</p>
    	<p>hello</p>
    	<p>hello</p>
    	<p>helloqqq</p>
    	<br style="clear:both" />
      </div>
      <div id="footer"><img src="http://www.foodservicerecruitment.co...oter-links.gif" width="172" height="22" border="0" alt=""></div>
      <div id="omega"> <a href="http://www.search-engine-professionals.co.uk/" class="omega" target="newbc">Web 
    	Site Promotion & </a> <a href="http://www.omegadm.co.uk/" target="newbc" class="omega">Web 
    	Site Design by Omega Digital Media.</a> </div>
    </div>
    </body>
    </html>
    Its the three pixel jog again making things too big.

    Paul

  9. #9
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    572
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul have a good weekend


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
  •