I have one problem with borders it TD tags. I have no idea why Firefox don't display borders and Google Chrome displays.
Look at this: http://mirgorod.us/sandbox/labirint/
Problem solved.
td must have
I looked at your website, you should put
in the td to see the border. By keeping the cells empty, Firefox doesnt display borders.
Related
I want to render a div backward, and then render the table cells inside it forward. I prepared a demo here: http://jsfiddle.net/djsvL/3/ which works in my browser (chrome).
However, it doesn't work in IE 8. From what I've seen so far, I can flip the text or image within a div or cell, but I can't seem to flip the entire layout (for instance, notice how the table cells are reversed).
Is a trick like this possible using IE8's filter:fliph ? If so, what am I doing wrong or how can I do this?
Edit: Here is a screenshot of what I see in IE8: http://tinypic.com/r/2e4yw3p/6
The answer was to set a background color.
IE does not handle transparency well, it uses black instead of transparent, and the box technically has a transparent background.
I recently noticed that my site is broken in Chrome despite displaying well in Firefox. Having studied the HTML and CSS at my page -
http://www.designlagoon.com/what-we-do/
There is a larger gap below the 4 blue titles in Chrome than in Firefox - which is breaking the frame of the containing box. This seems to be related to padding / margin of the table layout I'm using but I'm struggling to work out a fix.
If anyone can shed some light on what might be causing the problem I'd really appreciate it!
This is related to a question I posted yesterday: Firefox: wrong interpretation of box model?
Actually, it's Chrome that's behaving correctly: td with height 150px + padding 15px (x2) = 180px.
Firefox does a miscalculation when adding padding to td.
So your best shot would be to remove the padding on the cells, and add a margin to their contents instead.
Thanks for the advice. I tried removing padding from the table and td and applying it to the paragraph instead. This improved the problem to an extent but we were still left with different borders in firefox, IE and chrome.
In the end we decided to remove the table completely and use 4 floated 25% columns instead. I will avoid using tables for any site layout in future. Lesson learned!
I can't seem to find out why some images at a project of mine (http://www.de-drie.nl) have a strange (grey?) border at the bottom. Could it be since the images aren't scaled? I have scaled them to fit content with css.
At first this problem was there in: FF, Chrome, IE and Safari. After playing a bit with the width (in css) of the images the strange border disappeared in FF.
The other browsers are still showing the border problem.
I have seen multiple posts here at stackoverflow which describe the same kind of problem.
The solution should be display:block or vertical-align:bottom, but this really doesn't seem to work for my problem.
All your images with grey border in the html, literally the actual images contain a small grey border underneath
For example this: http://www.de-drie.nl/images/uitbouw.jpg contains this:
I am using a table to render a calendar. I have noticed an odd rendering bug in table cell border rendering in Firefox version 3.6 through 7. Here's a screen capture:
As you can see, the border gets "bent" when I scroll. Also, there are gaps between the horizontal and vertical border where it isn't "bent". A live example can be seen on this web site.
I don't see this behavior in Chrome, Safari, or Internet Explorer.
UPDATE
I am still seeing this issue in Firefox 20. I have noticed that single pixel borders do not exhibit this behavior, only two pixels or more.
You have a problem whith border-collapse:
Here is a solution for your problem: http://www.charlesgarwood.com/blog/?p=13
What to do:
change border-collapse from collapse to separate
change the border-width of the <td>s and <th>s from 2px to 1px
give the <table> itself a 1px border
Give some conditional comments like described in the link
I'm having a weird problems with one of my Arabic sites.
See that gray rectangle with the red heading in the homepage? right underneath it shows up a horizontal gray border in IE8 that I just couldn't get rid of unless I remove the border under the black headings below, which I don't want to do.
There's even an extra space between those two elements that's not supposed to be there. You can view the page in Firefox vs. IE8 to see what I mean.
Any idea how can I fix this?
Your help is much appreciated :)
there's a duplicate h2 under the episode_summary producing in ie8.
u should try validating the site first. http://validator.w3.org/