I'm using IP Net Renderer to view my newly installed forum in IE7. If you care to take a look, you can see the forum is overflowing its containing element.
The forum renders correctly in IE8+, FF, Chrome and Safari, but not IE 7. Does anyone know how I can fix this?
Thanks,
Chris
Your .wrapper class has width: 85%; set but no overflow rules. Try adding overflow: hidden; to that class.
Also, for good measure, I would suggest you replace the width: 100%; declaration in your .tborder class with width: auto;.
Related
Hi I am building a store on Volusion, and can't figure this problem out. The issue is that in IE, Chrome, Safari, my padding for search_refinement_filters is looking fine, but in Firefox, they are being pushed about 350 px to the right. Check out the Firefox CSS issue here
Please let me know if you can help! I have tried moving search_refinement_filters from the content div to content area, but unfortunately I wasn't able to configure that to work either.
Thanks!
It's due to the left padding and left margin on #search_refinement_filters. You also have some weirdness with the absolute positioning. You may want to add position: relative to #content.
Take a look at Firebug. It is a convenient tool for analyzing code in Firefox.
Just add following styles to your #search_refinement_filters div. Remove others.
#search_refinement_filters {
position: absolute;
top: 100px;
left: 232px;
width: 700px;
}
And then apply position: relative to your #content div.
#content {
position: relative;
}
As 2C-B said #search_refinement_filters has left padding and left margin. These can be removed or overridden to prevent the issue with the styling.
You should definitely get Firebug for Testing purposes if you don't already have it.
Get it here: https://getfirebug.com/
It is an invaluable tool for debugging html, css, and javascript problems.
Hope this helps.
I created an image with some links on top of it here. It works as it should in Google Chrome and Firefox but not in Internet Explorer 8. Does anybody know how/whether I could fix that?
For some obscure reason, IE sometimes "doesn't like" completely transparent areas of absolutely positioned links. Setting any explicit background to them other than default transparent none (background: url(about:blank) "hack" usually does the trick) seems to make IE treat them correctly. In IE9+, background:rgba(0,0,0,0) also seems to do the trick (although it should be just the same as transparent per CSS spec).
You might need to specify the z-index of the image to ensure it appears behind the links in IE8.
i dont have your code but i think this may help you. try this class:
.dict {
position: relative;
margin-top: -138px;
float: left;
display: block;
height: 116px;
On the links there should be a z-index value for start, in IE(6-7-8), z-index is only working when the parent element also has a z-index value:
.dict {
display: block;
height: 116px;
position: absolute;
top: 79px;
z-index: 2;
}
<div style="position:relative;width:860px;height:200px;z-index:1;">
I still don't know why it's not working. But the problem is solved (even for ie8) by removing the img from the html and using it as a background with CSS.
http://metagraf.github.io has been behaving well in all tested browser until IE10 came along. The top menu is overlaying the entire page when viewed in IE10.
A screenshot of how the page looks in IE10 can be seen here: https://dl.dropboxusercontent.com/u/2897577/ie10.png
Any ideas on how to fix this?
regards Oskar
So when I run the site in question in IE 10, yes indeed, the top menu does look buggy in IE 10.
The immediate source of the problem is the img in the navbar.
If you hit F12 and use IE's developer toolbar, and then if you set the width property of the img from auto to just being un-checked (so that auto is no longer the value, the site all of the sudden looks normal.
Digging deeper into the issue, here's the css setting for img in bootstrap:
img {
width: auto\9;
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Ok, so what in the world is width: auto\9?
Well, looks like it is an IE hack, but a hack that does not apply to IE 10.
CSS \9 in width property
http://www.paulirish.com/2009/browser-specific-css-hacks/
So as a quick fix, I suppose one thing you could do would be to set a custom css property
on the img in the navbar that is exact about the width of the img.
I am having issues with overflow-x:hidden in IE. All other browsers seem to accept it, but IE creates overflow-x:hidden (x and y).
Does anyone have any tips on a IE fix?
Since -ms-overflow-x is working it's possible you have an issue with your DOCTYPE declaration.
See here
Remarks
Windows Internet Explorer 8. The -ms-overflow-x attribute is an
extension to CSS, and can be used as a synonym for overflow-x in IE8
Standards mode.
With Microsoft Internet Explorer 6 and later, when you use the
!DOCTYPE declaration to specify standards-compliant mode, this
property applies to the html object.
I was able to fix the same issue I was having in IE8 by adding:
position: relative;
to the div that needed the overflow-x: hidden functionality.
Without the relative positioning on the div, my content was showing outside the div even though I had set overflow-x: hidden.
The answer of Svbaker is also correct. try this one this work for me.
<div style="overflow: auto;
overflow-y: hidden;
-ms-overflow-y: hidden;
white-space: nowrap;
position:relative;
">
...somecodes..
</div>
-ms-overflow-y: hidden; - this works for IE8 just remember adding position:relative because overflow-y/x is for CSS3 and works for higher browser.
yah overflow-x and y is a css3 specification.
Try using a jquery plugin like http://baijs.nl/tinyscrollbar/
otherwise I'm guessing you are trying to hide the "width" of the element? why not
1. set the width of the element to a specific size
2. set overflow:hidden
3. set height to auto
*I'm re-posting this question because I only got one response before, and it didn't work. Hopefully someone new will see this and know what to do! *
I'm using IP Net Renderer to view my newly installed forum (http://www.datesphere.com/forum/) in IE7. If you care to take a look, you can see the forum is overflowing its containing element (it's wider than the 960px container I have for my entire site).
I've tried adding overflow:hidden to the .wrapper class as well as width:100% to .tborder per advice received on StackOverflow, but it didn't work.
The forum renders correctly in IE8+, FF, Chrome and Safari, but not IE 7. Does anyone know how I can fix this?
If you use IE9/8 and run the Developer toolbar you will notice that the global.css that is being generated is different for IE7 from IE8. Take a look at what is generating that Style Sheet for you and see if you can modify it to make the MIN-WIDTH:930px; or MIN-WIDTH:100%;
Or a second option add somewhere after the glboal.css style sheet a inline-style or on page css or link another style sheet .wrapper { MIN-WIDTH:930px !important; } or .wrapper { MIN-WIDTH:100% !important; } so that it overrides whats generated in the global.css file.
IE7:
.wrapper {
MIN-WIDTH: 970px; MARGIN: auto; WIDTH: 85%; MAX-WIDTH: 1500px
}
IE8:
.wrapper {
MARGIN: auto
}
Change your min-width value for your wrapper class. You can set an static width or set it to 100%.
Remove #wrapper div
And set IE7 specific .tborder {display:inline-table}