Mark,
Take a look at the 'IE box model hack' - google for that phrase, and you'll get lot's of helpful information on this problem. It is possible to work around it, it just takes a bit more fiddling.
Cheers,
Karl
-----Original Message-----
From: Mark Wheeler [mailto:email@hidden]
Sent: Mon 6/28/2004 11:26 AM
To: email@hidden
Cc:
Subject: 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.
_______________________________________________
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.
