Piece of crap IE, just literally hate it.
Ok, this is what I did, jsbin.
How do I make menu-bar look prettier or similar, like in FF&Chrome, in older versions of IE?
Also I dont get it, when nesting elements like #nav ul li they are not applied in IE 8 and less, why?
A little piece of solution, maybe it will help you achieve what you're looking for :
For enabling certain HTML5 functions disabled in older IEs :
Modernizr
Shiv
Both of them can help you achieve your result. Hope it will help you, if not, feel free to discard my answer.
You should add html5 shim, because older IE doesn't understand HTML5 tags. You can also move id to ul instead of header element
Related
Problem:
Thanks for taking the time to read this. I'm having a problem which I need to solve as simple as possible. There's a website I'm re-developing, but since I updated to IE8, I've totaly forgotten about IE7, but ofcourse, there are still people using it.
I need to know what specific things I should change for this site to display the same way as it does in IE8. But I don't know where to start. Is there anyone with experience in this, who can give me a guideline? Are there scripts for doing so?
URL: http://www.testsite.c-tz.nl/
If you view this with IE8 it looks perfect.
But if you view it with IE7, things are not where they supposed to be, very ugly.
As the other said, your question is to broad. You'll need to break it down in smaller problems - which will possibly help you solve it yourself along the way.
One thing I did notice: IE has problems with display: inline-block on elements, which were orignally block elements. Either use span (only possible if it doesn't contain block elements), or use another method to places blocks side by side such as float.
BTW, you have far too many divs in your HTML. It's not necessary to wrap every img, every ul, etc. in it's own div. Usually any styles you apply to the div can just as well be applied you the "wrapped" element directly.
This is not a cool idea... But you can try when you are sick with very old browsers like ie6 or ie5 ...
1.use javascript to detect the browser and version..
2.later use the similar way to redirect the visitor to download the IE 8..
<script>
if(''+browserName+''+fullVersion+'' == "Microsoft Internet Explorer6.0" )
{
alert("You're using an Old Browser.Update the browser to view the website.(or) Try Latest Google Chrome , Firefox , Safari, Opera")
window.location = "http://www.microsoft.com/download/en/details.aspx?id=43"
}
//document.write(''+browserName+''+fullVersion+'');
</script>
So I figured out the NAV bar and got it working in IE but the DIV blocks still display incorrectly.
Any help would be greatly appreciated!
Here are the css files:
www.dmstriping.com/new site/css/style.css
www.dmstriping.com/new site/css/layout.css
Web Site:
www.dmstriping.com/new site/index.html
First, you are using HTML5 elements but with the HTML4.01 doctype. Second, IE<9 does not understand the new elements without javascript help which you might be using some sort going by your code. In any case, validate your html and css for those lists of errors and let us know if this is working in the modern browsers (anything but IE).
IE doesn't support CSS3 columns — no big deal, right? Even though, I'm trying to find any modernizr-like library to do the trick. I don't really want to code different CSS for IE, as that would be giving way too much care and attention to something we all despise. Any suggestions?
As of IE10, there is now native (and un-prefixed) support for CSS3 columns.
http://msdn.microsoft.com/en-us/library/ie/hh673534(v=vs.85).aspx
Pragmatic Programmer's HTML5 and CSS3 book has some great advice on stuff like this. For columns, it recommends using the Columnizer Plugin for jQuery for IE.
Without seeing your code, I would suggest putting each column in a div. Then redefine the body tag after you load the stylesheet for IE only, and add the styles for the divs.
For IE only:
<!--[if IE]>
**** your styles ****
<![endif]-->
You could even take it a step further and move the body style into it's own style sheet and load the style sheet you need depending on the browser. It'll depend on how far you want to take it.
Try setting display: inline-table; on the items you want laid out as a table
can anyone help with this.... http://www.apolloensemble.co.uk ....looks like the problem is the menu bar but I'm fairly new to this and am not sure. Its fine in FF and IE (7 & 8). Tried various cross-browser issue checks but can't find anything that looks significant. Thanks!
From SpryMenuBar.js:
Copyright (c) 2006.
Look like they didn't take into account that Safari has been improved the last few years. I see several browser checks and browser-specific hacks which aren't applicable anymore nowadays. The web keeps changed, the techniques get improved quickly. This all can just be done with only CSS.
Contact the original authors for an update. If in vain, create one yourself with help of CSS (great Google keywords: "css suckerfish menu") or maybe with jQuery.
You should specify the padding of the menu ul. It has a -webkit padding of somesort. if you can edit the css change the following:
ul#MenuBar1 {
padding: 0;
}
I have been working on a webpage. It is the first I have actually tried to design using an image and then use proper CSS layout rather than tables.
http://www.roccocammisola.com/proj/brunel/bgimage.html
I have been having issues with the shadows on either side of the main content area. Of course these are only an issue in IE. As you can see the shadow has been cut down to about 10% of its actual height.
With my relative inexperience how do I look for relevant fixes to this issue.
Any help would be very much appreciated.
FireBug, the most crucial tool for debugging CSS, amongst other things.
get it here
IE Web Developer Toolbar
It's not as good as firebug in general, but it helps when you have an IE-specific problem.
In addition to Firebug, making sure your HTML is valid is an invaluable tool and can minimize CSS headaches. Sometimes your CSS may not work right because there are mistakes in the HTML. The different browsers have different ways of dealing with improperly written HTML which can sometimes make it seem like there's a cross-browser CSS issue. The validator can help you find mistakes in your markup.
http://validator.w3.org/
+1 for FireBug
In this particular case, I'd just suggest a new approach for your shadows. Currently, you have them as items. You typically want to use CSS background images for things like this.
.mainShadowRight {
*/ your other stuff */
url('images/mainShadowRight.gif');
}
Your .mainShadowRight CSS class specifies a min-height (which IE6 doesn't understand, and IE7 doesn't always 100% get correctly)
and as DLarsen pointed out, it appears you are missing the background-image: url(); bit.
Thanks for all your answers, seems to have done the trick.
I think I spazzed out with the upload as I should definitley have had the bg-image stuff there.
That IE web developer toolbar looks pretty good too as I have firebug and web developer bar for FF.
Another hot recommendation for debugging CSS - CSS Viewer.
It's a Firefox add-on that allows you to hover over elements in a web page and see their exact style. Often you figure out that the final style was not what you meant, possibly due to some inheritance of styles.