For the life of me, I can not figure out why some styles are not being applied to an unordered list.
If you view this site: http://www.alclawyers.com.au/ in Firefox, you will notice there are circles down the bottom of the text that can be clicked to shift to different panels of content.
Now, when you visit the same site in IE7, none of the styles from the stylesheet are being applied (well at least not for me).
I know a fair bit about selector support, but I can not figure out this one!
If anyone digs in and follows the code, here is what is happening
jQuery counts panels and makes an unordered list beneath the text.
CSS styles this list (see Firefox for intended layout).
It's probably something really simple, but it's giving me a lot of grief.
Thanks
firefox likes to close unclosed tags for you. IE gets a bad wrap lots of times.
Well I figured it out already, I have a div being inserted in JS without the closing angle bracket. Was working in FF, but IE tripped up on it.
Thanks to anyone that took the time to investigate!
Related
I realise this is a bit off shot, but I will try.
I have never experienced anything like this before - I am building an accordion for the page, and when I expand it, random lines appear below the expanded item (see image).
The most visible line is a separator and should be there, however I have no idea where the other ones come from. This quirk is not replicated in Chrome nor Mozilla.
Moreover, if I do not have web inspector opened and I open it, the lines disappear. This leads me to believe it might be some issue with painting the DOM element, possibly the mentioned border-bottom?
Anyone has ever experienced anything like this before? Being the perfectionist I am with OCD, I find it extremely annoying!
Add to your animated element:
transform: translateZ(0);
to enable Hardware accelerated animations.
Safari will then remove those residual liny glitches.
Also -webkit-backface-visibility:hidden; might help to remove edged lines that usually appear in Chrome (if you apply rotations...).
I've been developing a mobile-first site, using Firefox as the primary browser. I have a branding logo at the top of the page, loaded by way of the WordPress customizer. The logo appears fine in Firefox, but disappears in Chrome and Safari when at a width of 320px. (That's the base width for this project.)
I'm just troubleshooting and trying to find the best way to fix the problem. I'm not really sure what's causing the issue, yet, though. I was hoping to get some other perspectives on this.
Here's the link:
--- link removed ---
Thanks!
I would like to suggest you something that had helped me a lot of times when I did not know from where comes a problem:
Reduce the content only to the part you want to fix(or in case if you have a bug and do not know from where comes - start removing code element by element).
BTW in the developer tools is showing a lot of errors.
Thanks, Marin. I appreciate your suggestions. I think my server at work may be contributing to the issue. For the time being, though, switching the width and height from % to em has at least resulted in the images being visible in chrome and safari. I think I'll have to wait until I can test it outside my workplace to be sure, though. Lol. Thanks, again.
I have a slideshow running with textquotes. These quotes contain a custom font provided by cufon. This all works fine.
However when the slideshow fades in or out, the text gets a dark border or shadow. I think its a transparancy issue in IE but I can't find a solution.
I'm using the jQuery plugin Cycle for my slideshow, and it has some IE opacity and cleartype fixes but none work.
Any ideas ?
Thanks!
This is an old question, but because people might still end up here when searching for similar issues, I'd like to add the "solution".
De solution is quite simple really. Use #font-face. Just like Mottie suggested. I ended up switching to a different but very similar font that did not have the beforementioned issues with #font-face.
As far as I can tell it's not possible to fix it by use of cufon in any way that does not involved seeing flickering texts or any other rendering issue.
I know that this question is asked a lot, I checked all of the "related questions" before posting this and I tried all of the different solutions I could find, but to no avail.
I am working on a site at Site Page and there is a header navigation using Pop Menu Magic which the original creator used, it currently is hiding under the swf that is playing below it in only IE while working perfectly in Firefox.
I have tried everything from changing the wmode to transparent or opaque, using z-index on the different divs, ensuring they have a defined position, etc.
Any help would be greatly appreciated.
Here's the "embed" code:
<div id="slideShow">
<div id="flashcontent">
This text will be replaced by the SWFObject Flash Inclusion.
</div>
<script type="text/javascript">
var so = new SWFObject("flash-banner2.swf", "mymovie", "747", "258", "8", "#000");
so.addParam("quality", "high");
so.addParam("wmode", "opaque");
so.write("flashcontent");
</script>
</div>
Thanks again for your help.
Stack Overflow only let's me post 1 hyperlink initially so I'll put the css In a comment.
Get rid of that position: relative in the universal selector rule (*) starting off your CSS. That's a really bad idea. Removing it fixes the problem.
It does break the site a number of ways (presuming that this: http://www.onlineuticacollege.com/david/ is in fact the site you're talking about), but you should fix that where those problems occur, not by relatively positioning everything.
Note: When saying problem in IE, make sure to say what version since there are 3 major ones out there now. I will guess 6.
It is a "feature" of IE6 when windowed objects such as flash and select elements do not abide by z-index rules. Fix is either to hide or to use an iframe "shim"
Talked about here: iframe shimming or ie6 (and below) select z-index bug
I have a page using <ul> lists for navigation (Javascript changes the styling to display or not on mouseover).
This is working fine for me except in IE6 and IE7 when I have a Google Map on the page.
In this case the drop-down simply does not work. However, the page continues to work in FireFox 2.
I have done a little bit of research and discovered that this may be an example of the IE Select Box Bug, but I am not sure as the Google Map appears to be using a <div>, not an <iframe>.
Has anyone else encountered a problem similar to this, and if so do they have any recommendations on the best way to overcome this problem?
I don't know if this will fix your problem but you may want to try this solution at ccsplay.co.uk which fixes the problem of menus appearing underneath drop-down lists. I don't know if it will work for sure, but it's worth a shot.
I fixed a similar issue with drop-downs not appearing over flash movies in IE6/IE7/IE8 using this jQuery:
$(function () {
$("#primary-nav").appendTo("#footer");
});
Where primary-nav is the ID of the drop-down container element and footer is the ID of the last element on the page. I then used absolute positioning to relocate the dropdowns back to the top where they belong.
The reason this works is because IE respects source ordering more than it does the z-index. It still wasn't able to display over top of a Windows Media Player plugin though.
I believe that might happen because of an Active-X thingy IE 6+ uses to parse CSS.
Over time I had to adapt my work to include some IE hacks on my CSS in order for it to be compatible with several browsers.
I would first try to make a menu without Javascript, using pure CSS and including the hacks I mentioned. It would likely fix your problem. You don't actually need Javascript to change styles on mouseover and stuff like that.
If you want to check out what CSS hacking is about: click here
If you want to check out some pure CSS menu examples: click here
Hope this helps!
According to this google maps thread, you are correct - an IFrame is inserted by the google code.
You'll need to use the solution which Dan mentioned,
you may want to try this solution at ccsplay.co.uk which fixes the problem of menus appearing underneath drop-down lists
Alternatively, see Internet Explorer HACK/Fix For Select Box Showing through DIV.
Basically the solution is, using JavaScript, to place your css menu in an IFrame in IE6.
An alternative solution is to use JavaScript to hide the Google Map when the CSS menu is pulled down, or to replace the Google Map with a static map (maybe even a Google static map) when the CSS menu is pulled down.
I don't have an immediate answer for you, but the tools mentioned in this answer (particularly the IE DOM Inspector) may help.