I am doing a site for my php class and have just about finished my project except for a weird floating issue in IE. I'm only floating left and right, but the site seems to be clearing left and not sure why IE is causing this issue. Any suggestions? http://ectweb.cs.depaul.edu/AHARDEN2/project/index.php
This is probably because IE8 and lower do not recognise tags such as <nav>, <section> and so on. Consequently they do not match your CSS selectors like nav ul li a {...}
Try rewriting your CSS to not use these tags in their selectors.
Side-note: IE9 works fine.
You could try adding a css reset like this one:
http://meyerweb.com/eric/tools/css/reset/
And an html5 shiv like this one:
http://code.google.com/p/html5shiv/
Related
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*/}
The string "Fernando Salgado Alonso" is much longer in IE7 than in FF.
Why? What can I do to fix it?
That happens because different browsers have slightly different default css for displaying unstyled content.
You need to use a css reset and apply your own rules on top of that. That way you will be sure that it displays the same on all browsers.
Some well know resets are:
http://meyerweb.com/eric/tools/css/reset/
http://code.google.com/p/blueprintcss/
http://developer.yahoo.com/yui/reset/
http://developer.yahoo.com/yui/3/cssreset/
Also have a look at: https://stackoverflow.com/questions/116754/best-css-reset
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.
http://ec4u.dev.creative-ctrl.com/product/wallys-natural-100-beeswax-ear-candles-12pk
Check it.
cannot get .menu ul to render for the life of me!!
strange enough, it renders in ie6, ie8, safari, and ff, but not ie7! I've tried everything. Any ideas?
(I'm pretty close to xhtml strict validation too).
It looks it's the IE7 CSS (themes/EC4U/ie7.css) that is responsible. Simply removing those styles was enough for the menu to show up for me.
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.