Why is there a giant white space in the middle of my accordion content?
This is how I have my .css, and it works completely with the exception of the white space in the middle.
#accordion .ui-accordion-content {
background-color: #dcaf4d;
color: #42dc86;
font-size: 12pt;
}
Here is an example of the white space:
http://jsfiddle.net/bQ5Gd/5/
And before you ask, What is causing this white box inside my Jquery Accordion? does not solve the problem.
It's caused by this:
.ui-widget-content {
border: 1px solid #AAA/*{borderColorContent}*/;
background: #FFF/*{bgColorContent} url(images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/;
}
It's in the jquery-ui.css file around line 246.
An alternative is to change your own CSS. Try changing this:
#accordion .ui-accordion-content {
background-color: #777;
}
to this:
#accordion .ui-accordion-content {
background: #777;
}
It is because the default background is assigned by an background image so setting it to none should solve it
#accordion .ui-accordion-content {
background-image: none;
width: 100%;
background-color: #777;
color: #000;
border: none;
font-size: 10pt;
line-height: 15pt;
}
Demo: Fiddle
Related
The red and yellow standard colors of xdebug can hurt your eyes after a few hours.
http://www.designified.com/blog/article/76/restyling-xdebug-output describes how to replace the style with javascript requiring jquery.
I was looking for a more straight forward way and finally found one.
The solution is the !important tag, it overrides the existing style values. Use the following css code to avoid eye cancer when using xdebug:
.xdebug-error {
font-size: 12px !important;
width: 95% !important;
margin: 0 auto 10px auto !important;
border-color: #666 !important;
background: #ddd !important;
}
.xdebug-error th, .xdebug-error td {
padding: 2px !important;
}
.xdebug-error th {
background: #ccc !important;
}
.xdebug-error span {
display: none !important;
}
.xdebug-error_description th {
font-size: 1.2em !important;
padding: 20px 4px 20px 100px !important;
background: #ccc no-repeat left top !important;
}
.xdebug-error_callStack th {
background: #666 !important;
color: #ddd !important;
}
Have a nice xdebug!
Yes you can. Try this css below.
table.xdebug-error {
width: auto;
background: white;
border: none;
border-spacing: none;
border-collapse: collapse;
box-shadow: 0px 3px 10px 0px black;
position: fixed;
top: 0px;
right: 0px;
z-index: 8888;
font: 14px verdana;
transform-origin: top right;
transform: scaleX(0.4);
opacity: 0.3;
transition: all 200ms ease;
}
table.xdebug-error caption,
table.xdebug-error th,
table.xdebug-error td {
text-align: left;
vertical-align: middle;
}
table.xdebug-error a img {
border: 0;
}
table.xdebug-error :focus {
outline: 0;
}
table.xdebug-error pre {
margin: 0;
}
table.xdebug-error tbody tr td,
table.xdebug-error tbody tr th {
border: none;
border-bottom: 1px solid rgba(0,0,0,0.2);
font-weight: normal;
}
table.xdebug-error tbody tr td {
padding: 3px !important;
vertical-align: top;
}
table.xdebug-error tbody tr th {
padding: 13px !important;
}
table.xdebug-error tbody tr td:nth-of-type(1) {
width: 5% !important;
}
table.xdebug-error tbody tr th[bgcolor='#f57900'] {
font-weight: normal;
background: steelblue;
color: white;
}
table.xdebug-error tbody tr th[bgcolor='#f57900'] span {
display: none;
}
table.xdebug-error tbody tr font[color='#00bb00'] {
color: #005e00;
}
table.xdebug-error tbody tr td small {
display: none;
}
table.xdebug-error tbody tr td i {
padding-left: 12px;
}
table.xdebug-error:hover {
transform: none;
opacity: 1;
}
CONS:
Depending on your other css defs, you may have to fiddle a bit until it looks as promised.
It's not as beautiful as a Laravel/Symfony error
PROS:
You can see the actual page, despite the error. (Message will be dimmed and pushed on the right side, appearing on mouse hover.)
It's nothing more than CSS
You can even add it to your page via CSS Live Editor Plugin or something similar; therefore, no need to add to your own code
It won't break your styling, won't stuff a whole lot of text into a tiny container where the error happened, etc. - because it's position:fixed.
Pleasant to the eye - you'll end up throwing errors just to see it again :)
Another option is to disable xdebug from overloading var_dump.
In the php.ini [XDebug] section add xdebug.overload_var_dump=0
Formatting the output is then up to you; one such way could be wrapping var_dump in your own debug function that prints <pre> tags.
// notice the line height, the padding(cellspacing), monospace font, font size, making readability better at least for me.
//
// A FILENAME : xdebug_stack_trace.css
//
// This is how the xdebug_stack_trace.css is called from the index.php page
//
// <style><?php require_once("./resources/css/xdebug_stack_trace.css");?></ style>
//
// notice that on the line above there is a space between the slash
// and the 'style', on the ending 'style' tag, otherwise the display
// get all messed up when this page gets loaded.
//
// make sure that when you copy the 'style' line from here to the
// index page, that you remove the extra space at the ending 'style'
// tag of the index page.
// +---------+---------+---------+---------+---------+---------+---------+
// orange/black td header line
// +---------+---------+---------+---------+---------+---------+---------+
.xdebug-error th
{
font-family:monospace;
font-weight:normal;
font-size:15px;
padding: 6px 6px 6px 6px;
border:1px solid black;
background: #FFCC99; // orange
color:#000000; // black
}
// +---------+---------+---------+---------+---------+---------+---------+
// black/white th header line
// +---------+---------+---------+---------+---------+---------+---------+
.xdebug-error > tr:first-child > th:first-child,
.xdebug-error > tbody > tr:first-child > th:first-child
{
line-height:1.6em;
padding: 10px 10px 10px 10px;
border:1px solid #000000;
background: #000000; // black
color:#FFFFFF;
}
// +---------+---------+---------+---------+---------+---------+---------+
// green/black td content one or more lines
// +---------+---------+---------+---------+---------+---------+---------+
.xdebug-error td
{
font-size:14px;
padding: 6px 6px 6px 6px;
border:1px solid green;
background: #D1FFE8; // light green
}
// +---------+---------+---------+---------+---------+---------+---------+
I am currently developing a WordPress plugin and the code below is saved in a file called style.css
.toggle { background:url(images/plus.png) 0 5px scroll no-repeat; margin-top:20px; padding:0 0 0 35px; display:block; text-transform: normal; font-size: 18px; position:relative; line-height:25px; }
h4.toggle a { color: #888; padding-top:2px; text-decoration: none; text-transform: normal; }
h4.toggle a:hover { color:#666;}
h4.active { background:url(images/minus.png) 0 5px scroll no-repeat; display:block;}
h4.active a:link { color:#666;}
.toggle_content { clear:both; margin:0px; }
div.toggleinside { padding:15px; padding-left:35px;}
h4.toggle { margin-bottom:0}
.fancytoggle {
position:relative;
border:1px solid #ccc !important;
background-color:#fff;
padding:10px;
margin-bottom:10px;
background:-moz-linear-gradient(bottom, #f2f2f2 0px, #fff 100%);
-moz-box-shadow:0px 1px 1px #aaa;
background:-webkit-gradient(linear,left bottom,left top, color-stop(0, #f2f2f2),color-stop(1, #fff));
-webkit-box-shadow:0px 1px 1px #aaa;
box-shadow:0px 1px 1px #aaa;
}
.fancytoggle h4 { margin:0 0 2px 0; }
.fancytoggle .toggle_content { padding-bottom:0; }
However as this is a wordpress plugin i can't just have
background:url(images/plus.png)
as this is being enqueued onto header.php so i need to include this line below
$jquery_libraryurl = plugins_url('jquery_library', 'jquery_library').'/';
to output the whole url to the image. So I need to know how can I accomplish this. I have tried using style.php with this at the top <?php header("Content-type: text/css"); ?>
The only problem is I cannot use the line above calling the function plugins_url() as wp-load.php is not in the file and if I include it puts a big load on the css file.
So I am looking for a way to maybe output the css code with the variable above to a css file using php. I have looked everywhere and cannot find anything useful that may help me to accomplish this.
What are my options to do this and is there a way around this that is simple.
I have a contact form 7, where a message display after submission of contact form.
My problem occur when I tried to whole message split into two different colors.
So can I achieve that. I make a span class to change the color of some part of string as you can see that iI posted in the end. But it is displaying without any html or css tag effect.
**Your query has been submitted. <span style="color:green;">A member of staff will be in contact soon.</span>**
`div.wpcf7-mail-sent-ok span {
border: none;
font-weight: normal !important;
color: red !important font-size:24px !important;
position: relative !important;
width: 840px;
line-height: 26px;
}`
Hope you understand, any help would be appreciated.... Thanks
my html tag are not working, I have output like "Your query has been submitted. <span style="color:green;">A member of staff will be in contact soon.</span>", see there is span tag coming as plain text
Add a semi colon after the color: red !important
div.wpcf7-mail-sent-ok span {
border: none;
font-weight: normal !important;
color: red !important;
font-size:24px !important;
position: relative !important;
width: 840px;
line-height: 26px;
}
Hi please replace this code instead of your old style...
div.wpcf7-mail-sent-ok span {
border: none;
font-weight: normal !important;
color: #ff0000 !important;
font-size:24px !important;
position: relative !important;
width: 840px;
line-height: 26px;
}
I think you didn't add semicolon (;) in between color and font-size property..
I am currently writing an addon module for our Billing Software, and the modules automatically inherit the template's CSS when you use any of the elements. For example, I use the "datatable" element for my tables, and it inherits the CSS style depending upon what template the user is currently using.
I want to hide the inner border that the "datatable" element has, and I am using tags to put all of my CSS in the module code. I am not quite sure how I can do this, but here is what the CSS looks like from the billing software's template style.css file.
table.form {
border: 1px solid #B8CBE7;
background-color: #fff;
padding: 0px;
}
table.form td.fieldlabel {
text-align: right;
font-weight: bold;
padding: 5px;
background-color: #E4ECF8;
}
table.form td.fieldarea {
text-align: left;
padding: 5px;
border-bottom: 1px dashed #ccc;
}
.tablebg {
background-color: #e9e9e9;
}
table.datatable {
padding: 0;
margin: 0;
}
table.datatable th {
background-color: #f3f3f3;
font-weight: bold;
text-align: center;
}
table.datatable td {
background-color: #fff;
text-align: center;
}
table.datatable tr.rowhighlight td {
background-color: #EFF2F9;
}
table.datatable tr:hover td {
background-color: #EFF2F9;
}
You can define the same datatable class again and set it's border as 0. You will just need to ensure this new css definition comes after the actual one
table.datatable {
border: 0px;
}
try append this line in CSS stylesheet:
.datatable{
border: 0 !important;
}
Hey guys, I have this piece of code:
while($uno=mysql_fetch_assoc($results)) {
echo '<div class="wcapt"><a class="neutral" href="../images.php?id=' . $uno['id'] . '"><img class="pad" src="'. $uno['thumbs'].'" border="0" /></a><br/><center><p>'.$uno['name'].'</p></center></div>';
}
And all the images I link to have exactly the same size. Here's the Mainstyles.css
div.wcapt
{
border: 1px solid green;
float: left;
padding: 0;
margin: 3px;
font: 11px/1.4em Arial, sans-serif;
color: gray;
}
img.pad
{
padding: 5px;
}
a.neutral
{
display: inline;
font-weight: normal;
text-transform: none;
background-color: transparent;
color: white;
text-decoration: none;
}
The problem is that Firefox adds some extra padding to the first image, and only the first image. And this is really annoying. Here's a screenshot of the page:
that's why it's recommended to use a "reset" css... so you wont have this type of inconsistencies between browsers.
Try using a reset css and if the problem remains then it's not the browsers fault =)
Good luck
have you tried targetting the selector more explicitly using..
div.wcapt img {
padding: 5px;
}
You could then remove the .pad class completely
Try adding a pseudo selector more information here
http://www.w3schools.com/CSS/css_pseudo_classes.asp
Note you need to set the doctype to do this
div.wcapt img:first-child {
padding: 2px;
}
I used Firebug and figured out the problem, thanks guys, and I had to answer my question since the answer was in the comments and I can't accept comment answers.