I've got a CSS conflict that's preventing me to set the width of a div and I'm really struggling to see where it is.
Can someone give me a hand?
It's this div here:
body.node-type-campaign #com_col_two {
width: 400px;
padding: 0;
border: 1px solid blue;
}
A link to the page: http://www.wdm.org.uk/test-campaign
Thanks!
Remove the inline-style width:auto; from <div id="com_col_two">
Have you tried just:
#com_col_two {
width: 400px;
padding: 0;
border: 1px solid blue;
}
And remove all the added properties on the <div> tag?
You have a lot of classes applied to the elements in your page.
Also, have you tried using Firefox with Firebug. I'm sure a lot of people would recommend using that.
Check out FF's Web Developer Toolbar or Chrome's Developer Tools: both have a CSS view which shows you which style definition affects this specific element (it is triggered by rightclick->Inspect element).
Related
I bought a website template which used -- in their CSS property value. This gives the errors property value expected and at-rule or selector expected. I know of -- being used in for CSS property but never for property value. What does the -- used here mean?
.my-sm-nn1 {
margin-top: --0.25rem !important;
}
The use is absolutely useless. If you try run your code you will see the browser ignores it, it looks like:
Sorry to say, but unfortunately you bought a template which is not perfectly clean. This can happen. Maybe it was just a typo by the developer, maybe he didn't care. Hopefully the rest of your template works as expected.
You can run the code and try yourself. The line margin-top: --0.25rem !important; will just be ignored by any browser.
.outer {
background-color: orange;
border: solid 1px black;
}
.inner {
background-color: yellow;
border: solid 1px fuchsia;
margin-top: --0.25rem !important;
}
<div class="outer">
<div class="inner">
</div>
</div>
Note: if you wonder why is there now more CSS then in your question: I like to add background-colors and borders to elements to be 100% sure that some rules do or do not effect any styling of the elements.
Is it possible to change the layout of a checkbox without adding the label tag in CSS?
Things like this do not have any effect:
input[type=checkbox][disabled] {
background-color: green;
border: 10px solid red;
}
The only thing I found so far is how to change the opacity.
I'm not sure if this will be much use to you, but it does allow you to "style up" a checkbox without the need for a label. I've remove the disabled flag so you can swap between the different styles. Shouldn't be difficult to add it back in if this will work for you.
Fiddle is here.
input[type=checkbox]:checked:before {
background-color: green;
border: 10px solid red;
}
input[type=checkbox]:before {
content:'';
display:block;
height:100%;
width:100%;
border: 10px solid green;
background-color: red;
}
The above only works on Chrome, however, it seems like Chrome is in the wrong where the specification is concerned.
A fuller answer here: CSS content generation before or after 'input' elements
As of today there is no solution, if we assume a cross browser functional styling, to style the <input type="checkbox" > alone, other than a few properties like opacity, width, height, outline (and maybe a few more).
Using a label (or other content elements) is what you need to do that and here is a good (which this question is likely a duplicate of) post with lots of options: How to style checkbox using CSS?
Note: If you know more properties, feel free to update this answer.
I am designing my theme for my website, and have no other CSS files in my folder besides template.css.
.header-wrap,
.nav-wrap,
.slideshow-wrap,
.body-wrap,
.sub-footer-wrap,
.footer-wrap {float: left; width: 100%; clear: both;}
.header,
.nav,
.slideshow,
.body,
.sub-footer,
.footer { width: 960px; margin: 0 auto;}
.header-wrap { height: 118px; background: url('files/img/background/bg-header.png')
repeat-x; border-bottom: 1px solid #6A6A6C}
.nav-wrap { height: 38px; background: url('files/img/background/bg-nav.png') repeat-x;
border-top: 1px solid #D9D9DB; border-bottom: 1px solid #B8B8BA}
.body-wrap { background: #F4EDDB url('files/img/background/bg-body.png') repeat-x;}
I don't believe that the issue is relating to that but there must be something else doing this to my webpage:
The red lines show the whitespace that is being generated for some unknown reason. I have been looking at this for a while and have not been able to find the source. I was wondering if anyone has had an issue like this before? Or someone that might be able to point me in the right direction to fix the matter. I have also tried multiple browsers and have the same issue. I have also made sure that it wasnt just an administration issue. It keeps happening no matter what. I am using Google Chrome currently.
--EDIT--
Here is my jsfiddle for those of you who asked (it still does it on there too) this has the full html
http://jsfiddle.net/RCMh7/
Add this to your css.
body { margin: 0px; padding:0px}
Or google "reset.css" and add it into your theme, the Eric Meyer one is fairly popular.
http://www.cssreset.com/
you should put margin-top:0 and margin-left:0 on this divs.
can you show on jsfiddle for us? or a link page?
Use the firebug for firefox tool to check that CSS issue . It might be occurring just due to some background image or CSS file. For all CSS linked to that theme check that theme's .info file also.
Although As per my experience you will able to get exact source of CSS by using firebug .
It may be some background kind of image or CSS effect.
I am attempting to make a simple column system I can use on a site and embed into any element that is cross browser and easy to use. I am trying to do this with pure CSS if at all possible. Everything works except the borders don't line up.
Everything I've tried to do hasn't worked.
View the css here:
http://jsfiddle.net/JamesKyle/8H7hR/
Script Version:
http://jsfiddle.net/JamesKyle/8H7hR/3/
You use display:table-cell for your span like this:
.columns .col {
display: table-cell;
position: relative;
width: 49.9999%;
text-align: justify;
border-left: 1px solid #ccc;
background: #f5f5f5;
}
Check this fiddle http://jsfiddle.net/8H7hR/5/
Here's an article that should help: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
How do I square the corners of a submit button? Can it be done with CSS? I just noticed that Stackoverflow buttons are pretty much the same thing (don't close it for mentioning SO, just want to illustrate what I mean).
Use the following field and command in your css:
border-radius: 0;
Just add CSS to it, and the default look will dissappear.
input.button, input.submit {
border: 1px outset blue;
background-color: lightBlue;
}
edit: changed the selector to use class name instead, as suggested in comments.
You could use the HTML element instead of input type. It's quite easy to style that one.
If you specify the height and width in the css, you'll make the corners square, and retain the certain level of automatic fancy-ness that normal buttons have... and that way, you wont have to build your own.
input.button, input.submit {
height: 30px;
width: 20px;
}
I seem to remember this only working if the height is large enough, but it might work any which way.
Use border: 1px solid for the element.
<a class="test">click me</a>
<style>
.test
{
cursor: pointer;
background-color:#E0EAF1;
border-bottom:1px solid #3E6D8E;
border-right:1px solid #7F9FB6;
color:#3E6D8E;
font-size:90%;
line-height:2.2;
margin:2px 2px 2px 0;
padding:3px 4px;
text-decoration:none;
white-space:nowrap;
}
</style>
This is how a stackoverflow button is made.