A gap between sliced images

**alix** · Oct 16, 2007 08:29

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?

**Paul O'B** · Oct 16, 2007 14:09

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.

**alix** · Oct 17, 2007 07:25

Originally Posted by Paul O'B

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...

**james_littler** · Oct 19, 2007 05:12

sorry you already have my sugestion... that'll teach me to read posts properly!

User Tag List

Thread: A gap between sliced images

Thread Tools

Display

A gap between sliced images

Bookmarks

Bookmarks

Posting Permissions