I'm running into some little glitch on Internet Explorer. The site looks like it should in Firefox (http://i27.photobucket.com/albums/c190/blcArmadillo/FirefoxView.jpg). But when I load it in Internet Explorer the background from my top bar seems to be applied across the site as you can see in this screenshot: http://i27.photobucket.com/albums/c190/blcArmadillo/AfterLoad.jpg. The odd thing is that if I scroll up and down the page, the parts of the page that leave the view of the screen suddenly have the proper white background as you can see in this screenshot: http://i27.photobucket.com/albums/c190/blcArmadillo/AfterScroll.jpg.
The site is temporarily residing at http://evergreenwebdesigns.com/playground/dsite/. If you know how to fix this glitch please let me know. Thanks for your help.
This is the common "hasLayout" IE issue. Check out the fix I suggested for another CSS problem that should work in your case as well.
In your case though you should apply it to IE7 as well, so:
<style>
.haslayout {
* display:inline-block; /* Limit to IE7 and below */
}
</style>
And apply this class to the offending div
Related
I have a site that works fine in Chrome, Firefox, IE7-11, android, iOS (both ipad and iphone) yet for some unknown reason all elements except the header and rotating banner are invisible in Safari and only Safari.
The elements are all present and when inspected the outlines of each individual elements appear.
If I disable CSS the elements all appear and are there.
As I scroll through the page, which for the post part is just blank white space occasionally some of the elements will reappear in a very glitchy way, perhaps just a thin vertical stripe of the element will be visible then it will disappear.
I can't make the site public at the moment, but here is a screenshot showing the issue:
Has anyone had something similar happen before in Safari, or have any suggestions?
It looks like the div is hidden.
Add z-index:1; to the div with tdp_row_fullwidth center-yes light-no class and the div shows up in safari for me.
What worked for me was the font-family that was being used was not loaded in Safari, once I changed it, the element "showed" up.
Bootstrap autohiding navbar works jumping when we scrolls on internet explorer browser
it is not smooth. please give a solution
link is http://www.usawebdept.com/designprojects/Almarelo/demo1/buyer-Dashboard.html
I found an article exactly on your issue posted.
http://css-tricks.com/eliminate-jumps-in-horizontal-centering-by-forcing-a-scroll-bar/
Also listed in the comments are some other suggestions if you don't like the suggested answer, such as:
html {
min-height:100%;
margin-bottom:1px
}
Folks I'm baffled. I've produced an HTML page which uses CSS animation and some very basic Javascript. Although I'm sure I haven't done it the best/most efficient way (still a bit new to this), it works enough for me to be happy with it, but when running in Chrome, Safari or Opera I run into an intermittent issue with how some elements are rendered.
Live example: http://careers.dept.shef.ac.uk/MOOCs/STAR/
Navigate down to "Problem Solving Skills", then from there navigate to either "Communication skills" or "Leadership skills". The navigation buttons that were at the bottom Problem Solving Skills are still visible. But they're not really there... if I hit Ctrl+A they disappear. You can't click on them, they're just left there.
I've tried this on a few PCs and had the same issue. Sometimes it doesn't happen at all. It doesn't seem to happen on IE or Firefox. Could it be to do with how these browsers render elements and how they process opacity?
Many thanks in advance.
EDIT: here's a screen grab: http://i.stack.imgur.com/FPtGQ.png
It's a long shot, but you have malformed HTML on those buttons, trying fixing that and see what happens:
<p class="btnText">Communication skills</p class="btnText">
should be:
<p class="btnText">Communication skills</p>
Edit
Okay, try adding this style to .example2:
height: 100%;
and change overflow to:
overflow:hidden;
I have a site that works fine in android browser, FF, Chrome, Safari IE9+ but in IE8 the upper half of an elements background disapears as well as the background color on a couple of input elements.
I have run through IE debugging tools and also W3C and there is nothing that is coming up that would make this occur.
The site in question is http://ukritic.com if anyone can check it in FF then IE8 and maybe suggest what could be causing the problem it would be greatly appreciated.
If you need anything from me let me know and I will post it up for you.
ADDITION:
The problem that is occurring is that in IE8 the white background containing the content is only visible 1/2 way down the page but is hidden on the upper half of the page and also hidden where the facebook like box is located.
In all other browsers the entire content container shows the #FFF background from the top of the page to the bottom of the page.
We have tested in IE compatibility and normal mode but the problem persists.
What I do notice is that while the page is loading the content container is white but as soon as the page loads completely it disappears on the top half and the facebook container.
Thanks
~M
The problem was in the border-radius.htc file as soon as I removed that call the page rendered perfectly.
There really is no effective way of rendering round corners on ie8 as the .htc file needs a relative path to the page that is rendered which does not really work well with dynamic depth address bars (shortUrls).
Guess I will have to settle for rounded corners only in IE9+ and all other browsers.
Thanks for the input
It's even IE 9, so that surprised me. Anyway, if you view http://www.ethoma.com/testhome.php on Firefox/Chrome you can see the general look I am going for.
For some reason a few features are missing on IE and Opera:
The gray space in between the post "islands" is white, for reasons beyond me.
The shadows on the islands are missing (and if you view my CSS in Firebug, you can see that I was very mindful of cross-browser issues!).
the rounded corners are missing. I know this is CSS3, but shouldn't there be support, since I have modern browsers.
Also, if it turns out these issues (specifically the rounded corners) are impossible without more effort than just CSS, can you link me an article on doing it the hard way please?
The biggest thing though is that I first take care of that stupid white space in between islands.
Thanks for any answers/views!
(I am sorry if anyone feels this post isn't up to stackoverflow quality, but I did my best -- I am rather alarmed that the gray space issue popped up)
The reason for the white background is because in your CSS you set:
.hhshomebody {
background-color: #FFFFFF; /* DELETE THIS */
min-height: 75%;
width: 100%;
}
If you delete the background-color from that rule, your background will be fixed in both IE and Opera.
The issue in IE9 is due to compatibility mode, which switches the browser into IE7 standards mode. Before IE9 box-shadow and border-radius are not supported, which is why you would not have seen them. To turn it off click the little torn paper icon beside the refresh icon to make it go gray. Once in IE9 standards mode the problems you described will be fixed.
Well, on your test page, you've got a JavaScript error "generatePharse() Undefined".
The <div>s have a padding set to them - so the nested tables won't be able to go 100% w/h (if that's the goal). Those same divs also have a fairly decent margin under them - so they won't be able to stack edge to edge (again, if that's the question).
It looks like you've got a few questions within a question. So, sorry if I've missed the mark here.