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
Related
In an web project that I'm working on we use JavaScript to render big, complex web pages. We are currently working on a way to be able to move parts of the page to another tab/ send the content as a string and render the same content on another computer/browser looking just as the original page.
We could use the same scripts to rerender the page but when rerendering performance is of utmost importance and therefore we want to avoid it. So our approach has been to iterate over the relevant elements and abstract the elements together with their current styling using getComputedStyle(). This method works well, however we have encountered some problems including pseudoelements.
To include them we have gotten the styling using
getComputedStyle(element, ':after');
which works well in Chrome. However, In IE and Microsoft Edge this only works most of the cases. One case that does not work is if the pseudo element has a border. Then the border-style is not included in the CSSStyleDeclaration returned from the function.
So my questions are:
Are there any better ways to get the pseudo element stylings that bypasses this problem?
Is there any other(better) approach to the problem at hand?
Minimal example reproducing the error in fiddle. When clicking the button Chrome outputs:
border-bottom: 1px solid rgb(255, 0, 0)
border-bottom-color: rgb(255, 0, 0)
border-bottom-style: solid
border-bottom-width: 1px
while Edge outputs:
border-bottom:
border-bottom-color: rgb(255, 0, 0)
border-bottom-style: none
border-bottom-width: 1px
I'm sure you have solved this another way by now... but as the problem still exists today in Edge; here is a work-around for it.
The issue is that for border-style IE is returning the parent elements value instead of the pseudo elements, so if you set the style there, and give it no width, the pseudo element will inherit it. Extracting from your fiddle to example...
#pseudo-element-test-id {
position: relative;
border-bottom: 0 solid;
}
#pseudo-element-test-id::after {
position: absolute;
top: 15px;
left: 0;
content: " ";
width: 150px;
border-bottom: 1px solid red;
}
I'm using the Stylish browser extension to create a custom dark theme for a website. In a recent update, the site owner came up with rounded corners for a lot of things, which is ugly as hell in my opinion, especially with input fields. However, when I try to apply border-radius: 0px !important; using Stylish, the input fields go nuts. It works fine on things like regular divs, but not on any kind of inputs, be it a regular <input type=text>, a <textarea> or even things like a <select>.
This is how a text area looks like without my custom CSS:
This is how it looks like with my custom CSS:
This is how it looks like when I add border-radius: 0px !important; to my CSS:
When border-radius: 0px is applied, all other border properties and background are ignored. Not even the site's native CSS properties are used. The browser just uses the standard look like there were no CSS rules defined for the textarea at all. color still works though.
It's like border-radius was intended to change everything. If I add it only on :hover, the input fields only go crazy on hover. I don't even have to use 0px: The issue happens even when I use the same 6px that the site's native CSS uses.
This is my whole CSS rule:
textarea, input[type="text"], .textbox {
border-color: #282828 !important;
border-width: 3px !important;
border-style: solid !important;
border-radius: 0px !important;
background: #0F0F0F !important;
color: grey !important;
}
What's really weird is the fact that border-radius: 0px causes no problems when added using the Firefox developer tools, so it seems to be a problem with stylish.
What's causing this madness? How can I fix it? Is there a workaround? The only idea I had is to use a custom JS that adds the property ...
Oh my god, removing border-style: solid; fixes everything. I have no clue why, but I am happy now.
I've a Joomla3 website with a custom template looking fine in most browsers but awful in IE8. Lots of the elements just don't seem to be picking up background colours and are just white.
For instance the footer normally has a background colour. When I look at the template.css file (compiled from bootstrap and my custom template.less file) you can see the footer formatting
.footer .container {
padding: 5px;
border: 3px solid #bbbbbb;
padding-top: 0px;
border-top: 0px;
-webkit-border-radius: 0px 0px 4px 4px;
-moz-border-radius: 0px 0px 4px 4px;
border-radius: 0px 0px 4px 4px;
background-color: rgba(245,248,250,0.7);
}
But when I use the website development tools of ie8 (via wine on my mac - in case that makes a difference) to examine why it is just white in ie8, I see
which seems to show that the background-color of .footer .container is just being ignored.
Why would this be? Is this because it's compiled into a rgba format by the less compiler?
Many thanks for any help on this and how I might solve it.
CSS3 colors, such as rgba() are not supported by IE8, that's why it's not working.
You will have to take an alternative approach for specifying the background-color if you want support in IE8. If you don't mind losing the transparency, just use background-color:rgb(245,248,250); or.. background-color: #F5F8FA;
See http://caniuse.com/css3-colors
What you can do is import css3.js in your website. This javascript files allows you to use CSS3 attributes that will work on older browser that wouldn't usually support it.
http://imsky.github.io/cssFx/
Once you've imported that, you can use the following as you were before:
background-color: rgba(245,248,250,0.7);
Just to be on the safe side, I think it's always good practice to have a fallback, just incase, like so:
background-color: #F5F8FA;
background-color: rgba(245,248,250,0.7);
Note that the fallback comes before rgba()
Hope this helps
I encountered this same issue when using IE11 in enterprise mode.
I had this style set:
.heading {
background-color:#f1f1ef;
border-style:solid;
border-color:#E4E3DD;
border-width:1px;
}
and my table heading did not have the background color:
<th class="heading">Test</th>
I had to manually set a property bgcolor for this to work in Enterprise mode:
<th class="heading" bgcolor="#f1f1ef">Test</th>
I'm trying to style tag in html using css. It works in Firefox properly but not in chrome. Here is the code i use in styling forms. After referring some through internet I used !important; command along with this style sheet. But it did not worked.
.style {
display: block;
border: none;
color: #333;
background: transparent;
border-bottom: 1px dotted gray;
padding: 5px 2px 0 2px;
width:300px;
font-size: 14;
color:#FFF;
}
.style:focus{
outline: none;
border-color: #51CBEE;
}
simply? you can't.
Firefox allows you to do some styling on a <select>, but is not consistence along browsers.
You should go for a JavaScript masking solution if you really want the <select> to be styled crossbrowser.
Maybe Chosen or Selectize can help you.
Unfortunately there isn't yet a cross-browser compatible route of styling form elements with CSS: it's not usually left to the designer to have control over their appearance/behaviour so form elements are notoriously difficult to style. Many browsers specifically do not allow you to style them at all!
If you need to get a consistent look across all browsers, the only route is to use JavaScript to replace the form element in-view with stylised HTML elements.
Here's an article that lists a few of the options available for you: http://www.jquery4u.com/plugins/10-jquery-selectboxdrop-down-plugins/
I am designing home page of my domain registration website and I am stuck at one place. Please go through the website at http://a2host.in/
In Firefox and Google Chrome the Search and Go Button are in same alignment with the text and select box but in Opera and IE8, they are falling down a bit.
I have tried out all the things but I am not able to figure out the actual problem.
I see a lot of unneccesary styling. In essence, this is what you want:
Basic form without floats
You can tweak the font-sizes and colors here, until you have what you want. But this is a good starting point, because it is cross browser identical.
Also, think about using the <button> element instead of the <input type="button">. It gives you more freedom in styling.
Form-controls are a pain to get them look good in all browsers, especially buttons and select-boxes.
Please comment out the following CSS3 properties (please see below) in the .regbutton class of your stylesheet and then try
.regbutton, .regbutton:visited {
background: #222 url(/getImage.php?src=myUploadedImages/overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
/*-moz-border-radius: 6px;*/ /*comment out all CSS3 properties*/
/*-webkit-border-radius: 6px;*/
/*-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);*/
/*-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);*/
/*text-shadow: 0 -1px 1px rgba(0,0,0,0.25);*/
/*border-bottom: 1px solid rgba(0,0,0,0.25);*/
position: relative;
cursor: pointer;
}
try to set border:none for your buttons