I have some css used on a wordpress site. It looks as it should in chrome/safari etc but typically not correct in IE8.
The div has a background colour and moz-border-radius used for the border.The border is not important however the background colour only extends part of the way, or in the case of IE8, not at all.
Example: http://mesirow.btg340.co.uk
If you see the newsletter signup form midway down the page, in Chrome etc it has a nice blue background coupled with the border. However in IE its just showing as a white background and ignoring most of the styling.
If you then view: http://mesirow.btg340.co.uk/industries/airlines/
The newsletter signup is on the right hand sidebar. In IE8 the background only stretches half way?
This is no doubt css related. Ive tried various changes such as using fixed height etc but so far no luck :(
Any help is appreciated.
You have used <aside> tag that's why it's an Invalid Markup for IE 8
Using html5 markup in ie8/7 is causing the problem.
If you use http://modernizr.com/ it comes with an html5 shiv and should allow for html5 tags in ie7/8..
Finally i solve this question...:)
please check your html code
<aside id="wpmlwidget-2" class="wpmlwidget">....</aside>
please replace your aside code with div this will work..aside code not supported in ie-8.
<div id="wpmlwidget-2" class="wpmlwidget">....</div>
and for border radius in ie-7 or ie-8 possible via java script check this link http://davidwalsh.name/css-rounded-corners
Related
Here is the link to the website I am talking about.
My problem is that when you navigate between the different pages in the main navigation, the main wrapper does not align on the different pages I have used. So if you are on the home page and you click on "WMH" in the main navigation bar the whole page jumps to the left by about 8px.
This creates a jitter between pages that my client really doesn't like. I used some padding-left and padding-right in css to align it correctly. Unfortunately when I get it pixel perfect in Firefox, it is wrong in Chrome and Safari. If I get it pixel perfect in chrome, it jitters in Firefox. This is very irritating. I don't want to have to write separate styles for Chrome, Firefox, IE, Safari unless it really is the only solution.
Thanks for your feedback.
Archie.
The browser scrollbar looks to be causing this. You can force a scrollbar to always appear which would solve the issue. Add this to your CSS:
html {overflow-y: scroll;}
You would also probably need to remove the padding that you tried to fix the problem with originally once the above style is in your CSS.
I am pretty good with css, but can't figure out why my menu is being destroyed by IE7. Looks perfect in all other browsers I tested. First image link is correct. Second image link is how it looks in IE7.
http://www.asingularcreation.com/Forums/download/file.php?id=8368&mode=view/ie8+.jpg
http://www.asingularcreation.com/Forums/download/file.php?id=8367&mode=view/ie7.jpg
Here is the page: http://www.asingularcreation.com/calls-to-artists.php. Any help would be greatly appreciated.
You do not need to float (or clear) the menu container. It looks like it is causing IE7 to calculate the width incorrectly which forces the menu to flow down, underneath the sub-menu.
<div style="height:40px; line-height:40px; float:left; clear:both"><!--Main Menu --></div>
Removing the float and clear properties fixes the display in IE7 and also still works in Chrome and IE8 and IE9.
There is a lot of inline styles in the example page so I would also look at moving the CSS into an external file if possible.
I've got myself multiple a tags floating on a page.
They have been styled in a unique way to center an image horizontally inside it, using a span and css. The a tag itself has fixed width and height.
I thought this was basic stuff, and my theme was causing the issue, but I've created a stripped down jsFiddle and I'm still getting the same problem when running the jsFiddle in IE 7.
The a tags are all click-able in every browser apart from IE7, why is this happening?
Can anyone explain? Thanks.
http://jsfiddle.net/motocomdigital/Qk9tu/6/ - Test click-able state in IE7, works fine everywhere else.
Don't worry about IE 6 - I'm not coding for this anymore.
On IE, a link element (<a></a>) with an empty attribute href doesn't display a link-cursor (hand).
Either put a # in your href attributes or add a cursor:pointer on a.home-module
It's the spans inside the a that cause the trouble...
You can achieve what you are trying to do with just CSS, but it requires a slightly different layout in your HTML and some extra CSS.
JSFiddle - http://jsfiddle.net/8E8um/2/
Note
In a.home-module I have added a transparent image. This is because IE7 will not assign an "empty" parameter (due to the negative text-indent) to the top level and would therefore still leave the link unclickable.
you should assign "#" to href attribute.
Try this: http://jsfiddle.net/Qk9tu/5/
I'm now building a website for my sister. It looks normal on Chrome, firefox and IE9 but for some reasons, some of my div lost all background color in IE 7 --.
http://xx3004.kodingen.com/JDProperties
Open the website and you can see the pop up message has problem with title and button set (background color) - I'm using IE 7 right now. Then the content of the left body lost background color too, and the right column lost background too. I've been doing many searches on Google plus I notice that jQueryUI could not be wrong, so I guess it's because of my DOCTYPE in the begining of the source code. I've tried to change to some other DOCTYPE I saw on the Internet, or even omit it, but the website becomes either messing up or remains the same.
This is the first time I see this situation, it's weird and I hope I don't know how to fix it.
I'm expecting to solve the problems soon :-). Thanks everyone in advanced.
[x]
I started to look, and then saw this
</head>
<body>
</body>
</html>
</head>
<body>..
Try building the structure properly and see what happens yo.
You have mismatched HTML tags. Chrome, firefox and IE9 are cleaning up for you, but IE7 isn't that nice.
Agree with #albert, you do need to recode that page, although it's seeming to mostly working, the nesting of multiple head, body, style elements going to lead to trouble, and I suggest you change to an HTML4 Doctype as the coding is not XHTML, the more conflicts (tag soup) a browser has to deal with the more likely you will get them interpreting your intentions differently.
As for the IE backgrounds in numerous (inline styles) places you have background: inherit IE does not understand the "inherit" value of properties - or more specifically for IE7 and earlier it only applied "inherit to the direction and visibility properties
I am using a CSS style hover on some image links on my page.
When a user hovers over an image, it's background position changes, providing a highlight effect.
When I hover over the image in i.e.6 my page gets pushed down by 40px.
Why is this?
IE6 is a dog. Try:
a{zoom:1}
Which version of IE are you using? You should provide example code here. However, you may try to add following dirty css trick to the image which is hovered upon.
<style type="text/css">
img:hover
{
_margin-top:-40px;
}
</style>
Above style will only target IE, other browsers will ignore it.
Using hover with Internet Explorer can cause strange style issues.
you can avoid Browser Issues by using Conditional Comments.
Stackoverflow Question regarding browser characteristics
Stackoverflow Question regarding why Conditional Comments always will be needed
Edit:
Internet Explorer 6 support the CSS ":hover" attribute only on "a" elements
ReEdit:
Just for documentation...if you really want or have to use "hover".
Try this example:
Hover in Internet Explorer 6
But that is a really rough solution.
The ole' Box Model snafu! IE6 presents a different box model than what the W3C presents. The width of an IE6 Box (hope I get this right) is a total, including the padding and border. The W3C box model is width declared, period. The margin, padding, and border are in addition to the width of the object.
Examples of how the different box models work:
http://css.maxdesign.com.au/listamatic/about-boxmodel.htm
http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug