The table renders differently in Firefox from IE8/Chrome.
The website is here: http://nordschleife.metaforix.net/118/118/index.php/panasonic.html?id=5&___store=uk&___from_store=default
I'd prefer the looks & feel of the table under IE8/Chrome, as the lines are light gray instead of completely black.
Is there anything I can do to fix this?
you need to give the TD element the light gray border color in the CSS information.
For example
table tr td {border:1px solid #DDD; }
Related
I've been using 'border = 1' in my HTML, which looks fine, but I realise it would be better to use CSS, so I created a basic border class, like so...
.basicborder table, .basicborder th, .basicborder td {
border: 1px solid black;
}
The borders appear around the th and td's but not around the outside of the table itself. Have I done something wrong?
CSS looks fine to me, but you can better use:
table.basicborder, th.basicborder, td.basicborder{border: 1px solid black;}
So, the selector starts with the least specific selector (the HTML element, instead of the class).
But it should already work fine, if you have linked your HTML properly. Do your table, th and td elements have a class="basicborder" attribute each?
edit:
If i comprehend correctly, this would be the best solution.
You make a basic style for all 's with just table,td,th{ etc...
Then you add to the ones with a different style a class, lets stay differentborder.Now you make a CSS saying the following: table.differentborder, .differentborder td, .differentborder th{ your style }
This selects your tables with the class, and all td's an th's where a parent has the class differentborder.
For more fun with CSS selectors you can look on the W3Schools CSS Selector Reference
I designed a contentbox for a website and on the desktop it looked good. But now I want to put it on the mobile.
You can see a example with only relevant html+css here http://pastehtml.com/view/bze2phhwn.html
On my smartphone, ive seen that the border-radius breaks(it displays the background color instead of the border color) in the rounded corners for 1-3px and you can see this effect also on the browser if you zoom in a little bit. Its weird, because if you zoom a little bit out and in, you`ll see that this effect isnt always there. So I tought that it isnt my bad html+css.
What might be the problem?
This seems to be a bug. Submitted to Mozilla:
https://bugzilla.mozilla.org/show_bug.cgi?id=758958
Also: https://stackoverflow.com/questions/10774506/border-radius-causes-white-lines-when-applied-to-individual-corners/10774635#10774635
I think this is a bug as well, but I found a fix... err maybe it would be considered a hack. Here is an image of my issue:
http://i909.photobucket.com/albums/ac298/roboyak/missingBorder_zpsbhftdfmd.png
So my story is that I was getting a reset.css style sheet imposed on me from the parent web page. The td element was getting the following style from that css sheet:
table tbody tr td {
border-bottom: 1px solid #ccc;
}
Long ago when I started the project I overrode this style by stating the following rule in my sheet:
table tbody tr td {
border-bottom: none;
}
In trying to solve my problem I noticed that the border-bottom rule was showing up as "medium none" instead of none. I added the following code, and the border was no longer broken.
table tbody tr td {
border-bottom: none none;
}
Essentially this breaks the rule so the border comes back again on all td's which is not what I want, but I think that this may give some insight into what is happening.
I have several web pages containing tables, for which I'd like to have line-borders around the tables and the cells. In fact, some of these pages existed for several years already, and rendered acceptably in IE6, IE7.
We switched about 6 months ago to a completely different set of style sheets to change our site look and feel. We also switched to "modern" browsers such as IE8 (and because I couldn't stop Vista) to IE9.
Now the borders don't render at all.
I spent a day fighting with this about a month ago, and failed to fix it. It seemed that I could reduce the page down to just the barest table and IE8 would still not render the border. I think I decided IE8 was just buggy, but I'm not an HTML expert so it is more likely that I'm buggy.
(I'm just getting back to this; I'll go see if I can find that reduced page).
Here is one such page:
http://www.semdesigns.com/products/DMS/DMSComparison.html
The tables should be obvious; you can tell them by their absence of lines :-{
The URI validates using the W3C service as HTML 4.01 Transitional.
Any suggestions?
EDIT: Posters all pointed out that the new style sheets set the default borders to 0. Oops!
From what I can see you have border:0; in the styling of the tables.
This will hide the borders on tables.
Your new stylesheets appear to use reset values, i.e. it sets lots of different elements to border:0 (including the table). You'll need to specifically set the border on the table and cells.
To set the border around just the table simply use table.box {border:1px solid #000}. If however you set the border on all sides of the table and cells you will have a border twice as thick as you need.
I therefore use the following trick to set the top and right border of the outside table, and the bottom and left of the table cells. This gives the appearence of an even border across the whole content of the table.
table.box {
border-top: 1px solid #000;
border-right: 1px solid #000;
}
table.box td {
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}
I've noticed however you have some empty cells in your box table, so you'll need to remove these to prevent the double borders.
I see no borders in Firefox either.
SDstyle.css, line 16. You do CSS reset which sets border: 0; for a big list of tags, including table, td, tr, th ...
You declare your table like <table class="box">, but at the same time you have no such style defined in your CSS files.
Designing a simple HTML table that I am going to implement alternate-row coloring on... but before I even start to do this, it appears that FF4 has applied alternate-row coloring automatically to the plain HTML table. Even after specifying my own alternate row colors that are shown properly in IE, Chrome, etc, FF still shows it's own chosen color for the alternate rows (odd numbered rows), which is a light blue color.
I've searched all over, but can't find anything related to this issue - anyone have a solution? Some FF-specific CSS I need to include to 'force' it to show my alternate color scheme?
Here is the table markup:
<table id="myTable">
<tr><td>Bill</td><td>Smith</td></tr>
<tr class="rowAlternate"><td>Joe</td><td>Blow</td></tr>
</table>
Here is the CSS I am using:
#myTable {margin: 0;}
#myTable tr {background-color: white;}
#myTable tr.rowAlternate {background-color: #EEE;}
FYI, solution is here: How to create a table WITHOUT alternating row colors when using Blueprint CSS framework?
Not sure if I should delete this question or not.
I have some tables in my asp.net MVC application for layout purposes. Even though I usually use divs for most things, in some cases tables make most sense because they already have exactly the layout I'm after in these cases.
The only problem is, as far as I know the borders are supposed to be invisible unless you specify a width and style for the borders. But they aren't... They are rather vague, yes, but there are still light blue borders around each cell. What is that and how do I get rid of them? (Funny thing is I don't remember having seen this before when I used tables, which was a while ago).
I also tried specifically setting the border to 0px on both table and td, but that didn't work either...
Have you tried border: none for CSS or border='0' in the table declaration?
You can use cellspacing attribute in table tag
<table cellspacing='0' border='0'>
The CSS property border-collapse is used to achieve this effect. It will make adjacent cells share the same border. This property has the same end effect as the deprecated cellspacing attribute for tables.
table { border-collapse: collapse; }
Well, it turns out it was just a mistake on my part, the css selector wasn't accurate enough. I don't know why, but it didn't work just saying td{border:none;}, I had to specify table tr td{border:none;}, and then it worked...
Same issue i also faced the problem is css inheriting...may be you are not given in class
check for table or table td css in any of your css files in the solution
and make to 0px
table
{
border: solid 0px #e8eef4;
border-collapse: collapse;
}
table td
{
padding: 5px;
border: solid 0px #e8eef4;
}