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*/}
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.
I thought I had finished the markup for this website that I am creating for my mom’s dog walking business, but then I realized that my CSS is only partially applied to my site in Internet Explorer. It’s strange because the body background image in my CSS displays but my nav image and nav's anchor tags don’t show and the borders to my divs are missing in IE.
Everything works fine in Firefox.
Also the padding and margins are crazy in ie.
I’ve read from people that ie generally isnt too friendly towards margin-left margin-right padding-left and paddin-top- stuff like that. That it generally prefers for example padding: 20px; or margin: 30px;
But I don’t know if that was what I did wrong. I don’t see how that would make my borders and nav image disappear in ie. Very frustrating.
The url is www.grinningpup.com/dannytesting/grinningpup.com/index.html
I tried to write semantic markup. I hope the solution isn't due to a stupid mistake I made.
Welcome to SO!
I've taken a quick look at your site and I can see the issue is that you've used HTML 5 elements which aren't supported in older versions of IE.
Easiest fix is to add Modernizr which is a javascript library aimed at detecting browser support, and in most cases, polyfilling them (only in this case). There are numerous resources on the subject. My fvourite is this; http://diveinto.html5doctor.com/ but just google and check SO for more information.
I hope this helps you!
You are using HTML5, which IE8 and below don't interpret right.
You'll need to include html5shiv and add the following to your css:
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
HTML "nav" tag and "section" tag not support IE 8 and earlier versions. So, you only use "div" tag solve all problem.
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).
I've read through other questions but to no avail - I really can't work this out.
The site is (Been redesigned, so isn't relevant anymore. It used HTML5 elements, but they weren't declared as block, and IE doesn't assume that they should be.)
The gradient on the footer looks great in non IE browsers, but fails to show in IE 7,8 and the IE9 dev preview.
Any ideas?
You could try adding this to your footer CSS (in addition to your existing footer styles).
footer
{
display:block;
}
This fixed it for me under FF3.6, and I'm assuming will fix it in IE as well - The default display style for <footer> is inline which doesn't play nice with backgrounds regardless of browser. Applying block to it will treat it more like a div.
You'll also want to be careful with your use of HTML 5. Not sure of how well supported it is in all browsers. You might want to consider <div id="footer"><!-- contents of footer --></div> and applying styles to it by id in CSS instead..
I had a similar problem, but finally find the solution.
Change your format image to png.
And works fine in IE8.
This works:
#footer_text {
background: url(/media/img/gradient.php?w=4&h=160&sc=4c4c4c&ec=000000) repeat-x scroll top left;
}
I'd be careful about applying any styling to html5 elements like footer right now. They're not well supported by all browsers.
You can use them for semantic reasons, though.
If I look at the footer using IE 8's developer toolbar, I get this as the background-image definition:
url(/media/img/gradient.php?w=4&h=160&sc=4c4c4c&ec=000000); TEXT-ALIGN: center
Notice the part to the right. I'm not sure where it comes from - it's not in the style sheet. Maybe the sheet is somehow garbled. If I remove the text-align part, the footer image shows fine. The same is happening to your body definition.
try opening the file in Photoshop or similar, and doing a clean save for web as a PNG.
I know, it's pathetic, but IT just got around to installing IE8 on my machine this morning. Right off the bat I came across a glaring issue and I've messed around with it for too long even though I KNOW the answer is staring me right in the face.
First off, here's the website: www.mchenry.edu
View it in IE8 and hover over the top banner image - see everything shift down? It's some type of text-decoration or border issue but I can't figure out which. In our test environment, I even tried to get real specific with
#banner p#img a:hover {text-decoration: none};
But that doesn't do anything. And what's even more annoying is that I can't get it to show up in IE6, 7, or FF, or Safari, or Opera, etc. Beating. Head. Against. Desk.
Thanks for any insight you guys may have.
Okay, let's see. This is where the developer tools come in handy.
Using the developer tools, I hovered over the image, and activated the "click to select" feature, as this maintains the "error". I clicked on this small area, and it highlighted the <p id="img">, which now had a height of 128.
Something is expanding the p by two pixels, and editing the source to remove the <a> removes the problem, so clearly, something in there is disturbing it. I'm not seeing what, and it doesn't help that I can't seem to affect the color of that small box.
However, we can do more: we can yank out parts of the CSS. I removed the CSS rules from Records.css one by one, and when a:hover was removed, the problem went away. Going deeper, removing the background-color from there, it stopped!
So, a simple fix is to assign the <a> element a new attribute: style="background-color: transparent".
Note that I didn't test this with any other browsers or versions, but I can't see that rule having affecting other browsers (in a bad way).
try this:
#img a:hover {text-decoration: none!important;}
I have just encountered this same bug under IE8 (version 8.0.6001.18702).
I also traced the problem using the IE8 Developer tools by turning off css statements until I found the one responsible. I an verify that having a background-color on a:hover causes the problem and overriding this with "transparent" does solve the problem.
Unfortunately if you do want a hover background color on your links there isn't a generalised solution - the best you can do is to create a class for "imagelink" which you apply to all your anchor tags which surround an img tag:
<img src="test.gif" alt="test"/>
Then you can use the CSS:
a.imagelink:hover { background-color: transparent; }
This should work around the IE8 bug for your image links whilst allowing you to keep your hover background color on other hyperlinks.
Not very elegant, but I didn't want to follow Jan's suggestion of using a meta tag to force IE8 to render as IE7 (there are lots of things IE8 does better than IE7 and I don't want to revert all the rendering to IE7 over this one issue).
I find it astounding that despite all the hype about IE8 being so much better than older versions we still find bugs of this nature: a colour choice causing a layout issue. Unbelievable. And yet this thread was started back in July last year - and the bug remains unfixed, with more and more developers having to waste their time identifying the problem and dirtying their code with workaround hacks to solve an IE-only issue. It's like IE6 all over again.. Hopefully the EU's imposition of a browser-choice screen into new Windows installs will help open people's eyes to all the proper web browsers out there.
Michael's analysis of the background style of the anchor tag being what triggers this bug in IE8 is spot on. But instead of working around it by adding a style attribute to all the anchor tags, you can tell IE8 to display your page the way IE7 does by adding this meta tag as the first tag inside the head tag:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
or by adding this line to .htaccess:
Header set X-UA-Compatible IE=EmulateIE7
to force IE8 into IE7 compatibility mode.