Border Height on CSS
It works fine but the problem is that the border’s height takes the total TD’s height. Is there a way to set the height of the border?
12 Answers 12
I have another possibility. This is of course a «newer» technique, but for my projects works sufficient.
It only works if you need one or two borders. I’ve never done it with 4 borders. and to be honest, I don’t know the answer for that yet.
THIS IS GREAT. To set it vertically centered , we added
This should the selected answer, it’s the cleanest work around. I tryed in on a bootstrap col containing text but I forgot to set the position to absolute (that’s why I’m here). Thank you.
No, there isn’t. The border will always be as tall as the element.
You can achieve the same effect by wrapping the contents of the cell in a , and applying height/border styles to that. Or by drawing a short vertical line in an 1 pixel wide PNG which is the correct height, and applying it as a background to the cell:
background:url(line.png) bottom right no-repeat; For my issue, your first line answered my question. «The border will always be as tall as the element.»
Yes, you can set the line height after defining the border like this:
border-right: 1px solid; line-height: 10px; Border around 100% body height and width (HTML 4.01 Strict)
Okay, this is driving me crazy right now. I want to have a border around my document. It should be nicely going around the whole window/viewport. So I define:
When my document is in quirks mode, this works fine. At least in IE, which is my primary target here. A red border shows up at the very edges of my page, obviously because by predefined CSS body and html are set to fill the screen. When going to standards mode by setting a HTML 4.01 strict DOCTYPE, body and html collapse to the real (smaller) size of the content, the border is drawn right through the middle of the screen. So I define:
And I get — scroll bars, scrolling exactly one pixel to show the bottom/right borders. However, I want that border visible right away. Is there a no-bullshit (like «height: 99.9%;», «overflow: hidden;» or «switch back to quirks mode») method to get a border at 100%, without unnecessary scroll bars? IE-only is fine, cross-browser would be better, of course.
Corporate environments and Firefox are mutually exclusive. At least 99% percent of the time. And until Mozilla finally gets it that manual NTLM authentication (or fiddling with about:config on a per client basis) really doesn’t cut it, this is going to stay that way.
Along with what Tomalak said, Firefox has consistently had enough printing problems that most companies shy away from it as well. It’s one thing to make a developer do some contortions; it’s quite another to make it impossible for the end user to work how they like.
7 Answers 7
As SpliFF already mentioned, the problem is because the default (W3C) box model is ‘content-box’, which results in borders being outside of the width and height . But you want those to be within the 100% width and height you specified. One workaround is to select the border-box box model, but you can’t do that in IE 6 and 7 without reverting to quirks mode.
Another solution works in IE 7, too. Just set html and body to 100% height and overflow to hidden to get rid of the window’s scrollbars. Then you need to insert an absolutely positioned wrapper div that gets the red border and all content, setting all four box offset properties to 0 (so the border sticks to the edges of the viewport) and overflow to auto (to put the scrollbars inside the wrapper div).
There’s only one drawback: IE 6 doesn’t support setting both left and right and both top and bottom . The only workaround for this is to use CSS expressions (within a conditional comment) to explicitly set the width and height of the wrapper to the viewport’s sizes, minus the width of the border.
To make it easier to see the effect, in the following example I enlarged the border width to 5 pixels:
* < margin: 0; padding: 0; >html, body < height: 100%; overflow: hidden; >#wrapper