|
Subject:
|
Chapter 11 Exercise - IE6 Margins
|
|
Posted By:
|
discgolfer
|
Post Date:
|
1/14/2006 2:07:01 PM
|
Why is the right/left padding or margin for the column 4 box larger in IE6 than it is in IE5.5, Firefox or Safari?
Also the margin along the top and sides are larger than on the other browsers (and the way it is supposed to look from the book p.342.)?
And is there some way to force IE6 to display it the same way?
Here is a link to the code and page:
http://www.madisc.org/CSS%20Studies/exercise11-1.html
Thanks!
|
|
Reply By:
|
discgolfer
|
Reply Date:
|
1/19/2006 11:48:01 PM
|
Is this really that hard of a question? I would have thought this came up before.
Perhaps I need to finish the book, could be in Chapter 18, though it didn't seem to be there.
CSS has made me realize just how far the web has to go. It's like every browser for itself!
Is it just MS making trouble for everyone as per usual? 
|
|
Reply By:
|
jminatel
|
Reply Date:
|
1/20/2006 9:48:17 AM
|
Rich, the book author, answers most of the questions in this forum himself. (He's a one-man machine!) I think he may be in the middle of a move this week, and I know he just finished another project for me last weekend so he may be taking just a couple of days off from answering to recharge. I'm sure he'll be back on here soon. :)
Jim Minatel
Senior Acquisitions Editor
Wiley Technology Publishing
WROX Press
Blog: http://wroxblog.typepad.com/
Jim's Book of the week: No book this week - Donate to the Red Cross!
|
|
Reply By:
|
richard.york
|
Reply Date:
|
1/20/2006 10:42:41 AM
|
No, not a tough question. Sorry, I've been neglecting the forums recently. Had lots going on. You know how it is :-).
> Is it just MS making trouble for everyone as per usual?
According to Microsoft, their goal is to comply with the appropriate standards. They've blogged about new standards support and bug fixes that are forthcoming in the new IE7 browser. So my guess is that Microsoft doesn't intentionally make it difficult for web designers, these are just bugs. Of course loads of people put on their tin foil hats and hold the belief that MS did intentionally introduce and maintain differences in Explorer and other browsers so as to keep their stranglehold on the browser market through proprietary lock-in. And then it has been five years since any update to Trident, the rendering engine in Explorer, was released. As far as I'm concerned no one can really know for sure and all of it is just speculation. Personally I'm skeptical of MS, but I try to remain neutral.
> Why is the right/left padding or margin for the column 4 box larger in IE6 than it is in IE5.5, Firefox or Safari?
I've been tinkering with this one for a half hour or so and so far I've been unable to come up with a work-around that works in Explorer without completely changing the example. I remember encountering a similar bug as I was preparing a floating column example for my second book. I remember taking a completely different approach to it.
Typically when Explorer gives you differing output you can inject a style sheet that only Explorer can see, which in theory would look like this for this exercise.
div#footer {
height: 35px;
margin: 5px 0 0 0;
clear: both;
}
</style>
<!--[if lt IE 7]>
<style type='text/css'>
div#column4 {
margin: 0 330px 0 163px;
}
</style>
<![endif]-->
</head>
<body>
The margins should be given smaller lengths to close the gap. The problem with this is, Explorer is not applying margin to the column4 element, so no values applied to that margin make any difference in the output (which is completely wrong behavior, by the way). The workaround would be to place everything in a container element, float the elements and offset their positions by applying a position: relative; declaration and various offset properties. That approach lets you circumvent the use of margins all together. If you're interested in that approach, I'll post some code (I don't have that code with me right now). Personally, I think that positioning is the way to go for multi-columns, since that approach doesn't have as many bugs as the float approach to butt your head against in Explorer. Here's a link to an example I made for someone a while back in another forum.
http://p2p.wrox.com/topic.asp?TOPIC_ID=29544
Let me know if you have any questions about that one.
Sorry it took so long for me to respond to your question.
Regards,
Rich
--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design
|
|
Reply By:
|
discgolfer
|
Reply Date:
|
1/23/2006 12:05:05 PM
|
Thanks! I will try it out.
|
