Dreamweaver - wrong margin in IE windows

Author

wrong margin in IE windows

(_seb_)

2005-08-18, 7:24 pm

Hi all

the page with the problem:

http://www.webtrans1.com/clients/MoMA/

The blue image and the "enlarge image" as well as the grey orizontal
line below it are inside a div, whose CSS is:

..mainLeftCol {
float:left;
width:286px;
padding:0;
margin:10px 20px 0px 25px;
}

So the left-margin of this div is 25px, however, IE windows for some
reason puts more margin on the left of that div.

To see the problem clearly, compare the orizontal line bellow "Enlarge
image" and the orizontal line below "Gift Ideas". Both are contained
inside a div whose left-margin is 25px, but the line below "Gift Ideas"
IS 25 px away from the left, while the line below "enlarge images" is
farther away.

Why? what to do?

Of course my code works fine in all other browsers as usual.

Murray *TMM*

2005-08-18, 7:31 pm

Your "H" key is broken.

If you remove the float from the left div, IE will bring it more inline.
Now all you have to do is figure out why that drops the right div.

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"(_seb_)" <seb@webtrans1.com> wrote in message
news:de1s4f$a5m$1@forums.macromedia.com...
> Hi all
>
> the page with the problem:
>
> http://www.webtrans1.com/clients/MoMA/
>
> The blue image and the "enlarge image" as well as the grey orizontal line
> below it are inside a div, whose CSS is:
>
> .mainLeftCol {
> float:left;
> width:286px;
> padding:0;
> margin:10px 20px 0px 25px;
> }
>
> So the left-margin of this div is 25px, however, IE windows for some
> reason puts more margin on the left of that div.
>
> To see the problem clearly, compare the orizontal line bellow "Enlarge
> image" and the orizontal line below "Gift Ideas". Both are contained
> inside a div whose left-margin is 25px, but the line below "Gift Ideas" IS
> 25 px away from the left, while the line below "enlarge images" is farther
> away.
>
> Why? what to do?
>
> Of course my code works fine in all other browsers as usual.

(_seb_)

2005-08-18, 7:34 pm

Murray *TMM* wrote:
> Your "H" key is broken.
>
> If you remove the float from the left div, IE will bring it more inline.
> Now all you have to do is figure out why that drops the right div.
>
tHHHHHHHHanks.
I thought "float:left" meant to make the div float left. But apparently
it's not the case, so i did remove float left, and as expected the right
div drops (not only in IE windows but also all other browsers).
I would say adding "display:inline;" for both divs would make them stay
on the same line one next to the other, but then again that is not the
case, actually when I add "display:inline;" all of a sudden, width and
margin attributes get ignored and both divs extend to the entire width
available, one below the next!. Isn't CSS the weirdest thing, huh?
So, with everything being so counter-intuitive, I have not figured out
why that drops the right div.

tHank you if you can Help me some more.

Murray *TMM*

2005-08-18, 7:34 pm

Good to see your keyboard is working better now.

> I thought "float:left" meant to make the div float left.

It does mean that.

The drop simply means that the combined widths of the two elements is
greater than the space available for them.

> when I add "display:inline;" all of a sudden, width and margin attributes
> get ignored and both divs extend to the entire width available, one below
> the next!.

Well, I think you are adding a bunch of effects together here and drawing a
wrong conclusion. Display:inline is not the solution.

The solution would be to float the right div right, and to adjust the
assigned widths and margins/padding to exactly match the container's
available width.

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"(_seb_)" <seb@webtrans1.com> wrote in message
news:de1vls$ero$1@forums.macromedia.com...
> Murray *TMM* wrote:
> tHHHHHHHHanks.
> I thought "float:left" meant to make the div float left. But apparently
> it's not the case, so i did remove float left, and as expected the right
> div drops (not only in IE windows but also all other browsers).
> I would say adding "display:inline;" for both divs would make them stay on
> the same line one next to the other, but then again that is not the case,
> actually when I add "display:inline;" all of a sudden, width and margin
> attributes get ignored and both divs extend to the entire width available,
> one below the next!. Isn't CSS the weirdest thing, huh?
> So, with everything being so counter-intuitive, I have not figured out why
> that drops the right div.
>
> tHank you if you can Help me some more.

Osgood

2005-08-18, 7:39 pm

Murray *TMM* wrote:

Display:inline is not the solution.

It is one solution. Don't forget that windows ie double the margin on a
floated left <div>. Adding display: inline; makes it play ball.

Osgood

2005-08-18, 7:39 pm

(_seb_) wrote:

> Should I conclude that IE Windows is broken, and that as a result I
> should just use a two column table as I usually do rather than try to
> use something that does not work the way it should?

No, its your css thats broken.

Get you sums right, don't try and mix and match css/html inline styling
and all will be well. Of course using tables is much simpler, but not
much of a challenge. Code below should work in PCIE.Ive outlined some of
the<divs> so you'll hahve to take off the borders.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

</style>

</head>

<body>
<div id="top"><a href="#"><img src="images/moma_corporate_gift.gif"
width="259" height="60" border="0" align="left"></a>
<div id="quickOrder"><a href="#"><img src="images/quick_order_top.gif"
alt="quick order" width="15" height="10" border="0"> <span
class="white">Quick order</span></a></div>

</div>
<div id="topNav"><a href="#"><img src="images/gift_ideas.gif" alt="click
to view gift ideas" width="55" height="12" border="0"></a><a
href="#"><img src="images/holiday_cards.gif" alt="click to view holiday
cards" width="78" height="12" border="0"></a><a href="#"><img
src="images/quick_order.gif" alt="click to view quick order" width="67"
height="12" border="0"></a><a href="#"><img
src="images/additional_info.gif" alt="click to view additional info"
width="84" height="12" border="0"></a></div>
<table width="780" align="left" cellspacing="0" cellpadding="0" border="0">
<tr>
<td height="584" valign="top" bgcolor="#F3F3F3" id="leftNav">
<a href="#">Gift ideas</a>
<a href="#">Holiday Cards</a>
<a href="#">Quick Order</a>
<a href="#">Additional Info</a> </td>

<td id="mainContentRight" valign="top">
<div id="title"><img src="images/gift_ideas_page_title.gif" alt="Gift
Ideas" width="83" height="16">
</div>
<div class="mainLeftCol">
<div><a href="java script:;"><img src="images/m_56645.jpg" width="250"
height="230" border="0" style="margin-top:10px; margin-bottom:10px;"
alt="" title="click to enlarge"></a></div>
<a href="java script:;"><img src="images/enlarge.gif" alt="click to
enlarge" width="12" height="12" border="0">
Enlarge Image</a>
<hr size="1" noshade color="#CCCCCC">
</div>

<div class="mainRightCol">

<p><strong><span class="bigger">Sky Umbrella</span><br>
Tibor Kallman TGN 1999</strong></p>
<p>Humor and surprise are two of the
designer Tibor Kalman's hallmarks,
as witnessed by this view of a blue sky
on a most probably gray day. MoMA's
witty umbrella with an eternally cheerful
sky is known and enjoyed throughout
the world. Designed by EFM for the
Museum with the cloud design by
Mr. Kalman. Black nylon exterior;
wood shaft and handle </p>
<hr size="1" noshade color="#CCCCCC">
</div>
</td>
</tr>

</table>
</body>
</html>

Murray *TMM*

2005-08-18, 7:39 pm

> Don't forget that windows ie double the margin on a floated left <div>.
> Adding display: inline; makes it play ball.

Ew.

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"Osgood" <notavailable@atthisaddress.com> wrote in message
news:de27ue$qf1$2@forums.macromedia.com...
> Murray *TMM* wrote:
>
> Display:inline is not the solution.
>
> It is one solution. Don't forget that windows ie double the margin on a
> floated left <div>. Adding display: inline; makes it play ball.
>
>
>

(_seb_)

2005-08-18, 7:42 pm

thanks a lot, osgood.
I tried to float both divs and display both inline before, and it did
not work (that is, it didn't in IE Windows only of course).
So I guess what made the difference is that you styled the td with css
instead of 'normal' td attributes.
So, as you say, I shouldn't mix css and html styling. This is only a
problem for IE Windows, though, I guess because IE windows is not a real
browsers, but rather a bunch of patches glued together.

As you say, it's not much of a chalenge to use tables instead, since it
would have been much easier and faster, so I'm glad I found a
chalenging, complicated CSS solution instead!

And by the way, the chalenge does not come from CSS per se, nor was my
CSS broken as you suggest. The chalenge comes from IE Windows.

Osgood wrote:
> (_seb_) wrote:
>
>
>
> No, its your css thats broken.
>
> Get you sums right, don't try and mix and match css/html inline styling
> and all will be well. Of course using tables is much simpler, but not
> much of a challenge. Code below should work in PCIE.Ive outlined some of
> the<divs> so you'll hahve to take off the borders.
>
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
> "http://www.w3.org/TR/html4/loose.dtd">
> <html>
> <head>
> <title>Untitled Document</title>
> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
> <style type="text/css">
> 
> </style>
>
>
> </head>
>
> <body>
> <div id="top"><a href="#"><img src="images/moma_corporate_gift.gif"
> width="259" height="60" border="0" align="left"></a>
> <div id="quickOrder"><a href="#"><img src="images/quick_order_top.gif"
> alt="quick order" width="15" height="10" border="0"> <span
> class="white">Quick order</span></a></div>
>
> </div>
> <div id="topNav"><a href="#"><img src="images/gift_ideas.gif" alt="click
> to view gift ideas" width="55" height="12" border="0"></a><a
> href="#"><img src="images/holiday_cards.gif" alt="click to view holiday
> cards" width="78" height="12" border="0"></a><a href="#"><img
> src="images/quick_order.gif" alt="click to view quick order" width="67"
> height="12" border="0"></a><a href="#"><img
> src="images/additional_info.gif" alt="click to view additional info"
> width="84" height="12" border="0"></a></div>
> <table width="780" align="left" cellspacing="0" cellpadding="0" border="0">
> <tr>
> <td height="584" valign="top" bgcolor="#F3F3F3" id="leftNav">
> <a href="#">Gift ideas</a>
> <a href="#">Holiday Cards</a>
> <a href="#">Quick Order</a>
> <a href="#">Additional Info</a> </td>
>
> <td id="mainContentRight" valign="top">
> <div id="title"><img src="images/gift_ideas_page_title.gif"
> alt="Gift Ideas" width="83" height="16">
> </div>
> <div class="mainLeftCol">
> <div><a href="java script:;"><img src="images/m_56645.jpg"
> width="250" height="230" border="0" style="margin-top:10px;
> margin-bottom:10px;" alt="" title="click to enlarge"></a></div>
> <a href="java script:;"><img src="images/enlarge.gif" alt="click to
> enlarge" width="12" height="12" border="0">
> Enlarge Image</a>
> <hr size="1" noshade color="#CCCCCC">
> </div>
>
> <div class="mainRightCol">
>
> <p><strong><span class="bigger">Sky Umbrella</span><br>
> Tibor Kallman TGN 1999</strong></p>
> <p>Humor and surprise are two of the
> designer Tibor Kalman's hallmarks,
> as witnessed by this view of a blue sky
> on a most probably gray day. MoMA's
> witty umbrella with an eternally cheerful
> sky is known and enjoyed throughout
> the world. Designed by EFM for the
> Museum with the cloud design by
> Mr. Kalman. Black nylon exterior;
> wood shaft and handle </p>
> <hr size="1" noshade color="#CCCCCC">
> </div>
> </td>
> </tr>
>
> </table>
> </body>
> </html>
>

Osgood

2005-08-18, 7:43 pm

(_seb_) wrote:

> And by the way, the chalenge does not come from CSS per se, nor was my
> CSS broken as you suggest. The chalenge comes from IE Windows.

I don't do much of this stuff anymore because I would'nt be able to make
any money out of it considering all the time needed to sort these kinds
of issues out. I've droppped it from my learning curve now as it offers
very little financial benefits for me and clients don't seem to give a
f--k so long as it works in the browser THEY are viewing it in.

I recently helped out a client who I do graphic design for. Somebody, a
nephew probably, had put together a small site for them.

1) it was badly designed in terms of being user friendy

2) the drop-menus didnt work on a mac

3) it was cheap, so they didnt care if it worked x-browser or not <sigh>