I have a navigation menu with css style of border-bottom and border top set to 2px. This gives a fairly plain look. I want to use an image instead of a line. I have tried to use the src option for this but no luck.
my codde:
border-bottom: 2px solid #FFF; border-top: 2px solid #FFF;
Any help would be appreciated.
Gus
Have you tried using the border-image property:
http://www.w3schools.com/cssref/css3_pr_border-image.asp
Note that it's only compatible with newer browsers (read no IE), so leave your normal border declaration in as a fallback.
Related
I have found the following css declaration in twitter bootstrap (link and source). Basically it declares the following:
background-color: #eee;
background-color: rgba(86,61,124,.15);
border: 1px solid #ddd;
border: 1px solid rgba(86,61,124,.2);
As far as you see - there is a duplicated background color and border. If it would be anywhere else, I would ignore it thinking 'these guys just do not know css'.
But because this is highly used open-source project, done by professionals, I have a pending question: is it really a bug or does it make sense (if so can someone explain to me why someone would use it?).
rgba() color value has been introduced in CSS level 3 specification.
It declares colors in Red-green-blue model including alpha, allowing specification of the opacity of colors.
rgba() is not supported in old web browsers such as IE8, Opera9, ... Thus, developers use a solid color as a fallback.
In this particular instance, the primary declarations treat as fallback for the next ones:
background-color: #eee; /* The Fallback */
background-color: rgba(86,61,124,.15);
border: 1px solid #ddd; /* The Fallback */
border: 1px solid rgba(86,61,124,.2);
If a web browser supports rgba() the second declaration will override the first one. But if the web browser doesn't understand rgba() color, the second declaration will be ignored, Thus the first one will be appled to the element(s).
However there are some alternatives you might want to consider:
Bulletproof, cross-browser RGBA backgrounds, today
CSS Transparency Settings for All Browsers
I've got this selector code:
#ajax_hits_counter_popular_posts_widget-2.widget li img {
// Give the thumbs in the widget some style
border-radius: 5px;
margin-right: 10px;
border: 4px solid #353434 !important;
}
Everything is rendering properly except for the border: 4px solid #353434 !important;
When viewing in either Firebug or Chrome Dev Tools, the border: property doesn't even show up at all, while the others do.
If I manually type the same exact code into Firebug or Chrome tools, it works fine.
Live is here (it's the "Top Posts" thumbnail widget at the bottom right): Meanwhile, In America
Anyone know why?
// Give the thumbs in the widget some style
is invalid in CSS. The browser seems to ignore the following property, as you can see in this example. If you remove the "comment" it works as expected. (On your page, the border declaration directly follows the "comment", unlike in the CSS posted here)
Comments in CSS have to be enclosed in /* ... */.
As tim.baker mentions, you have have to use border instead of border-style.
Looking at your CSS it seams as though you have used
border-style: 4px solid #353434 !important;
Using purely
border: 4px solid #353434;
Should work
Changing the border-bottom attribute along with removing text-decoration creates the colored underline in some browsers (I can vouch for FF 5 and 6 for sure). But other browsers (at least Safari & Chrome) don't display any line.
For example of the problem, see utsarotaract.org (there is a link in the bottom paragraph of the index page).
Since I've seen this work other places, I'm assuming that some of my CSS is clashing but I'm stumped as to where exactly the problem is.
The issue is the size of your border. Change your 0.5px border to 1px instead and it will work. Live example: http://jsfiddle.net/tw16/WcrNA/
.content a {
border-bottom: 1px solid #A80532; /* instead of 0.5px */
color: #000022;
text-decoration: none;
}
You may want to use:
<a><span>I'm a link</span></a>
with the following CSS:
a {
color: blue;
}
span {
color: green;
}
The alternative being using a border-bottom. It's also a cross-browser solution. You'll just have to set its padding/margin/line-height to make it consistent from a browser to another.
How is the "sunken" or "inset" effect applied to these letters in this menu? I looked (briefly) with Firebug but can't find how they're doing it. Works in FF, not in IE.
See http://balsamiq.com/products/mockups/mybalsamiq for actual example.
This is just a Text Shadow with a color lighter than the background instead of darker, causing it to look like a bevel. (We've been trained to believe that the 'sunlight' on a computer screen generally comes from the upper left corner.)
The CSS rule shown when using the Developer Tools for Safari shows:
text-shadow: white 0px 1px 0px;
That is most likely a text-shadow:
p {
text-shadow: 0 1px 0 #fff;
}
No version of IE in existence (not even IE9 beta) supports text-shadow.
It's this:
text-shadow: 0 1px 0 #FFFFFF;
As I see, it's the color combination that create the effect. Just change the text to red color and the text is not inset anymore.
Here's a little trick I discovered using the :before and :after pseudo-elements:
http://dabblet.com/gist/1609945
Has anyone idea why cell border on this page http://www.skirent.pl/informacje/cennik.html is well rendered in FF, but not in IE and Chrome?
I used CKEditor to generate this table, and I cannot find what I did wrong.
You have to specify a border with CSS (currently it isn't).
#subright th{
border: 1px solid #000;
}
http://www.w3schools.com/css/css_border.asp
I think, you can't do this in CKEditor directly.