I have a trouble with setting borders for table cells which have relative position style: fiddle example
table {
border-collapse: collapse;
}
td {
border: 1px solid green;
position: relative;
}
It looks ok in FF and Chrome:
But in IE i see doubled cell borders:
This doubled borders appears only if td relative positioned.
I know as workaround it is possible to remove border from table cell and put additional div with border inside of table cell.
But maybe there is another way to solve this issue in IE?
EDIT:
I managed to display borders combining cells and table border styles:
http://jsfiddle.net/GaTHZ/4/
This will solve it. Worked in IE and Chrome.
table {
border-collapse: collapse;
margin-right:30px;
margin-left:30px;
border-right: 1px solid green;
border-bottom: 1px solid green;
}
td {
border-left: 1px solid green;
border-top: 1px solid green;
width: 200px;
height: 35px;
position: relative;
}
Related
I'm trying to add border to a tr[mar-row].
It's working file until the table parent have a scrollbar (overflow: auto)
Repro : https://stackblitz.com/edit/angular-9s1meu?file=src%2Fapp%2Ftable-basic-example.css
comment the overflow: auto at line 2 and the borders will be entirely visible.
Any idea to have the border and keep the parent scrollable ?
Thanks.
You can use outline-offset: -2px to move the outline in by its width. Because outline is drawn outside of the elements borders the left and right sides are being hidden when overflow: auto is set — outline is not part of the element's actual height/width.
Alternatively, use border so the style is drawn as part of the height/width calculations. Though tr.selected {border: 1px solid black} wasn't immediately working, it does by targeting the children:
tr.selected td {
border-top: 2px solid red;
border-bottom: 2px solid red;
}
tr.selected td:first-child {
border-left: 2px solid red;
}
tr.selected td:last-child {
border-right: 2px solid red;
}
Just a tutorial. Problem is {border: 3px solid yellow;}and my web page only one letter has the border with the solid yellow around it.
I have coded below:
#cornholio {
border: 3px solid yellow;
color: red;
position: absolute;
width: 10px;
height:15px;
top:375px;
left:900px;
}
<div id="cornholio">Beavis & Butthead</div>
Here, the border is wrapping the entire text. As others said in comments, you were defining a fixed height and width, and therefore these two properties were not auto (size was not depending of content).
auto is the default value for height and width, so if you don't define them, it will work as you need:
CSS:
#cornholio {
border: 3px solid yellow;
color: red;
position: absolute;
top:100px;
left:100px;
}
Here is a demo
For some reason, when round border is added to the textarea, in IE the scrollbar slightly overlaps the border corners.
See https://jsfiddle.net/bgas48b4/ (in IE)
<style>
textarea{
border: 1px solid black;
border-radius: 4px;
height: 100px;
}
</style>
<textarea></textarea>
My temporary solution was to use overflow-y:auto to hide the scrollbar by default.
However, I was wondering if there is a better solution.
Thanks
try this i hope it is better for look and feel in IE
textarea{
border: 1px solid black;
border-radius: 4px;
height: 100px;
overflow:hidden;
max-height:150px;
overflow-y:auto;
}
<textarea></textarea>
I'm trying to get text to be on top (or in front of) a CSS shape. It works with border-bottom, but not with border-top (which is what I need it to look like).
I am assuming that because the border-top property is set that it's pushing the text below the shape.
Not too sure how to get it to work correctly without having to use an image. I could have swore I've seen this done before, but I can't remember where.
Here's my fiddle: http://jsfiddle.net/ultraloveninja/W2SPd/
<h1>the trap</h1>
h1 {
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
You need 2 elements and 2 CSS styles. One for the text, and one for the background:
<h1><div>the trap</div></h1>
CSS
h1 {
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
h1 div {
position: relative;
top: -100px;
}
http://jsfiddle.net/vPt7h/
You can insert a span tag for the text and get:
h1 {
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
position:relative;
}
h1 span {
position: absolute;
top: -100px;
}
Demo http://jsfiddle.net/W2SPd/10/
Feasible?
Simply create a new pseudo element :after and then style the pseudo element with the border styles instead :)
The advantages? You don't have to create new elements just for the style alone, or use unnecessary nesting/wrapping with no semantic meaning; and it is not an image-based solution. The drawback - requires browser support for pseudo elements, so may not work on old versions of IE... but that's not something you should worry about.
h1 {
width: 100px;
padding: 0 50px; /* To account for the left and right borders in pseudo element to ensure it lines up */
}
h1:after {
content: " ";
display: block;
position: absolute;
top: 0;
left: 0;
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
z-index: -1; /* Displays pseudo element behind text */
width: 100px;
}
See fiddle here - http://jsfiddle.net/teddyrised/W2SPd/11/
That's really a bad way to do it imo. It will still take up more space than needed and you're asking for potential problems down the road. Yes you can use the examples others have provided but if it were me, I would make the shape an image and use it as a background via CSS.
.myShape { background:url(/pathto/your/image.png); width:150px; height:100px; }
Can I specify a border like 1px solid color1/color2. for the situation if I have to put a border like the image attached. I know I can put this border as an image, but I am looking if this can be be done in pure css.
You can also achieve the effect of multiple borders on an element with the pseude elements :before and :after.
See this page for examples http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/demo/borders.html
Here is ja demo using this technice (only top border as you described it): http://jsfiddle.net/m7g6L/
div {
border-top: 3px solid #00f;
position: relative;
z-index: 10;
margin: 10px;
width: 200px;
}
div:before {
content: "";
border-top: 1px solid #f00;
position: absolute;
top: 0;
left: 0;
right:0;
z-index: -1;
}
Try this. Enclose the element within a div, then use the div to achieve the desired effect by eliminating the margin and border from the div, like this:
<div style="border-top: solid red 2px; margin: none; padding: 0px;">
<p style="margin-top: 0px; border-top: solid blue 2px;">This is a paragraph.Blah Blah
Blah Blah</p>
</div>
It worked when I tried it out.
Yes, use outline:.
Fair warning: it might mess the focus with some elements.
Example
you could use multiple elements and play with the padding and backgrounds:
http://jsfiddle.net/SJFx4/
not exactly semantic but it works -- you could use pseudo elements to achieve the same effect
Strictly speaking, CSS does not support multiple borders as far as I know.
Nonetheless, you can visually acheive the desired effect by combining an ordinary border with an outline:
#myElement {
border: solid 2px blue;
outline: solid 2px red;
}
If you need the outer "border" to appear only on one side, for example top, then the simplest solution is to use an enclosing div element:
div .borderHelper {
border-top: solid 2px red;
margin: none;
padding: 0;
}
#myElement {
border-top: solid 2px blue;
}