I am having a problem with a table. The table seems pretty ok with FF and Chome but IE shows some space top and below of the table. Could not figure out how to solve this. Any ideas to solve this problem? Thank you
Try using a reset.css and can you post us some of your code?
My first guess would be a you would need to set a height definition on the second box. If that doesn't work, I'd look at the padding definitions.
you will two points.
give vertical-align:top; to side box
if you give any padding? IE will takes padding double
Related
I wish to trick bootstrap rows somehow. I need to put many col-..-.. items in only one row (there are about 8 really complicated .js files that I'm afraid of altering - and it points to children of the div that I additionally used as a bootstrap row). No way to trick the HTML, I have tried many-many ways. In case you don't believe me, check out the specific problem.
Image here
*The red boxes are the images that I'm using and the striped space is left blank. If I align the element that is on the blank row, the next one goes there and the problem is still unsolved.
What's quite interesting that Firefox and IE show everything the way I them to
but Chrome and Edge do not.
Can anyone help me on this? I'm sure there must be some easy way that I missed out, like altering some of the default bootstrap row class properties, but I just couldn't get it. Any suggestions are appreciated.
Solved using CSS Grid layout.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
I noticed the navigation li items (yellow section) were right of center, so I altered the containing div/nav widths and background background colors just so I could see what was going on in an attempt to fix the misalignment; however, I can't seem to see a reason why this is occurring (in about 6 browsers).
Here is problematic markup/css: http://building-more.site50.net/
It seems to work fine in jsfiddle: http://jsfiddle.net/cTXXH/1/
It doesn't seem to display at all in IE, what is going wrong here?
Also, it looks like you forgot the ending bracket in your endif statement for the IE check.
Should be:
<![endif]-->
It's because some of the elements already have default values such as padding and marging that are skewing your positionings, and this could be different for each browser. That's why people often 'reset' CSS to use 0 margins and 0 paddings by default instead, before starting with their own styles.
Your example works fine in your Fiddle because 'normalize CSS' is checked. This is a framework similar to CSS resets which can be found here: http://necolas.github.com/normalize.css/ - it makes sure that your default positionings are consistent between browsers, and gives you a clean slate to work with.
If you were to include it into your web page it would solve your issues. Hope that helps.
I am trying to duplicate something similar to a windows form toolbar in html. I've created an example of what I am currently working with. Seems great, but when I load it into IE7 the buttons end up going to the next line.
The only other way I can think of is use a table with two columns and text-align the second column. Anyone have any suggestions?
http://jsfiddle.net/nyEw7/
Seems like this question was already asked. I am looking for IE7 workarounds.
Display two divs in a single line filling space - CSS
Use float: left/right. Here's an updated jsfiddle:
http://jsfiddle.net/nyEw7/1/
In my website, there are lots of buttons. When viewing in Chrome, the button width just fit on the dynamic button text, but in IE, I can see extra padding are produced on both left and right...
Would there be any CSS rule that can allow me to take away these padding? Thanks.
Might be a bit late, but when I searched SO for the very same problem today I found this question. Obviously, this is no real padding (in a sense that it cannot be turned off by padding:0px), but rather one of those weird oddities that we all love so much about IE. (Note how the false padding scales with button text length O_o). Fortunately, there is a simple solution to it, as described here.
Basically you only add overflow:visible; to the button (I did not need the extra width:auto;as described there). Don't ask - it's absolutely not what you'd have thought this should do, but well... It's IE Land and the rules are different over there. Just note that this apparently does not work when your buttons are inside a table cell.
I guess the CSS reset might have solved this, because someone already included this in some global declaration. Just adding this answer to shed some more light on the how and why.
Never give up, people - our children will see a world without IE quirks... One can hope.
You can use reset css as it avoids browser inconsistencies.
Please refer http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/
Visit http://www.cssreset.com/scripts/html5-doctor-css-reset-stylesheet/ for reset.css
Managed to avoid extra spacing in IE with extra statement display:block; in CSS like so:
.menu button{
display:block;
width:100%;
padding:0;
}
Note that I didn't use width:auto as it wasn't an option in my case - buttons are empty, width is taken from parent div.
I'm having difficulty trying to get IE7 to behave like a normal browser.
I have a HTML sample here: http://jsfiddle.net/6QSYM/4/ that looks fine in most browsers, but when viewed with IE7 you can see that the "Sector Used" text is merged with the line below it.
Can somebody suggest how I can correct this?
I run into this problem all the time! At the company I work at we still have to support IE7 (will it ever just DIE!). So the best solution I have found is to set the width for your none floating div. It's a hassle but that why IE knows how to calculate the layout.
Try adding:
clear:both;
to your .risk-statistic-container class.
Try this:
http://jsfiddle.net/6QSYM/9/
the semantics of your HTML elements are all over the place as well. Way too many spans and divs for me :)
Hope that helps.