Foros del Web » Creando para Internet » CSS »

URGENTE - Margen diferente en IE6 y Firefox

Estas en el tema de URGENTE - Margen diferente en IE6 y Firefox en el foro de CSS en Foros del Web. Buenas a todos. Os adjunto el código fuente de las 2 páginas afectadas. El problema es que la imagen central (chica con los brazos abiertos) ...
  #1 (permalink)  
Antiguo 17/06/2008, 06:53
 
Fecha de Ingreso: junio-2008
Mensajes: 5
Antigüedad: 9 años, 5 meses
Puntos: 0
Exclamación URGENTE - Margen diferente en IE6 y Firefox

Buenas a todos. Os adjunto el código fuente de las 2 páginas afectadas.

El problema es que la imagen central (chica con los brazos abiertos) en Firefox se ve centrada pero en IE6 no. Si os fijáis la imagen azul degradada debajo de la imagen de la chica se ve centrada en Firefox pero en IE6 se ve un poco más a la izquierda. Parece un problema de márgenes. Agradeceré cualquier ayuda.

El código que os adjunto es defaultIE.css (estilos para IE6 y versiones inferiores) y Default.aspx (página content donde reside el problema).

Si queréis probar el resultado en diferentes navegadores, no hace falta que copieis el codigo, podeis acceder a www.filocian.com (tambien a www.filocian.com/Clubs/Club Cala Tamarit/Default.aspx). Os pedirá un usuario y password temporales que son (user: alberto, password: filocian).



defaultIE.css

Código:
/* CSS styles for Template.Master */

* {
	margin: 0;
	padding: 0;
}

body {
	background: #012942;
	font: normal small "Arial", Times New Roman, Trebuchet MS, Helvetica, sans-serif;
	color: #F46600;
}

/*
h1, h2, h3 {
	color: #333333;
}

h2 {
}

h3 {
	font-size: 1em;
}

p, blockquote, ul, ol {
	margin-bottom: 1.5em;
	line-height: 1.65em;
	text-align: justify;
}

p {
}

blockquote {
	margin-left: 2em;
	margin-right: 2em;
	font-style: italic;
}

ul {
	margin-left: 3em;
}

ul li {
}

ol {
	margin-left: 3em;
}

ol li {
}
*/

a {
	text-decoration: underline;
	color: #F46600;
}

a:hover {
	text-decoration: none;
	color: #FF4500;
}

/*
img {
	border: none;
}

img.left {
	float: left;
	margin: 5px 20px 0 0;
}

img.right {
	float: right;
	margin: 5px 0 0 20px;
}
*/

/* Main Box */

.filocianBox
{
    width:1024px;
    height:1110px;
    background: #131e30;
    margin: 20px auto;
    padding-bottom: 15px; 
}

.matchplayBox
{
    width:1017px;
    height:1050px;
    background: url(contentMatchPlay.png);
    margin: 20px auto; 
}

/* Header */

#header 
{
	width: 961px;
	height: 139px;
    margin: 10px auto;
    background: url(header.png);
}

/* Header > Menu */
/**************************************************/
#menu
{
    position: relative;
    float: left; 
    height:139px;
    width: auto;
    font-family: Times New Roman;
    font-size: 12px;
    z-index: 100;
}

#menu a
{
    color: Black;   
}

#menu a:hover
{
    color: Black;
}

.menuStyle
{
    margin-top: 114px;
    margin-left: 15px;
    width: auto; 
}

.staticMenu
{  
}

.staticMenuItem
{
    width: 85px;
    height: 25px;
    background: url(menu.jpg);
    color: Black;
    text-align: center;
}

.staticHover
{
    /*background: url(menuHover.png);*/
}

.staticHover a
{
    color: Black;   
}

.staticSelected
{
}

.dynamicMenu
{
    
}

.dynamicMenuItem
{
    width: 100px;
    height: 23px;
    text-align: center;
    text-decoration: none;
    background-color: #5593DE;
    vertical-align: middle;
    color: Black;
    border: 1px solid #F46600;
    background-color: #FFE4C4;
}

.dynamicHover
{  
}

.dynamicHover a
{
    color: Black;
    font-weight: bold;
}

.dynamicSelected
{
}

/*****************************************************/

/* Login Box */
#loginbox
{
   position: relative;
   float:right;
   width: 140px;
   height: 65px;
   padding: 15px 2px 2px 2px;    
   font-size: 10px;
   color:Red;
}

#loginbox input
{
   color:black;
   background-color: #f7d582;
   font-size: 10px;
}

#welcomebox
{
   font-size: 12px;
   text-align: right;
   padding-right:15px;
}

.loginName
{
   color:White;  
}

/* Boxed Style */

.boxed {
}

.boxed .title 
{
}

.boxed .title h2 {
	height:26px;
	padding: 12px 0 0 0;
	text-align: center;
	text-transform: uppercase;
	font-size: 1em;
	font-weight: bold;
	font-family: Times New Roman;
	color: #F46600;
}

.boxed .content 
{
    height:161px;
    margin-top: 2px;
	background: url(contentSmall.png);
}

.boxed .content2
{
    height: 230px;
    margin-top: 2px;
    background: url(contentMedium.png);   
}

.boxed .content3
{
    height: 209px;
    margin-top: 2px;
    background: url(contentMedium.png);   
}

/* Post */
/*
.post {
}

.post .title {
	background: #3C74E6 url(images/img06.gif) repeat-x;
	font-size: 1em;
	text-transform: uppercase;
	color: #FFFFFF;
}

.post .title span {
	display: block;
	height: 28px;
	padding: 12px 0 0 20px;
}

.post .date {
	margin-top: -25px;
	padding-bottom: 10px;
	padding-right: 20px;
	text-align: right;
	font-size: x-small;
	color: #FFFFFF;
}

.post .date .month {
}

.post .date .day {
}

.post .date .year {
}

.post .meta {
	clear: both;
}

.post .meta p {
	margin: 0;
	padding: 10px 20px 40px 20px;
	border-top: 1px dotted #CCCCCC;
	line-height: normal;
	font-size: x-small;
}

.post .story {
	padding: 20px;
	border-top: 1px solid #FFFFFF;
	background: url(images/img07.gif) repeat-x;
}
*/

/* Site Map Path */

#breadcrumb
{
   position: relative;
   clear: both;
   height: 20px;
   margin: 12px 0px 11px 45px;
   color: White;
   font-size: 11px;	
   text-align: left;
}

#breadcrumb a
{
   color: #5593DE;
}

/* Content */

#content 
{
    position: relative;
	width: 961px;
	margin: 0 auto;
}

/* Content > Main */

#main {
	float: left;
	width: 620px;
	height: 890px;
	margin-left: 20px; 
	background: url(centerContent.png) center no-repeat;
	color: Black;
}

/* Content > Main > Welcome */

/*#welcome {
}*/

/* Content > Main > Example */

/*#example {
}*/

/* Content > Sidebar */

#sidebar {
	float: left;
	width: 150px;
}

#sidebar .boxed .title h2 
{
    background: #131e30 url(head1.jpg) no-repeat left top;
}

/* Content > Sidebar > Lugares */

#lugares
{
    height:200px;
    margin-bottom: 1px;
}

.clubContent
{
    margin-left: 5px;
    width: 140px;
    font-size: 12px;
    color: White;
    font-weight: bold;   
}

/* Content > Sidebar > News*/

#news
{
    margin: 10px auto;
}

#news ul {
	margin-left: 5px;
	list-style: none;
}

#news h3 {
	font-size: 12px;
	margin-top: 0px auto;
	margin-bottom: 5px;
	text-decoration: underline;
	color: White;
	font-weight: bold;
}

#news p {
	line-height: normal;
	font-size: 12px;
	font-weight: bold;
	margin-bottom: 10px;
	margin-right: 3px;
}

#news a {
	text-decoration: none;
	color: Black;
}

/* Content > Sidebar2 */

#sidebar2 {
	float: left;
	width: 150px;
	padding-left: 20px;
}

#sidebar2 .boxed .title h2 {
	background: #131e30 url(head2.jpg) no-repeat right top;
}

/* Content > Sidebar2 > Encuesta */

#encuesta {
}

/* Content > Sidebar2 > ad120x600 */

#ad120x600 
{
    margin: 10px auto;
	text-align: center;
}

/* Footer */

#footer {
	/*clear: both;*/
	width: 960px;
	height: 25px;
	margin: 0 auto;
	/*padding: 20px 0;*/
	padding-bottom: 20px;
	/*background: #131e30;*/
}

#footer p {
	margin: 0;
	text-align: center;
	line-height: normal;
	font-size: x-small;
}

#footer a {
	text-decoration: underline;
	color: #F46600;
}

#footer a:hover {
	text-decoration: none;
	color: #FF4500;
}

/* Footer > Legal */

#legal 
{
  color: #666666;  
}

/* Footer > Links */

#links {
}

/* Footer > corporateServices */

#corporateServices 
{
    padding-bottom: 25px;
}

/******************************************/
/* User Controls: NewsletterBox & PollBox */
/******************************************/


.pollbox
{
   font-size: 11px;
   color: Black;
   text-align: center;
}

.pollbox a
{
   color: Black;
}

.pollcontent
{
   padding: 6px;
}

.pollquestion
{
   font-size: 13px;
   font-weight: bold;
   text-align: center;
}

.polloptions
{
   padding-top: 10px;
   padding-bottom: 4px;
   margin-left: 10px;
   text-align: left;
}


...

Default.aspx

Código:
<%@ page language="C#" autoeventwireup="true" inherits="Filocian.UI.Default, App_Web_ffq-fijd" title="Bienvenidos a la web de Filocian" masterpagefile="~/Template.master" %>
<%@ MasterType VirtualPath="~/Template.master" %>
<%-- Add content controls here --%>
<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="MainContent">
<div style="text-align:center">
    <img src="css/fondoFilocian.jpg" runat="server" alt="" width="600" height="500" border="0" />
</div>
<br />
<div class="sectiontitle">
¡Bienvenidos a la nueva web de Filocian!
</div>
<div class="sectionsubtitle" style="margin-right:55px">
<br />
<p>  
Filocian Ibérica expresa con su símbolo la libertad individual y la fuerza de voluntad. Significa que puedes mejorar, cambiar y dirigir tu vida. Alcanzar tus sueños con buena salud, una plena vida social y un crecimiento personal.
</p>
<br />
<p>
Para ello aquí podrás visitar desde los lugares dónde nos encontramos hasta las actividades que llevamos a cabo y ser tú el protagonista.  
</p>
<br />
<p>
¡No esperes más y disfruta ya del contenido!
</p>
</div>
</asp:Content>
  #2 (permalink)  
Antiguo 17/06/2008, 09:40
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: URGENTE - Margen diferente en IE6 y Firefox

Yo en tu lugar probaría quitando el div que envuelve la imagen:

<div style="text-align:center">
<img src="css/fondoFilocian.jpg" width="600" height="500" border="0" />
</div>

y añadiendo a la css:

#main img {margin: 0 auto;}

A ver si eso resuelve.

Mikel.
  #3 (permalink)  
Antiguo 17/06/2008, 09:57
 
Fecha de Ingreso: junio-2008
Mensajes: 5
Antigüedad: 9 años, 5 meses
Puntos: 0
De acuerdo Respuesta: URGENTE - Margen diferente en IE6 y Firefox

Funciona perfectamente. Muchas gracias.
  #4 (permalink)  
Antiguo 17/06/2008, 09:58
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: URGENTE - Margen diferente en IE6 y Firefox

De nada, es un placer. Me alegro de que funcione.

Mikel.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 15:50.