I have a wordpress site and all tables seem to be borderless as far as I can see.
When I check it with Firebug I can disable css initialization for <table> element and design seems to be OK. Firebug tells me the CSS code is set in theme's style.css file. I open the file and check the content but there is no such line.
After this I choose a worse way to manually set the style attribute of my <table> HRTML element as follows. I also apply !important directive to override anything.
As far as I can know the style attribute of an HTML element overrides all CSS and previous (inherited or not inherited) style declarations. Also the !important also makes it undestructable. I have used both I still can not make it work.
What am I possibly doing wrong and how can I fix it?
Regards.
P.S. : You can check the faulty content # http://pmiturkey.org/hakkimizda/uyelik/
The table as the bottom of the content.
OK, I played a little with firebug in your website here and had to do a few things:
1) Remove border="1" in that same table
2) Change from style="1 border #000 !important;" to style="1px border #000;"
These changes solve your problem.
EDIT
In order to draw borders around each cell of the table instead, proceed as follows:
1) Remove the table's style attribute
2) In your css file, add the following:
th, td {
border: 1px solid #000;
}
This should add borders around each table cell of yours. Hope it helps!
Well for starters you aren't adding a color to your border border: 1px solid red;. The borders are probably being removed in a css reset. You can add css to the bottom of your styles.css file and that should override any reset.
Also.. are you wanting a border around the table, or a border between the table rows? You might want to specify what exactly you want.
Related
I'm working on page in Word press. The theme buttons aren't what i was looking for so i decided to make a custom ones. I thought it would be simple:
<button type="button" class="btn menu-button">BUY</button>
and css:
.btn{
font-size: large;
background: transparent;
border: solid;
}
So here is where my problem occur.
Some of the css code is working just fine (font-size for example) but the borders won't show up no matter what. I thought that the problem lies in the button tag itself but after futher investigations i noticed that it happens for every html element on my page, no matter div, p, H - the border stylization is not working neither color choice nor size, style etc.
So please help me, how can i make not only some but every css line work.
Im using WP 5.5.3 with customify theme. I've put The css from above into the custom css tab.
Borders usually require the border-style in order to have any of the other border styling properties to work. Try replacing with:
border-style:solid;
Alternatively, you can add them all to one line allowing you to omit the border-style by adding something along the lines of:
border: 1px solid black;
I'm having trouble changing the background color of a certain button on a WordPress plugin.
The button and text are set to white and I'm trying to identify the CSS file that controls it, unfortunately I've had no luck within the inspect element of my browser.
It is incorporated in a popup form - so multiple other files come into play.
I changed the color within the browser during inspect but need a fix.
You can overwrite CSS attributes by setting !important after your definition or by defining the scope better (e.g. by writing body or html before the class selector).
make sure your css file is able to "access" the dom element – if the element is in an iframe the css wont work.
body .wpforms-page-button {
background-color: green !important;
}
Using !important is generally considered hacky. Both rules in your screenshot have the same CSS specificity in that they are both firing on input[type="submit"] and .button.
Without seeing the corresponding HTML I can't give you the exact syntax, but something like
.parentclassname input[type='submit'] and or .parentclassname .button should make your style more specific than the original rule and therefore give it precedence.
Did you try to set !important after the #fff; ?
like this:
input[type=submit] {
background-color: #fff!important;
}
the best way is to define the button in a class, so you can change only the color for this specific button. Otherwise it will changes all the buttons to color #fff if you put the css in a general style.
Here, I am facing another problem with CSS.
My HTML string is coming from database and adding to DOM with HTML Object.
new HTML(result.getResponseObject().getStringResult());
That string contains some HTML tables and have border="1", that has been overridden by default CSS (you can see that in Firebug), where as the border applied in HTML like border="1"
How to tell that the applied styles are in HTML, not from any CSS file (or did I miss something in my code)?
I tried with 1px solid !important; it's still not working.
If I understand your question correctly you could do something like this:
table[border] {
border: 1px solid black;
}
This will select any table that has a html border property eg:
<table border="1">
but will ignore those that don't
Here's a demo
Why are you using the border attributed to begin with? In HTML5, it's meant only to indicate that <table> is being used to draw an actual table, rather than just for layout. If you want to specify a table border, you should use something like 3rror404's solution (although I would explicitly use table[border="1"] as the selector to avoid problems if you also have tables with border="0" anywhere in the document.
I have this problem and I don't know how to fix it. In my project many html files have defined for div an width style, for example:
<div style="width:200px" id="boom">/*****/</div>
In css file if I put a condition like:
`div#boom{width:auto !important;}`
is ignored because style is defined in html for that div and from what I know html condition beat css condition.
How is possible to fix that? I don't want to edit all html pages because I would take a long time.
You are doing something wrong. Because !important makes the style the highest priority, so it always use the width: auto; and not the inline CSS.
An live example that this works: http://tinkerbin.com/wzrFiyaq
And a tutorial: http://css-tricks.com/override-inline-styles-with-css/
div[style] {
width:auto !important;
}
I've got an embedded widget from The Weather Channel and everything is working fine except that they've got a <tr> with a 1px height image that is expanding to a height equal to the other rows.
It's shifting the rest of the content down. Because it's just an embed, there is only so much of the styling I can control. But I figured it must be inheriting something from my stylesheet since it had inherited some line-height that I had to correct.
If you visit http://www.scwd.com and scroll to the bottom you'll see the weather widget. The row with the grey td below #weather.com is the issue. It should only be 1px in height. I've used multiple debuggers to see if I could find the inherit and I cannot. Any help would be great.
-- UPDATE --
Not the most elegant solution considering variable within the widget and out of my control may change in the future. But as David suggested, I solved it with the following.
<script type="text/javascript">
var x = $("img[src$='blank.gif']");
$(x).closest('tr').css('display', 'none');
</script>
Best I can find is:
Inherited from div#wx_module_6107.wow_container
.wow_container {
line-height: 14px;
}
Are you hosting this or pulling the HTML from a foreign source? I suspect you can't control the HTML that's being rendered or the CSS that it's using?
I'm no CSS expert, so thus far nothing I've tried in FireBug have made a difference without affecting the rest of the table elements in the widget.
Unless someone can give a CSS solution, maybe some JavaScript can get the job done? You should be able to, on document ready, find that img element (maybe by its src?) and from there (using something like .closest() in jQuery) find its parent td and parent tr and with those element references explicitly set their styles.
The image is in a td which has a line height of 14 according to your css:
.wow_container { line-height: 14px; }
I would give it a line-height of 1px and set the background-color to transparent. That makes things look nice for me. Is this widget coming from a wordpress plugin? If so which plugin? You may be able to edit the plugin code yourself.
I think the problem occurs because the font-size of the body. My suggestion is to add font:1px Verdana,Arial,Helvetica,sans-serif for the td that is the grey row.