How can Firefox compute a 1px border for a TD styled to have border: 0, and how can the Firefox web inspector show me that indeed, the border is styled to 0px yet, at the same time, it ends up being 1px?
This is screenshot of the Firefox web inspector:
And the innocent css it refers to a line 21 is:
.smart-table-tr-active td {
border: 0;
}
And there are no other overwriting rules shown by the inspector. And it works perfectly fine in Chrome and IE8+... The "insanity" with a 1px border out of nowhere only happens in Firefox (clean profile, no extensions, latest version - 17.0.1 on Windows 7 64bit).
Link to sample (click a row to "expand" it and inspect the TDs of the expanded row. (Yeah, there's a bit of Javascript "DOM surgery" behind the scenes, but still, I'd expect a mature browser like Firefox to "keep a cool head" and do its job, even the Inspector...)
The cause of your issue is in your CSS file:
table.smart-table td {
border-collapse: separate;
/*position: relative;*/
}
You're setting the border-collapse property on TD elements. But, that property doesn't apply for TD elements, so it's discarded. Instead, it only applies to TABLE elements.
Change your CSS rule to this:
table.smart-table {
border-collapse: separate;
}
and your issue will be resolved. Setting separate borders will make sure that the borders aren't shared (as Boris explained in his answer).
It's 1px because the table is using collapsed borders and the top border on the cell in the next row is 1px. But in the collapsed border model the top border of the next cell (and row, since they collapse) is identically the bottom border of this cell (and row), so they show up with the same value... More precisely, each one gets half of the border in a bizarre way, but there may not really be a good way to represent that in the inspector.
Read here: http://www.w3.org/TR/CSS2/tables.html#collapsing-borders
Related
The following brief HTML renders quite differently on Chrome and Firefox. http://jsfiddle.net/aoh4fa50/8/
<span><span style="border-right: solid 1px black;"></span>A</span>
In Firefox, I get what I expect, a vertical bar to the left of an A. (Ff 28.0 and 31.0, Mac 10.9.4)
In Chrome, I get no vertical bar at all (v32.0.1700.19 beta). (And Safari 7.0.6 (9537.78.2) behaves like Chrome.) But if you make any of the following (seemingly irrelevant) changes, then Chrome shows the vertical bar:
move the inner span to after the A (obviously the bar shows up after the A in this case)
remove the outer span tags insert (then the bar appears where it should be)
a character to the left of the inner span (obviously the bar shows up after that character)
Am I doing something wrong, and there's an easy way to make that inner span's border show up consistently on all browsers? If not, and this is a Chrome bug, I'm glad to report it.
This happens because Chrome does not apply any styling to a DOM element which is empty and its existence does not really affect any other component on the page.
So, if you add something to your first span which actually has border, it will fix.
For instance you can add 1 space by adding to that span element
See here: http://jsfiddle.net/aoh4fa50/9/
<span><span style="border-right: solid 1px black;"> </span>A</span>
Hope, I am able to explain my idea through.
By the way, why do you need extra empty DOM element just to add border on the left?
You can do this to get the same output
<span style="border-left: solid 1px black;">A</span>
The span has nothing inside it. Chrome is actually what i'd expect. If you do something like this, you'll see something in Chrome.
<span><span style="border-right: solid 1px black;"> </span>A</span>
That's quite freaky #Ishita - that you wrote the exact line :)
Edit:
You can do this to make it consistent in all browsers:
<span><span style="border-right: solid 1px black; display:inline-block; height:12px;"></span>A</span>
In IE 8 (Standards Mode) a table set to border-collapse:collapse with borders on the td's appears to double up the border.
The border is doubled up between cells, and also around the table itself.
The behaviour I'm looking for is more like the way that Chrome renders a border-collapse table. ie. the actual pixel width of a border collapsed between two cells (each with a border of 1px) is 1px.
In the example pen that put together you can see the difference in rendering if you run this in either Chrome or IE to see the differences as above.
http://codepen.io/anon/pen/tfzus
Is there any way to make IE render the table single border as per Chrome?
I have tried border-spacing : 0 but it doesn't affect a collapsed table.
EDIT : I have tried a positional based approach where I limit having adjacent borders based on cell position (taking care to use ':first-child' instead of ':last-child' for broader compatibility). An example of this CSS is as follows...
table.formatted-table {
border-collapse : seperate;
}
table td {
border-right : 1px solid black;
border-bottom : 1px solid black;
}
table tr:first-child td {
border-top : 1px solid black;
}
table tr td:first-child {
border-left : 1px solid black;
}
http://codepen.io/anon/pen/KACxv
I don't really see this as a an ideal solution, if you have a better one (ie. an obvious setting which I'm just ignorant of) please let me know!
I am using an HTML5 doctype <!DOCTYPE html>, but have tried switching doctype to HTML4 Strict to test this isolated issue. My page contains little else other than the code in the pen at the top of this question, so there are no other factors. I've also tried this on multiple machines with my other dev mates in the office here running IE10 all with the same behaviour.
I recently noticed in several webpages, and some of my own, that when they are displayed in Internet Explorer 9, when its not on Quirks Mode, it renders a white line, about 1px, in the bottom of the page. It's like the html tag was with padding-bottom:1px and wrapped in another element with white background (but it's not, and it has no padding). It looks like the differences between IE9 standards and quirks mode shows when determining a wrapping element's width, but vertically. It also feels like the content of an element gets pushed 1px by a previous element, like their content, but, not margins or borders, were overlapping the next element dimensions.
I can't determine exactly what causes it. Sometimes, a page contains 2 tables and everything is fine. Then you need to add a third one, and the line shows up. Doesn't even need to be tables btw.
Sometimes, reseting css solves it. Setting the same line-height we have on body to links:
body {
line-height: 1
}
a, links, visited {
line-height: 1
}
fixes it, but not always. Only thing i can do, is check element by element, disabling/enabling their css rules till it's gone.
I noticed that when there are elements like tables, inputs, textareas, this issue is more likely to happen. 'resetting' their attributes, sometimes, solves it too.
I know it would be easier to provide a code as an example, but like i said, i coudn't determine a pattern for it. I can give you some examples of sites/urls i notice that error (you gotta look at the very bottom of the page and see the difference between IE and another browser, like Firefox):
casinosdelmundo.info, gatosabido.com.br, espanol.yahoo.com, en.wikipedia.org/wiki/Bruce_Beutler, ea.com/command-and-conquer-4, facebook.com (the ones with white, or almost white bg, change body background with f12, developer's tool, and you'll see). I found an example even here at stackoverflow (as today, the main page stackoverflow.com is showing that line too, but that can change since, sometimes the issue appears or disappears when new elements show up or are removed):
this question has the white-line:
Make link in table cell fill the entire row height
this one has not:
FireFox 3 line-height
Check this screenshot, if you still didn't see what im talking about:
the presence of this issue on very established (or not) sites makes me feel it's a IE9 bug and the only definitive fix for it is always use white background, so nobody will notice the white line (the line will still be there though). but thats obviously not the best option. I never found this white line in Chrome or Safari.
So, has anyone faced the same problem and got a better solution?
I'm not sure, cause there is no HTML here, but it is very resemble to standard browser behavior, when it displays inline content. It is due to the fact, that when text is displayed browser needs to leave some space at the bottom for letters and symbols such as: "," , "y" , "p" and so on, cause in that letters there is a part which protrudes to the bottom. You can better understand what I'm talking about when you look at this picture:
example of how inline content is displayed
so if you have some markup like
<body>
<div></div>
<textarea></textarea>
</body>
you'll get that extra space at the bottom. To get rid off it you have to use there either block element, or set to your inline-element a css style 'display: block'
I found a solution to the problem, if an idiotic one: set the toggle of your browser window's Maximize/Restore down to Maximize (= tooltip text; this indicates that the window is in a nonmaximal state). Make the browser window actually smaller than screen fit. Press F11 in this state and there is no white line at the bottom of your screen (Win7 x32 & x64). (BTW, FF dose not have this problem and is the best alternative.)
It happens when you use fractional font-sizes.
For example, stackoverflow uses h2 {font-size: 140%;} body { font-size:80%;}, which results in an total font-size of 112% for h2. Apply that to 16px default size, and you get 17.93px (including rounding errors, hooray!)
Try it yourself: getComputedStyle(document.querySelector('h2')).fontSize
Browsers have a hard time rendering fractional pixels, and thus may get confused and add a pixel at the bottom.
By the way, Firefox has some trouble too. The spacing between the footer lines is off by a pixel.
The fix is obvious: Use integer pixels to declare font-sizes.
Another way would be to apply a :after content to your body only for IE and Edge.
This way you will get rid of the extra white line.
We may require some jQuery too so that the content applies only when you are at the bottom of the page.
body{
position:relative;
width:100%;
}
body:after{
content: "";
display:block;
background-color: #000;
height: 1px;
bottom: 0px;
position: fixed;
width: 100%;
}
jQuery
//add a border to internet explorer
if (bowser.name == "Microsoft Edge" || bowser.name == "Internet Explorer") {
//console.log(" iam inside");
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
$("body").addClass("end-border");
}
else {
$("body").removeClass("end-border");
}
});
}
i have a page which displays a border around the divs #call and #courses
i m using the css:
border: 3px solid #afd4a9;
this is not properly in ie
see it here
thanks
There's nothing wrong with your CSS.
When I disable JavaScript in Internet Explorer, the border is there (but not rounded).
Looking more closely, I see you're using jquery.corner.js for rounding the corners.
I'm not sure why that isn't working for you (I can't see what you're doing wrong), but I recommend switching to CSS3PIE instead for the rounded corners.
In short, you simply download the PIE.htc file, and add a single rule to your CSS for each element:
#myElement {
...
behavior: url(PIE.htc);
}
corners.js removes the borders in ie - see the inline styles for the relavent divs. To have borders in IE, you need to have an outer div wrapping the inner div and use corners on both divs to get a border like effect. Check out the demo page about half way down, under adjornments: Jquery corners demo page
The way corners works in ff and IE is totally different - it simply uses the built in mozilla css styles which keeps the border styling. In IE corners does div insertion.
The problem is that you have a bit of javascript adding a style attribute to your DIVs:
style="border-bottom: medium none; position: relative; border-left: medium none; zoom: 1; border-top: medium none; border-right: medium none;"
You'll have to selectively remove that code for IE, or fix how it works.
Note, you ought to install the Developer Tools for IE (or if you have IE 8, just press F12 to see if they come up). The tool will let you see the HTML code after javascript has run, and it is invaluable in troubleshooting these types of problems.
Your CSS is being overwritten by inline styles, it appears, by this function. $('#courses').corner(); in your index.js file, which is rounding its corners like it's supposed to.
I have the below code:
<button onmousemove="this.style.border='2px #555555 solid';"
onmouseout="this.style.border='';">Test</button>
On mousemove, it correctly changes the border as specified. On mouseout my intention is to change the border back to the original. This works in Gecko based browsers but not in IE. IE removes all the borders and the button becomes 2D.
How do I get back the original 3D look of the button?
Note: For debugging, I tried alert(this.style.border) the get the value of the original border. It shows it blank. So the original border value seems to be blank. But setting to blank does not bring the original look back. :(
Try setting and clearing a class for the element and assigning the border value to the class. Just like below:
.buttonHover
{
border: 2px #555555 solid
}
<button onmousemove="this.className='buttonHover';" onmouseout="this.className='';">Test</button>
Note that this simple JS code will break your existing classes assigned to the element if there are any. If you are to use additional classes, please add a comment declaring the situation and I'll change the code accordingly.
As far as I know, there is no way to restore the original OS look once the element's border is set, although it strikes me as odd that even emptying border doesn't do the job. Ah well. The OS style is not just a classic border, but includes a black outline (depending on OS visual settings, even more than that).
Seeing as IE < 8 doesn't understand outline, I think the best workaround would be putting an element around the button, and highlighting that on hover.
Would recommend using CSS for the same rather than javascript. You can do the following.
Define only the hover propery of the button.
HTML :
<button value="Hello">Hello</button>
CSS :
button:hover
{
border:1px solid #333;
}
I think that what you are looking for can be found in the bowers user agent CSS. Here is a table that will give you a good idea of whats going on with different browsers http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm .