can anyone help with this.... http://www.apolloensemble.co.uk ....looks like the problem is the menu bar but I'm fairly new to this and am not sure. Its fine in FF and IE (7 & 8). Tried various cross-browser issue checks but can't find anything that looks significant. Thanks!
From SpryMenuBar.js:
Copyright (c) 2006.
Look like they didn't take into account that Safari has been improved the last few years. I see several browser checks and browser-specific hacks which aren't applicable anymore nowadays. The web keeps changed, the techniques get improved quickly. This all can just be done with only CSS.
Contact the original authors for an update. If in vain, create one yourself with help of CSS (great Google keywords: "css suckerfish menu") or maybe with jQuery.
You should specify the padding of the menu ul. It has a -webkit padding of somesort. if you can edit the css change the following:
ul#MenuBar1 {
padding: 0;
}
Related
I have been css coding for my theme that is based off from Twenty Eleven. Everything looks fine except in IE7 & IE8.
I realized that in those two mentioned browsers, my styling for the widget class ".widget" is ignored. I figured this out after doing an elimination test. Every other class that I have tested takes in the css adjustments. Only those made to .widget is not taken in by IE7 & 8.
Is there a known solution to this?
Extra information: I want the each widget to be contained within a box by implementing black borders of 1px.
Without more information, it's impossible to say for sure, but as miszczu commented already, older version of IE have trouble applying rules with multiple classes, like so:
.widget { background: red; }
.widget.blue { background: blue; }
In most browsers, if you had <div class="widget blue">test</div>, it would be blue. But in older IEs, it will still be red, because it doesn't know how to handle the multiple classes.
If this doesn't apply to you, perhaps you could edit your question with more details -- a link to your site or a jsfiddle with the problem would be greatly helpful to solving your problem.
Thanks #Scott and #misczu for the help.
I did major elimination testing and found out that it is a HTML5 issue. IE7 & 8 cannot read the new HTML5 elements and it seems my earlier outsource neglected to include the HTML5 js compatibility file. IE7 & 8 wasn't able to process the 'aside' element for which the widgets were contained in.
In the end I had to retrieve the HTML5 compatibility code from Google SVN; the one included in an outdated version of Twenty Eleven was quirky. It works properly now.
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>
Stack Overflow won't let me post my whole question because I'm an untrusted new user, so if you're interested in this question please visit
http://doctype.com/would-cause-behavior-only-one-persons-ie8
The backgrounds in question are drawn
with a single-pixel, xy-repeated,
semitransparent PNG.
This person's IE8 is drawing this as a
gradient that starts at the top left
corner and becomes more transparent to
the right and below.
I am unable to reproduce this problem
in IE8/WinXP/VMwareFusion/SnowLeopard.
Also cannot reproduce with IE7 (IE8 in
compatibility mode). Also cannot
reproduce with IE6 or any other
browser.
we are running the same version --
only the product IDs are different.
I confirmed at
http://en.wikipedia.org/wiki/Internet_Explorer_8#Release_history
that 18702 is a final release version
of IE8.
Even tho I did not think it would
help, I asked for a list of addons in
IE8 -- nothing unusual.
What could be causing this problem for
just this one person? The person
mentioned that it is a work computer
and the IT people are really strict
about things. Could any workplace
restrictions cause this weird
behavior? Could it be a graphics
driver issue?
Again, I know this is not an IE8
problem because I have IE8 and cannot
reproduce it.
I want to know how might one alter IE8
-- perhaps for security reasons -- so that this behavior is seen? Or, what
would cause one specific computer to
display things this way?
I have encountered this problem before and the only solution I found is not to use a 1x1 pixel image. Try 1x10 it should fix it.
Are any files (graphics, js, css) being pulled from a server that might be blocked by their office firewall?
I've had this happen, where just one graphic was from some off-limits site, with bizarre results.
My guess is that you're using jQuery, and this bug will pop-up on mouseover for random IE7 and IE8 users. I found one possible fix in a www.farmcode.org blog post:
Wrap the body of your page with the following conditional:
<!--[if IE]><div id="ieWrap"><![endif]—>
(the rest of the page html goes here)
<!--[if IE]></div><![endif]—>
and add the following CSS for IE:
#ieWrap .productView .productThumbnail a
{
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='grey_overlay.png',sizingMethod='scale');
width:100%;
}
You'll need to change the CSS to match your situation, but this should get you started.
I have a php file with 's and the things in the div should stay on one page,
for this possebillity i found this:
http://www.w3schools.com/css/pr_print_pagebi.asp
However like you can see its only compatible with opera and nothing more.
I dont want to demand my users to use opera so I was wondering if there was a alternative to the "page-break-inside:avoid".
Thanks
Matthy
Support for print specific CSS is pretty crappy. Have a look at the CSS discuss Wiki for an extensive guide (it also has a link to a browser support compatibility table). I have had some success with page-break-before: always when I was playing around with this sort of thing a few weeks back - as long as your div is less than a page long you may be able to just force a page break before it?
I have been working on a webpage. It is the first I have actually tried to design using an image and then use proper CSS layout rather than tables.
http://www.roccocammisola.com/proj/brunel/bgimage.html
I have been having issues with the shadows on either side of the main content area. Of course these are only an issue in IE. As you can see the shadow has been cut down to about 10% of its actual height.
With my relative inexperience how do I look for relevant fixes to this issue.
Any help would be very much appreciated.
FireBug, the most crucial tool for debugging CSS, amongst other things.
get it here
IE Web Developer Toolbar
It's not as good as firebug in general, but it helps when you have an IE-specific problem.
In addition to Firebug, making sure your HTML is valid is an invaluable tool and can minimize CSS headaches. Sometimes your CSS may not work right because there are mistakes in the HTML. The different browsers have different ways of dealing with improperly written HTML which can sometimes make it seem like there's a cross-browser CSS issue. The validator can help you find mistakes in your markup.
http://validator.w3.org/
+1 for FireBug
In this particular case, I'd just suggest a new approach for your shadows. Currently, you have them as items. You typically want to use CSS background images for things like this.
.mainShadowRight {
*/ your other stuff */
url('images/mainShadowRight.gif');
}
Your .mainShadowRight CSS class specifies a min-height (which IE6 doesn't understand, and IE7 doesn't always 100% get correctly)
and as DLarsen pointed out, it appears you are missing the background-image: url(); bit.
Thanks for all your answers, seems to have done the trick.
I think I spazzed out with the upload as I should definitley have had the bg-image stuff there.
That IE web developer toolbar looks pretty good too as I have firebug and web developer bar for FF.
Another hot recommendation for debugging CSS - CSS Viewer.
It's a Firefox add-on that allows you to hover over elements in a web page and see their exact style. Often you figure out that the final style was not what you meant, possibly due to some inheritance of styles.