SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot alix's Avatar
    Join Date
    Jun 2006
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question A gap between sliced images

    The page looks good in firefox and safari but in ie6 you can see a gap between 2 sliced images.

    Here's the (x)html:
    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <link href="style.css" rel="stylesheet" type="text/css">
    <title>inter - Televisi&oacute;n + Internet + Telefon&iacute;a</title>
    <link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.inter.com.ve/temp/feed.xml" />
    	<script type="text/javascript" src="ufo.js"></script>
    	<script type="text/javascript">
    		var banner = { movie:"swf/adimage.swf", width:"250", height:"250", majorversion:"6", build:"0" };
    		UFO.create(banner, "ad");
    		var especiales = { movie:"swf/2007_portadaContenido.v2.2.swf?interval=60000", width:"510", height:"250", majorversion:"6", build:"0" };
    		UFO.create(especiales, "content");
    	</script>
    <style>
    #content{width:510px;}
    </style>
    </head>
    <body>
    <div id="container"> 
      <div id="mainheader"> 
    	<div class="blank2">		
    	</div><!-- for decoration only -->
      </div>
      <div id="header">
    	<div style="margin: 0 0 10px 0;"> 
    	<div style="float: left; margin: 0px 140px 0px 0px"><a href="/"><img height=75 alt="" src="images/logo-header.gif" width=159 border=0></a></div>
    	<div style="margin-top: 20px"><a href="/productos.html"><img alt="" src="images/productos_off.gif" border=0></a><a href="/servicios/"><img alt="" src="images/servicios_off.gif" border=0></a><a href="/aliados/"><img alt="" src="images/aliados_off.gif" border=0></a><a href="/contenido/"><img alt="" src="images/entretenimiento_off.gif" border=0></a></div>
    	</div>
    	<img height=210 alt=patricia src="images/portada_v3-sliced_01.gif" width=325><img height=210 alt=intercable src="images/portada_v3-sliced_02.gif" width=97 useMap=#Map border=0><img height=210 alt=spacer src="images/portada_v3-sliced_03.gif" width=11><img height=210 alt=interlink src="images/portada_v3-sliced_04.gif" width=97 useMap=#Map2 border=0><img height=210 alt=spacer src="images/portada_v3-sliced_05.gif" width=10><img height=210 alt=intertel src="images/portada_v3-sliced_06.gif" width=99 useMap=#Map3 border=0><img height=210 alt=spacer src="images/portada_v3-sliced_07.gif" width=10><img height=210 alt=tripleplay src="images/portada_v3-sliced_08.gif" width=99 useMap=#Map4 border=0><img height=210 alt=spacer src="images/portada_v3-sliced_09.gif" width=27>
      </div>
      <div id="mainnav"> 
    	<div id="left-corner-home"></div>
    	<div id="right-corner-home"></div>
    	<div id="content-barra-home">
    		<div id="form-home" style="float: left">
    			<form action="/servicios/consultas/verificar.html" method="post" name="frmLogin" target="_self" id="frmLogin" >
    				<p>ATENCION AL CLIENTE</p>
    				<input name="usuario" id="usuario" value="e-mail" size="11" class="mini" onFocus="volvercon('usuario', 'e-mail');" onBlur ="volvercon('usuario', 'e-mail');" >
    				<input name="password" type="password" id="password" value="contraseña" size="11" class="mini" onFocus="volvercon('password', 'contraseña');" onBlur="volvercon('password', 'contraseña');">
    				<input class="mini" type="submit" value=">" >
    			</form>
    		</div>
    		<div style="padding: 3px 0 0 25px; float: left;">
    			<p><A href="#">Registrese</a></p><p><A href="#">¿Olvidaste tu contraseña?</a></p>
    		</div>
    		<div class="lined-images">
    			<p style="padding: 6px 0 0 25px; background: url(images/barra-home/portada_webmail.gif) no-repeat; height: 25px"><a href="#">Webmail</a></p>
    		</div>
    		<div class="lined-images">
    			<p style="PADDING-RIGHT: 0px; PADDING-LEFT: 25px; BACKGROUND: url(images/barra-home/portada_videomail.gif) no-repeat; PADDING-BOTTOM: 0px; PADDING-TOP: 6px; HEIGHT: 25px"><A href="#">Videomail</a></p>
    		</div>
    		<div class="lined-images">
    			<p style="padding: 6px 0 0 25px; background: url(images/barra-home/portada_videochat.gif) no-repeat; height: 25px"><a href="#">Videochat</a></p>
    		</div>
    	</div>
      </div>
      <div id="sidebar">
    	<div id="ad"></div>
      </div>
      <div id="content"> 
      </div>
      <div id="clearfooter"></div><!-- to clear footer -->
      <div id="footer"> 
        <div class="divider1"></div>
        <div class="blank"></div><!-- for decoration only -->
    	<div id="left-corner"></div>
    	<div id="right-corner"></div>
    	<div id="footer-links">
    	<A class=footer href="/empresa/">La Empresa</a>&nbsp;&nbsp;&nbsp;&nbsp;
    	<A class=footer href="/anuncie/">Anuncia en Inter</a>&nbsp;&nbsp;&nbsp;&nbsp;
    	<A class=footer href="/empresa/rrhh_cv.html">Trabaja con nosotros</a>&nbsp;&nbsp;&nbsp;&nbsp;
    	<A class=footer onclick="window.open('http://200.8.57.5:8080/GxWeb/servlet/hweb301','intranet','status=yes,scrollbars=yes,resizable=yes,width=800,height=600,top=1,left=1')" href="#">Intranet</a>	&nbsp;&nbsp;&nbsp;&nbsp;
    	<A class=footer href="/files/politicas_de_uso_aceptable.pdf">Políticas de uso aceptable</a>
    	</div>
      </div>
    </div>
    <map name="Map" id="tvMap"><area shape="RECT" coords="4,33,92,163" href="tv/" target="_self" alt="intercable-link">
    </map>
    <map name="Map2" id="internetMap"><area shape="RECT" coords="9,37,87,179" href="internet/" target="_self" alt="interlink-link">
    </map>
    <map name="Map3" id="telefoniaMap"><area shape="RECT" coords="9,30,91,178" href="telefonia/" target="_self" alt="intertel-link">
    </map>
    <map name="Map4" id="tripleplayMap"><area shape="RECT" coords="5,40,93,179" href="/promociones/tripleplay.html" target="_self" alt="tripleplay-link">
    </map>
    </body>
    </html>

    And here's the CSS:
    Code CSS:
    html, body{height:100%;} 
     
    html,body { margin: 0; padding: 0; }
     
    body {		
    	font: x-small verdana, arial, hevetica, sans-serif;
    	text-align: center;
    	background-color: #fcfcfb;
    }
     
    #container {
    		margin-left:auto;
    		margin-right:auto;
    		width: 775px; 
    		text-align: left;
            	position:relative;
     
    }
     
    * html #container {height:100%;}
     
    * html #container {width:777px;w\idth:775px;}
     
    * html body{font-size:xx-small;f\ont-size:x-small}
     
    #mainheader {
    	position:absolute;
    	left:0;top:0;
    	height: 310px;
    	width:100%;
    	z-index:1;
    }
     
    #header {
    	height: 310px;
    	width:100%;
    	margin: 0px 0px 5px 0px;
    	position:relative;
    	z-index:2;
    	overflow:hidden;
    }
     
    * html #mainheader {height:311px;he\ight:310px}
    * html #header {height:310px;he\ight:310px}
     
    #mainnav {
    	width:100%;
    	height: 45px;
    	z-index:2;
    	font-size:80%;
    }
     
    * html #mainnav{height:47px;he\ight:45px}
     
    #left-corner-home{height:45px; width:7px; float:left; background: url(images/barra-home/barrahome-01.gif) no-repeat;}
     
    #right-corner-home{height:45px; width:7px; float:right; background: url(images/barra-home/barrahome-02.gif) no-repeat;}
     
    #content-barra-home{
    		height:45px; 
    		width:auto; 
    		padding:2px 0 0 0px; 
    		display:block; 
    		background: url(images/barra-home/barrahome-bg.gif) repeat-x; 
    		font-family: verdana, tahoma, arial, sans; 
    		font-weight:bold;
    		color:#fcfcfb;
    }
     
    #content-barra-home a{color:#fcfcfb;}
     
    #sidebar {
    	float: right;
    	width: 144px;
    	padding:5px 10px;
    }
     
    #content {width: 621px; padding:5px 0 0 0; height:auto;}
     
    #content p, #sidebar p, #mainnav p, #header p,#footer p  {margin:0 5px 5px 5px}		
     
    #footer	{
    	position:absolute;
    	bottom:0;
    	width:775px;
    	height: 47px;
    }
     
    #footer p {margin:0;padding:0; text-align:center;}
     
    #left-corner{height:47px; width:7px; float:left; background: url(images/footer/footer-01.gif) no-repeat;}
     
    #footer-links{
    	height:47px; 
    	width:auto; 
    	padding:15px 0 0 0px; 
    	display:block;
    	background: url(images/footer/footer-bg.gif) repeat-x; 
    	text-align:center; 
    	font-family: verdana, tahoma, arial, sans; 
    	font-weight:bold;
    }
     
    #right-corner{height:47px; width:7px; float:right; background: url(images/footer/footer-02.gif) no-repeat;}
     
    * html #footer {height:48px;he\ight:47px;}
     
    .divider1 {
    	width:100%;
    	height:5px;
    	overflow:hidden;
    	position:relative;
    }
     
    #clearfooter {height:47px;width:100%;clear:both;}
     
    .blank , .blank2 {
    	position:absolute;
    	left:547px;
    	width:7px;
    	height:0px;
    	overflow:hidden;
    }
     
    .blank {top:-1px;}
     
    .blank2 {bottom:-1px;}
     
    #ad{ widht:250px; height:250px;float:left; clear:right; position:absolute; right:0px;}
     
    .lined-images{
    padding: 8px 0 0 25px;
    float: left;
    }
     
    * html .lined-images{width:15px;}

    Here's how it looks:



    I tried several changes in the css but I haven't found the solution . Any suggestions?

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

    That's a bit hard to debug without seeing the page as it should be with images etc.

    Ar a guess I would say that some issues are the 3px jog (see faq on floats) on your floated corners.


    Try this and see if it sorts ut the footer for you:
    Code:
    * html #left-corner{margin-right:-3px;} 
    * html #right-corner{margin-left:-3px;}

    If it does then apply the same logic to the other similarly styled elements.

    Otherwise we would need to see a link or upload a working zip complete with images.

  3. #3
    SitePoint Zealot alix's Avatar
    Join Date
    Jun 2006
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    HI,

    That's a bit hard to debug without seeing the page as it should be with images etc.

    Ar a guess I would say that some issues are the 3px jog (see faq on floats) on your floated corners.


    Try this and see if it sorts ut the footer for you:
    Code:
    * html #left-corner{margin-right:-3px;} 
    * html #right-corner{margin-left:-3px;}

    If it does then apply the same logic to the other similarly styled elements.

    Otherwise we would need to see a link or upload a working zip complete with images.
    Hi Paul, your suggestion did work!

    Thanks!

    I'm eliminating the tables from that website, it's going to take me some time...

  4. #4
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry you already have my sugestion... that'll teach me to read posts properly!


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
  •