SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict XiledWeb's Avatar
    Join Date
    May 2005
    Location
    Nashville
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image Alignment out by a few pixels (how to fix)

    I'm trying to align an image, but no matter what I try to do, it is always out by a few pixels. I'm thinking perhaps its either inheriting a value from another div, or its a fix that I'm just not seeing - which means time for more coffee.

    The link is here. I'm trying to align the image on the right (bigsoccernetwork.gif) with the grey rectangular container box above it.

    HTML 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>American Sports Gamer | News from Sports Interactive</title>
    <link href="squarelayout.css" rel="stylesheet" type="text/css" media="all" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta name="robots" content="all" />
    <meta name="description" content="AmericanSportsGamer.com - Bring you the latest news from Sports Interactive" />
    <meta name="keywords" content="Sports Interactive Latest News," />
    </head>
    
    <body>
    <div id="header"><a href="http://www.americansportsgamer.com"><img src="images/logo_web.gif" width="108" height="70" alt="americansportsgamer.com" title="americansportsgamer.com"/></a><img src="images/si_small.gif" alt="" /></div>
    <div id="headnav"> </div>
    <div id="shadows" class="clearfix">
    	<div id="navcont">
    		<ul id="top">
    			<li><a href="wwsm.php">WWSM</a></li>
    			<li><a href="fmlive.php">FM Live</a></li>
    			<li><a href="ootp.php">OOTPB</a></li>
    			<li class="last"><a href="http://www.americansportsgamer.com/forums/index.php?showforum=30">RF Clan</a></li>
    		</ul>
    		<ul id="base">
    			<li><a href="si.php">Sports Interactive</a></li>
    			<li><a href="shop.php">Downloads</a></li>
    			<li><a href="http://www.americansportsgamer.com/forums/index.php?showforum=21">Research &amp; Development</a></li>
    			<li class="last"><a href="http://www.americansportsgamer.com/forums">Forums</a></li>
    		</ul>
    	</div>
    	<div id="main-container">
    	<div id="left_ad">
    <script type="text/javascript"><!--
    google_ad_client = "pub-***************";
    google_ad_width = 120;
    google_ad_height = 600;
    google_ad_format = "120x600_as";
    google_ad_type = "text_image";
    //2007-01-01: ehm
    google_ad_channel = "*********";
    google_color_border = "FFFFFF";
    google_color_bg = "FFFFFF";
    google_color_link = "000000";
    google_color_text = "000000";
    google_color_url = "3300FF";
    //--></script>
    <script type="text/javascript"
      src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
    <br />
    <br />
    <br />
    <br />
    <br />
    <p><a href="http://www.kickitout.org"><img src="images/kio.gif" alt="kick racism out of soccer" title="kick racism out of soccer" /></a></p>
    </div>	
    <?PHP
    $number = "5";
    $category = "7";
    include("news/show_news.php");
    ?>
    		
    	</div>
    	<div id="right">
    		<ul id="rightnav">
    			<li><a href="podcasts.php">Podcasts</a></li>
    			<li><a href="http://www.sigames.com">SI Games</a></li>
    			<li><a href="shop.php">Shop</a></li>
    			<li><a href="http://blog.americansportsgamer.com">Coach's Corner</a></li>
    			<li><a href="http://theotherfootball.blogspot.com">Al's Blog</a></li>
    		</ul>
    		<div id="right_area">
    			<h1>Buy WWSM!</h1>
    			<p><a href="shop.php"><img src="images/buywwsm.jpg" alt="buy worldwide soccer manager" title="buy worldwide soccer manager"/></a></p> 
    		</div>
    				<center><a href="http://www.bigsoccer.com/forum/in.php?id=" target="_BLANK"><img src="http://www.bigsoccer.com/bigsoccer-network.gif" /></a></center>
    	</div>
    </div>
    </body>
    </html>

    CSS:
    HTML Code:
    /* commented backslash hack \*/ 
    html, body{height:100%;} 
    /* end hack */
    html,body {margin:0;padding:0}
    body {
      font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
      text-align:center;
      background-image:#fff;
      font-size: 11px;
    }
    a img {
      border:none;
    }
    
    #shadows {
      width:775px;
      margin:0 auto;
      text-align:left;
      background: #fff url(images/shadow.gif) repeat-y center center;
      height:83em;
    }
    ul#rightnav {
      float:right;
      width:120px;
      background:#e1e1d6 url(images/footnav.gif) repeat-x left bottom;
      padding:0 0 10px 0;
      list-style:none;
      margin: 0 10px  20px;
      display:inline;
    }
    ul#rightnav li a {
      text-decoration: none;
      display:block;
      width: 98%;
      padding: 1px 1%;
      background-color:#e1e1d6;
      font: 7pt/1.5 verdana, sans-serif;
      color: #000;
    }
    ul#rightnav li a:hover {
      background-color: #dbdcde;
      color: #000;
      }
    ul#rightnav li {
      float:left;
      border-top: 1px solid #000;
      clear:left;
      width:100%;
    }
    #headnav {
      height: 23px;
      background: #e1e1d6;
      text-align: center;
      border-top: 1px solid #565656;
      border-bottom: 1px solid #565656;
    }
    #header {
      position: relative;
      border-bottom: 1px solid #ececec;
      height: 55px;
      background: #d3d9df;
      text-align: left; 
    }
    #asg {
      position:absolute;
      background:url(images/asg.jpg);
      left:431px;
      left:5px;
    }  
    #navcont {
      text-align:center;
      width:400px;
      margin:0 auto 0px;
    }
    ul#top,
    #base {
    color: #2f4f4f; 
    list-style:none;
    margin:0;
    padding:0;
    }
    #base{clear:both;}
    #top li {
      border-bottom: 1px solid #333;
      margin:0 auto;
    }
    #top li,
    #base li {
    float:left;
    border-right: 1px solid #333;
    width:95px;
    padding:2px;
    margin:0 auto;
    }
    .last {border-right:none!important}
    ul#li2 {
      float:left;
      list-style:none;
      border-right: 1px solid #bbb;
      width:95px;
      margin:0 auto;
    }
    ul a{
    position:relative;
    text-decoration:none;
    } 
    #right_area {
      width:110px;
      background:#fff;
      border:1px solid #ccc;
      margin-top:2em;
      clear:both;
      padding:0 0 10px 10px;
      margin: 0 15px 20px; 
    }
    #right_area h1{
    	background:#fff;
    	padding:2px;
    	font-size:100%;
    	color:#aaa;
    	margin:-.8em 1em 1em;
    	float:right;
    	position:relative;
    }
    #right_area p{clear:both}
    #right {
        float:right;
        background:#fff;
    	width:145px;
    	margin:0 0 10px 0;
    	margin: 0 10px  20px;
    }
    #main-container{
        position:relative;
        background:#fff;
        float:left;
    	width:585px;
    	margin:15px 0 0 5px;
    }
    #left_ad {
      float:left;
      background:#fff;
      width:120px;
      margin-left:5px;
      padding-right:15px;
    }
    /* clear floats without structural mark up - do not alter */
    .clearfix:after {
    	content:"."; 
    	display:block; 
    	height:0; 
    	clear:both; 
    	visibility:hidden;
    }
    .clearfix {
    	display:block;
    }
    
     /* mac hide \*/
    	* html .clearfix {height: 1%;}
    	  .clearfix {display: block;}
     /* End hide */
    Time for more coffee...

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by XiledWeb View Post
    I'm thinking perhaps its either inheriting a value from another div
    No, it's because you've given left & right margins to the other elements in #right, but haven't given the image the same.

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

    That center tag is never going to work because the element above isn't really centred. You shouldn't sue the center tag anyway as it is deprecated in strict and is a presentational element anyway.

    If you look at what you've got then the remedy becomes clear.

    Your containing div #right is 145px wide:

    Your #rightarea inner div is 110 + 10 + 2 = 122px wide

    However you have given #rightarea a margin left and right of 15px. That would make the width = 152px wide which is 7px too wide for the element you are placing it in anyway.

    Ignoring that for the minute anyway we know that your soccerimg is 120px wide and therefore to align it width your #rightarea div it needs to be 16px from the left.

    The easiest way to do this is to give it a class and place it there exactly.

    Code:
    img.bigs{display:block;margin-left:16px}
    Code:
        <div id="right">
            <ul id="rightnav">
                <li><a href="podcasts.php">Podcasts</a></li>
                <li><a href="http://www.sigames.com">SI Games</a></li>
                <li><a href="shop.php">Shop</a></li>
                <li><a href="http://blog.americansportsgamer.com">Coach's Corner</a></li>
                <li><a href="http://theotherfootball.blogspot.com">Al's Blog</a></li>
            </ul>
            <div id="right_area">
                <h1>Buy WWSM!</h1>
                <p><a href="shop.php"><img src="http://www.americansportsgamer.com/images/buywwsm.jpg" alt="buy worldwide soccer manager" title="buy worldwide soccer manager"/></a></p>
            </div>
            <a href="http://www.bigsoccer.com/forum/in.php?id=" target="_BLANK"><img src="http://www.bigsoccer.com/bigsoccer-network.gif" class="bigs" /></a> </div>
    </div>
    </body>
    </html>
    IE is actually being pushed 1px wider due to the h1 that you have applied em padding to which along with the text widths is too large for the container so it stretches it. Remove the left and right margin and center the text instead.

    Code:
    #right_area h1{
        background:#fff;
        padding:2px;
        font-size:100&#37;;
        color:#aaa;
        margin:-.8em auto 1em;
        float:right;
        position:relative;
    }
    That aligns the element perfectly for me in Firefox and Ie.

    You must be careful and precise with your dimensions as IE will always stretch a container if the content doesn't fit and other browsers will just let the content overflow but will not change the parents dimensions.
    Last edited by Paul O'B; May 6, 2007 at 09:14.

  4. #4
    SitePoint Addict XiledWeb's Avatar
    Join Date
    May 2005
    Location
    Nashville
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks - for some reason I didn't even think of giving the img a class of its own. You live and learn...


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
  •