different margin in IE for PC and Mac

[kathari]

Hi
I have a problem with a difference of margins in IE for PC (latest version)
I have a set of pictures that I have put in a div with a class to define padding and border.
The div also needs to have a margin to float along the same left-side as the paragraphs that are on the page.

THe code looks like this (they are inside another div but it shouldn't make a difference) :

<p>This is dummy text that is placed at the same page.</p>
<div class="photoborder"><img src="picture.jpg" /></div>

The CSS looks like this:

.photoborder {
float: left;
border: solid 1px #DDD;
padding: 4px;
margin: 0 5px 10px 40px;
}Can anyone help me?

[Theros]

Read up on the IE box model hack... I believe that is what your looking for

[kathari]

Yes I am looking at that at the moment. But I can't see that I am having a problem with anything written there... or I am drunk (which is becoming a possibility)
If you are referring to this:
http://www.tantek.com/CSS/Examples/boxmodelhack.html
I don't see that it will help me. I don't have a fixed width anywhere, I have tried to take away the ?xml-thingie and I don't care about Opera=)
I do use a padding in the css for the <p> but the photoborder div is not inside the <p>.. If you have a better link I'll be more than happy!

[Theros]

Well, I don't have the link off the top of my head, but coding while drunk isn't a good idea :D... Also I think the reason why it isn't working is becuase IE interperets the paddings differently than from browsers... I believe that is covered in the box hack... But, I'm not sure... Basically you have to count in that IE will actually count the width as less than normal, and I think you can solve that with a min-width tag... but that was a long time ago when I read that article... Sorry, if I find it Ill post it

[kathari]

IE can't deal with min-width as far as I have tried.
Check the link above to see if it's the same. (and when coding goes on over dinner that just may happen all the same...(-: )

[Theros]

Yeah, that link states it right there.... Not sure what else to explain to you about it... Do what he suggests you do to fix the issue... Have a fixed width btw...

[kathari]

Can't have a fixed width with since the border and padding is only there as a decoration for the images. And I have all sorts of image-sizes...

And when I apply padding to the image instead of the div it doesn't show up in IE/pc, which is kind of logical I suppose..

[aldomatic]

any link to a demo :-/

-al

[kathari]

Sure, http://www.transit-stad-i-rorelse.se/program.html
Css-file: http://www.rorelsen.com/transit_site/newtransit.cssC:-)
The left hand pictures have too much margins, but only in IE for PC as said before. On Mac everything looks alright.

[atarijake]

It might be the IE double margin float bug... I've fallen for it several times. Internet Explorer will double the margins on a floated element unless you specify

div#something{
float:left;
display:inline;
}

The "display:inline;" is the key. Here's a link to a lot more info about it.

http://www.positioniseverything.net/explorer/doubled-margin.html




Sure, http://www.transit-stad-i-rorelse.se/program.html
Css-file: http://www.rorelsen.com/transit_site/newtransit.cssC:-)
The left hand pictures have too much margins, but only in IE for PC as said before. On Mac everything looks alright.

[kathari]

THanks! I'll have a look at it. But it would be great to have an accurate explication of what "inline" is. I have used it to display horizontal menus before but then I ended up having to use "block" once to make it work and started thinking there must be an accurate explanation. And in this case I don't understand why "inline" is the thing. :look:
Not that I won't try it though, on the contrary.:hugegrin:

[atarijake]

Well, in this case, it just solves a bug in IE. It doesn't actually have anything to do with the way floats are supposed to work at all, not that I know of anyway.


THanks! I'll have a look at it. But it would be great to have an accurate explication of what "inline" is. I have used it to display horizontal menus before but then I ended up having to use "block" once to make it work and started thinking there must be an accurate explanation. And in this case I don't understand why "inline" is the thing. :look:
Not that I won't try it though, on the contrary.:hugegrin:

[kathari]

:thumb: THANKS! It worked with "display inline" . If anyone has a good theoretical (and practical..) explanation of "inline" (and "block") I would be really happy though! Partly I guess because I am not a native "English-speaker".

[Theros]

I don't think there is any real explanation other then the fact that that code just works heh