jeffman Posted February 26, 2008 Share Posted February 26, 2008 Below is some code I wrote to test a concept because I couldn't BELIEVE what I was seeing is true. In FF, this code produces a red square nested in a gray square, ten pixels of gray showing all around. I like this because it means I don't have to know the dimensions of the red square. The right and bottom attributes just take care of it. BUT In IE7, I don't see the red unless I explicitly give it dimensions. Is this really the way things are?Yes, I can work around this by calculating the dimensions.Please tell me there is a simple alternative to get the functionality I'm looking for? <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style type="text/css"> div.holder{background-color: #999999; position:absolute; top: 50px; left: 50px; height: 200px; width: 200px;} div.contents{position:absolute; top: 10px; bottom: 10px; left: 10px; right: 10px; background-color: #AA0000;} </style> </head> <body> <div class="holder"> <div class="contents"></div> </div> </body> </html> Link to comment Share on other sites More sharing options...
jeffman Posted February 26, 2008 Author Share Posted February 26, 2008 Anybody? Link to comment Share on other sites More sharing options...
S@m Posted February 26, 2008 Share Posted February 26, 2008 I would just give the red box a padding of 10px. That way whatever I put inside of it had 10px of padding around it.Be aware though, that this will increase the size of the red box by 20px;So if you want a 10px wide box. Set it as 5px wide with a padding of 5px all the way around. Link to comment Share on other sites More sharing options...
jeffman Posted February 26, 2008 Author Share Posted February 26, 2008 Ah. Perhaps some explanation is in order. I'm not interested in creating a border per se. That would not have warranted a question.The task is to start with a container of X and Y dimensions. I don't know the dimensions when I'm coding. They're generated on the fly in response to user input or the weather or something.Now, what I can do with Firefox is create a div that's nested in the container simply by specifying absolute coordinates for top, left, right, and bottom. I don't HAVE to specify width and height. This is the miracle I'm going on about. Firefox just looks at the coordinates and understands what I'm trying to do. So if I want the nested div to be Tpx from the top of the container, Lpx from the left, Rpx from the right, and Bpx from the bottom, Firefox does the math on its own and makes the nested div the correct size.This is exactly what you could do on some graph paper if I gave you four coordinates and a ruler. You could draw a rectangle and never have to calculate how big it is.I think that's cool and is exactly what I was hoping would happen when I wrote my original code. It just seems intuitive that this would be part of the function of the bottom and right attributes. And I'm not the only one who thinks so, since it works in Firefox and Safari both.But with IE, it doesn't. The nested div remains a dimensionless point located at the left and top coordinates. I've got to take the extra step, maybe with some javascript, and figure out the dimensions of the nested div. This is much less functional, in fact pretty annoying after having it work so nicely in FF. A CSS declaration is so elegant by comparison.As I said, I've got the workarounds covered.What I was hoping was that I'd missed a CSS property that would make IE work the way I'm talking about. Not that I really expected it to. But it would be nice. Link to comment Share on other sites More sharing options...
jlhaslip Posted February 27, 2008 Share Posted February 27, 2008 Interestingly enough, I noticed while I was playing with this one, that if you only list three positioning's for the red div, you get a grey square just like IE shows. Curious. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.