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.
Related
I am working on a small website navigation issue and have the content working well in chrome, firefox and safari - but of course, IE fails to style the navigation menu at all.
I've created an unordered list and hacked styles onto it to make the menu horizontal.
Here is a direct link to the issue: (link removed).
The unordered list appears as exactly that, a bulleted unordered vertical html list in IE rather than the nice looking navigation menu in chrome.
Any advice?
In addition to the nav issue (which prevents all styling in this case on older versions of IE), there appear to be other problems as well.
The HTML code uses media attributes that are not recognized by old versions of IE, which means that they apply none of the CSS files. The quick fix is to remove the media attribute from the link element that refers to Large.css. A better fix is to collect most of the CSS rules into a file that you refer to with a link element with media=screen (or no media attribute), so that the media width dependent CSS files contain only those settings that you want to be different for different widths.
The IE 9 console contains CSS3114 error messages that say that #font-face did not pass the usage rights checks for OpenType embedding.
Medium.css and Small.css contain float: center which is incorrect (center is not an accepted value for float). Use http://jigsaw.w3.org/css-validator/ to check your CSS code.
You are using <nav> which is a HTML5 element. Old IE version (8 and lower) don't recognise them and don't style them.
To fix this you need to use HTML5shiv. Follow the instructions on that page to get it work.
In short, HTML5shiv creates every HTML element with document.createElement if you do that IE recognise them. To get the complete story: Paul Irish: The history of the HTML5 shiv
Replace the nav tags by div tags. It seems that no change to the CSS code is needed here, since you refer to the element using #nav, which works fine if you change <nav id="nav"> to <div id="nav"> (and </nav> to </div> of course).
So I have built a website and I looked at it on internet explorer 7 and the menu bar is seriously misaligned. I looked into conditional comments and tried it out, and I don't know if I'm missing something. I put the conditional comment in the head tag of the website and then created a css style sheet just for ie7 and it didn't seem to do anything. Can someone tell me if there is a quick fix to this situation or a step by step to the conditional comment and custom stylesheet method? Any kind of help would be appreciated. Thanks. The website is here http://sgconstruction.org. The CSS involves a float of the page links to the left and a float right on the facebook and yelp icons within the blue bar. Both positions are relative. Thanks!
The issue involves the CSS you are using for your #connectguy <div>. This element is a block-level element which you have set to display: inline-block. Unfortunately, Internet Explorer 7 only recognizes inline-block on elements which are inline by default. You can work around this by setting the <div> to display: inline in your IE7 stylesheet.
check applying * before the css property you likes to apply for ie7 and below browsers only.
for eg:
#test {*color: #999; /*hack for IE7 and below*/
color: #F00;/*for all other browsers*/}
I have a website that will be loaded in a web frame of an iPad app, so I have created a separate CSS file for the iPad, which is automatically loaded by a user agent call. Nothing too difficult here.
The problem is that 2 divs are not responding to the display:none CSS. The sidebar and the footer are still showing, despite being specifically called in the CSS just the same as all of the other elements, which are hidden correctly in Safari on the iPad.
www.themonitorgroup.com/disclaimer.html is a good page to illustrate this issue.
www.themonitorgroup.com/css/ipad.css is the specific CSS file for the ipad.
I assume there is something stupid simple I am missing. Please let me know if you can find anything. Thanks so much in advance.
Validators are your friend. You're missing a closing brace here:
#mainnav {
display: none;
And you have #sidebar rather than .sidebar in the style sheet.
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).