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>
Related
I'm trying to debug a CSS issue on my site that only happens in Safari and Firefox. Chrome renders it just fine.
The images shouldn't stack like that. They should be positioned in each box.
I've tried various CSS position and HTML changes to get this to work but with no luck. Something I'm not doing correctly here?
website address is http://www.thesignpad.com
Pictures of the issue are as shown below:
https://i.stack.imgur.com/evSzj.jpg
https://i.stack.imgur.com/KWJ1S.jpg
All browsers have default css built in. Each browsers defaults are different. There are nice snippets off css out there you can use to reset all css on browsers to be consistent. This will ensure moving forward your work is consisten across browsers.
As per what the exact css issue is I am not sure. It looks like a line height is causeing a div to float onto the next line but I wont know until you post your code.
You can use webkits for all browsers like :
-webkit-text-shadow: 1px 1px 2px black;
-moz-text-shadow: 1px 1px 2px black;
for detail u can visit http://www.peachpit.com/articles/article.aspx?p=1750586
I got the following problem: I've created a html table. On some columns of that table my css applies a right border with the following syntax:
.right-border {
border-right: 1px solid #tableBorderColor;
}
The border looks fine in Chrome. However when I switch to IE the border looks like it would be 2px instead of 1px. Does anybody know how to fix this?
Sorry to everyone who has tried to answer my question:
But as I just figured out - I'm just to stupid to use the zoom of my browser. Seemingly I changed the zoom level of my browser for testing purposes yesterday and forgot to set it back afterwards. So when I checked the border thickness today it looked like 2px because of the zoom level. Since I've got some divs on the same page which also had a 1px border and appeared normal I was just a little bit confused and thought there must be something wrong with the IE.
So sorry to everyone!
If you can't give us a fiddle to check the code, I will suggest to put a DIV inside, It would be easy to give some style, and also, avoid cross browser failures (including FF and IE)
<table>
<tr>
<td><div>lorem ipsum</div></td>
<td><div>lorem ipsum</div></td>
<td><div>lorem ipsum</div></td>
</tr>
</table>
EDIT: I see you reply now... At least it was simple to solve!!
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
I'm trying to use 'em' for sizing all my HTML elements, including the border for divs and imgs.
But when I use css: border: .1em #000000 solid; on one of my divs, It won't show in Google chrome but in Firefox and IE. Am I using it in the wrong way? or it's one of Chrome's bugs?
In anyway, how may I fix it? or is there any other way to work around it?
If 0.1em computes to a value that is less than 1px, it may be ignored depending on how the browser chooses to round values. Perhaps it's the case that Firefox and IE round numbers, whereas Chrome floors them. You should probably just use a value of 1px instead of using em for absolutely everything.
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.