I have a css class (given below). The border element is working fine in firefox, it creates a 6px white border around the image. But in IE(6) it is not creating any border ie only displays the image. Pls help me out I need to figure it out quickly.
.pimage2 {
background:url(../images/img2.gif) no-repeat;
width: 469px;
height:203px;
border:7px solid #ffffff;
}
Thanks,
Aditya
According to your comment, you're using the CSS on a table cell like this:
<td class="pimage2"></td>
But IE6 won't see this and you won't be able to get the border to show.
To get the border around it, just add a non-breaking space entity in the table cell. Like so:
<td class="pimage2">&‎nbsp;</td>
maybe with black color: ?
border:7px solid #000;
To get the border in the latest css version, you have to write border-style first then the rest of the attributes or design of the border is considered.
border:blueviolet;
border-width: 0.5px;
border-style:solid;
Or, the border will not render.
Related
I want to create a thin border. Simple. My code will not render it. In order to give it the maximum specificity I placed temporarily in a page element:
<div style="max-width: 100%; position: relative;border-radius: 4px; border-color: #ddd; border:thin; background-color: #ffffff ;">
Regardless of anything I do,the border will not render. Everything else renders. If I put the background colour to red, it renders fine. Not the border.
So, looking into Chrome developer tools I see that the border width is described as 0px, which makes no sense. However if I expand that I see my value of 1px.
There are no other inherited values in the CSS which would appear to override my border. So I am totally confused.
Many thanks !
You need to define the style for your border.
border-style: solid;
Also, using
border: thin;
overrides any previous values you've set, use
border-width: thin;
instead.
I have a td which adds a hover class when I hover the mouse over it:
.hover{
border: 1px solid #364861;
background: #5979a0 url(img.png) 50% 50% repeat-x;
font-weight: bold;
color: #ffffff;
border-radius: 10px;
}
For some reason I can't figure out, the border attribute wasn't taking effect. I randomly added
float: left;
to the class, and now it works...
It works, so I'm happy, but I don't know why.
I can't recreate the problem in a fiddle, there must be some class somewhere in my DOM that's having an effect on my td. But I just don't know how a float would effect the border-radius of an element.
I did not know these to attributes were linked in any way.
This is because a td cannot have border-radius. When you give it a float it breaks out of it's table structure and become a seperate element that has it's own structure, so you will see the border-radius.
i don't see a use case for a table cell with rounded corners. So it sounds likeyou are misusing the table/td tags. If it's not table data, don't put it in a table structure. Just use div's with rounded corners.
border-style:dotted is not working in firefox
I have read in Here other than property hidden in IE all the properties support is all browser.
But with my code border-style:dotted is not working but if I will give border-style:solid it is working. (if i will just change border-style:solid it will work fine ?? but why?)
Can any explain me why it is happening ?
See Here
Please try to run fiddle in chrome and firefox.
Thanks !!
CSS triangles relies on the border property to render it as a triangle, making it dotted or solid does not matter in the rendering and does therefor not show the border as "dotted" - if you try it on the fiddle you can see changing the color on the border actually changes the entire triangle.
Triangles: http://css-tricks.com/snippets/css/css-triangle/
Maybe try this syntax:
element {
border: [thickness]px [type] [color];
}
Example:
body {
border: 10px solid black;
}
--
body {
border: 20px dotted black;
}
--
body {
border: 30px dashed black;
}
--
body {
border: 40px groove black;
}
UPDATE:
Upon your query, this IS NOT WORKING AND WILL NOT WORK because,
=> You are already applying border as background. If you look closely, border style dotted is stretched to form background as you are using border width property. Don't judge it as background color. You cannot apply border on a border.
=> To make it work, either introduce another pseudo or actual element and make it do that what you wanted to do.
I have a 'special' table on one page, that's borders I would like invisible. I'd like it to differ from standard css rules. Here is a screenshot:
before http://eliteshift.com/redbeancoffee/images/before.jpg
And here is what I want:
after http://eliteshift.com/redbeancoffee/images/after.jpg
I've made a second 'class' called 'award', and I can attribute certain traits (such as width), but I cannot for the life of me remove the boarder.
What's the css for a transparent border?
I've tried:
table.award {
border-collapse: collapse;
border-spacing:0;
width:60%;
}
border-color: transparent; will make it transparent.
border:none; will remove the border, which sounds like what you actually want in this case.
From the sounds of it, do you actually need a border? Would the following work?
table.award{
border: none;
/*other css attributes omited*/
}
I find that border: 2px solid transparent doesn't make it truly transparent all the time.
To make sure that you have a transparent border with a fixed width, use margins instead:
margin: 2px
will do the trick
My last question was closed before I could get a full answer, so I'll phase this one a bit differently.
In Chrome, it appears that if you set a border-bottom on one table cell you have to set a border-bottom on all the cells in the same row, otherwise Chrome doesn't know what to do with the unaccounted space.
It was suggested that I simply use a white border to make it appear as though the other cells do not have a border. But what if I have a gradient background, and don't want a white line to appear?
It appears that 1px solid transparent does not have any affect. rgba doesn't work either.
According to MDN it all boils down to the border-collapse property:
The separated model is the traditional HTML table border model.
Adjacent cells each have their own distinct borders. The distance
between them given by the border-spacing property.
In the collapsed border model, adjacent table cells share borders. In
that model, the border-style value of inset behaves like groove, and
outset behaves like ridge.
Change border-collapse to separate and it works fine: jsFiddle example
I believe that this is either a bug or a different interpretation of the border-collapse property in Chrome. It seems to work fine (as intended) if you remove border-collapse: collapse from <table>: http://jsfiddle.net/YZBXn/6/
An alternative would be to use another element contained in the table cell that has the border.
<td><div style="border-bottom:1px solid black;width:1.5in;"> </div></td>
http://jsfiddle.net/YZBXn/7/
The problem is that 1px solid transparent is transparent to the 'border' underneath that is stretched from the previous sibling <td>. A better way would be to not use a table.
I was able to get it to work without resorting to transparent.
<table>
<tr><td id=cell1>bleah</td><td id=cell2>bleah</td></tr>
<tr><td id=cell3>blah</td><td id=cell4>blah</td></tr>
</table>
#cell1 {
border-bottom: 1px solid black;
}
#cell4 {
border-bottom: 9px dotted red;
}