14 replies [Last post]
matthewwithanm
Offline
newbie
Last seen: 16 years 22 weeks ago
Joined: 2005-06-30
Posts: 7
Points: 0

Now that I've got you're attention...

I want to write the CSS for a box that, with the old IE box model, would look something like this:

.box {
width: 10em;
border: 2px;
}

That is to say that the actual box width (as defined by W3C) should be 10em - 2px.

I've tried everything I can think of and can't figure it out.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

IE Box Model better??!

Place the width on one element and the border on another. Structuring your html/css like this not only resolves your problem but works successfully irrespective of the box model used.

CSS -
.wrap {
  width:10em;
}

.box {
  border: 2px;
}

html -
<div class='wrap'>
  <div class='box'>
  ...
  </div>
</div>

matthewwithanm
Offline
newbie
Last seen: 16 years 22 weeks ago
Joined: 2005-06-30
Posts: 7
Points: 0

IE Box Model better??!

Thanks, but how do you force "box" to fill the entire area of "wrap"?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

IE Box Model better??!

You don't need to. A block element (which a div is) automatically fills the space available to it. Set some background colours and try the code.

matthewwithanm
Offline
newbie
Last seen: 16 years 22 weeks ago
Joined: 2005-06-30
Posts: 7
Points: 0

IE Box Model better??!

Ah, I'm sorry. I wasn't being specific enough. The height is also of importance. While "box" will default to the entire available width, its height will only stretch as far as its content dictates. I need to stretch it to the entire available height.

The problem is that I can't simply set "height: 100%" because that value includes the border, making the box height (counting margins) greater than 100%.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

IE Box Model better??!

Hi Matt (no, I'm not typing all that Smile),

Welcome to the forum.

My first thought when someone has pixel perfection issues is, 'have they really focused on what they're trying to accomplish, or are they zeroed in on how they want to do it?'

While you're thinking that over, why not size the border in ems if the width (and height?) are sized with em units? The normal pc default is 16px per em. 2px then are .125em. Can you not do {width: 9.75em; border: 0.125em solid black;}?

Better yet, think again why you need those exact measurements. Once the page is in the wild, you've lost all control and users and their own settings will do their best to destroy your layout—and a rigid layout is a fragile layout.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

matthewwithanm
Offline
newbie
Last seen: 16 years 22 weeks ago
Joined: 2005-06-30
Posts: 7
Points: 0

IE Box Model better??!

Quote:
'have they really focused on what they're trying to accomplish, or are they zeroed in on how they want to do it?'

Quote:

While you're thinking that over, why not size the border in ems if the width (and height?) are sized with em units?

Well, the reason I needed pixels (as opposed to ems) was because I am using rounded corners. My other divs were solid colors so it posed no problem; I just measured them in ems and threw the corner gifs to the...um, corners. (I'm meauring in ems because the page is completely scalable.) However I did not want to stretch the corners as that would result in pixelization. Thus, the borders must match the corners and so be defined in pixels.

Quote:
Better yet, think again why you need those exact measurements. Once the page is in the wild, you've lost all control and users and their own settings will do their best to destroy your layout—and a rigid layout is a fragile layout.

Is there anybody who tweaks border sizes? I don't know what this would accomplish. Like I said, the site is completely scalable. I can't think of a situation why anybody would change anything that would mess up my layout and can't imagine it being any significant number of users...though I may just be unfamiliar with what people change. Am I forgetting something?

Thanks for the response. Am I to take it that what I want is completely impossible?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

IE Box Model better??!

Quote:
Well, the reason I needed pixels (as opposed to ems) was because I am using rounded corners. My other divs were solid colors so it posed no problem; I just measured them in ems and threw the corner gifs to the...um, corners. (I'm meauring in ems because the page is completely scalable.) However I did not want to stretch the corners as that would result in pixelization. Thus, the borders must match the corners and so be defined in pixels.

OK, fair enough. Now we have a problem statement. Smile You want a variable sized element with rounded corners. And, you want to effectively have the css3 box-sizing model.

The current method doesn't meet the second criterium. One way to get the effect is to move your borders/corners into the background. There is a pure css method to do this, but a certain 800lb. gorilla doesn't support css2. A similar approach that is pretty much cross-browser compatible may be seen at The Thrashbox and other sites, ALA, for example. Google rounded+corners+css for more.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

matthewwithanm
Offline
newbie
Last seen: 16 years 22 weeks ago
Joined: 2005-06-30
Posts: 7
Points: 0

IE Box Model better??!

Yeah, those were my starting points. They don't deal with my problem at all though.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

IE Box Model better??!

They actually do, at least as you've described the issue, but you're focused on the method rather than the goal.

Give us a link to what you have so far, and if needed, a sketch of what you want.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

matthewwithanm
Offline
newbie
Last seen: 16 years 22 weeks ago
Joined: 2005-06-30
Posts: 7
Points: 0

IE Box Model better??!

kk5st wrote:
You want a variable sized element with rounded corners.

Actually, I need a static sized element with rounded corners.

kk5st wrote:
They actually do, at least as you've described the issue, but you're focused on the method rather than the goal.

Okay, maybe I haven't described it correctly then. Either that or I'm just not seeing it in those sites because, believe me, I wouldn't have posted here without first googling "css rounded corners." If it's there, please correct me and I'm sorry for my eyesight.

My problem is that I need the box to be outlined, of a static height (defined in ems), with rounded corners.

All rounded corner methods that I've seen call for corner gifs. The problem is that, if you want the box outlined, either the corner gifs will have to stretch or the border (outline) of the box will have to be defined in pixels (this way, when the page is scaled, the borders would still line up with the corner gifs). The second method is much more appealing to me because stretching gifs would result in heavy pixelization.

However, I can find no way to define a boxes dimensions in ems and its borders in pixels.

The most obvious solution (as I believe somebody suggested) would be to place a bordered box within a 10em wrapper box. But how to we get the inside box to occupy the entire height of the wrapper box AND have borders defined in pixels? Giving it a 100% height is no good because the inner box would then have a height of 10em + 4px. And if we try to give a specific height, we're back with the exact same problem (creating a box whose "outer height" is 10em with 2px borders).

Is that more clear? I'm afraid this just can't be done is css with the standard box model. But before I started thinking about compromises that "weren't quite what I want," I'd ask you guys.

Thanks for your help and time. I really appreciate your helping me out.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

IE Box Model better??!

Take a look at http://www.alistapart.com/articles/customcorners2/

The idea is to use four oversized background images placed on four elements. The elements and their background images are aligned in such a way that foreground elements cover the unwanted parts of the background elements. Its like the sliding doors technique for menu items, but taken one step further.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

IE Box Model better??!

(what Chris said)
Which is the methodology used in the sites I cited. Matt, the use of four corner gifs is a holdover from table layout methods.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

matthewwithanm
Offline
newbie
Last seen: 16 years 22 weeks ago
Joined: 2005-06-30
Posts: 7
Points: 0

IE Box Model better??!

Chris..S wrote:
The idea is to use four oversized background images placed on four elements. The elements and their background images are aligned in such a way that foreground elements cover the unwanted parts of the background elements. Its like the sliding doors technique for menu items, but taken one step further.


Thanks, Chris. I guess this is what I'll end up doing, although I was considering this technique a compromise: 1) It's not fully scalable and 2) loading a 900 x 600 pixel gif when I only need a small one doesn't seem like good bandwidth-conserving practice. I was hoping that I could figure out the border issue (and originally thought I had with the table method), thereby eliminating the need for such graphic overkill. Still, I guess it's the closest I can get to what I want so it'll have to do.

kk5st wrote:
(what Chris said)
Which is the methodology used in the sites I cited. Matt, the use of four corner gifs is a holdover from table layout methods.


Thanks for all your help, Gary. I'm actually not using four corner gifs but a system similar to Coonen's (http://www.coonens.com/design/article/2/): a single gif with all corners in it. If I said 'gifs' in my previous posts, it was just because I wanted to simplify the problem and address only exactly what I was trying to accomplish...which, I'm afraid, is quite impossible.

Oh well, I guess "fully scalable, limited bandwidth, static (but scalable) height, rounded corner box" is a little too specific. Still, I'd rather aim for perfect and settle for slightly less than aim for less and miss out on something perfect.

Thanks again guys. If you've got any more ideas, please tell me.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

IE Box Model better??!

matthewwithanm wrote:
loading a 900 x 600 pixel gif when I only need a small one doesn't seem like good bandwidth-conserving practice.

I think you'll be surprised at how small such a gif will be.