I have an old layout that uses tables and I need to make a DIV to use the entire space of a TD. The CSS works fine in Firefox but IE interprets the 100% height as the entire window and doesn't take in account the presence of other elements on the page.
A working example can be seen in this Fiddle: http://jsfiddle.net/micahSan/JeA6m/
Firefox will see the DIV as 100% height of what's remained but IE will see it as 100% of the entire page.
How can I make IE match Firefox?
Thank you in advance for your advice.
I don't know wether exists more cleaner solution for this but with IE are still problems :-( I don't still understand why many people using IE so guy must still create separated CSS style for IE ... so let's back here. Problem is that IE don't respect height of <TD> in <TABLE> i think. So i created this temporary solution, add this to your CSS file
#big_cell {
height:100%;
height: 45% !important;
}
so this height: 45% !important is IE hack and it will be work only for IE.
Or instead of using the height attribute because of these problems you can use a spacer. For example a transparent small pic which you set the height you want.
Related
So I have a grid made with CSS grid and I've got an iframe which is taking 100% of the grid cell it is in, so the parent div, as I read on other posts safari and other browsers don't support this height: 100% not having a parent with a set height value and I'm looking for how to make it work for these browsers and how to implement it in my code.
I've quickly read about something called #support but don't really know how I could use it for this specific case; or about flexbox plus webkit to make it 100% but I didn't manage to make it work.
Send jsfiddle url with your problem, please.
Try with:
position:relative;
display:inline-block;
width:100%
I would post code along with this but I can't seem to find out what type of scenario it occurs in but in IE7, certain elements seem to shrink when you hover over them and as you hover, unhover and rehover them they keep shrinking and shrinking until they are very small blocks of colour. It seem to be elements where thy ahve dimensions like width: 50% and height: 100px. But not 100% sure on this.
Any idea what could be causing this? On first display or after a refresh the site is fine but hovering over has this effect.
Any thoughts?
Are you using boxsizing.htc? Remove it (yep layout is broken but that's a test). Is the bug gone?
I don't have the solution except when removing the HTC from ONE element is sufficient but layout isn't affected. To remove it, just redeclare behavior property with url() value:
.ie67 .noboxsizing {
behavior: url();
}
I've designed a fixed-width page which renders equally in Chromium, Firefox, Safari, but has a small issue in (from what I can tell) ALL flavours of IE. I've added some conditional styles for IE, which make things a bit better, but it's still off (by only a couple of pixels).
The site in question is here: http://www.brushesfacepainting.co.uk/brushes/home
IE and Chromium rendering side by side is shown here: http://www.brushesfacepainting.co.uk/images/renderissue.jpg
I added conditional styles for IE to fix the width of all the elements, prior to this, the banner style was much narrower than the body.
I assume I'm hitting up against an IE bug, but I can't figure out which one! Can anyone help please?
Thanks,
Lee
Your mainbodyie rule has a width that is different than the width in your standard css. (851px vs 848px). Fix that to match your other wrappers.
Also your page is not centered in IE - I suggest you wrap whole page in a fixed width wrapper with margin:0 auto to center whole page - so you don't keep repeating the width multiple times in your css for each layout element.
/* ONLY FOR IE */
DIV.mainbodyie{
width: 848px;
}
DIV.mainbody{
padding-right: 0;
}
Use a div structure for enclosing all content like header,middle,footer inside it.Add following code for this div:
.test{
overflow:auto;
margin: 0 auto;
}
Ok, I'm stumped!
If anyone has a suggestion or two on a CSS / JavaScript fix for an IE7 z-index issue on this page without changing the DOM structure much (it's set up for easy tab usage) I'd be incredibly happy to try it out.
On this page, IE7 renders the bar that spans 100% of the width of the page above everything else, while I actually need to cram it very specifically between the text and the hero image (as seen when viewed on any modern browser).
Here's the link.
Thanks.
IE7 has known bugs with z-index, see: IE7 Z-Index issue - Context Menu
In this specific instance, you can fix it by changing a few parts of your CSS. Complete each step and check the progress as you go:
On #container remove position:relative .
The z-index issue is now fixed, but everything is in the wrong position!
On #thumbnails and .pane_img remove these properties: position, top, left, z-index.
On .pane_content, set left:50%; margin-left:-480px; bottom:90px.
On #learn_more_btn and .renova_logo, repeat the left: 50%; margin-left: ??px method to place the elements back where they should be.
Please go to: http://jlecologia.com/page1c.html to see the problem
The top box look fine but in IE6 there is a double top and bottom border.
can somebody point me ut what i have done wrong ?
Or can anybody tell me a javascript rounded box that accept to do that effect with the border that is unequal. I have test some and they all fail, so i have done the picture round box but i like the jQuery javascript approach better.
Take a look at the JQuery's round corner plugin
And here is a demo
The default for background images to to have them repeat.
Try: background: transparent url(../images/roundbox-top.jpg) 0 0 no-repeat;
Edited after comment to provide full solution:
IE6 sets the height of empty divs to your font-size if the height specified in the css is less than the font-size.
On #roundbox .top and #roundbox .bottom, put
font-size:0;
line-height:0;
That will collapse the div to the right height.
In addition to the change you've made for the bottom border, setting the font-size of the element with class "top" to 7px fixes it in my IE6.
Try using the web developer toolbar in Firefox to validate the CSS and HTML. I did a quick check and there are multiple errors in each. The rendering difference, I suspect, is because IE does not handle malformed content as well as FF. In particular, even small errors in CSS files tend to snowball in IE and melt down an otherwise good layout. Not sure if IE7 and IE8 have made any improvements in this regard.