I have my table with overlapping rowspans, but in IE it doesn't seem to want to do that, it keeps pushing the bottom right cell so that second last cell on the right side is the same height as the middle one on the left side, but in Firefox it doesn't do that.
In every browser, except IE it looks like this:
http://jsfiddle.net/wUWFH/6/
But in IE it looks like this: http://jsfiddle.net/wUWFH/7/
As you can see in the bottom right side, the last cell is taller than its left-side pair, but in IE it shows them both the same height.
Is there a CSS to fix this? IE compatibility is really starting to get frustrating.
Seems your problem iwht IE 7, try applying border-collapse:collapse; on table via css
Related
This line of code works good on different browsers except edge.
*<tbody id="cat_${cat.prefix}" class="table-responsive collapse";>*
In Edge explorer the spaces between rows very high and messed up when I click a row to collapse the body table. how can I fix this problem in edge?
In nested table in Html page the tag dose not work correctly in Edge browser, so we should change it to tag.
I've encountered a very odd bug on safari, and was wondering if anyone could shed any light on it. I'll preface this by saying it works absolutely perfect on Chrome and Firefox, but breaks on Safari and Safari and Chrome on Apple devices.
Here is a codepen illustrating my issue:
http://codepen.io/anon/pen/wWkBOB
the code is too much to include here and much clearer on the codepen.
I have 3 tables, wanting to line up on desktop size so they are all on the same line, with only the first having the 1st column showing so it appears as one large table (but needs to be 3 separate tables for mobile). On my centre table, I have a negative right margin of 12.5% to allow for all three tables to be 37.5% wide, and the third table sits over the end of the centre one.
On safari, this does not work on the 3rd table sits below. If you inspect the centre table, you can see that the computed value of the 12.5% negative margin at full size is 160px. If I then go back to the styles and change it to -160px instead of a percentage value, it works absolutely fine. The percentage value it wants to be able to look correctly is -20%.
Setting it at -20% obviously isn't correct for the other browsers and doesn't make any sense, as the value wanted is 160px which is 12.5%.
Any ideas? Help? Suggestions? would be much appreciated.
I had this problem as well. I fixed it by adding
position: absolute
in the css to the tags that were acting strange try it maybe it will work for you
else your could try to use pixels
I'm working on a new website design and everything seems to be working on chrome, yet on internet explorer (only the newest version, it seems), there is a ton of white space added on top of the website.
Basically on IE, it almost looks like I had 500px of padding-top. But it displays perfectly on chrome.
The current URL is cspclaw.com
Thanks.
I posted the entire main page HTML here: http://pastebin.com/eDmfuRWK
And the entire main page CSS here: http://pastebin.com/GK3TRtx4
Seems to be an IE bug to me.
It calculates the height of the <tr> through the height of the contents of the highest <td>, disregarding the rowspan="2".
If you remove the rowspan attribute, you can kind of see why it's doing what it's doing.
The problem for IE is that every single <td> in your second row (the row containing the <div class="fadein">-cells) has rowspan="2". Remove that, and the page will no longer show that odd margin/padding in IE.
It still doesn't look the same, my guess is more rogue rowspans... :)
I designed a page using Drupal 7 ( http://quaaoutlodge.com/drupal-7.14/ ). It looks just fine i(the way I meant it to) in Firefox anf Chrome but in Internet Explorer (testing 8.0 on WXP) it is all messed up. Now if you go onto a page with sub links, Golf e.g. ( http://quaaoutlodge.com/drupal-7.14/golf ) it looks all like expected in FF and Chrome but in IE, the #ContentWrapper div only starts on the bottom of my "secondnav" div. Why is this? How do I get the content up so that the top of content aligns wit the top of secondnav?
Okay, in the mean time I have figured out that if I add
width:600px;
to my
#contentWrapper{
style definition, the content div jumps up and its top is aligned with the top from the secondnav but this is not what I want. I would like to keep content at 800px and have them both next to each other, any hints?
Thanks!
Okay, fifured it out. An underlying div #pageBorder had a
margin-left:220px
and that would push my content onto the next line in IE while it worked fine in FF and Chrome. Well, it's fixed now...
http://quaaoutlodge.com/drupal-7.14/?q=contact
I've been searching about this issue for a couple of days. But as the problems are spesific, so the solutions usually are. My problem is kinda common but the solutions I found so far didn't work for me.
I use a #header div which is around 30 px height. Under that div, I have 3 divs like left, center and right. I have an accordion menu with js in the left div, content place in center, and last tweets script in the right div. Since I added box-shadow to #header div, other div's under it are placed after where shadow ends. I used z-index to make header div's shadow place on other div's, and it works perfectly in Firefox, Safari, Chrome, even IE9! But when I try in older versions of IE, it just happens the way I tell. Here is a screenshot: http://www.twitpic.com/4kh9w3
Like I just said, I have "last 2 tweets" script in the right div. It fills < ul> < li> items with tweets and shows them. So that I can design this list in my css file. And same, it only doesn't work for IE7&8. I don't even mention 6, it's not so important. The problem is that IE automatically scrolls list items to left. So half of them disappear! Here is the screenshot: http://www.twitpic.com/4khajz
So, what can I do to save my view in Firefox, Chrome etc. and also can fix it in Internet Explorer 7&8?
I'm not sure if i understand your problem... but if you cant get shadows to work try looking here http://css3please.com