Click here to get back home

strange behavior with IE and margin...
 Home | NewsGroups | Search | About
Login Password
Register Now!
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
strange behavior with IE and margin... Luciano A. Ferrer 06-12-2006
Posted by Luciano A. Ferrer on June 12, 2006, 2:03 am
Please log in for more thread options

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
laferrerQuiTadme@SacaDMEgmail.com
http://relojurbano.com.ar .algún día volverás.

... Vencía el que se despojaba de todo.

Posted by Steve Pugh on June 12, 2006, 3:10 am
Please log in for more thread options


>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/explorer/doubled-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


Posted by Luciano A. Ferrer on June 12, 2006, 12:53 pm
Please log in for more thread options


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/explorer/doubled-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
laferrerQuiTadme@SacaDMEgmail.com
http://relojurbano.com.ar .algún día volverás.

... Vencía el que se despojaba de todo.

Posted by Tony on June 12, 2006, 1:56 pm
Please log in for more thread options


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/explorer/doubled-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"

Similar ThreadsPosted
Strange behavior with Service Side Include July 31, 2008, 5:32 pm
seeking explanation for strange 'border-collapse' behavior January 6, 2005, 11:51 am
odd div behavior December 28, 2005, 1:47 pm
margin above of

August 23, 2007, 5:15 am
like behavior for