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... :)
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 got a flexbox problem that occurs in Safari and Opera (probably Chrome also, haven’t checked). In Firefox everything looks as it’s supposed to. Here is the link: http://corvinweber.de/download/v5/
When you scroll down to the bottom of the page you’ll find the reply form. I want the fieldsets “.message” and “.senderforms” to be displayed next to each other, just like Firefox does it. However in Safari and Opera “.message” expands in width and “.senderform” gets pushed to the next line. Strangely, if I set the width of “.message” to 50 px “.senderforms” still gets pushed to the next line. The developer tool indicates that there’s a margin added to the right, although “margin-right” is set to 0.
I have also tried to use the -webkit-prefixed version of flexbox, but it didn’t help.
It’s probably just a small adjustment in the css, to make it work, but I can’t figure it out. Can someone help, please?
Obviously the fieldset nested in another fieldset was the problem. I turned the outer one into a form and it worked.
Heloo.
I have problem with multiple DIV elements in google chrome. if those have display:inline-block, sometimes chrome still keeps breaking line. Everything works fine in Firefox, Opera and IE, but not in chrome.
try visiting this page:
http://tridex.pl/kategoria/%2A00/Nowosci.html?typ_listy=4
This is shop. There are 2 similar item layout styles, one with 3 items in row, one with "as many as will fit on your screen" in row. Everything works as it should in Firefox, IE, Opera... but Chrome displays 2 items in first line and 3 in each another.
Layout is modified on the fly, so maybe this is the problem? But since it works in all other browsers, why it does not in Chrome? Should i call something to tell Chrome to recalculate DIV width and rearrage those?
Does anyone have any idea how does it work in Chrome? Is there something else i should
Setting the width style of the parent element a bit wider helped me, looks like the elements need more room in Chrome.
It doesn't work for me in Firefox either... however this seems to be the issue.
<div id="prawy_div" style="width: 564px; left: 273px; position: relative;">
If I change its width to what it starts out as... 680px, Everything looks fine. A script is changing it for some reason, and boy does it want to change it... seems to be attached to your scroll event.
I've created a webpage that has several divs containing text. The right hand side of the page contains one large div made up of several paragraphs using the p tags. At the bottom of this large div after the closing p tag i have left some space so that the writing does not go right to the bottom of the webpage.
This space varies between browsers. It seems to display exactly how it shows in Dreamweaver in IE9 and Safari but when previewing in Firefox it seems to cut off some of the text at the bottom. This can be fixed by increasing the height of that div but then this also increases the space more in Safari and IE.
I've come to the conclusion that the spacing between each paragraph down the page is larger in Firefox than IE9 or Safari for some reason which is why the last bit of text is getting cut off in Firefox.
Has anyone else had this problem?
Here is link to my webpage: See the difference in the paragraph spacing in firefox compared to IE/Safari, most noticable at the bottom as it cuts off the writing:
www.athatravel.com/NewSite21/srilanka_highlights.html
Do you tried to set a fixed margin-bottom to your -Element... Maybe that is a solution for your issue.
Thanks Eray the reset.css file worked a treat. Thanks for everyones help and advice.I wasnt sure how to accept your's as the accepted answer as you posted it as a comment rather than an answer.
I have a table (I use it for my main layout) with a table cell that is only 20px high. The next cell is a rowspan of 2, that contains my main content. In firefox it isnt a problem at all. It stays at 20px (It's important because it is the bottom of the logo and just above the menu). In internet explorer, the cell decides not to stay at 20px high.
I am doing eveything I can think of (stylesheet, inline style and JavaScript). There has to be a way that I can keep it from resizing depending on the content of the page.
Here is the address of the page in question: http://www.rat-pack.com/Members.php
The issue is nothing you are doing wrong, it relates to how IE handles locations and table attributes
Try the following
http://www.quirksmode.org/js/detect.html
if you use JS to detect what browser is being run, you can create a custom style sheet for each, which is how you work around browser limitations
Best of luck to you