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.
Related
I have a big list of data inside HTML table that is fed from the database, which then printout to PDF. The table just ordinary table, with couple of columns, but the style I use has border left and right to show the vertical line on each table on every page, but not the horizontal like. I use CSS to draw the border, something like this:
td {
border-left: 1px solid #000;
border-right: 1px solid #000;
}
The problem I got is when paginated (printed to PDF) on each page at the bottom of the table, it wasn't closed so it looks open. I want to close the border at the bottom of the table of each page.
I managed to draw the border of the last row using tfoot, this works great until I got to the very last page, apparently it also draw it there too. Don't want it to draw at the end because I've made a summary there already, so having the line there is just not good.
<thead>...some header...</thead>
<tfoot>
<tr><td class=myborder> </td></tr>
</tfoot>
<tbody>...list of data (100 rows of tr)...</tbody>
The CSS, I use red for hightlight on my table:
.myborder {
border-top: 1px solid red;
}
So my question is there any css that can draw the simple line at each page ending but not at the last page?
If using tfoot, I've tried looking for solution, it pretty much like the post below, but a bit different, I don't want tfoot to show on the last page, but any other page is fine.
How to make TFOOT to show only at the end of the table
Thanks in advance.
PS. Thanks Ben for the format fixes, this is my first post :)
I've updated your question and while formatting I noticed at least a misplaced <td> in your <tfoot>. Also you're opening with <foot>, which should be <tfoot>.
You may use something like this to apply for all tfoot except the last child.
tfoot:not(:last-child):after {
border-bottom: 1px solid red;
}
First answer, correct me if there is any mistake.
I have an HTML form with a bunch of input fields (of type text and select). I am floating them such that there are two on each row. In all browsers (including IE7), everything works okay, but for some reason in IE8, whenever I click inside any of the fields or their labels, that field or a surrounding one vertically moves up or down. The position then returns to normal once I click away from the box, though then another nearby box might move. Also, not all of the textbox fields have this issue, and clicking the same textbox doesn't always cause this issue. Any ideas?
I had the exact same problem, and to fix it, I set
display:block
On the element that was jumping around and that fixed it. Hope that helps.
Problem is when you focus an input text element, your browser puts 2px border around it for focus which is shifting its position if it is contained in a tight container...
I think it is more related to having 2px border all the times. Use the same color border and your text field to have transparent borders...
Your problem is addressed on this question
StackOverflow Question when focusing an input field border 8270380
This is speculation, but since focusing in an element seems to trigger the shifting, you may have different styles applied to those focused elements. Increased margins or borders could be responsible.
Not a big deal just put:-
outline: none;
in input tags
input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
display: block;
border-radius: 5px;
outline: none;
}
if you want to have a border of your own then put
input:focus {
border: 2px solid salmon;
color: #333;
}
I think your structure conflicting with your parent structure CSS (there may possible is you using third party plugin something like jQuery UI or else) do one thing just for confirmation cut or copy your conflicting code and paste out side of you parent structure or beginning of your body tag. you find the difference.
For proper help I want to review you code.
Thnx
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 a strange problem that I'm actually ashamed to admit. See the whole thing here:
http://jsfiddle.net/Sorcy/ng2by/1/
My problem is: the second (very small) table should actually stretch the whole width of the container. When I look at it with firebug it does (therefore the blue box to the right, which is actually the background color of the table), but the rows themselves only stretch as far as they have to to accommodate the content.
Since I don't want a big blue box beside my tables, how do I get this thing to stretch the whole width? No amount of setting width for tablerows has brought me anything, and since I can not know beforehand how many columns my table is gonna have, setting a width for the cells is also out of the question.
Only solution I have so far is writing a small Javascript that goes through the tables, counts the columns and sets the width of each on the fly, but of course I'd like a pure CSS solution much better.
Edit:
As requested, an image of how it is supposed to look:
Direct link for bigger image
I believe the main problem is this:
table {
display: block;
}
If you change the display property for tables, you are basically asking the browser to ignore it's a table and handle it as a regular element, thus leading to unpredictable quirks.
I don't know what you were trying to accomplish but it's possible that you really wanted this:
table {
border-collapse: collapse;
}
This attribute makes it easier to accomplish certain visual designs.
Update #1: A dark line after the last row of the table can be done with this simple style:
table {
/*background-color: #001F66;*/
border-bottom: 1px solid #001F66;
}
Update #2: To get a dark line after the cells of the last row replace this:
table tr:last-child td { border-bottom: none; }
... with this:
table tr:last-child td { border-bottom: 1px solid #001F66; }
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;
}