I am using a plugin on one of my pages and there seems to be a small conflict with bootstrap and the css of the plugin.
Here is an image of the issue:
Are you can see, the two selects are pretty long and they are on two seperate lines. The CSS code from Bootstrap that is causing that is:
select {
background-color: #ffffff;
border: 1px solid #cccccc;
width: 220px;
}
When I turn that attribute off in the Firefox Console, it renders it normally.
How can I go about ignoring the width in the select without messing with the core CSS?
Make an new rule that will override the last one.
select {
width: initial;
}
if you want this rule to apply only to that specific select, and not all of them, just give it an id, and use the width:initial rule in it's rule set
Related
I am generating a PDF Report using phantomjs.
Below is my CSS that avoids splitting text across two pages. It moves the entire line to the new page as expected.
.columns {
page-break-inside:avoid;
}
I wish to insert a margin and border at the beginning of each page, but haven't found a way to apply styling after these page breaks occur. Adding something like below adds the styling I desire to every column class, but I only want it applied to the first occurrence on each page.
#media print {
.columns {
border-top: .1rem solid #f0f1f4;
border-radius: .2rem;
margin-top: 40px;
}
}
I have some external CSS file with this class defined
.abilityButton {
background-repeat: no-repeat;
background-size: 100% 100%;
background-color: black;
visibility: hidden;
cursor: pointer;
margin: auto;
float: left;
z-index: 10;
}
Then I have the same class defined in the main file, with some properties, that I need to define dynamically by php. Looks like this:
.abilityButton {
width: ".(($inner_cell_space/4) * 0.92)."px;
height: ".(($inner_cell_space/4) * 0.92)."px;
border-top: solid ".(($inner_cell_space/4) * 0.04)."px lightgrey;
border-left: solid ".(($inner_cell_space/4) * 0.04)."px lightgrey;
border-bottom: solid ".(($inner_cell_space/4) * 0.04)."px darkgrey;
border-right: solid ".(($inner_cell_space/4) * 0.04)."px darkgrey;
}
My problem is in the external file, where only those 3 background properties work. Other simply disappear and are not shown in the browser development tool.They are obviously also not applied and i do not understand the problem.
I am convinced that there is nothing that could possibly override them directly, so I have no idea how to explain this behaviour.
What I need is to explain, why are properties in the external file discarted and how to prevent it.
EDIT 1
MS Edge renders the page correctly. So the problem is probably i chrome itself.
ctrl + shift + r doesnt work.
Inspecting the element result: Chrome now says that the source CSS does contain the properties (but they are not applied)
One thing to remember is that the stylesheets are cascading. It's possible they are being overwritten elsewhere.
You should use element inspector in your browser to target elements which should have styles, and scroll down the sidebar to see if they are being applied, but are being overwritten by something else.
Sometimes a fix for this is just being more specific in your CSS.
Since the css rules aren't showing up in the inspector, it's probably either caching, or you're editing the wrong file/not uploading the file after making changes.
Have you tried doing a hard-refresh using ctrl+shift+r or cmd+shift+r? The external css file might be cached by your browser. Maybe I'm stating the obvious, but it has happened to me more often than I'd like to admit.
I'm using the most recent version of Wordpress in combination with a theme.
On that theme there is some css code I don't need/want and which makes my customized page look bad. This would be one example:
#content table {
border: 0;
margin: 0 0px 24px 0;
text-align: left;
width: 100%;
vertical-align: top;
}
#content tr {
vertical-align: top;
}
So far I always commented out such parts directly on the style.css of that theme. But like that I'll always loose my changes whenever I update that theme.
Now I've started to bring all my changes into the custom css directory of that theme. This works good for changes, however I have no idea how to remove the part I'm usually commenting out.
Any idea how to do that?
This question aims also to such changes where I'm commenting out parts of that style:
#content tr td {
border-top: 1px solid transparent;
/*
padding: 6px 24px;
vertical-align:top;
*/
}
Hopefully you understand what I mean :)
You need to create a child theme and then import the functions.php and style.css in it.
Then add your changes here.
You will never lose it whenever you will update your theme.
Please let me know if you want code too...
Since you are using a separate custom css file, commenting will obviously not work as your main css file will still contain some of the same style sets. So, to remove a style set entirely do the following on your custom CSS file.
#content table {
display:none!important;
}
You can do this for each style set or add them all together, separating them with a comma. i.e.
#content table, #content tr {
display:none!important;
}
In regards to the second part of your question, you can't remove just part of a style set but you can overwrite it by continuing to use the !important declaration and using opposite values such as changing padding from 24px to 0px if you don't want any padding. You will need to realign to your preference or set it to baseline which is the default. (Again, this goes in your custom css file)
#content tr td {
padding: 0px 0px!important;
vertical-align:baseline!important;
}
Notice that I didn't include border-top: 1px solid transparent; because your main CSS will still apply this part of the style so you only need to overwrite anything you don't want or wish to change on your custom CSS being that there is no way for you to comment style sets in the same manner as you would using a single CSS file.
If you've found it helpful please mark this as the accepted answer to your question. Thanks.
I am trying to fix a couple of problems when you view this web page in IE7.
(the web page looks great in iE8 and iE9)
I have uploaded the single web page onto a test site:
http://www.jrdesign-website.co.uk/bar_menu/bar_menu.html
When the page has loaded, scroll down to view. You will see the prices on the right hand side. The small duplicated full stops should line up with the prices and food description.
Any advice would be greatly appreciated
SO your code has a with the dots underline on it as a repeating background and within that there is a wrapper div floated left with the food item name and nested within a that a class .bar_font_bold_med which is 'float: right'.
Two possible ways of getting to a solution.
1\ Why not have the price i.e. the in its own instead. That will sort out the positioned-on-the right goal. It will also allow you to use or middle or top etc on the price to independently adjust its vertical position in relation to the food item. Also use CSS to supply the dotted underline. Eg consider using a border-style on the lefthand thus.
border-bottom: 5px dotted #fff
How you attach the style is up to you. Perhaps a CSS classname on the relevant s is the best way i.e.
<td align="left" width="565" height="xxx"
bgcolor="#000000" background="images/yellow_dot.jpg"
... becomes...
<td class="foodItemCol" height="xxx">
...and you have the CSS styles
.foodItemCol {
border-bottom: 5px dotted #ffffff;
width: 565px;
background-color: #000000;
}
Or if you go with my suggestion of having another for the price then use this CSS selelector which means you will not have to bother adding a classname
#bar_menu_text table td {
border-bottom: 5px dotted #ffffff;
width: 565px;
background-color: #000000;
}
#bar_menu_text table td + td {
border-bottom: none;
width: auto;
background-color: #000000;
}
What the second style selector is saying where the second or subsequent sibling appears after the first then overwrite the styles that where applied in the '#bar_menu_text table td' rule above i.e. so the price column does not have a dotted underline.
PS You have used a WYSIWYG editor to generate the code for this page haven't you? I have modified my answer baring that in mind as I guess you aren't used to coding HTML /CSS by hand.
PPS you don't need the z-index:5 or any z-index's at all whatsoever...they are only useful when the element the are applied to is position: relative or position: absolute etc.
I was wondering; is it possible to style the css3 resize property?
div {
resize: both;
overflow: auto;
}
I want a horizontal resize, and would like a vertical bar, rather than the little thingamagig in the corner in the default. See images. In short, can I make this:
Into something like this:
...and if this is not possible through css, any other ideas? I would like to keep things as lightweight as possible.
Obs: This answer is for WebKit only, couldn't find for other browsers nor testing with their - names worked.
Code:
Considering you have an element with the following CSS:
.styled {
resize:both;
overflow:auto;
background:orange; /* just for looks */
}
If you add webkit's specific pseudo-selector ::-webkit-resizer, you can style the handle:
::-webkit-resizer {
border: 2px solid yellow;
background: blue;
box-shadow: 0 0 2px 5px red;
outline: 2px dashed green;
/*size does not work*/
display:block;
width: 150px !important;
height: 150px !important;
}
Visual:
http://jsfiddle.net/RaphaelDDL/ryphs/1/
Final thoughts
I've tested with ::-moz-resizer on FF22, didn't worked. so yeah, you are stuck into making the javascript version, mimicking StackOverflow's textarea handle.
Extra info
When styling shadow dom pseudo selectors, do NOT stack them into a single selector ::-webkit-resizer, ::-moz-resizer { /*css*/} because will invalidate the entire selector.
Here is mapped all (or most of) Shadow DOM selectors: https://gist.github.com/afabbro/3759334
More info about Shadow Dom (HTML5Rocks) here and here.
Better looking and organized list of shadow dom selectors with screens
List of Mozilla's selectors (there is no pseudo-selector for resizer)
I would like to propose my solution
https://jsfiddle.net/tomoje/x96rL2sv/26/
It works on every browser, type of device, can be operated with mouse and finger (touch) and doesn't use any image etc.
The trick is to give to user a handle and to expand the handle to whole working area, to avoid mouse/touch to step out from the handle area during moving (it can happen when the javascript function will slow down due to some computer occupation or else)
<div class="cSuwakT" id="idSuwakKontenerGalka"></div>