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).
Related
I apologize if this question has been asked before. I am relatively new to CSS and web development. I am developing a web app that has to target IE7. For the life of me I cannot figure out why on the "assignments" page the unordered list is formatted one way and on the "Employee Data" page it is not being formatted at all. Both pages are using the same style sheet. I am only having this issue in IE7 and IE8, the newer versions work fine.
Here is a link to the site
http://www.j-holmes.net/
Again, I apologize if this question has been asked before. I can't think of any more search criteria to google up an answer for this.
IE 7 doesn't support <nav> you can replace to a div: nav ul li a
It looks like you have your ul element nested within a nav element, but on the EmployeeData.aspx page it appears that the nav element is closed like in the linked image here: http://www.kruegerwebdesign.com/images/questions/closednav.png
Just make sure that nav element is open and contains your unordered list, and it should style the same.
I'm not sure exactly why, but the nav element doesn't work on the employee data page. The browser thinks that there is one nav element before the menu element and one after instead of one surrounding the menu element. As the CSS relies on the menu element being in the nav element, it doesn't apply.
I can't see any error in the HTML code, but there may be some error that keeps the browser from parsing the code correctly.
Another possible reason could be that you are using HTML5 specific elements, which IE7 doesn't understand. It seems to work anyway in some pages, but it's a factor that may make the browser more sensetive to markup errors.
If the issue is HTML5 tags like not working in an IE7 browser, I've found this file useful. It translates HTML5 for old fashioned browsers: http://code.google.com/p/html5shiv/ It's certainly worth a shot.
Hi I seem to be having a problem with IE8 loading the stylesheet everything works well in IE9
but when I try it on IEteste it looks like it didn't load the stylesheet.Here is the links to the website:
website link
How can this be fixed?
You have a script tag for analytical purposes placed outside of the HTML tag. It needs to ideally be within the BODY tags. This is throwing a HTML validation error. That could be the cause of it.
Edit:
As someone mentioned, you might need some additional JavaScript to get IE < 9 working with HTML5 elements (tags). IE in versions lower than 9 don't understand many of these tags, so applying styles to them will do nothing. It simply fails silently.
Check this page for the code and information about this:
http://code.google.com/p/html5shim/
Once applying your CSS, you may also need to style many of these elements with display: block as many are inline by default.
You don't seem to be including the html5 javascript shiv for older browsers:
http://code.google.com/p/html5shiv/
I'd also move that trailing script inside the /body tag.
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>
Here's my page
It looks correct in Firefox, but of course in Internet Explorer, there's an issue.
The main body of the page is not displaying correctly. The left and right divs are not showing the white background that I'm trying to get them to.
Your HTML appears to be broken. For example <div id="mainbody" is not closed. Run it through a validator and fix all the markup problems.
Try separating your shortcut for background in your #left id in css. IE may not be parsing it correctly.
The #right div looks OK (I'm using IE7).
You need to change <div id="mainbody" to <div id="mainbody"> as i told you earlier.
Use the W3C validator: [Invalid] Markup Validation of modastudio.com/docs_new/bostondentalposters.shtml - W3C Markup Validator.
You've got a bad doctype that will throw IE into quirks mode, as well as missing tags, double charset calls (that should be UTF instead of 8859), duplicated meta tags, etc.....
You're also nesting tables and lists inside of paragraph tags which is invalid markup for the doctype you're using. A handful of the meta tags are not closed correctly along with capitalization of attributes which are also not allowed with the selected doctype. The stylesheet link tag is not closed correctly. The images tags in the table are not close correctly nor are the break tags.
Fix the html errors first and then see where you're at with your layout.
Good luck and hope this helps some.
Maybe not really an answer to your question, but since you seem to develop in Firefox, you might want to try the HTML Validator extension. Makes this kind of development a lot easier.
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.