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 Jeremy,

Thanks for the info. I used the CSS box model to design this code. So what you are saying makes perfect sense and is how I designed it to be. Specifically what I am doing is putting a search form inside a graphic border. I put the padding in so the form would be centered inside the graphic border. If I remove the padding, yes the image will be displayed correctly in both IE and Safari, but the form will be on top of the graphic. So what do I do?

Thanks,

Mark


On Jun 27, 2004, at 3:37 PM, Jeremy French wrote:

Hi Mark,

Resending -- I had a typo.

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 166px (= 186px - 10px top -10px 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:

Hi all,

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.
_______________________________________________
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>)
 >Re: CSS problem (From: Jeremy French <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.