<table class="schedule">
<thead>
<tr>
<th id="first-column">#</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
</thead>
</table>
and
table.schedule {
table-layout: fixed;
width: 900;
}
#first-column {
width: 200px;
padding: 0 10px;
}
cause the first column has 200+10+10=220px width in Firefox, but 180+10+10=200px in Chrome and Safari. I think the width shouldn't include padding, so Firefox is right? But anyway, how can I set the same column width across browsers?
Edit: the Chrome Developer Tools look like:
Make sure you have a modern doctype specified as I'm not seeing the described behaviour on my end. For example use <!DOCTYPE html> to tell the browsers it's HTML5. For me the first column is 200px + padding on Firefox, Chrome and Safari.
Related
Having some issues with table content set at 100% not rendering properly in Safari(all sorts of weird sizing) and then Firefox(spills over the edge).
Is there a way I can set it to show width:100% for Firefox in TD and max-width:100% in Safari using CSS, this is what seems to fix it when set manually in each using Inspect Element.
After Googling the issue, table 100% width problems does appear problematic for Safari and Firefox browsers.
Can max-width:100% AND width:100% be both set for an element?
<table align="center" border="0" cellpadding="1" cellspacing="1" style="width:100%">
<tbody>
<tr>
<td><img src="pic1.jpg" style="border-style:solid; border- width:10px; float:left; max-height:240px; max-width:96%" ></td>
<td><img src="pic2.jpg" style="border-style:solid; border-width:10px; float:left; max-height:240px; max-width:96%" ></td>
</tr>
</tbody>
</table>
Disclaimer: I don't have Safari here, but I can solve the problems in such a way that the code works the same in Mozilla, Chrome and IE. Hope that helps!
Tables are meant for displaying data. That's what they're designed for; that's what they're good at. So one of their design paradigms is that they don't hide things; if the width would become too narrow to show everything, they ignore the width rules and display everything anyway.
With that in mind, look at what happens in Mozilla. If you have two images side by side that together are wider than the width of the window, the table ignores its width:100% rule and just displays the images, no matter what, even at the cost of a horizontal scrollbar.
So, what can you do; you can dispense with the table and just display the images side by side. Make the a elements 50% wide, just like the table cells did.
a {
float:left;
width:50%;
}
a img {
border-style:solid;
border-width:10px;
max-height:240px;
box-sizing:border-box; /* to account for the border */
max-width:100%;
}
<img src="http://lorempixel.com/270/240"/>
<img src="http://lorempixel.com/g/270/240"/>
I am currently investigating strange behavior of the CSS min-width property in Internet Explorer. I heard about bugs with the text alignment, using min-width. But this one is new to me.
<table cellspacing="0" cellpadding="0">
<tr>
<td><button>Einloggen</button></td>
</tr>
</table>
When I set min-width of the button to a value that would actually stretch the button a space to the right of it emerges/ the td gets wider. I only saw this behavior in IE. Checked with Opera, FF, Chrome and Safari, too.
Here is a jsfiddle showing containing an example.
Is this a known bug? And are there any workarounds?
There does appear to be a strange issue at play here with Internet Explorer 9. It's interesting that versions 8 and 10 both render this demo properly, without issue.
That being said, with regards to IE9, I have found a workaround that seems to resolve the issue. My success was with using the pseudo-element ::before as a fallback:
/* For everybody but IE9 */
button {
min-width: 200px;
}
/* For Internet Explorer 9 */
button::before {
content: "" \9;
display: block;
width: 200px;
}
Fiddle: http://jsfiddle.net/JNDUz/21/
While this works, it does result in a slightly wider button in Internet Explorer 10 (pseudo-element width + parent padding/margins). These hacks have no business in IE10, but it's difficult to isolate them in CSS alone to certain browsers. The \9 trick can isolate this from non-IE browsers, but there's a better way:
<!--[if IE 9]><html lang="en-us" class="no-js ie9"><![endif]-->
By wrapping the HTML tag in a conditional comment, we can now target IE alone with our fix:
/* For Internet Explorer 9 */
.ie9 button::before {
content: "";
display: block;
width: 200px;
}
Well that was little weird, it adds padding to the right of the button, but I managed to get the least space on right, by using this
button {
padding: 0;
}
I believe it's not valid markup, but wrapping Einloggen word to div fixes the issue.
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<button>
<div>Einloggen</div>
</button>
</td>
</tr>
</table>
jsfiddle
The workarounds above seem to work fine, but consider also that cellspacing and cellpadding are deprecated from the CSS/HTML spec. Perhaps the deprecated status has something to do with it.
The following images are the rendering for the same page using the same browser (Chrome 25). The only difference is one page have a DOCTYPE (thus in Standars mode) and one doesn't (thus in Quirks)
Quirks:
Standards:
Both cells have vertical-align: middle, both images are display: inline-block.
Vertical-align is working in Quirks but not in Standards, why?
HTML
<table class="oppres" id="oppscore4">
<tbody>
<tr id="oppscore4-main">
<td><img src="images/gold.png"></td>
<td></td>
<td>0</td>
</tr>
<tr></tr>
<tr id="oppscore4-total">
<td></td>
<td>=</td>
<td>0</td>
</tr>
</tbody>
</table>
CSS
table.oppres{
height: 120px;
}
table[id^=oppscore]{
width: 80px;
font-size: 17px;
line-height: 1;
}
table[id^=oppscore] tr{height: 1em;}
table[id^=oppscore] img{height: 0.9em;}
table[id^=oppscore] tr:nth-last-child(2){height: auto;}
table[id^=oppscore] td:first-child{text-align: right;}
More than enough code to reproduce the issue.
The issue is not about vertical-align on <td> but on <img />
Quirks mode triggers a behaviour explained here:
Vertical alignment of an image is under certain conditions to the bottom of the enclosing box, not to the baseline of text. This happens when the image is the only content within an element, typically a table cell. This means that e.g. an image in a table cell is by default at the bottom of the cell in Quirks Mode (which is often what the author wants), whereas in Standards Mode there is a few pixels spacing below the image (unless one sets e.g. vertical-align: bottom for the img element).
The space you see in standard mode below the image is actually the space between the <td>'s box baseline and bottom (cf. http://www.w3.org/TR/CSS2/visudet.html#leading).
When vertical-align is bottom on <img /> its box' bottom is aligned with <td>'s box bottom, so there is no space anymore.
I am working with tables and each column was given a background and each td and th has a background image (just dotted lines) positioned to the bottom to act as some sort of separator. Whilst this works on all current browsers. IE6 & IE7 have refused to show my column background.
In trying to solve this, i removed the dotted image background applied to each td, and it shows the column background. So basically its either one or the two. Any ideas how i can fix this?
<colgroup id="col1"></colgroup>
<colgroup id="col2" class="slim"></colgroup>
<colgroup id="col3" class="slim"></colgroup>
<thead>
<tr>
<th class="none"> </th>
<th class class="divider">
<h2>Test</h2>
<p>Lorem ipsum</[>
</th>
</tr>
</thead>
#col2{
background: url("images/col2.png") repeat;
}
.divider {
background: url("images/dotted-line.gif") no-repeat center bottom;
}
I am aware of ie6 png issues but why it should at least work on ie7, shouldn't it, and perhaps just display a white background for ie6
just throwing it out there, but you could just throw a class on the td and th tags that need the background.
I've got a problem and I'm desperate for help.
I needed for some reason to render table header and table body separately. Each column and header cell have got same css class (eg. .col1_name). Those css classes have got declared width and text-align, and in that manner i'm making sure that header and table body cells stay aligned properly.
And, everything is OK in IE8 and Firefox. I've got problems with WebKit browsers (Chrome and Safari. Chrome is important for me.) They are rendering width of table body cells 5px less than IE and FF. I could not trace the problem, but I saw that those -5px widths are in Computed styles.
Below are s-shots and some sample code.
IE 8 Is just fine http://img191.imageshack.us/img191/2360/probie8.png
Firefox is just fine http://img705.imageshack.us/img705/661/probff.png
Google Chrome is not so fine http://img199.imageshack.us/img199/5176/probgc.png
Inspecting element ... http://img96.imageshack.us/img96/19/probj.png
<style type="text/css">
.rbr{ width: 45px; text-align: left;}
.sifra {width: 90px; text-align: left;}
.naziv { width: 240px; text-align: left;}
.kolicina {width: 90px; text-align: right;}
.cena {width: 60px; text-align: right;}
</style>
<table id="tableheader">
<thead>
<tr>
<th class="rbr">RB.</th>
<th class="sifra">Sifra</th>
<th class="naziv">Naziv</th>
<th class="kolicina">Kolicina</th>
</tr>
</thead>
</table>
<table id="tablebody">
<tbody>
<tr>
<td class="rbr">1</td>
<td class="sifra">11111112</td>
<td class="naziv">Adelante 3 series</td>
<td class="kolicina">2.00</td>
</tr>
<tr>
<td class="rbr">2</td>
<td class="sifra">86868631</td>
<td class="naziv">Canyon CNR</td>
<td class="kolicina">1.00</td>
</tr>
</tbody>
</table>
Many thanks people for any help!
While I suspect you simply have another declaration overriding the one you expect, try adding a min-width and max-width.
#NSD you got me on right track. I re-re-re-re-viewed my entire code that is working with datagrids, and I found that body table got width set to auto.
So, thank you guys for your time.
Conclusion: if you have same cells width, but different table width (ie. xyz px / auto ) , in Chrome you'll get different cell widths.
Again, thank you for your time.
Did you try to also set margin and padding?
margin: 0;
padding: 4px;
In your code the id is 'table-body' but in the Chrome screenshot it says 'table-bodypozicije'.
Check your css for a definition of 'table-bodypozicije' - this may be overiding your class styles applied to your td's.