I'm doing a website UI and I came across this problem in IE7.
As the image below shows, when I search a company it's not displaying properly.
It workers in all other browsers except IE7.
It should be on top (search results).
Can any one help me on this?
For reference please visit: http://piyasanet.hurriyet.com.tr/borsa/endeksler-sektorler
Thank You !
http://shareimage.org/images/1f1xf586prss0qhqrx0.png
1) sharing buttons -- try adding z-index to #hurriyet-companySearch-widget-wrap like so:
#hurriyet-companySearch-widget-wrap {
z-index: 3000;
}
2) flash chart -- set the wmode attribute to opaque (sorry I cannot figure out how the SWF file is embedded, though it worked when I changed the value using IE developer toolbar).
You need to check the z-index, to put in a higher number for the drop down (auto complete) so that it comes above other elements.
In order for z-index to work, you need to position the parent as well as the child. The parent also needs to have a z-index value. Give the parent a lower z-index than the child and you shouldn't run into any problems.
Related
This is my first website that I'm trying to build purely by code (usually use Webflow) and I can't get the navbar to work properly. I think it's a javascript problem and I really have no clue with that.
It was working for a while, and I then checked it after a lot of additions and it wasn't working.
Could anyone look over the code and see why the navbar won't open and also is visible on the right side when it is closed.
https://cyan-aeriel-49.tiiny.site
I don't want to mess about with the JS as I followed a tutorial and really don't know what I'm doing. I tried changing the right position on the .nav-items and it came up with an error.
It seems that your problem is with your media queries, for some widths of the screen, the navbar opens perfectly and for others it doesn't.
Here is a tutorial for that: https://www.w3schools.com/css/css3_mediaqueries.asp
Also I noticed lots of inline styles have been added to your elements. Try using a separate .css file with classes inside that will help organizing your css styles.
So if you use a browser JS debugger it seems that all animation for the menu (regardless of media used: desktop, tablet, etc.) is contingent on div.burger, which is only visible when the screen size is below a certain threshold
Since .burger is display: none on desktop view, none of the event listeners get attached to clickable elements, and you get nothing happening on the frontend.
I highly recommend using a browser debugger, such as FireBug to identify problems with your js
I am having problems with making my webpage responsive. I am using a plugin called jquery-momentum-scroll. But when I give specific height for a specific resolution (using #media), it does not instantly respond to my given resolution.
For example, if I resize my browser window, it shows the previous given responsive resolution that I set for different resolution. But, after a refresh on the browser, it takes the given property and works fine. After, including the plugin this problem occurred.
I have tried this in all other browsers it gives same result.
Can anyone help me fix this?
Did you try with! !important?
You can override the height by using !important. Just try it, I hope it will be OK.
In the project I currently work on we experience very strange rendering issue. The worst thing is that this issue emerges completely spontaneously and after several days of testing we haven't managed to find the sequence of actions wich would reproduce this issue. Here is an explanation of how this bug look like. Here is a screenshot of how the page should look like:
But instead of this after some manipulations content block pops up so only the part of the content is visible and its look like:
The most strange thing is that such a position of the block is not based on values of CSS properties as shown by Web Inspector.
As you can see the CSS properties are ok, while the position of the block is not. This fact suggest me that it could be some rendering bug of the WebKit engine
The project is built using Ext JS 3.4 and it is a classical one-page web application. This issue was seen in the last versions of Chrome and Safari on Mac OS 10.7/10.8. Though due to the spontaneous nature of this issue it might be present in other browsers and platforms too.
Any piece of advice on how to debug such issues or how it could arise is welcome.
Please check if any of your code or Ext JS's code is using scrollIntoView method, we have seen similar issue when scrollIntoView is called on any element that does not have overflow set to auto and it is inside an clipped element that is probably placed relatively positioned.
It seems bug in webkit because it scrolls clipped element which is not happening in other browsers.
I also see two elements in same hierarchy which has overflow set to auto. And scrollIntoView is scrolling wrong element.
Chrome and safari on Mac are having problems with scrolling. If the element has been scrolled and the content changes, the scroll position is kept even if the content is not high enough to require a scrolling.
The work around we have found in our application is to resize the container (the one that has the scroll) so that it has the scrollbar (or else you cannot play with the scrolling properties) and then reset the scrolling, and the height.
$(container).css('height',1).scrollTop('1').css('height','');
Here is how we do it in jQuery. You will not even see a flickering :)
I am not sure if it is the problem, but this thing kept us on our feet for a while.
i went through the same problem while working with a sencha touch 2 app and because thats same as ExtJS i have a solution for you
this probably is a bug in the framework and this happens when the ExtJS renders the application before the browser populates mayb the correct window.innerWidth and window.innerHeight and thus the viewport cannot take the correct width and height. this also explains the randomness of the event. This becomes more prominent when used on mobiles probably because of the limited resources and slow response.
the solution that i took to handle this mayb isnt a good one but i couldnt find a better one considering is a glitch in the framework itself
i poll for the correct height and width of the browser for around a sec after every say 100ms for the correct height and width of the window and if i find that the height OR width of the viewport isnt same i re adjust it. because you are working with ExtJS and app would run on high powered systems(as compared to mobile phones) i would recommend a smaller interval and then to be safe a larger time period to which it polls.
heres the code that i use currently edit according to your needs
var aId = setInterval(function () {
if (Ext.Viewport.getWidth() !== window.innerWidth || Ext.Viewport.getHeight() !== window.innerHeight) {
Ext.Viewport.setSize(window.innerWidth, window.innerHeight);
clearInterval(aId);
}
num = num + 1;
if (num > 10) {
clearInterval(aId);
}
}, 100)
i currently use this code inside the launch function of the app. but you can also use this inside the show event of the viewport for which you should keep the interval time to minimum possible to avoid any lags.
with this if you think this app might be used on devices where the window height and width would be changed by the user (like that of mobile browser when the orientation changes or if you think user would change the height and width of the browser window). then just copy & paste the same code piece inside the viewports resize event so that it also polls and resizes viewport when the size of the viewport changes.
Did you try adding a clear:both; block after the toolbar div ?
<div style="clear:both;"></div>
#bjornd it's pretty hard to debug without any code :)
Is the toolbar positioned and has the content an ID that's called in the URL?
In other words: is there some link (e.g.) that triggers #content and has no preventDefault() etc? This would scroll the page probably.
I dunno, this was the first thing that came to mind.
It could also be the toolbar content that is (for some reason) no longer cleared or some change in the content's top position (relative to another changed/removed element?)
Try and create a stripped-down test-case that contains the simplest of code but still triggers the bug. If you post that (through e.g. a Fiddle etc) we can have a proper look.
It might be a css issue;
I've had a similar issue using equal height divs by setting a padding-bottom: 99999px; and margin-bottom: -99999px;. Which workes fine in all cases, except when you use hashtag anchors to jump to a div further on the page. Jump down.
In that case the top of the page clipped and started with the div I wanted to see.
Since you say the problem is pretty hard to track, this might be something to have a look at. The solution was to remove these 2 css lines and use another method of setting div heights.
I'm stuck. I've never done drop down menus before but wanted to try on a site I'm working on, so I imported someone else's java and css code and got it running just fine in Firefox. Problem is, the drop down menus are appearing way off to the right in IE.
I've created a separate style sheet just for IE, but I haven't been able to figure out what to put on it to correct this!
Here's the site:
http://www.erricksonequipment.com
There is a lot of superfluous nonsense in that style sheet as it was imported from an online example. That said, there may be issues in there too that are preventing ie from reading correctly? I'm not sure.. I'm new to this java/css drop down menu stuff! :)
Any help would be GREATLY appreciated.
The script you're using for the drop down menu is not very good. Also, it's quite possible to create that whole drop down menu using just CSS, without any JS.
The drop down menu, in its current state, does not work in IE7 or IE8.
In the spirit of "fixing your problem":
It will work in IE8 (and Firefox, etc) if you change Line 203 in dropdownMenuKeyboard.js from this:
? (isie ? li.offsetLeft + 'px' : 'auto')
to this:
? 'auto'
However, I recommend you replace the drop down menu code with something more modern.
Be careful when using 'em' as your unit of measurement. The size of 1 'em' is relative to the default font-size set in your browser (or in your CSS if you define it). By default, these font-sizes differ between Firefox and Internet Explorer. I'd recommend using pixels instead, but if you're set on using 'em', just be sure to add a new default font-size in your CSS by doing something like:
html { font-size: 16px; }
By standardizing the default font-size throughout the browser, you won't see any differences in Firefox or Internet Explorer.
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.