Mailing Lists: Apple Mailing Lists
Image of Mac OS face in stamp
 
[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

Re: CSS problem

Hi Mark,

CSS renders elements using a box model, that has a margin, border, padding and content area. Your image is displayed in the content area.

Safari calculates the box correctly, while IE Mac (and IE Win) does not.

Your seeing the effect of IE's incorrect calculation, since your style rule specifies padding, as well as width and height.

IE is deducting the padding from the content area, thereby reducing the height and width of the content area, where your image is displayed. So IE is using a height of 156px (= 186 - 15px top -15px bottom) to display the image. That is why a portion of the images top and bottom is missing.

If you remove the padding, then Safari and IE should both display the same way.

See the following link for more details:

<http://www.w3.org/TR/CSS21/box.html>

Regards,

- Jeremy

On Jun 26, 2004, at 11:43 PM, Mark Wheeler wrote:

Here's one I don't understand. The following code does exactly what I want it to in Safari, displays a graphic, but in IE (Mac - haven't tested it in IE PC yet.), the right and bottom sides of the graphic are missing -- chopped off for some reason. Does any one have any ideas. I have to admit, I'm a little new at CSS. I'm starting a site and am toying with the idea of doing it all in CSS. Thanks, again, for you help.

Mark

-------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Test Page</title>
<style type="text/css" media="screen"><!--
#layer1      {
color: #00599c;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
background-image: url("images/search-box.gif");
visibility: visible;
padding: 10px 15px;
position: absolute;
top: 150px;
left: 150px;
width: 235px;
height: 186px
}
--></style>
</head>
<body bgcolor="#ffffff">
<div id="layer1">
layer 1
</div>
</body>
</html>

_______________________________________________
web-development mailing list | email@hidden
Help/Unsubscribe/Archives: http://www.lists.apple.com/mailman/listinfo/web-development
Do not post admin requests to the list. They will be ignored.

References: 
 >CSS problem (From: Mark Wheeler <email@hidden>)



Visit the Apple Store online or at retail locations.
1-800-MY-APPLE

Contact Apple | Terms of Use | Privacy Policy

Copyright © 2007 Apple Inc. All rights reserved.