Log in

View Full Version : can't fix ie spacing problem please help


cheetrowe
03-14-2008, 04:17 PM
hello there,

first, thanks in advance for any help you can provide. i'm turning a previously table-based layout into a css layout, and i'm having problems in ie, i think i'm viewing in version 6.

the link and my css and code are posted below so you can see what's up. the problem has to do with the 4 images in the bottom section of the page, displayed as clickable links in a horizontal line with some space in between. it displays well in firefox but the layout breaks in ie.

i've read about the ie margin doubling bug for floated elements, but i guess i didn't quite understand the solution, as i tried working with the display inline property and it didn't seem to change anything. i've also played around for hours with negative margins in *html fix attempts, which got me close but there were still problejms.

i'm guessing this solution is well known, but i haven't been able to find it yet, so any help is greatly appreciated...thanks! :)

LINK
http://www.sumuestra.info/torrebari2/principal3.html


CSS

body {
background: #FFF;
font: 11px Palatino Linotype, Book Antiqua, Palatino, sans-serif;
text-align: justify;
color: #000;
}

/* Container for all of the pages content */

#contenedor {
margin: 20px auto;
padding: 0;
width: 700px;
}


/* Main Content Window */

#contenido {
float: left;
width: 676px;
height: 200px;
margin: 0px auto;
padding: 10px;
border-left: 2px solid #000044;
border-right: 2px solid #4488ff;
font: 12px Palatino Linotype, Book Antiqua, Palatino, sans-serif;
text-align: center;
color: #000;
}

/* This is the top and bottom border, the ones that fade from dark to light blue */

#galeriasBorde {
float: left;
width: 700px;
height: 25px;
margin: 0px auto;
padding: 0;
background: url(images/seperadorSuperior.png) repeat-y;
}

/* This is the left border (the dark blue one) */

#galeriasSeparadorIzquierdo {
float: left;
width: 40px;
height: 144px;
margin: 0 14px 0 0;
padding: 0;
background: #000044;
}

/* Pic 1 */

#galeriasFoto1 {
float: left;
display: inline;
width: 120px;
height: 96px;
margin: 14px;
padding: 0;
background: #FFF;
}

/* Pic 2 */

#galeriasFoto2 {
float: left;
display: inline;
width: 120px;
height: 96px;
margin: 14px;
padding: 0;
background: #FFF;
}

/* Pic 3 */

#galeriasFoto3 {
float: left;
display: inline;
width: 120px;
height: 96px;
margin: 14px;
padding: 0;
background: #FFF;
}

/* Pic 4 */

#galeriasFoto4 {
float: left;
display: inline;
width: 120px;
height: 96px;
margin: 14px;
padding: 0;
background: #FFF;
}

/* Right Border (The light blue one) */

#galeriasSeparadorDerecho {
float: left;
width: 40px;
height: 144px;
margin: 0 0 0 14px;
padding: 0;
background: #4488ff;
}

/* Footer */

#pie {
float: left;
width: 700px;
height: 30px;
margin: 0px auto;
padding: 0;
background: #FFF;
font: 11px 700 small-caps Palatino Linotype, Book Antiqua, Palatino, sans-serif;
color: #000066;
}


#galerias a {
padding: 0;
margin: 0;
text-decoration: none;
border: 2px groove #000066;
}



HTML


<!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>Torre Bari</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Author" content="Rocky Citro www.technical-edit.com/webpages.html">
<meta name="Keywords" content="departamentos, quito, ecuador">
<meta name="Description" content="Conjunto de departaentos en Quito. Todo cerca de usted...y usted cerca de todo...">

<link href="estilo2.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="crossfade.js"></script>

</head>

<body>

<div id="contenedor">

<div id="encabezadoImagen">

<ul id="gallery">
<li><img src="images/departamento2.jpg" width="350" height="150" /></li>
<li><img src="images/departamento.jpg" width="350" height="150" /></li>
<li><img src="images/departamento3.jpg" width="350" height="150" /></li>
<li><img src="images/departamento4.jpg" width="350" height="150" /></li>
<li><img src="images/departamento5.jpg" width="350" height="150" /></li>
</ul>

</div>

<div id="encabezado">
</div>

<div id="contenido">

<div id="menu">
<ul>
<li><a href="principal.html">Principal</a></li>
<li><a href="somos.html">Quienes Somos</a></li>
<li><a href="departamentos.html">Planes de Departamentos</a></li>
<li><a href="conjunto.html">Sobre el Conjunto</a></li>
<li><a href="convenios.html">Convenios</a></li>
<li><a href="preguntas.html">Preguntas Frecuentes</a></li>
<li><a href="contactenos.html">Contáctenos</a></li>
</ul>
</div>

<br />
<br />
<br />
<br />
<p>Bienvenidos a la página de Torre Bari, donde le presentamos nuestros departamentos de calidad. El conjunto de Torre Bari está muy bien ubicado en el sector BlahBlah de Quito. Llamenos ya para ver los departamentos en persona.</p>

</div>

<div id="galeriasBorde"></div>

<div id="galeriasSeparadorIzquierdo"></div>

<div id="galeriasFoto1">
<a href="foto1_grande.html"><img src="images/foto1.jpg" width="120" height="120" alt="Foto1"></a>
</div>

<div id="galeriasFoto2">
<a href="foto2_grande.html"><img src="images/foto2.jpg" width="120" height="120" alt="Foto2"></a>
</div>

<div id="galeriasFoto3">
<a href="foto3_grande.html"><img src="images/foto3.jpg" width="120" height="120" alt="Foto3"></a>
</div>

<div id="galeriasFoto4">
<a href="foto4_grande.html"><img src="images/foto4.jpg" width="120" height="120" alt="Foto4"></a>
</div>

<div id="galeriasSeparadorDerecho"></div>

<div id="galeriasBorde"></div>

<div id="pie"><center><p>&copy 2008 torrebari.com</p></center></div>

</div>

</body>

</html>
boogyman
03-14-2008, 07:04 PM
hello and welcome to the forums, and thank you for the descriptive title

Please take a second to review our Posting Policies and Regulations (http://dynamicdrive.com/forums/showthread.php?t=24866) especially in regards to #8 (computer code)

Viewing your page, it looks like you would just need to re-arrange the way you are listing your images. Have you thought about putting the images into an unordered list?


<ul id="galeriasFoto">
<li><a href="foto1_grande.html"><img src="images/foto1.jpg" width="120" height="120" alt="Foto1"></a>[/li>
<li><a href="foto2_grande.html"><img src="images/foto2.jpg" width="120" height="120" alt="Foto2"></a></li>
<li><a href="foto3_grande.html"><img src="images/foto3.jpg" width="120" height="120" alt="Foto3"></a></li>
<li><a href="foto4_grande.html"><img src="images/foto4.jpg" width="120" height="120" alt="Foto4"></a></li>
</ul>

then using some CSS to make them display horizontally


<style type="text/css">
ul#galeriasFoto {
height: 144px;
background: #ffffff url('images/seperadorSuperior.png') repeat-y top left;
}
ul#galeriasFoto li {
list-style-type: none; // gets rid of the bullet marks
display:inline; // makes them display horizontally
border: none;
margin-left: 28px; // 14px left, 14px right is what you had before
padding: inherit 0 inherit 0; //default padding on top and bottom, but no horizontal padding
vertical-align: middle; // aligns the images in the middle of the list element.
}
</style>


I would advise you to be careful with using PNG format images, especially in the background. that is a very high resolution image, causing your image size to be very big, that for most purposes you do not need. That image is relatively small, however PNG files slow down page loading, which can cause alot more frustration and be detrimental in the end.

If you open that image in any imaging program you should be able to change it to JPG or GIF formats, which are much more suitable for displaying upon the web.
cheetrowe
03-16-2008, 01:14 AM
Thanks for your reply and the info about the forum rules. I tried using the code you mentioned (although I changed one of the brackets to a carrot in the first hyperlinked image, as I think that was just a typo).

Anyways, for some odd reason, with the code you gave me, ff and ie were still listing the images vertically and with bullets (despite the list-style-type: none; property). I wonder if this has anything to do with the fact that I have another unordered list for the menu, but everything seems well labeled with IDs so that seems strange. I tried taking all of the foto divs out and just making one holder div, placing the list in that one holder div, but that didn't work either. All of the images were still displayed vertically with bullets and the layout was broken in both browsers.

Any idea why this didn't work? I thought your code looked quite good actually, but I'm sure I inserted it while fixing the bracket typo and ensuring that all div names etc. were spelled correctly and called in the html code...Thanks again for any help you can provide, I really appreciate it! :)