I have a CSS file with the following:
.mainTable
{
width:100%;
border:solid;
}
.mainTable td
{
border:solid;
text-align:center;
}
In firefox and ie all the td's now have a border and are center aligned. However chrome simply ignores it and the td's are not formatted.
Any clue as to why chrome behaves differently?
You should give the borders a width and a color, this is a much better cross browser solution.
.mainTable
{
width:100%;
border: 1px solid #000;
}
.mainTable td
{
border: 1px solid #000;
text-align:center;
}
The color can be whatever color you want.
You don't see the border in chrome because it has no width.
Related
I have a dynamic table with 2px solid border in my web page that sometimes contains lots of rows. I am currently using page-break-before and page-break-after CSS properties.
The CSS code is as per below:
table { page-break-inside:auto }
tr { page-break-inside: avoid; page-break-after:auto }
table.table-bordered{
width: 100%;
border:2px solid black;
margin-top:20px;
border-collapse: collapse;
}
table.table-bordered td{
padding: 6px;
border:2px solid black;
margin-top:20px;
}
The main problem is, it is showing underline when page breaks.
How can I solve this issue?
Thanks in advance.
I think an image best describes this: JS FIDDLE HERE: http://jsfiddle.net/fp2Ak/
What I want to do, is for those lines to actually touch. Each one is a span with a number in. within a td. Note: some Tds contain multiple spans, for example, 218 and 222. (you can see tr with faint blue lines.)
As you can see it does touch at one point, as this is the biggest element in the column (including header). But this is rarely the case. How would I stretch it to touch in ALL Cases.
You can suggest using someting other than span, but please note that I do need more than one thing in a td, and hence cant be applied to the td.
The CSS that governs most of this so far:
table.Timetable td , table.Timetable th
{
border-spacing: 0px;
padding: 0px;
}
.bookingStart, .bookingMiddle, .bookingEnd
{
background-color: white;
color: Black;
border-top: 2px solid black;
border-bottom: 2px solid black;
}
.bookingStart
{
border-left: 2px solid black;
}
.bookingEnd
{
border-right: 2px solid black;
}
Oh and preferabblly Id like to be able to pad the cells again, as the th clearly have been merged together.
JSfiddle of it here: http://jsfiddle.net/fp2Ak/
spans have to be floated in order to be affected by width, so you could do something like:
td span{float:left; width:100%; min-width:100%;}
or more accurately if I am understanding your css properly:
.bookingStart, .bookingMiddle, .bookingEnd
{
background-color: white;
color: Black;
border-top: 2px solid black;
border-bottom: 2px solid black;
float:left;
width:100%;
min-width:100%; /*some browsers like this better*/
}
Your should put your borders on the td's not the spans. This will allow you to also put some padding on the td's to make even the long numbers look good.
This is a problem in Internet Explorer 7 only (and maybe earlier versions of IE).
Here is the problematic page:
http://wwwtest.vishay.com/mosfets/mosfet-hirel-dev/index.html
The horizontal line between the two products listed in the first column is not shown (in IE7). It is shown in Firefox and Google Chrome.
I already played with the following:
border-collapse:collapse;
adding to the TD
The line does appear when I remove the following (unrelated?!) CSS:
table.list-table th {
border:1px solid #eee;
border-right:1px solid #ddd;
padding:1px;
}
Thanks for any tips!
Try something like this:
table{
border-collapse:collapse;
}
table.list-table th {
border:1px solid #eee;
border-right:1px solid #ddd;
padding:1px;
}
What is going on with rendering the padding of a fieldset. It behaves as expected in FF and Chrome but fails in IE. This is the code im talking about:
<html>
<head>
</head>
<body>
<fieldset>
<legend>Hello world!</legend>
<div>Lorem ipsum</div>
</fieldset>
</body>
</html>
And this is the css
fieldset {
border: 1px solid black;
padding: 30px;
}
fieldset legend {
background-color: silver;
}
fieldset div {
border: 1px dotted silver;
}
Can also be seen here:
http://jsfiddle.net/nRAGM/6/
So my question is: how to get the above html to display as intended in IE?
The following code is cross-browser compatible.
You can control the indent of the fieldset legend independently. In padding the fieldset you also indent the legend. While this may be the desired effect in some cases, the following method offers more flexibility. Also adding the margin to the inner div will give you better control of your layout (because adding padding to a container can add unwanted width).
http://jsfiddle.net/nRAGM/35/
fieldset {
border: 2px solid silver;
}
fieldset legend {
border: 2px solid silver;
margin-left: 30px;
}
fieldset div {
border: 1px dotted silver;
margin: 30px;
}
Adding display:block to fieldset styling should solve your problem. It worked for me! Try out.
or the really naughty hack (or put it in a conditional [lte IE 8] CSS) version.
fieldset {
border: 1px solid black;
padding: 30px;
}
fieldset legend {
background-color: silver;
margin-bottom: 30px\9; /* IE7/8 needs this - same value as top padding on fieldset */
}
fieldset div {
border: 1px dotted silver;
}
margining the bottom of the label the same as the fieldset's top padding does the trick too. obviously no other browser should get both
PS: I think this works for IE6 too
http://www.pressedweb.com/beta/#portfolio
My anchor tags (highlighted in red dashed border) are being created by their own free will. I have no idea how to get rid of them and have been working at this for hours now.
Any ideas? Is this some freaky cross-browser bug? Or is it just a problem with my markup?
Thanks.
I thinkg this fix will work for you:
div .portfolio .works a img {
-moz-box-shadow:1px 2px 3px #222222;
opacity:0.8;
}
div .portfolio .works a {
border:1px solid #FF0000;
display:block;
float:left;
height:220px;
margin:0 10px 10px 0;
padding:4px;
width:280px;
}
Basically what i did was just switched some styling from img to anchor. You can see in this image that it does work ok.