I'm styling a page in chrome and when i test in firefox, the style is a little different from what I intended, so I searched around and hoping for a solution. I found #-moz-document url-prefix(). So I copy the exact same code I have from my main.css into my header:
<style type="text/css/>
#-moz-document url-prefix(){
#nav ul li a.active {
color: #000000;
background-color: #ffffff;
margin-top: 0px;
border-top: 2px solid rgba(38,38,38,0.8);
border-bottom: 2px solid rgba(38,38,38,0.8);
border-right: 2px solid rgba(38,38,38,0.8);} }
</style>
It worked. But I have not change anything. I tried to remove it and let firefox run the styling with main.css, it went back to not working. Anyone have anyidea why. Keep in mind I did not change anything in both my main.css and the #-moz-document url-prefix(). I just simply copy that block of code from my main.css. Does #-moz-document url-prefix() have any special property?
Related
I'm trying to make some CSS changes to a website.
When I inspect the elements with Firebug, I find a class bordered that I need to make some changes to for example. Firebug tells me this class is in a file called Desktop.css. These are the style rules that Firebug displays for class bordered:
.bordered {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: -moz-use-text-color #d9d9d9 #d9d9d9;
border-image: none;
border-radius: 5px;
border-style: none solid solid;
border-width: medium 1px 1px;
}
But when I look in the actual Desktop.css file, the style rules I see for class bordered are:
.bordered {
border: 1px solid #d9d9d9;
border-top: none;
border-radius: 5px;
}
I must be doing something stupid! Why might I be seeing such differences in Firebug and in the actual CSS file?
Firebug will parse your CSS rules into their full form.
A good example with less clutter is the background property.
background is actually a shorthand method of writing
background-color
background-image
background-repeat
background-attachment
background-position
So if we write background: #f00; we'll get a red background, and all the other properties for background will be set to their defaults.
Firebug will show the full value including defaults, which in this case would be:
background: #ff0000 none repeat scroll 0 0;
I've got problem with link styling -
hover and active works, but link doesn't, what am i doing wrong?
How can i fix this problem?
#nav{padding: 5px 230px 10px 230px;}
#nav li{
display: inline-block;
list-style: none;
margin: 5px;
padding: 1px;
font: 20px Century Gothic;
}
a.navlink:link{
color:#06AD00;
background: white;
border-top: 1px #958A7E solid;
border-bottom: 1px #958A7E solid;
cursor:pointer;
}
a.navlink:visited{}
a.navlink:hover {
color: black;
background: white;
border-top: 1px black solid;
border-bottom: 1px black solid;
cursor:pointer;
}
a.navlink:active {
color: red;
background: white;
border:0;
cursor:pointer;
}
You CSS works great on my FireFox.
Make sure you define the HTML tags and attributes properly according to your CSS.
Also, note that you may see the wrong style because your links are already visited. Try to put some URLs that you didn't visit. (ex: sdfdsfdsfsfdhgsdf.com ect...)
I've had this same problem with certain versions of Opera and older IE. I've always avoided the :link pseudo-class in favor of just a natural a style - never quite understood the reason why, but :link was always 50/50 while natural a has never failed.
Try this instead for your :link style:
a.navlink{
...
}
This will only create a default state for your a.navlink elements - the other pseudo-classes will still modify it properly. If it doesn't fix things for you, then my next guess would be you've got a conflicting style somewhere. Hard to know for sure without getting our hands on the rest of the source.
:link only matches unvisited links, per spec. If you want to match all links, you have to do something like a.navlink:link, a.navlink:visited {}
I have the site
and it renders ok, even in IE. However in Opera 11.62 there is a very weird bug whenever I am hovering over the links from the navbar. Why does this happen? It is very annoying.
There is also a very weird thing that is happening, if I resize the browser window so the last link is out the pages than only the last link it displays ok on hover, but the other 2 are still broken.
Add this line of code to a:hover
height: 100%;
So you get:
a:hover {
background: -o-linear-gradient(top, #93C9ED 0px, #76B4E1 100%) transparent;
border-bottom: medium none currentColor;
border-left: 1px solid #1C5E9C;
border-right: 1px solid #1C5E9C;
border-top: 1px solid #1C5E9C;
color: #275D8B;
height: 100%;
}
Add a height to the anchor tag, same as your line-height:
header nav ul li a { height:2.5em; }
This works for me, in Opera 11.64. I see you've already tried this solution, but I'm guessing the reason you haven't made it work, is because the line-height is 2.5em, not 2.8 (unless you've changed it).
At the moment, I'm building my own Wordpress Theme. Amongst others I have a problem with the widgets... i want them to have a border (CSS) but it wont work. I tried everything, from different paddings to different margins. I mean its just a border... can it really be that hard?!
URL: http://www.biggaa.de
Search for this section in your CSS
#sidebar li {
list-style-type: none;
margin-top: 5px;
margin-bottom: 5px;
text-align: left;
border: 1px #CCC;
background: black;
}
You need to change the line that says
border: 1px #CCC;
to
border: 1px solid #CCC;
Also, change to color to whatever you desire. Your widgets also use the CSS class "widget" so you could try doing this as well:
.widget {
border: 1px solid white;
}
I would recommend using Chrome's Developer Tools, or Firebug for Firefox, and inspect the element of the page (right-click then inspect element). This will allow you to focus in on areas of your website you want to change, without having to dig through all the CSS. Good luck!
i wanted to know if i can change the background color of the of hovering option using css only. I am not bothered about browser compatibility. But give me a solution that works across most browser.
I think the best solution first is to know that you DON'T have to expect that you page look the same in all browser. A good clean solution is use the power of each browser to do this. for example build a css for chrome/safari, another for IE and a last one for Firefox, you can do it as the follow example:
and I think use JAVASCRIPT for this purpose is NOT the best solution.
for web-kit safari/chrome
select{
-webkit-appearance: button;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-webkit-padding-end: 20px;
-webkit-padding-start: 2px;
-webkit-user-select: none;
background-image: url(../img/forms/arrow_blue.png),
-webkit-linear-gradient(#E1E1E1, #FFF 30%, #FFF);
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #CCC;
color: #999;
font-size: 90%;
font-family:Comfortaa, Arial, Helvetica, sans-serif;
margin: 0;
overflow: hidden;
padding-top: 2px;
padding-bottom: 2px;
text-overflow: ellipsis;
white-space: nowrap;
height:40px;
}
For firefox:
#-moz-document url-prefix() {
select{
border-radius: 5px;
background-image: url(../img/forms/arrow_blue.png),
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #CCC;
color: #999;
font-size: 90%;
font-family:Comfortaa, Arial, Helvetica, sans-serif;
margin: 0;
height:auto;
padding:10px;
}
}
And you can target each IE in each version as example
<!-- cause not every body is pretty -->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="frontend/css/ie8-and-down.css" />
<![endif]-->
select{ border:1px solid #EEE;
width:auto !important;
height:35px !important;
padding:5px !important;
margin:5px !important;
line-height:1 !important;
}
I thinks in this way you will have nice dropdowns in all browser, while only safari/Chrome will be look exactly as you like, the other ones will behave as the user expect and you will not have to use javascript
Hmmm... you can use the :hover pseudo class to change the background-color of a select element but I just tried:
option:hover {
background-color: #F00;
}
with no result. However:
select:hover option {
background-color: #F00;
}
will change the background color of options when you hover of the select menu but as far as I can tell using option:hover itself won't work
The select tag depends on the OS you're on,
and you can't style it the way you want
the best solution is to use jquery to replace the select with a styled list (editable with css)
take a look:
http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/
is this the sort of thing your after?
select:hover { background-color: red; }
I know this is an old question, but since I had tryed to implement this in the past and although I came to the conclusion that is not worth it most of the time, I realize sometimes it really affects the design idea (i'm not a designer but they get very frustrated about details like that), I thought I would share a resource I found that actually suggests ways to work around the fact that it is very difficult (if not impossible) to get a consistent enough look and feel by just applying css to the tag. Hope it helps somebody.
The html select tag styling challenge