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.
Related
I'm having trouble styling two different styles of buttons. The first button should be a transparent background with a 2px border, and the next button is just foundation's default styling for buttons, i.e. no border. I thought that *{box-sizing: border-box;} would make it so that the buttons would come out to the same size regardless of padding/border/margin. I thought that maybe this wasn't working because I wasn't specifying a width/height, but even when I do that it just has the effect of pushing the normal button off alignment by 2px, and even still I want the buttons to be the natural width according to the text inside of them.
The easy solution for me is to just add a border on the normal button with the same color as the background, but then I end up having to also add styles for the border for hover, active, etc... just seems like there should be a better way. Am I doing something wrong here?
Here is a jsfiddle of where I'm at: http://jsfiddle.net/xa4d4bfv/
How about adding a border with transparent color.
a.button {
border: 2px solid transparent;
}
button outline class should be the following
.button-outline {
border:2px solid #222;
color: #222;
background-color: rgba(0,0,0,0.0);
padding: 0.9rem 2rem 0.9rem 2rem !important;
}
Suslov's answer is pretty good though, mine's alright if you leave the button the same size
OK something strange is going on here, i am using a class for 2 buttons that share styles. But when i apply a float right to one of the buttons it makes it bigger 26px vs 30px in my real world example.
It is only changing by 1px in this http://jsfiddle.net/Mag2D/ but it is still different.
I have a screen grab of inspect elements that show the 26 vs 30 here http://imgur.com/3WJdvcQ
This is the CSS that is being used...
.orderButton {
position: relative;
-moz-borderradius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background-color: #004282;
color: #fff;
padding: 5px 35px;
}
.right{float:right;}
Any idea why this is happening?
The answer is that when you float an inline element, it then becomes an inline-block element, which changes the way padding/width/height/margin properties are painted.
Whenever you have an inline element (e.g. span, a, etc) that you want to add padding to, make sure you set it to display: inline-block. It will display much more consistently cross-browser and, most likely, will be more likely to display the way you intended it to.
You have 2 issues here: 1) anchors are not block level elements. 2) when you float non-block level elements, they get turned into an inline-block level element and thus their model is changed.
If you set both to be floated by adding a "left" class to the left button and adding the float, they come out perfect.
HTML :
<a class="orderButton left">Place Order</a>
<a class="orderButton right">Place Order</a>
CSS :
.orderButton {
position: relative;
-moz-borderradius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background-color: #004282;
color: #fff;
padding: 5px 35px;
}
.right{float:right;}
.left{float:left;}
Solution #1:
Add this in the CSS:
.left{float:left;}
And add left class to the a tag
<a class="orderButton left">Place Order</a>
Solution #2:
In .orderButton, add:
display:inline-block;
When you float an element, it automatically becomes a block box. This box can then be shifted to the left or right on the current line but it also changes its margin, padding etc.
Demo #1 - With float on both a tags
Demo #2 - With inline-block; on the button class instead
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
I have a page where I want the border to home more than one line.
h2.bord
{
border-style:inset;
border-width:8px;
border-color:green;
background-color:black;
color:white;
text-align:center;
}
This (when used) displays a border around the text.
However,
I want to home more than I one line in this border.
Help?
use a div with border and inside that place this h2 bord
Is border-style:double; what you are looking for?
Alternatively, if you wanted more than a double border's, or borders of multiple styles you could use multiple nested divs, e.g.
<style>
.inset-border { border: 4px inset Black; }
.double-border { border: 4px double Black; }
</style>
<div class="inset-border">
<div class="double-border">
<h2>content</h2>
</div>
</div>
Standard CSS borders only support at the very most a double line (see #Jaimal's answer).
If you need more than that, you need to try the following:
Additional markup: ie more container elements, each with their own border.
Use :before and :after and give them a border. Done right, they should wrap around the original box and give you extra borders. Won't work in IE6 or IE7.
Use the outline property in addition to the border. Outline works very similarly to border, but does have some slight differences. It can give you a third border box though, if used in addition to border-style:double;. Note that it might not work in older browsers.
CSS3 border-image. Using this, you can define your own graphics for the border, which means you can define as many lines as you like. Note: this definitely won't work in older browsers; it's only a fairly recent addition to CSS.
Use background-image to fake it. If you know the size of your box, this might be the simplest and most cross-browser compatible way to do it. Not so useful if you don't know the size of the box in advance though.
Hope that helps.
I'm assuming you're trying to achieve an 3d/'raised' type of border; if that's so, then you could simply use the border-style: groove: JS Fiddle demo.
However, if you're able, you could use the ::after pseudo-element, and an outset border-style:
h2.bord {
border-style:inset;
border-width:8px;
border-color:green;
background-color:black;
color:white;
text-align:center;
position: relative; /* in order to position the pseudo element relative to the parent */
margin: 8px; /* to move the edges of the element from the container element in order to see the borders of the pseudo-element */
}
h2.bord::after {
content: '';
position: absolute;
top: -16px;
left:-16px;
right: -16px;
bottom: -16px;
border: 8px outset green;
}
JS Fiddle demo.
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"> </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.