I'm having some trouble with a site, and the hover state of the menu on the homepage with ie7 and ie8.
For some reason despite the z-index it hides behind the object flash box.
Can anyone take a look at my URL and see if you can suggest a fix. It's really got me puzzled. Only happens on the homepage because the menu seems to hide behind the flash video object.
url: http://yellowtulipcomms.com
Try adding the following to the flash embedding code:
<param name="wmode" value="transparent"/>
My first suggestion would be to use full doctype declaration:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
IE is very sensitive when it comes to calculating positions and dimensions without a proper doctype. This is something I have learned the hard way.
Addendum:
Also try using zoom:1 value in css rules. I can't test it on your site but I remember it helped with positioning in IE.
Related
I have a website here that works terrific and displays fine in IE 10 and IE 11 but anything below that takes the whole display and forces it to the far left of the screen instead of centering the content area. I can't seem to find where to adjust this in CSS. Can you please tell me a good way to fix this in IE 8 without "breaking" newer versions?
The main thing that catches my eye is that the should always be the very first line of your html. If you move this line:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
to the very top... that should help with many of the errors.
You might also consider trying simply
<!DOCTYPE html>
Since I don't have anything that still uses IE8 on it, I can't say for sure if that will fix everything, but it's a good start. For what it's worth, I checked your site on Safari and Firefox, and it appears to work okay. So I'm guessing IE8 has issues with the doctype not being in the correct spot.
One more thing... there are three lines at the top of your page - title, and two meta tags. Those belong inside the <head>, not at the top.
I have extra style sheets to try and fix loathsome IE, however there are a few images I cannot get to budge. The little icon images on this page http://www.sporttours.net/news/ next to the news items show up over the sidebar art "Sport Tours". I can affect the images by adding red borders, hiding them totally and a few other things. However, I can't affect margin or padding to try and move them over. Anyone have any suggestions? And yes, they want it to work perfectly in IE too (HA!) so I can't just let it be.
First validate your HTML - as you can see its ridden with errors.
Validation shows you're missing a doctype - add one!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
I am getting lots of trouble with IE. The whole page is disarranged even though I have reset applied to all the tags initially. Mozilla and Chrome displays it correctly but IE is giving lots of tension. If anyone could help I would be very thankful.
Jquery is also not working fine. and div are disarranged
First see it in mozilla to get a look of what I have designed. then open it in IE to see the troubles.
See it here http://www.crawller.com/opal/
Thanks to everyone.
I solved the problem by including this line at starting before
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
This solved the problem and CSS and jquery codes are responding well in IE now.
You can check the modified version at
http://www.crawller.com/opal/new/
The old one is also available at http://www.crawller.com/opal/
For starters, it appears there are some incorrectly spelled attributes in your css, several references to 'bloc' where I assume you mean 'block'.
Make sure that your html and css validate.
You have a lot of Markup validation errors in your document. First try to fix those errors.
Check your site for w3c Markup Validation
Until recently, our app did not specify a doctype. Then, to make the app more cross-browser compatible, we added a strict doctype. This made everything behave a lot more similar across different browsers. However, in IE9, we noticed that this changes how select elements look. To make sure that was the only thing going on, I made an HTML page with the following:
<html>
<select>
<option>Testing</option>
</select>
</html>
This HTML is rendered like this in IE9:
Then I just add a doctype as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<select>
<option>Testing</option>
</select>
</html>
The HTML then renders like this:
There are some subtle differences, but the biggest one that stands out to me is the part of the dropdown where the down arrow is. One has a white background and the other is gray. Is there some kind of CSS standard that changes the style on selects? We'd like to keep it how it used to display, but I'm not sure if that's possible.
I tried doing the same test in FireFox and both the no doctype and strict doctype display with a white background for the down arrow. The same test for Chrome has both doing it with the gray background.
Is there any way to control this? Any information about this would be much appreciated. Thanks.
This is an unfortunate side effect of mixing native OS elements into the page. The best way top deal with it in my experience is to completely re-style the element. The older the browser and more browsers you support the more difficult this becomes as they all have subtle differences. Here are a couple pages to get you started with styling these elements.
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
http://bavotasan.com/2011/style-select-box-using-only-css/
Maybe look in to using YUI Reset to clean any browser stylesheets from your page first?
http://developer.yahoo.com/yui/reset/
Lack of a doctype puts you into quirks mode where you never want to be. A doctype is required of all modern web pages in order to be in standards mode. In quirks mode, the proper box model is not followed, particularly by IE, and all sorts of strange things can occur. This is why a doctype is always the first thing to be put on every web page. And once it is set, you never ever change it.
I have a page that looks perfectly at http://esolar.ca/calculator
But when I embed it into an iframe at http://esolar.ca/how-to-profit-from-microfit/microfit-income-calculator/
The Request An Assessment button in Internet Explorer 8 is too far to the left. How do I make the contents of the iframe appear the same after it's been iframed?
The iFrame is overflowing in IE. Changing the width to 584px "fixes" it for me.
Some things to reduce these kinds of problems:
Use a DOCTYPE to avoid triggering quirks mode in IE. EG:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
Use a CSS reset to reduce cross-browser differences. Here's a good one.
If all else fails, use Conditional Comments to tweak IE CSS.