I have a menu I build with responsive design that works good on browsers except the IE7
any idea why this menu breacks on IE7?
link:
https://dl.dropbox.com/u/107452929/newtest/CWSMainTitle.htm
Add a line-height: 0px; to your nav ul. That solves the issue
Just a suggestion, you can have a easy cross browser compatible navigation bar found here-
http://www.w3schools.com/css/css_navbar.asp
This exactly does the same what you are trying and also it doesnt run into any issues
You have to remember that Media Queries are not compatible with Internet Explorer 8 or below.
Refer to this link for Media Queries browser Compatibility: http://caniuse.com/css-mediaqueries
Also, if I am correct, Internet Explorer 7 is not used on any Tablet/Mobile devices so, why would you have to worry about Responsive Website Design in Internet Explorer 7?
Thanks,
Hope this helps!
Related
I am starting to regret moving to B4. I am already trying to troubleshoot my nav in IE 10 which is based on their example:
https://getbootstrap.com/docs/4.0/examples/jumbotron/
When I look at it on IE 10, the nav floats off the viewport edge - see search button at top right:
Isn't it supposed to work on IE10+ ?
There are a few things that I would keep in mind:
Twitter-Bootstrap v4 is still in Beta. If this is truly a bug, then I would report it to the developers.
The navbar component was redesigned completely around the flexbox. According to Can I Use, IE10 (and 11) only have partial support for the flexbox.
There is also this quote on the Browsers and Devices page:
Please be aware that some CSS3 properties and HTML5 elements are not fully supported in IE10, or require prefixed properties for full functionality.
And just mulling through the CSS for v4, it doesn't appear as though any of the IE10 CSS prefixes are there.
The solution is to download the working version of B4-dev from git, not form the bootstrap website.
I have come across a few issues on a Joomla site that I have built using Joomla 3.5.1. I have written CSS to ensure that the site is responsive and this all works fine.
The problem I have is that the site's header shows up different in the following browsers and versions:
Firefox 48.0.2 (this shows up fine)
Chrome 52.0 (telephone number out of place)
Internet Explorer 10 (telephone number and search bar out of place)
I am not sure how I can target for the site to work correctly in Chrome so therefore not sure how I fix this in my css. I was under the impression the site would show up the same in all browsers like Chrome, Firefox and it would only be Internet Explorer where I can target different styles, but there is something thats not quite right.
The site's URL is: http://www.leicesterbakery.co.uk
I would appreciate it if somebody could give me some advice on how i can fix this, as I have tried the inspect element in Chrome but can't pinpoint how to fix it.
Thanks in advance.
FF and Chrome render fonts in different way, there is always 1-2px different. You can try to use a bit smaller font, or make parent object a bit wider - try to reduce padding for phone icon - you will see this will also help in Chrome.
About IE - think it is issue with floats. i'm not sure how to fix it,
Maybe try not to use so big padding-left for Phone icon. think better solution for icon can be position: absolute;
I have a navigation bar that works very well in Chrome - however it fails in Internet explorer 8 or less.
the link is www.notebox.ca/AP - you may view the code there.
I know there is bootstrap, but I was wondering if there is any way to add something to the code to make it work in IE.
Thanks
https://github.com/scottjehl/Respond will polyfill the missing functionality you need in older IEs.
I'm working on the website: insectstings.co.uk, it's responsive and I've made some changes to the original theme.
For some reason in IE8 (maybe others) the menu is displaying as the responsive menu. I've tried changing the media query size but it doesn't help.
Also the main header image is far away from the body content, I've tried inspecting it but with no luck. I hate IE, everything displays fine in other browsers.
Try adding repsond.js to IE8 and below. It provides some media query functionality for IE: https://github.com/scottjehl/Respond
IE versions below 9 do not support media queries: http://caniuse.com/css-mediaqueries
The normal flow of CSS will take over, so IE8 will show whatever you delcare last in your CSS.
EDIT: You might want to read this article, which coveres targeting older IE versions with different CSS. I have been using this method for a while now and it works really well: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Hello I have a site at http://www.jn-design.co.uk/WirralPT
It appears okay in all other browsers except from IE8 , I havent even attempted below 8 yet.
The home page list and footer is not as it should be, please view in chrome or more recent browser to see what it should look like.
I have validated all my code for HTML and CSS and it is fully valid.
Any help would be greatly appreciated!
nav and footer html5 elements are not supported by interenet explorer 8 and lower. Try to add them with javascript using html5shiv