Created my first wordpress site and everything was styled and working correctly until today. We added an ssl, switched everything over to https, and since then a couple of my css classes no longer work. Most of them do, but my styling for a specific table on the testimonials page and the media queries for tables no longer work.
When inspecting the html and css on the site, the html shows the classes on the elements and the css file shows the classes and their elements, but the classes are not being applied. The testimonals page the table with the images and buttons was centered and had the buttons overlapping the images but now none of that shows.
The css for this table is:
table.test {
width: 66%;
margin: auto;
}
td.nopad {
padding: 0 !important;
margin: auto;
text-align: center !important;
}
td.nopad-btn {
padding: 0 !important;
margin:auto;
text-align: center !important;
position: relative;
top: -10px;
}
And the html:
<table class="test">
<tr>
<td class="nopad"><img src="https://eyealivedrops.com/wordpress/wp-content/uploads/2015/11/group-people.jpg" alt="group-people" width="290" height="199" /></td>
<td class="nopad"><img src="https://eyealivedrops.com/wordpress/wp-content/uploads/2015/11/pets.jpg" alt="pets" width="290" height="199" /></td>
</tr>
<tr>
<td class="nopad-btn">People Testimonials</td>
<td class="nopad-btn">Pet Owner Testimonials</td>
</tr>
</table>
However, the site is not displaying these styles on the page and I can't figure out why..
This is the link to the full css file, in case its something somewhere else Thank you in advance to anyone who looks into this, I've been looking through the Q&A's here and can't find anything else that fits my problem.
You have an error in your CSS file...
#media screen and (max-width: 767px) {
table:not(.shop_table.woocommerce-checkout-review-order-table, .shop_table.cart {
display: block
;
}
You forgot to close the ), so the rest of your CSS is not loading proper.
It has nothing to do with http or https as it fails in both cases. You might have more css issues... I'll look further.
UPDATE
You also have this error:
.product-total {
padding: 0, 10px, 10px, 10px;
}
Should be:
.product-total {
padding: 0 10px 10px 10px;
}
UPDATE 2
You have another error here:
button.button,
input.button,
a.button,
input.wpcf7-form-control.wpcf7-submit {
background: #AABBD4 !important;
background-image: -webkit-linear-gradient(#AABBD4, #4873A6);
background-image: linear-gradient(#AABBD4, #4873A6) !important;
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
text-shadow: 1px 1px 3px #666666;
font-family: 'Lato', 'Open Sans', Arial, sans-serif;
font-weight: 400;
color: #ffffff;
padding: 10px 20px 10px 20px;
text-decoration: none;
line-height: 95%;
}
Missing unit of measure on -webkit-border-radius: 28; -moz-border-radius: 28; which I assume should be px
Related
I am trying to get the following effect where numerical entries in cells are right aligned but with 25px of right padding.
For some reason, I can't seem to override a setting of padding: 1 in my template.
The numbers end up without the padding-right. (what you see in the sample above was the result of tweaking the CSS in Inspect as described below)
The view code is
<div class="field">
<td><%= :number_of_rolls_fill %></td>
<span class="number_right"> <td><%= #bedsheet_line.number_of_rolls_fill %></td></span>
</div>
</tr>
The css in application.css (which rails uses for custom css in addition to the template)
.number_right {
/* used to right align numbers in table cells */
margin: 0 !important;
padding: 0 !important;
text-align: right !important;
padding-right: 25px !important;
}
I've tried a number of variations on this.
If I do an inspect I found that if I uncheck the padding: 1px in BOTH areas indicated I will get the effect I want.
My style sheet has
.art-article th, .art-article td
{
padding: 1px !important;
vertical-align: top;
text-align: left;
}
.art-article th
{
text-align: center;
vertical-align: middle;
padding: 1px !important;
}
pre
{
overflow: auto;
padding: 0.1em;
}
.preview-cms-logo
{
border: 0;
margin: 1em 1em 0 0;
float: left;
I could probably get the effect I want by changing my style sheet but I that would cause issues in other areas of the app.
Here is a working sample that is close to your current code. It uses your css and modifies the view only.
/* css */
td.number_right {
/* used to right align numbers in table cells */
margin: 0 !important;
padding: 0 !important;
text-align: right !important;
padding-right: 25px !important;
}
# view
<tr>
<td><%= :number_of_rolls_fill %></td>
<td class="number_right"><%= #bedsheet_line.number_of_rolls_fill %></td>
</tr>
Here is a jsfiddle showing the result.
You can get rid of the <div class="field"> and the <span class="number_right"> and apply the number_right class directly to your table cell. The syntax wasn't pretty before so this will clean that up. Also, if you moved the span inside the table cell you'd have to set width or display: block; to get it to align properly.
example with span inside the td:
/* css */
td span.number_right {
/* used to right align numbers in table cells */
margin: 0 !important;
padding: 0 !important;
text-align: right !important;
padding-right: 25px !important;
display: block;
}
# view
<td><span class="number_right">$80</span></td>
You need to target that element specifically:
.art-article td .number_right {
/* used to right align numbers in table cells */
margin: 0 !important;
padding: 0 !important;
text-align: right !important;
padding-right: 25px !important;
}
Also, the span should be inside the <td> element:
<td><span class="number_right"> <%= #bedsheet_line.number_of_rolls_fill %></span></td>
I'm trying to use external css to format a 3-column table with 100% width and column widths of 10%, 80%, and 10% respectively. All my td attributes work from the external stylesheet except width.
<td style="width:10%">
works in inline css, but not as an internal style or from the external stylesheet.
It will read td widths from the external css if I remove the 100% width attribute from the table, but then the width of my table changes depending on the amount of text in it.
I have tried using
table-layout: fixed;
with no success. I've also tried removing width from one column at a time with no effect. All the examples I can find use pixels instead of % widths.
Have I missed something simple about table design?
Here's the relevant part of my external css:
table.border td {
border-width: 5px;
padding: 10px;
border-style: ridge;
border-color: white;
border-collapse: collapse;
-moz-border-radius: 0px 0px 0px 0px;
vertical-align: top;
width: 100%;
}
td.edge {
background-color: green;
width: 10%;
}
td.center{
width: 80%;
background-color: pink;
}
and here's the table's html:
<table class="border" >
<tr>
<td class="edge"> hi there</td>
<td class="center">it's me</td>
<td class="edge"> bye there</td>
</tr>
</table>
The table it gives me has a wide first column and narrow second and third columns.
Correct the CSS as follows (just removing "td" from this line: "table.border td") and it will work as expected:
table.border{
border-width: 5px;
padding: 10px;
border-style: ridge;
border-color: white;
border-collapse: collapse;
-moz-border-radius: 0px 0px 0px 0px;
vertical-align: top;
width: 100%;
}
td.edge {
background-color: green;
width: 10%;
}
td.center{
width: 80%;
background-color: pink;
}
This is jsfiddle example: https://jsfiddle.net/r281bv1z/
Hope this may help.
I used to have no problem with the css code i have been using. But, after I have changed from using "Lightbox2" to "fancybox", the spacing between the thumbnails and the thumbnail border (when mouse hovering above) disappeared. What has gone wrong?
Compare the problem page after switching to using fancybox (www.lixiao-art.com/test.html ) with the page using Lightbox2 ( www.lixiao-art.com/latest.html )
This is the code I use:
body { font-family: Verdana, Arial, Helvetica, sans-serif;
color: black;
margin: 0px;
background-color: RGB(181,170,128);}
*{
font-family: Verdana, Arial, Helvetica, sans-serif; font-weight:normal
}
#nav {float: left;
position: fixed;
background-color: RGB(233,231,197);
text-align: left;
font-size: 11px;
color: #645630;
width: 90px;
font-weight: bold;
padding: 100px 20px 100px 30px;
border: none;
min-height: 100%;
}
#content {float: left;
margin-left: 150px;
padding: 15px 20px 10px 80px;
width: 900px;
margin-top: 0px;
border: none;
font: black;
font-size: 11px;
}
#content a {text-decoration:underline}
h2 {height: 2em;}
.footer {
text-align:center;
padding-top: 50px;
padding-bottom: 1em;
font-size: 11px;
}
a{text-decoration: none;
color: #645630;}
a:hover {color: red;}
* {margin: 0;}
html, body, wrapper {height: 100%;}
.ImgBorder img { border:2px solid transparent;
height:100px;
}
.ImgBorder:hover img{ border-color: white}
.ImgBorder {display: block;
float: left;
margin: 30px 20px; }
h5{
clear:both
}
img { border: none; }
Thank you!
In your previous Lightbox2, each image is wrapped in an anchor
<a class="ImgBorder">
and the class ImgBorder has the value margin: 30px 20px
In your current Fancybox, you can just add this missing margin margin: 30px 20px to the class fancybox as each image is now wrapped in an anchor
<a class="fancybox"/>
As I just noticed that there doesn't seem to be any class fancybox already defined, you just have to add
.fancybox
{
margin: 30px 20px;
}
e.g. in your global.css
Update: In case you also want to display the border for the fancybox-images, there are two ways of achieving this: Currently you have both lightbox versions on your test page. For the first image the border is still displayed for hover. Following CSS is taking care about that:
.ImgBorder img {
border: 2px solid transparent;
height: 100px;
}
.ImgBorder:hover img {
border-color:white;
}
for an image markup as follows for your first image:
<a class="ImgBorder" rel="lightbox[gaze]"
href="http://www.lixiao-art.com/work/2014/52.jpg">
<img src="work/2014/52_t.jpg">
</a>
Your current fancybox-markup is like this for your second image:
<a href="work/2014/52.jpg" rel="group" class="fancybox">
<img src="work/2014/52_t.jpg">
</a>
So all you have to add is the border and hover for the fancybox-class:
.fancybox img {
border: 2px solid transparent;
height: 100px;
}
.fancybox:hover img {
border-color:white;
}
It's possible that there are some additional adjustments because of the CSS that fancybox uses, but it's easier if you just check this on your site as I just noticed that you're currently working on it.
At the moment your fancybox images "jump" because you added the CSS
.fancybox:hover
{
border-color:white;
margin:30px 20px;
}
which results in setting this margin on hover (therefore jumping then). I suggest you just try the CSS I posted above, that should work.
Update 2 for the comments follow-up questions:
The attributes class and rel stands for the following:
rel (='related') is an attribute containing information for you previous lightbox. The lightbox script will just fetch the information for e.g. a big image or a link from there.
class: as you noticed, almost all in your css-file starts with a dot (.) followed by a name. This name is the name of the class to which the style information will apply. So .test {color:red;} results in displaying a text red in case it's wrapped in an element with the class test, e.g. a <div>: <div class="test">This is red text</div>.
Update for the margins:
To keep the margins to your images when you remove it for the :hover - the correct way to have the margins is just like that:
.fancybox img
{
margin:30px 20px;
}
As you already have one .fancybox img in your CSS, just add this margin to it, though you can also have these selectors multiple times in a CSS file, it's better to keep the styles applying to an element together.
Thank you very much! You've pointed out the problem with my multiple classes, and I've fixed it accordingly like this:
<a class="fancybox ImgBorder" rel="group" href="work/2014/52.jpg"">
<img src="work/2014/52_t.jpg">
</a>
(instead of making new definitions in my global.css)
But, a small problem shows up: this line shows in red colour in the editor at the backoffice. Is there a problem with this line? but I guess I will open a new thread for this.
Thanks again!
Ok, i have a wordpress site, i added a table and use the
white-space: no-wrap;
Since i want the table headers to stay on a single line, the table have too many headers and need to make to stay outside of the content "boundary" (that is fine with me).
The problem is that when i zoom in and out with the browser, the table change position (moves a lil bit left or right and dosnt stay centered) i center it manualy with the "margin".
Im very new to css, hope i describe the issue enough.
.dataTables_wrapper .tablepress {
white-space: nowrap;
clear: both;
margin-left: -50px;
}
.entry table {
border: 1px solid #DFDFDF;
background-color: #F9F9F9;
width: 100%;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
font-family: Arial,"Bitstream Vera Sans",Helvetica,Verdana,sans-serif;
color: #333;
border-collapse: separate;
border-spacing: 0;
}
.tablepress {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
margin-bottom: 1em;
border: 0;
}
Does setting a width not work?
<table>
<tr>
<td>stuff</td>
<td>stuff</td>
</tr>
</table>
table{border:1px solid #000;width:100%}
link to fiddle
It might also help if you provided a little more information, like where abouts on your page you want to put this table
I am a newb to HTML and CSS and first time poster here. I looked all over for my issue and was unable to find a solution.
This is for the page: http://www.nursingassistantdegree.com/break-the-cycle-of-single-mom-poverty-by-earning-a-certified-nursing-assistant-degree/
Notice the sentence "Working Minimum Wage..." is broken up (in the HTML that is where the img div begins). I would like to remove that space so the "minimum wage" is directly underneath the "assistant degree". If you notice underneath the image the texts just flows nicely together.
Here is the CSS coding (note: I have adjusted all of the numbers of the borders and margins):
.picture {
background-color: #cee4fa;
border: 3px solid #cee4fa; padding: 3px;
font: 11px/1.4em Arial, sans-serif; align:right
}
.picture img {
border: 1px solid #cee4fa;
vertical-align:middle; margin-bottom: 3px;
}
.right { margin: 0.5em 0pt 0pt 0.8em; float:right; }
.left { margin: 0.5em 0.8em 0.5em 0; float:left; }
Here is the HTML:
".... you need to be in. Working <div class="picture right" style="width:402px;">
<img src="http://www.nursingassistantdegree.com/wp-
content/uploads/2013/05/CertifiedNursingAssistantDegree.jpg" width="400" height="267"
align="right" alt="Certified Nursing Assistant Degree"/>Photo Courtesy of Felbry
College</div><p align="justify">minimum wage is never going....."
Any info you can offer would be great! Thanks!
There is an extra padding in p element:
Try to change it as:
.bodyconMiddleInnerLBoxThree p {
font: normal 15px/18px "Myriad Pro";
color: #37383A;
}
Remove padding: 10px from .bodyconMiddleInnerLBoxThree p
Currently
.bodyconMiddleInnerLBoxThree p {
padding: 10px 0;
}
Change to
.bodyconMiddleInnerLBoxThree p {
padding: 10px 0 0 0;
}