Has anyone idea why cell border on this page http://www.skirent.pl/informacje/cennik.html is well rendered in FF, but not in IE and Chrome?
I used CKEditor to generate this table, and I cannot find what I did wrong.
You have to specify a border with CSS (currently it isn't).
#subright th{
border: 1px solid #000;
}
http://www.w3schools.com/css/css_border.asp
I think, you can't do this in CKEditor directly.
Related
I'm trying to highlight the currently hovered table row with an outline. It works flawlessly in Firefox and Chrome... but Safari somehow clips the outline.
The 1st image shows Firefox... the 2nd is Safari.
The CSS is rather simple:
table tbody tr:hover {
background-color: #48f2;
outline: 3px solid #48f8;
}
What could cause this behavior? Is this a known bug?
PS: Hiding Safari (CMD+Tab) and showing it again without any mouse movement renders the <tr> properly... so I consider it a display bug. But maybe there is a workaround?
I've tried something obvious today... and it worked:
/* default state for Safari */
table tbody tr {
outline: 3px solid #0000;
}
/* highlight table row upon hover */
table tbody tr:hover {
background-color: #48f2;
outline: 3px solid #48f8;
}
Simply setting a transparent outline for the default state solved this Safari bug. I guess Safari determines the outer boundings during initial render of the page and uses it to further optimize the rendering later.
I have a navigation menu with css style of border-bottom and border top set to 2px. This gives a fairly plain look. I want to use an image instead of a line. I have tried to use the src option for this but no luck.
my codde:
border-bottom: 2px solid #FFF; border-top: 2px solid #FFF;
Any help would be appreciated.
Gus
Have you tried using the border-image property:
http://www.w3schools.com/cssref/css3_pr_border-image.asp
Note that it's only compatible with newer browsers (read no IE), so leave your normal border declaration in as a fallback.
I've got this selector code:
#ajax_hits_counter_popular_posts_widget-2.widget li img {
// Give the thumbs in the widget some style
border-radius: 5px;
margin-right: 10px;
border: 4px solid #353434 !important;
}
Everything is rendering properly except for the border: 4px solid #353434 !important;
When viewing in either Firebug or Chrome Dev Tools, the border: property doesn't even show up at all, while the others do.
If I manually type the same exact code into Firebug or Chrome tools, it works fine.
Live is here (it's the "Top Posts" thumbnail widget at the bottom right): Meanwhile, In America
Anyone know why?
// Give the thumbs in the widget some style
is invalid in CSS. The browser seems to ignore the following property, as you can see in this example. If you remove the "comment" it works as expected. (On your page, the border declaration directly follows the "comment", unlike in the CSS posted here)
Comments in CSS have to be enclosed in /* ... */.
As tim.baker mentions, you have have to use border instead of border-style.
Looking at your CSS it seams as though you have used
border-style: 4px solid #353434 !important;
Using purely
border: 4px solid #353434;
Should work
I have the following drop down menu and the background looks black in Chrome but white on Firefox/IE/Safari across Windows/Linux/Mac. I'm using the latest versions of all those browsers.
<style>
select {
background-color: transparent;
background-image: url(http://sstatic.net/so/img/logo.png);
}
</style>
<select>
<option>Serverfault</option>
<option>Stackoverflow</option>
<option>Superuser</option>
</select>
Does anyone know how I can style the above so that Chrome shows the background as white when the color is set to transparent like in the other browsers?
EDIT:
My goal is to display an image in the background of select. The image shows up properly in every browser except Chrome.
According to this and this, it is a bug in Chrome that is supposed to be fixed.
The bug appears in version 2.0. I just tested it in 3.0-beta, and it's fixed.
Why are you using background-color: transparent; for "select"? If you remove that chrome works.
What is the effect you are after? Maybe some demo?
This answer https://stackoverflow.com/a/5806434/964227 that I found in another question just like this worked perfectly for me.
Apparently Chrome doesn't accept an image as a select background. So, in order for the color to work, you have to remove the image and then set the color. I'll just copy and paste the other answer here.
select {
background-image: none; /* remove the value that chrome dose not use */
background-color: #333; /* set the value it does */
border-radius: 4px; /* make it look kinda like the background image */
border: 1px solid #888;
}
I have gridlines set to true on a gridview, i want the lines to be grey.
By default, the lines in IE appear grey, due to my stylesheets; but in Firefox, there is a dark line separating the header columns.
I have tried adding
this.GridView1.Attributes.Add("bordercolor", "#ddd");
This fixes the FireFox issue, but in IE it shows the dark lines.
I know it's an old topic but needed solution for this too and #rism's solution did not apply , so i came up with simplest of all.
in css
td
{
border:1px solid #ddd;
}
Is there a reason why you are doing this programmatically?
If you open the html file (.ascx, .aspx) you should be able to set an inline style on the grid with style="border:1px solid #ddd;" or preferably use the CssClass property of the grid and point it at an externally defined style CssClass="myGridStyle" where myGridStyle is defined as
.myGridStyle {
border:1px solid #ddd;
}