468,512 Members | 1,500 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,512 developers. It's quick & easy.

strange behavior with IE and margin...

this is really strange... I cant find what is wrong...

so, #botonera have a left margin of 18px, but IE make it 36px!
If I put a margin of 30px, IE make it 60px!
I am crazy?
<!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>hello world</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css" media="screen, tv, projection">
body, html {
margin: 15px 0px 0px 0px;
padding: 0px;
background: #fff;
color: #000;
}

body {
min-width: 764px;
}

#contenedora {
background: #fff;
margin: 0 auto;
width: 764px;
height: 419px;
}

#principal {
position: relative;
background: #514c38;
float: left;
width: 382px;
height: 419px;
font: .7em Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #eeeeee;
}

#contenido {
float: right;
width: 290px;
text-align: right;
padding: 0 10px 0 0;
}

#contenido h2, #contenido h3 {
padding: 0;
margin: 0;
color: #35ad9b;
font-weight: bold;
font-size: 1.1em;
}

#botonera {
float: left;
padding: 0;
margin: 0 0 0 18px;
width: 60px;
height: 34px;
border: 1px dashed #eee;
background: #eeffee;
}

#navegacion {
position: absolute;
bottom: 0;
right: 0;
padding: 0;
margin: 0 15px 15px 0;
text-align: right;
}

#navegacion ul{
margin:0;
padding:0;
list-style:none;
}

#navegacion li{
display:inline;
margin:0;
padding:0;
}

#imagen {
float: right;
width: 382px;
height: 419px;
background: #fff;
}

</style>

</head>
<body>
<div id="contenedora">

<div id="principal">
<img src="cabecera_con_d.gif" alt="" width="382" height="85" />

<div id="contenido">
<h2>Mi mamá me mima</h2>
Vamos con la descripci&oacute;n! <em>Italica</em>... <strong>negriita</strong>....<br /><br />

Fotograf&iacute;a de mate para tomar mate mammamamammama.
</div>
<div id="botonera">
<img src="enlaceportfoliooff.gif" alt="" width="60" height="17" /><br />
<img src="enlacecontactooff.gif" alt="" width="60" height="17" />
</div>
<div id="navegacion">asdsa</div>
</div>
<div id="imagen"><img src='lindafoto.jpg' alt='' align='top'/></div>

</div>

</body>
</html>

--
Luciano A. Ferrer
la**************@SacaDMEgmail.com
http://relojurbano.com.ar .algún día volverás.

.... Vencía el que se despojaba de todo.
Jun 12 '06 #1
3 1942
"Luciano A. Ferrer" <al************@arnet.com.ar> wrote:
so, #botonera have a left margin of 18px, but IE make it 36px!
If I put a margin of 30px, IE make it 60px!
I am crazy?
No, it's IE that's is crazy.
#botonera {
float: left;
margin: 0 0 0 18px;
}


If you have a style with float: left and margin-left: XX then IE will
make margin-left twice the size it should be (and the same with float:
right and margin-right)

See http://www.positioniseverything.net/...ed-margin.html
for more details and some suggested fixes.

Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jun 12 '06 #2
Steve Pugh ha escrito lo siguiente el 12/06/2006 04:10:
#botonera {
float: left;
margin: 0 0 0 18px;
}


If you have a style with float: left and margin-left: XX then IE will
make margin-left twice the size it should be (and the same with float:
right and margin-right)

See http://www.positioniseverything.net/...ed-margin.html
for more details and some suggested fixes.


wow, thanks a lot Steve
It was the first time it happened to me, what an odd behavior... :)

--
Luciano A. Ferrer
la**************@SacaDMEgmail.com
http://relojurbano.com.ar .algún día volverás.

.... Vencía el que se despojaba de todo.
Jun 12 '06 #3
Luciano A. Ferrer wrote:
Steve Pugh ha escrito lo siguiente el 12/06/2006 04:10:
#botonera {
float: left;
margin: 0 0 0 18px;
}


If you have a style with float: left and margin-left: XX then IE will
make margin-left twice the size it should be (and the same with float:
right and margin-right)

See http://www.positioniseverything.net/...ed-margin.html
for more details and some suggested fixes.


wow, thanks a lot Steve
It was the first time it happened to me, what an odd behavior... :)


I have seen comments like that made quite often in regard to IE :)

--
"The most convoluted explanation that fits all the available and made-up
facts is the most likely to be believed by conspiracy theorists"
Jun 12 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Hartmut J?ger | last post: by
9 posts views Thread by Robert Misiorowski | last post: by
1 post views Thread by Luigi | last post: by
16 posts views Thread by brian.ackermann | last post: by
1 post views Thread by shapper | last post: by
10 posts views Thread by silverbob | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.