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!!
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>
First of all, I've been searching for an answer in Google and forums, but didn't find, sorry if it has been asked before and if you can link me to an answer it would be great.
Here's my problem: I have a web calculator made of a table with buttons inside. Here's a link. If you open it with IE it will be all messed up, so don't. I'll work on it later. On FF the rowspaned buttons do not stretch up and down to cover the hole cell, on Chrome it looks as intended. How do I make it look good on FF too? thx in advance to responders.
Using a <table> for layout is a bad idea for numerous reasons that don't need to be re-hashed here. What matters for you is that FireFox displays tables differently than other browsers and you are going to have a hard time laying out your buttons as you want them with that approach.
Instead, just ditch the table and absolutely position the buttons, or float them.
Edit: A floated layout works nicely:
http://jsfiddle.net/gilly3/7rL97/5/
JSFiddle's frame messes up the display if you view it in chrome, but if you view it in chrome outside of the frame, you can see it works fine in chrome as well: http://fiddle.jshell.net/gilly3/7rL97/5/show/
#yekhezkel gilly3 is probably right. but i found solution to your problem. It works in firefox and chrome. I have not tested in IE.
step1: add a class of fix to all the td's containing rowspan=2. It should look something like this.
<td rowspan="2" class="fix">
<button onclick="modifyInout('+')">+</button>
</td>
Step2: add the following css for fix class
.fix {
height: 70px; /* double the value of td height you specified earlier */
}
Let me know if it helps.
Here is the jsFiddle: (open in firefox or other browser to test it.)
Regards :)
Read this and try to add padding
padding: 18px 6px;
Padding will stretch your button
This question already has an answer here:
Closed 11 years ago.
Possible Duplicate:
html table border is not consistent in IE6.0 and firefox
border in html table is looking different in IE and mozilla . border is same around all sides in mozilla but in IE6.0 it is not same. border bottom is more in length.
Images for Firefox and IE respectively:
<table>
<tr>
<td style="width:90%;border:2px solid #3399FF;">this is demo</td>
</tr>
</table>
i am not able to figure out what went wrong in this. please help. Thanks
I have IE6, and I tried your code and it looks exactly the same as in firefox.
So clearly there is some other code there that is causing the problem. Without seeing that code I am unable to help you.
Here is the image in IE6, with a piece of the about windw with the IE version.
Its working fine for me,May be some other css overwriting your inline css
You can use:
<td style="width:90%;border:2px solid #3399FF; !important">this is demo</td>
I'm working on a site and I have some problems that I hope you guys can help me with :)
If I put bold on my text in the menu it looks too bold in Firefox :S, but it looks fine in Chrome.
In Firefox the double border on the #content container is outside of the shadow effect :S, but looks good in Chrome.
Screen shot on Mac Firefox 5.0.1 and Chrome 13.0.782.112:
This is my project.
I hope some one can help me out with this.
If you have something I better I can do, I will be glad to hear that too :)
Your first issue regarding bold font looking different between the browsers is just because of the way browsers render text differently. There is nothing you can do about it, unless you go the horrible route of using images instead.
Your second issue is not about the border but rather the outline. It is caused because of the way Firefox interprets the outline when box-shadow is applied. It applies it outside of the shadow instead.
You can put the code below in your css to target Firefox and bring the outline back in:
#-moz-document url-prefix() {
#content{
outline-offset: -11px;
}
}
Live example: http://jsfiddle.net/tw16/n8bet/
#1: There differences in font rendering in every browser. You can try numeric values instead of simply bold to narrow the results ( http://clagnut.com/blog/2228/ ). Also read the answer on this SO entry: Same font except its weight seems different on different browsers
#2: remove this line from #content css:
outline: 1px solid #B9BDBE;
I applied "border-bottom:#F60 dotted .3em;" to a div and while Firefox renders the dots as round, Chrome shows them as blocky dashes. Any takers?
If it's important that the borders are the same you can look into the CSS3 border image property: http://www.css3.info/preview/border-image/ for Chrome it will be -webkit-border-image:
The specification doesn't define what 'dotted' means to that level of detail. The two browsers just interpret it differently. This is not a problem.
As a graphic designer, this is indeed a problem for me.
:dotted; and :dashed; are specified separately for a reason - a rectangle is not a circle. While it is possible to work around, web builders working at a remove often don't spot the difference. As far as they are concerned, the brief has been met.
to be fair, at 1px, it is less of a problem but when heavier weight dotted lines are used as design elements and code is selected over graphics to save on page load, things can go quite wrong.
For those needing a single dotted line that absolutely has to be a true dotted line, I would suggest a div with a small repeating background image. Could also try styling up a <ul> if you want to keep it all code.