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.
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;
Im having a few issues with IE and firefox css
go to http://www.chriscaplan.com/KEW/
have a look in chrome that is displaying correctly
then have a look in IE or firefox it doing some weird stuff.
is there something im doing wrong ?
can any one help???
You have 2 style sheets working against each other:
skeleton.css
style.css
Replace the skeleton.css with the latest version and run it in IE and you will see. I switched your version with the latest and it started to work on IE.
Your method for clearing floats is not working.
If I were you, I would take some time to look at multiple examples on live websites of how people have put together their sites' headers. Right now the structure and styles on your header don't seem to follow normal design patterns. And by normal, I mean common, well tested, typical for a reason, etc
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!
I have a blog, www.realcanadianenglish.blogspot.com. I use Firefox to write it. Sometimes I check the blog using Internet Explorer. With the later it shows a gap between the picture and the text sometimes. Can I change the HTML code to fix this? Why is there a difference between the two: Explorer and Firefox?
Internet Explorer can have extra padding on some elements. I suggest you try to include a CSS Reset file first and then your own CSS file.
Here's a good Stackoverflow question about CSS Reset files
The blog looks fine on IE8. If you're having a problem with it, I would recommend running IE8 and using the debug tool provided (hit F12). You can dynamically change the HTML and CSS from right inside the browser. It's faster than uploading a new template every time you want to test a change.
You are refering to the IE Model Bug
In most cases the issue will be with IE and, in those cases, it's sometimes best, or at least convenient, to just serve IE a line or two to bring it into line with the other far more modern browsers with "conditional comments". These comments will be recognized only by IE but wind up allowing you to include styling or html that won't affect other browsers. They are easy to use but have a few variations based on which version of IE you are targeting. Here is the link explaining them all: http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx
Here is the best place to learn about IE CSS bugs: http://www.positioniseverything.net/ie-primer.html