I am designing a website which has css menus.
Some of the menus have submenus. Any menu item with a submenu shows a simple image of ">", to indicate that there are submenus.
Here is a JFiddle. (Please excuse the 60 lines of CSS. I am working from generated code and I stripped out as much extraneous code as I could.)
This is not working in IE8 and I have no idea why. In IE8, the > image simply doesn't appear.
Can anyone help me make it so this code will work in IE8?
Using a background image isn't an ideal solution, because the page is already using a background image for another purpose.
Thank you!
.has_children:after
{
content:url('http://s21.postimg.org/banv5jdib/submenu_arrow.png');
position: absolute;
right: 5px;
top: 2px;
}
In order to make :before, :after and content work in IE8 you need to have <!DOCTYPE html> on the top of the page.
If still it fails, than you will have to use CSS3 pie with Selectivizr
For Support Details Or Here
And as you told that you cannot use background-image than using img tag seems fair and only way to achieve this.
Related
Note: I'm aware of this question: How to disable elements selection and resizing in contenteditable div? . This question is slightly different.
I'm current using Kendo UI Editor. When I'm using IE 11. There's an resizable border of the content like this:
Here's the sample image
How to hide the border? I tried putting border: none; on my css. I even search about this issue but it keeps redirecting me into other Editor.
Here's the sample code: (try to use IE 11 to see the issue)
https://dojo.telerik.com/AJOXeGAb
this is my IE version
Maybe this works:
border: 0px;
I'm new to html, and the top image in this site seems to come from nowhere. By inspecting the source I find an with a link to the home page and a <span>Fragments of light</span> but there is no img. What am I missing? Thanks!
The parent div #title has the image as a background image.
<style type="text/css">
#title {
background: url(http://colleenbriggs.files.wordpress.com/2012/12/cropped-fragments-of-light-low-res.jpg) no-repeat;
height: 180px;
}
</style>
The image is in css.
#title {
background: url("https://colleenbriggs.files.wordpress.com/2012/12/cropped-fragments-of-light-low-res.jpg") no-repeat scroll 0 0 transparent;
height: 180px;
}
I would recommend you to use FireBug plugin for Firefox or Developer Tools for chrome for finding out what you need about the markup on the page. Even IE has developer tool for that.
To use such tool you just need to hover the element on the page that you need, right click on it and select "Inspect Element" in the context menu. After that the FireBug/Developer Tools will appear at the bottom side of the browser and there on the left you will see all markup which is rendered right now and the element that you are inspecting will be selected. On the right you will be able to see all css and other properties of selected element. In these css you will see the backgroud image url. You will be able to change something there and immediately see the result of change on the page.
Using such tool is much easier and better than just inspecting the source code because the HTML can be changed after page load by javascript and you will not see these changes in the source code of the page but you will be able to see everything in the Firebug/Developer tools.
Check them out. They are Number 1 tools for Web Developer.
And I agree with previous answers. The image is on the backgroud in css. You just need to know the way to see it by yourself. Not just know from internet =).
I am not sure if this is an issue with the Blogger template that I'm hacking up, or if I'm just forgetting a simple CSS property.
I'm working on a template for a friend, and am attempting to show the logo on the top right above the menubar div, and it works just fine in Firefox and Chrome, however it renders behind the div in IE9.
Here is the link to the demo:
Demo blog
Essentially, what I've done is created an absolutely positioned div, with an inside image:
<div id="logo2">
<a href="">
<img border="0" src="http://1.bp.blogspot.com/-lpZjzviYzAo/T7mNUvXY6QI/AAAAAAAAAcM/XwQS-bO0Hy4/s1600/lovek-hdr.png">
</a>
</div>
and the associated CSS:
#logo2 {
position:absolute;
top: -25px;
right: -50px;
z-index: 999;
}
I'd thought that the combination of an absolute position, plus the high Z-index would overcome any issues with IE's handling of the z-index, however I was wrong.
I've also tried adding in a position (relative) and z-index (1) for the menubar div, to no avail.
Per #Dubious' suggestion, I added the following without success (the image is still clipped):
.tabs-outer, .tabs-inner {
<!-- [if ie 9]>
z-index: -1;
<![endif]>
position: relative;
}
Old Answer "Try adding a z-index of -1 instead of 1 to your menubar div"
Edit:
Okay, after doing some fiddling around in IE9 Developer Tools I noticed that your source code was telling IE to render the page in Document Mode: IE7 Standards. As you can see, after opening dev tools (and making sure the dev tools frame is active) you can press alt + 9 to render the css as it should be rendered in IE9. After this occurs, the content displays just as it should in any current browser.
So why is the page loading with IE7 Document Standards? Well you need to use correct standards-compliant !DOCTYPE directives for each of your pages. To do this just read up on this page and make sure that your html files follow the very first example.
Conditional Comments
I should have given you a better example of IE conditional comments, so I will go a little more in depth here. An IE conditional comment can ONLY be defined in html as it uses <!--> which is html specific code. Therefore, in order to add ie7/ie9/ie specific css you would need to <link> a new stylesheet inside the comment field that would have ie specific code. Further reading here. Also note, that since this issue you are experiencing is because the page is rendering IE7 quirks mode css, you might need to use an ie7 comment as opposed to ie9.
I really hope this solves your problem, good luck!
I have made this question: Menu with 2 levels disapear the background and that's solved. But my menu with sub-items does not work on IE8.
And i dont know where i'm wrong with this.
Here is the updated link of my menu: Here is working example.
can Help please?
Your dropdown menu is not working because it is firing in Quirks mode. Add a proper DOCTYPE and it works fine.
<!DOCTYPE html>
Edit: here is a demo of your menu with the proper markup working just fine in IE8: http://jsfiddle.net/4ApsQ/show/
It would be great if we could see an extract of your HTML and the CSS that you're using for this task. But, in general, if I understand your problem/question correctly, these are the two things to watch out for in your styles:
z-index and position
Here's an example:
#divStayTopLeft
{
position:absolute;
z-index:1000;
}
If you make your z-index (reasonably) high enough, then your menu will remain on top of other elements.
i have a page which displays a border around the divs #call and #courses
i m using the css:
border: 3px solid #afd4a9;
this is not properly in ie
see it here
thanks
There's nothing wrong with your CSS.
When I disable JavaScript in Internet Explorer, the border is there (but not rounded).
Looking more closely, I see you're using jquery.corner.js for rounding the corners.
I'm not sure why that isn't working for you (I can't see what you're doing wrong), but I recommend switching to CSS3PIE instead for the rounded corners.
In short, you simply download the PIE.htc file, and add a single rule to your CSS for each element:
#myElement {
...
behavior: url(PIE.htc);
}
corners.js removes the borders in ie - see the inline styles for the relavent divs. To have borders in IE, you need to have an outer div wrapping the inner div and use corners on both divs to get a border like effect. Check out the demo page about half way down, under adjornments: Jquery corners demo page
The way corners works in ff and IE is totally different - it simply uses the built in mozilla css styles which keeps the border styling. In IE corners does div insertion.
The problem is that you have a bit of javascript adding a style attribute to your DIVs:
style="border-bottom: medium none; position: relative; border-left: medium none; zoom: 1; border-top: medium none; border-right: medium none;"
You'll have to selectively remove that code for IE, or fix how it works.
Note, you ought to install the Developer Tools for IE (or if you have IE 8, just press F12 to see if they come up). The tool will let you see the HTML code after javascript has run, and it is invaluable in troubleshooting these types of problems.
Your CSS is being overwritten by inline styles, it appears, by this function. $('#courses').corner(); in your index.js file, which is rounding its corners like it's supposed to.