Given IE6, an UL-LI list and a background image for the UL container.
<style>
ul {background-image: url(images/bgr.png);}
</style>
...
<ul>
<li>...</li>
...
</ul>
When I load the page, the background is randomly loaded, some parts are visible, some are not. Moreover, it changes on runtime when I'm scrolling on the page. When I scroll out the UL list and scroll back, different parts of the background will be visible, depends on the speed of scrolling.
Do you have any idea? Thanks in advance.
IE6 struggles when it comes to using .png files full stop. There are various suggestions for fixes, but unless you have a specific reason for using a .png file (for instance transparency) I would suggest using a different file format. I've worked around it before by detecting when I have an early version of IE and substituting a .jpg for the .png file I wanted to use, so that most users with up to date browsers get a .png background but IE users get a .jpg.
I've encountered similar problem some time ago (but it was simple background-color, without image) and if I remember correctly, adding position:relative to parent element solved this. So something like this:
<div style="position:relative">
<ul>
<li>...</li>
</ul>
</div>
Does li float or something?
Try putting...
ul
{
zoom:1;
overflow:hidden;
display:block;
}
height:1%;
You can use this to fix
Related
I am working on this site for a client of mine.
Issue is that the dropdown menu on the home page hides behind the embedded youtube player. It seems to be a simple css problem involving z-index but I have been unable to solve it. Maybe it has something to do with the youtube embed.
I have tried to set the z-index of the menu but it does not seem to be effective.
I almost forgot to tell you that the problem occurs on IE9 specifically.
Also, I'm not a css expert so please just point out what the issue is.
Use below code for youtube iframe:
<iframe width="597" height="323" src="http://www.youtube-nocookie.com/embed/Rahab_AMCkE?wmode=transparent" rel="0" frameborder="0" allowfullscreen=""></iframe>
Add wmode=transparent" just after the source(src) of video
This is a Flash issue. When embedding Flash, the default is wmode=window, making the SWF overlay any HTML object on the page. To avoid that, use wmode=opaque or wmode=transparent which allow HTML elements to overlap SWF content. For more info and the difference between the two see Adobe's help.
Define your css style like this.
.navigation ul ul{
z-index:3;
}
.lcd{
position:relative;
z-index:1;
}
use
_z-index:1000001;
do not remove
z-index: //whatever;
In Internet Explorer (I've tested in all v6 - v9) the border on the sub-menu does not at first appear when you hover over the text. The second time you hover it will display. It works fine in Firefox and Chrome - i.e. it always displays the border. I've put an example page up on my site.
IE (on hover):
FF/Chrome (on hover):
There's nothing fancy here, some css, onmouseover/onmouseout Javascript to set style.display = block/none. I've followed some of the ideas in this answer to a similar question.
I've stripped it down to the minimum to try and find the problem, but still no luck.
The sub-menu ul element has display:none set on it. It seems that IE doesn't bother drawing the border until it has display:block set, and doesn't draw it initially when Javascript is used to display the element.
<html>
<head>
<title></title>
<style type="text/css">
ul, li {padding:0; margin:0; border:0;}
ul#hover_menu_list,
ul#hover_menu_list ul {list-style-type:none;}
ul#hover_menu_list li {float:left;position:relative;display:inline;}
ul#hover_menu_list li ul {border:1px solid #000;display:none;position:absolute;left:0px;top:20px;width:170px;}
ul#hover_menu_list li ul li {display:block; clear:left; float:left;width:140px;}
</style>
</head>
<body>
<ul id="hover_menu_list" onmouseout="document.getElementById('menu1').style.display='none';" onmouseover="document.getElementById('menu1').style.display='block';">
<li>
Menu
<ul id="menu1">
<li>Submenu1</li>
<li>Submenu2</li>
</ul>
</li>
</ul>
</body>
</html>
UPDATE: The problem was indeed a doctype issue. Adding in either a transitional or strict doctype fixes the problem. The linked page has been updated with the fix.
As mentioned in the comment, it looks like you are missing a doctype.
Oldie but goodie:
http://www.alistapart.com/articles/doctype/
As I posted in the comments to the original question, the example on your page that you link definitely doesn't have a doctype listed at all in the code. I'd recommend adding a doctype, and it should correct your issue.
I've created your example on jsfiddle here and tested it on IE6-IE9, and it seems to work fine: http://jsfiddle.net/fordlover49/FpCEW
They include a valid doctype with all of their pages, and it appears work fine.
That said, you can use the pseudo :hover item in the css, however :hover doesn't work consistently in the older versions of IE, so that may not be an option without adding some additional code to add in support for it (maybe modernizer supports this).
I have a small problem with a horizontal menu I have implemented for a website. The menu only contains three items, but when viewed on quite a large widescreen monitor, the last item appears to collapse on to a new line. I can't actually test this myself as the widescreen monitor is used by my client, and whilst I can't reproduce the error they have sent me this screenshot.
The client is using Internet Explorer 8 on Windows 7, and I have tested this browser and OS on a normal size monitor which seems to work. It seems to be the widescreen that is the problem.
Here is how the page looks on my screen, and every other subsequent screen I've tested on.
Here is the code I have for the menu.
HTML
<div class="menu">
<ul class="nav">
<li class="nav-item" id="first-item">WHY US</li>
<li class="nav-item">LINKS</li>
<li class="nav-item">CONTACT</li>
</ul>
</div>
CSS
.nav-item {
font-size:2em;
margin-left:175px;
}
.nav-item a {
color:#2B2F73;
}
.nav {
list-style-type:none;
padding:0;
margin:auto;
width:744px;
}
.nav li {
list-style-type:none;
float:left;
display:inline;
}
#first-item {
margin-left:0px !important;
}
.menu {
width:960px;
height:40px;
margin:auto;
}
Can anyone identify any glaring errors in my code that may be producing this error?
try reducing some width in .nav-item, .nav and .menu
If this does not helps you, then can you please provide the link where this is been hosted. So that we can check ther and quickly reply to you.
The problem is that they've got their "Text Size" set to "Larger" (or perhaps "Largest"):
Your code is here, and it looks exactly like the client's screenshot with "Larger" text in IE8.
Now you can reproduce the problem, you should be able to fix it.
I'd provide better instructions, but it's difficult to do so without being able to see the entire site.
The "widescreen monitor" part is not relevant - you're declaring width: 960px on the outermost container (.menu). It will be 960px no matter what the screen width is.
Try this
.nav-item {
font-size:2em;
margin-left:5em;
}
Granted, if the chrome (the user's browser) increases their text size too much, no matter what it will eventually break if you use ems as they are of course based on the text size.
<subjective>
In general, its best-practice to use percentages for text-sizes and use pixels for margins/padding/distances for best consistancy between browsers.
Also using a reset css (like YUI base-reset-fonts.css) is a good idea too
</subjective>
I'd suggest to play a bit with your width tags.
What about removing the one in "nav" ?
I'm sorry this is not a question to ask here. This problem is very easy to solve, you can figure out yourself if you try to change things...
My best advice on this question is that you get a decent tool to "test" CSS and see the result "live".
I'm happy with the Firefox/Chrome FireBug extension (but it doesn't save the result, you have to copy&paste it).
I'm trying to get the Thesis theme working in Wordpress, and it's almost perfect. For the navigation menu I want to use images instead of text. My solution to this was to set a background image via css:
ul.menu .tab-2 a {background:url(images/myimage.jpg) no-repeat;background-color:transparent;width:81px;height:60px;margin:0px;padding:6px;border-style:none;}
This works fine everywhere but IE. You only see the image and not the text that Thesis is writing out for that nav item:
<li class="tab tab-2">About Us<!--[if gte IE 7]><!--><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
In IE, however, the href text does show up over the background image. I suppose this is what I expected to happen, so I was pleasantly surprised to see it not working like that in every other browser.
What I'm trying to figure out is if there is a way to get the background image to show up on top of the href text, effectively blotting it out. I have tried hacking Thesis to suppress writing out the text, which works in all the menu items except one, and that is because I am writing out categories, not pages.
I really want to use Thesis' nav menu and not roll my own because I'm sure then I would have more troubles getting the drop downs to look nice in all browsers, and my css is just not that advanced. And I don't think there is a way to tell Thesis to use an image instead of text for the nav menu item.
I have been staring at this for hours and clearly am not thinking clearly about it anymore.
Try adding:
display:block;
text-indent:-5000em;
overflow:hidden;
... to your current rules.
Some folk prefer other ways to do image replacement, but this is the most common way IMO.
I have a background image set to my main div. The background image shows up fine in Chrome but doesn't show at all in IE. Any ideas on what would cause this?
<div class="container" style="height:900px; margin-top:0px; background-image:url(Images/bg-stadiuminner.jpg); background-repeat:no-repeat;;">
Thanks
The only thing that I can think of that could be causing this is that the JPEG file is in CMYK format rather than JPG. IE can't digest CMYK images.
I think a layout issue might be more probable, though. Are you 100% sure the DIV is stretching to where you expect it to stretch? What happens if you set a background colour?
A few thoughts:
You should really opt for a stylesheet instead of embedding styles right into your div.
Your background may not be showing up because you never properly close your <div> with a </div>. Also you have an un-needed semicolon at the end of your style, but that probably wouldn't break anything.
.container {
height:900px;
margin-top:0px;
background:url(images/bg-stadiuminner.jpg) no-repeat;
}
<div class="container">
</div>
This would be a better way - try using classes rather than inline styles where possible to make maintaining the code far easier.
you also had a double ;; which may very well confuse IE.
Is the relative url available for both browsers? Attempt to plug in the url for your image in IE and see if you can even load the image from the attempted url.
Don't you need quotes around that url?
style="background-image:url('paper.gif');"
You are using inline style and also using the class 'container'. In the inline code there is no problem except there is ';;' at end of the line. We cannot see what is there in the container class. The problem might be there in the container class