Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Apr 2006
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question IE adding extra padding top to a floated image

    Hello Everyone..

    See http://images.cashcade.co.uk/help/mirrorbingo/help.php

    This relies on quite precise element heights to make the rows in this design match between the left and right-hand columns.

    IE seems to be adding extra padding to the top of the game titles and login button causing the container to increase in size. See attached illustration. On the left is IE and FF is on the right.

    If anyone can shed any light on this strangeness, I'd be very grateful to you..
    cheers!

    jon

    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" xml:lang="en" lang="en">
    <head>
    <title><?php print $title; ?></title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <META name="KeyWords" content="<?php print $keywords; ?>">
    <META name="description" content="Closer Bingo - Play online bingo">
    
    
    <base href="http://localhost/mirrorbingo/content/" />
    <link href="style/my_layout.css" rel="stylesheet" type="text/css" />
    
    
    <!--[if lte IE 7]>
    <link href="style/patch_my_layout.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    </head>
    <body>
      <div id="page_margins">
        <!-- start: skip link navigation -->
        <a class="skip" title="skip link" href="#navigation">Skip to the navigation</a>
        <a class="skip" title="skip link" href="#content">Skip to the content</a>
        <div id="header">
        	<map name='headermap'>
    			<area coords='0,0,188,85' >
                <area coords='0,85,188,105'>
    		</map>
        	<img src="v3images/homepage/mbv3_logo_h.jpg"  usemap="#headermap"/>
        </div>
       
        <div id="main">
         <div id="topnav">
            <ul class="nav">
           	<li><a href="">menu item</a></li><span class="pipe"> | </span>
            <li><a href="">menu item</a></li><span class="pipe"> | </span>
    <li><a href="">menu item</a></li><span class="pipe"> | </span>        <li><a href="">Promotions</a></li><span class="pipe"> | </span>
    <li><a href="">menu item</a></li><span class="pipe"> | </span>        <li><a href="">our games</a></li><span class="pipe"> | </span>
    <li><a href="">menu item</a></li><span class="pipe"> | </span>        <li><a href="">winners</a></li><span class="pipe"> | </span>
    <li><a href="">menu item</a></li><span class="pipe"> | </span>        <li><a href="">contact us</a></li>
          	</ul>
            
          </div> 
          <div id="col1">
            <div id="login">
             <img src="v3images/homepage/mbv3_hdg_existing.gif" style="margin:15px 0px 0px 16px"/>
             <div id="loginfields">
             	<span>Alias</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input id="Text1" class="textfield" type="text" maxlength="25" name="Alias" />
                <span>Password</span>&nbsp;
                <input id="Password1" class="textfield"  type="password" class="textfield" type="text" maxlength="25" name="Password" />
                 <div id="forgotten"><a href="" >Forgotten Password?</a></div>
                 <div id="loginbtn"><img src="v3images/homepage/mbv3_btn_go.gif" alt="Login to Mirror Bingo" /></div>
             </div>
             <div class="greystripe" style="margin-top:<?php if (strstr(strtolower( $_SERVER['HTTP_USER_AGENT']),"firefox" )) print "16px"; else print "10px"?>">
                 	<img src="v3images/homepage/mbv3_hdg_login.gif" alt="Login here to start playing" />
                    <p>Login here to start playing</p>
                 </div>
            </div>
            
            <div id="instantwin">
            <ul>	
                <li>
                	<div class="instant_icon"><a href="javascript:play();"><img alt="Multiline slots" src="v3images/homepage/mbv3_iw_img_multi_h.gif"/></a></div>
                    <div class="instant_desc"><a href="javascript:play();"><img class="instant_title" alt="Multiline slots" src="v3images/homepage/mbv3_iw_hdg_multi.gif"/></a>
                        <p class="instant_copy"><a href="javascript:play();">kjhj hjkllh, hjjj lkj jj iuytt Multi</a></p>
                     </div>
                     <br style="clear: both;"/>
                </li>
                
                <li>
                	<div class="instant_icon"><a href="javascript:play();"><img alt="Scratchcards" src="v3images/homepage/mbv3_iw_img_scratch_h.gif"/></a></div>
                    <div class="instant_desc"><a href="javascript:play();"><img class="instant_title" alt="Scratchcards" src="v3images/homepage/mbv3_iw_hdg_scratch.gif"/></a>
                        <p class="instant_copy"><a href="javascript:play();">kjhj hjkllh, hjjj lkj jj iuytt Multi</a></p>
                     </div>
                     <br style="clear: both;"/>
                </li>
                
                <li>
                	<div class="instant_icon"><a href="javascript:play();"><img alt="Roulette" src="v3images/homepage/mbv3_iw_img_roulette_h.gif"/></a></div>
                    <div class="instant_desc"><a href="javascript:play();"><img class="instant_title" alt="Roulette" src="v3images/homepage/mbv3_iw_hdg_roulette.gif"/></a>
                        <p class="instant_copy"><a href="javascript:play();">kjhj hjkllh, hjjj lkj jj iuytt Multi</a></p>
                     </div>
                     <br style="clear: both;"/>
                </li>
                <li>
                	<div class="instant_icon"><a href="javascript:play();"><img alt="3 Reel Slots" src="v3images/homepage/mbv3_iw_img_3reel_h.gif"/></a></div>
                    <div class="instant_desc"><a href="javascript:play();"><img class="instant_title" alt="3 Reel Slots" src="v3images/homepage/mbv3_iw_hdg_3reel.gif"/></a>
                        <p class="instant_copy"><a href="javascript:play();">fghf fgh fun with Hohjhllywood gfff</a></p>
                     </div>
                     <br style="clear: both;"/>
                </li>
                <li>
                	<div class="instant_icon"><a href="javascript:play();"><img alt="Classic Instants" src="v3images/homepage/mbv3_iw_img_classic_h.gif"/></a></div><div class="instant_desc">
                    	<a href="javascript:play();"><img class="instant_title" alt="Classic Instants" src="v3images/homepage/mbv3_iw_hdg_classic.gif"/></a>
                        <p class="instant_copy"><a href="javascript:play();">fghf fgh fun with Hohjhllywood gfff</a></p>
                     </div>
                     <br style="clear: both;"/>
                </li>
                </ul>
                <div class="greystripe" style="margin-top:0px">
                 	<img src="v3images/homepage/mbv3_iw_hdg_instant_h.gif"  />
                    <p>some exciting text!</p>
                 </div>
            </div>
            
          </div>
          <div id="col3">
           	<div id="rowone">
            	<ul>
                	<li style="margin-right:12px">
                    	<div class="inside">
                        	<img src="v3images/homepage/mbv3_phr_joinnow_h.jpg" />
                        </div>
                    </li>
                    <li id="promotablet">
                    	<div class="inside">
                        	<img src="v3images/homepage/mbv3_phr_mainpromo_h.jpg" />
                        </div>
                    </li>
                    <li id="winners">
                    	<div class="inside">
                        	<div class="winner" id="firstwinner">
                            Howdy Doody won <span>&pound;54.00</span>
                            </div>
                            <div class="winner">
                            Howdy Doody won <span>&pound;54.00</span>
                            </div>
                            <div class="winner">
                            Howdy Doody won <span>&pound;54.00</span>
                            </div>
                            <div class="winner">
                            Howdy Doody won <span>&pound;54.00</span>
                            </div> 
                            <div class="greystripe" style="margin-top:21px;width:163px">
                 	<img src="v3images/homepage/mbv3_hdg_recent_h.gif" />
                    <p>some more exciting text!</p>
                 			</div>
                        </div>
                    </li>
                </ul>
            </div>
            <div id="rowtwo">
            	<ul>
                	 <li style="margin-right:12px">
                    	<div class="inside">
                        	<img src="v3images/homepage/mbv3_phr_rowtwo.jpg" alt="Play while you Bingo!" /><div class="greystripe">
                 	<img src="v3images/homepage/mbv3_hdg_prepay_h.gif" />
                    <p>Click here to become a ninja</p>
                 			</div>
                        </div>
                    </li> 
                    <li style="margin-right:12px">
                    	<div class="inside">
                        	<img src="v3images/homepage/mbv3_phr_rowtwo.jpg" alt="Play while you Bingo!" /><div class="greystripe">
                 	<img src="v3images/homepage/mbv3_hdg_community_h.gif" />
                    <p>some more exciting text!</p>
                 			</div>
                        </div>
                    </li>
                    <li style="margin-right:12px">
                    	<div class="inside">
                        	<img src="v3images/homepage/mbv3_phr_rowtwo.jpg" /><div class="greystripe">
                 	<img src="v3images/homepage/mbv3_hdg_news_h.gif" />
                    <p>some more exciting text!</p>
                 			</div>
                        </div>
                    </li> 
                    <li>
                    	<div class="inside">
                        	<img src="v3images/homepage/mbv3_phr_rowtwo.jpg" /><div class="greystripe">
                 	<img src="v3images/homepage/mbv3_hdg_promo_h.gif" />
                    <p>some more exciting text!</p>
                 			</div>
                        </div>
                    </li>
                </ul>
            </div>
             <div id="rowthree">
            	<ul>
                	<li>
                    	<div class="inside">
                        	<img src="v3images/homepage/mbv3_phr_dbl.jpg" /><div class="greystripe">
                 	<img src="v3images/homepage/mbv3_hdg_double_h.gif"/>
                    <p>Click here </p>
                 			</div>
                        </div>
                    </li>
                </ul>
            </div> 
            
            <!-- IE Column Clearing -->
            <div id="ie_clearing"> * </div>
          </div>
        </div>
        <div id="footer">Layout based on <a href="http://www.yaml.de/">YAML</a>
        </div>
      </div>
    </body>
    </html>
    CSS
    Code:
    @charset "UTF-8";
    /**
     * "Yet Another Multicolumn Layout" - (X)HTML/CSS framework
     * (en) stylesheet for screen layout
     * (de) Stylesheet für das Bildschirm-Layout
     *
     * @creator     YAML Builder V1.0.2b (http://builder.yaml.de)
     * @file        basemod.css
     */
    
    @media screen, projection
    {
      /*-------------------------------------------------------------------------*/
    
      /* (en) Marginal areas & page background */
      /* (de) Randbereiche & Seitenhintergrund */
      * {padding:0px; margin:0px}
      body { font-family:Arial, Helvetica, sans-serif }
    	a.skip{display:none}
    img {border:none}
      /* Layout Alignment | Layout-Ausrichtung */
      #page_margins { margin: 0 auto; }
    
      /* Layout Properties | Layout-Eigenschaften */
      #page_margins { width: 950px;  min-width: 950px; max-width: 950px; background: #fff; }
      #header {height:105px; color: #000; background: #fff;background:url(../v3images/homepage/mbv3_slice_header.jpg) repeat-x }
      #main {  background: #fff; padding:10px; min-height:710px }
      #footer { padding: 10px 20px; color:#666; background: #f9f9f9; border-top: 5px #efefef solid; }
    
      /*-------------------------------------------------------------------------*/
    
      /**
       * (en) Formatting content container
       * (de) Formatierung der Inhalts-Container
       *
       */
    
      #col1 { float: left; width: 188px}
      #col2 { display:none}
      #col3 { width: auto; margin: 0 0 0 188px}
    
    	
      /*-------------------------------------------------------------------------*/
      
      .greystripe { color:#FFF; font-size:10px;height: 43px; background:url(../v3images/homepage/mbv3_bg_greystripe.gif) repeat-x; padding:8px 0px 0px 9px}
      .greystripe p {}
      #rowtwo .greystripe{background:url(../v3images/homepage/mbv3_bg_greystriper2.gif) repeat-x; padding:8px 4px 0px 9px; height:62px;width:160px}
      
      #rowthree .greystripe {width:163px}
      
      /*navs*/
      #topnav {margin-bottom:15px;width:100%;  background-color:#000000;  }
    
      .nav {width:100%;  background-color:#000000; text-align:center;padding:0px 0px 4px 0px;}
      .nav li {display:inline;}
      .nav li a {text-transform:uppercase; color:#F4F2E3; font-size:13px; text-decoration:none; font-weight:bold; font-size:12px;  padding:5px 3px}
      .nav li a:hover {text-decoration:none;color:#FFF; background-color:#FFF; color:#000;}
      .nav .pipe {padding:0 2px; color:000}
      
      /*login*/
      #login {height:223px; width:173px; background-color:#0389b8;}
      .textfield {width:81px; height:15px; background:url(../v3images/homepage/mbv3_bg_input.gif) no-repeat; border:0px; padding:4px 0px}
      #loginfields {color:#FFF; font-size:11px; margin-top:10px; padding:5px 0px 0px 15px}
      #loginfields span {padding:4px 0px}
      #loginbtn {margin-left:100px; }
      #forgotten {font-size:smaller; float:right; margin-right:20px; margin-bottom:8px}
      
      
      /*instant win*/
      
      #instantwin {background-color:#0389b8; width:173px; margin-top:15px}
      #instantwin ul {list-style-type:none;padding-top:7px}
      .instant_icon {float:left; padding-bottom:9px; width:51px; margin-left:7px}
      .instant_desc {float:right; padding-bottom:9px; padding-right:7px; width:100px}
      
      /*rows*/
      #rowone ul, #rowtwo ul, #rowthree ul {list-style-image:none;list-style-position:outside;list-style-type:none;}
      #rowone ul li, #rowtwo ul li, #rowthree ul li {float:left}
      #rowone ul li div.inside, #rowtwo ul li div.inside, #rowthree ul li div.inside  {background-color:#0389b8; min-width:173px; max-width:173px}
      #rowone ul li#promotablet div.inside {min-width:359px; max-width:359px}
      #rowone ul li#promotablet {margin-right:14px}
      #rowone #firstwinner{padding-top:10px}
      
    
      
      #rowone div.inside {min-height:223px; max-height:223px}
     #rowtwo li  {margin-top:15px}
     #rowthree li {margin-top:19px}
     #rowtwo ul li div.inside, #rowthree ul li div.inside  {min-height:171px; max-height:171px}
     
      .winner {margin:0px auto; text-align:center; padding:3px 0px}
      .winner span {display:block}
      /*fonts*/
      
      #loginfields a {color:#FFF; text-decoration:none; border-bottom:1px dotted #FFF}
      #loginfields a:hover {border:0px}
      
      .instant_copy {color:#FFFFFF;font-size:0.7em;}
      .instant_copy a {color:#FFFFFF;text-decoration:none;}
      
      .winner {color:#FFF; font-size:12px; font-weight:bold}
    }
      
      
    }
    Attached Thumbnails Attached Thumbnails IE adding extra padding top to a floated image-help.gif  

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    try adding this to get rid of any extra space

    Code:
    * {
    margin:0px;
    padding:0px;
    }

  • #3
    New Coder
    Join Date
    Apr 2006
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts
    oops, i was using the wrong base href so the image paths didnt work.

    now fixed so you can see what i mean.

    http://images.cashcade.co.uk/help/mirrorbingo/help.php

  • #4
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    everything looks exactly the same since you placed that code in there. Where is it messing up at? Im not sure i see it anymore.

  • #5
    New Coder
    Join Date
    Apr 2006
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question IE 7 fault still :( despite vertical-align:top on the image

    Ahh at http://images.cashcade.co.uk/help/mirrorbingo/help.php in Internet Explorer 7


    You will see that I have used vertical-align top on the game titles. I thought this would solve it, but the image just takes up too much space.

    See the attached image. The paragraph has been shifted down a few pixels causing my design to break.

    In Firefox it's fine! Story of my life.

    Any light shed on this would be greatly appreciate, thanks in advance

    Jon Whittlestone
    Attached Thumbnails Attached Thumbnails IE adding extra padding top to a floated image-image_bottom_xtra.png  

  • #6
    New Coder
    Join Date
    Apr 2006
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts
    resolved

    it was .instant_desc a img {display: block}

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Validate and fix all errors in your markup first, see http://validator.w3.org/check?uri=ht...Inline&group=0
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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