I am using the following CSS but it never shows background images in IE6. But if I remove the filter .. AlphaLoader command, then it shows with grey background.
Here is my CSS Code
.fg-block1 ul, .fg-block3 ul
{
list-style:none;
}
.fg-block1 ul li, .fg-block3 ul li
{
padding-left:28px;
background:url(images/bullet-2.png) no-repeat left top;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
border-bottom:1px dotted #fff;
text-align:left;
background-position:1px 0;
line-height:16px;
padding-bottom:5px;
margin-bottom:5px;
}
.fg-block3 ul li
{
border-bottom:none;
}
.fg-block1 ul li a, .fg-block3 ul li a
{
color:#fff;
text-decoration:none;
}
.fg-block1 ul li a:hover, .fg-block3 ul li a:hover
{
color:#fff;
text-decoration:underline;
}
Try reading this :
http://www.twinhelix.com/css/iepngfix/demo/
AlphaImageLoader hack works only if you set dimensions to the parent container where you load your png as a background.
If you add width and height and display:block to your <li>'s it should be fine. Otherwise - consider different approach.
i recommend jQuery png fix. see links below
jQuery plugin
another source
I never tried the jQuery plugin, but after dealing with a lot of PNG problems in IE6 the best fix I found is by far DD Belated PNG fix. The TwinHelix fix mentioned before presented some problems for me in certain scenarios.
Related
The image is pretty self explanatory. I can't get rid of those two pixels at the bottom of only one list element. I've inserted text-decoration:none and list-style-type none in every corner of the css with no results.
Reason?
http://s1089.photobucket.com/user/3Joez/media/disp_zps6fe2774c.jpg.html
#rightnav {
float:right;
width:65%;
height:50px;
/*border:2px solid #Df1;*/
}
#rightnav ul {
margin-left:9.5%;
/*border:1px solid #F30;*/
width:500px;
}
#rightnav ul li {
display:inline-block;
font-family:Times New Roman, Times, serif;
font-size:1.4em;
margin-left:2%;
margin-top:1.5%;
color:#FFF;
text-decoration:none ;
list-style:none;
list-style-type:none;
}
Pretty sure you have an <a> inside your <li>. Did you change the text decoration on that? Changing it on the <li> will probably not change the inner style because the UA CSS likely ties the underline style to the <a> tag.
#rightnav ul li a {
text-decoration:none;
}
i'm really new to html and css, and i thought having a project while working through tutorials would help me stay motivated while learning a lot.
i've been playing around with this menu, and it's almost there - but now there seems to be this wall and i just don't get how to get over it! i have searched for hours on several sites and am now ready to throw this thing outta the window...
here's a jsfiddle: http://jsfiddle.net/64Grv/
so what i wanted to achieve is that on hover of one submenu the whole menu changes color (instead of the hovered link now). if i hover on "more stuff" for example, all of "menupoint2, stuff, more stuff, even more stuff...." should change color.
how should i go with that? i've tried putting different classes, to no avail - i guess i put them at the wrong place. or is this possible with some kind of box?
i apologize for the messiness of my css (just a beginner messing around..), and i'd really appreciate it if somebody had concrete tips on how to do this :)
thank you very much!
CSS:
#navigation ul
{
margin:0px;
padding:0px;
position:relative;
text-align:center;
}
#navigation ul li
{
display:inline;
float:right;
line-height:20px;
list-style:none;
margin-right:3%;
margin-top:5%;
position:relative;
}
#navigation li a
{
display:block;
font-family: "Helvetica", "Arial", sans-serif;
font-size:1em;
color:#04B4AE;
text-decoration:none;
}
#navigation li a:hover
{
color:#08298A;
text-decoration:none;
}
#navigation li ul
{
font-size:0.8em;
background-color:transparent;
display:block;
margin:0px;
padding:0px;
top:0.5em;
}
#navigation li:hover ul
{
color:#04B4AE;
}
#navigation li li
{
vertical-align:middle;
list-style:none;
display:list-item;
margin:auto;
float:none;
}
#navigation li li a
{
color:#04B4AE;
text-decoration:none;
}
#navigation li li a:hover
{
color:#08298A;
text-decoration:none;
}
you need to set :hover on li :
http://jsfiddle.net/64Grv/1/
li:hover a {color:red}
Try
li:hover a
{
color:yellow;
}
Updated fiddle link is here just changed below
Replace below code
#navigation li a:hover
color:#08298A;
text-decoration:none;
}
with
#navigation li:hover a {
color:#08298A;
text-decoration:none;
}
I want to make simple list but have some problem. When i put some tekst in li element i want to set li width same like li text is..
And also I want when I hover over the li link, to change full li element background color,not just of A element..
This is my code..
#mid_left ul{
width:180px;
list-style:none;
font-family:Verdana Helvetica, arial, sans-serif; font-size:15px;
}
#mid_left li {
width:auto;
background-color:red;
margin:10px 0;
padding:5px;
}
#mid_left li a:hover{
background-color:blue;
}
Example what i try to do is on page..(see footer)
http://buildinternet.com/2010/07/when-to-use-_session-vs-_cookie/
Why don't you just use Firebug to read their CSS?
#mid_left li:hover{
background-color:blue;
}
should take care of your question.
Applies to the a element when you hover over the li.
#mid_left li:hover a{
background-color:blue;
}
Applies to the li element when you hover over it.
#mid_left li:hover{
background-color:blue;
width:200px;
}
Here is a working jsfiddle which (I believe) fits with what you're trying to do. Don't mind the colors, they're for illustration only.
http://jsfiddle.net/qwdd8/1/
edit: updated to remove inline-block, setting width:auto. I forced a height to the LI, but there may be better ways for keeping them from overlapping.
For the width-problem, don't set a width to the ul-element, so change:
#mid_left ul{
width:180px;
list-style:none;
font-family:Verdana Helvetica, arial, sans-serif; font-size:15px;
}
to
#mid_left ul{
list-style:none;
font-family:Verdana Helvetica, arial, sans-serif; font-size:15px;
}
Good evening guys,
This is my first time on this website, so I apologize if I do this REALLY badly.
First and foremost I have a website designed for use with wordpress, and the issue I'm having is that I want my horizontal navigation at the top to look a certain way, but if I leave it the way it is right now it seems to DROP down to a second row...which makes me sad.
So I have decided that I will just make the individual buttons smaller, and then CENTER them so that even if the viewer doesn't have the fon't I'm using (which is IMPACT), then it will just adjust how they are centered, as opposed to dropping down.
I have tried to find a way to do this for DAYS and I have failed repeatedly. I use "firebug" with firefox to test the code changes, and I just can't find a way to make this work.
The webpage is http://www.crapcast.com and the code is just the top of the page, below the logo. I will include current CSS, which is formatted the way it is to fulfill the current usage of the page (but again, tends to show a double row on some older browsers and on phone browsers).
#navigation {
float:left;
position:relative;
z-index:9999;
}
#navigation ul {
font-family:Impact,Charcoal,Times New Roman;
font-size:22px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
#navigation li {
float:left;
position:relative;
}
#navigation li a {
float:left;
letter-spacing:2.45px;
padding:15px;
text-decoration:none;
}
#navigation .main_category {
background-position:center top;
background-repeat:no-repeat;
}
#navigation .active {
background-position:0 10px;
background-repeat:no-repeat;
}
#navigation li.current-menu-item, #navigation li.current-menu-ancestor, #navigation li.current-post-parent, #navigation li.current-menu-parent {
background-position:0 10px;
background-repeat:no-repeat;
}
#navigation ul li ul {
display:none;
left:0;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
position:absolute;
top:50px;
width:230px;
}
#navigation ul li ul li a {
padding:15px 0 15px 36px;
width:194px;
}
#navigation li a.odd {
background-position:18px 23px;
background-repeat:no-repeat;
text-transform:uppercase;
}
#navigation li a.even {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#212121 url(../images/navigation_dot.gif) no-repeat scroll 18px 23px;
}
#navigation li a.odd:hover, #navigation li a.even:hover {
background-position:18px 23px;
background-repeat:no-repeat;
I think your problem is related to your fonts:
#navigation ul {
font-family:Impact,Charcoal,Times New Roman;
...
}
...
...
#navigation li a {
...
letter-spacing:2.45px;
...
}
You are using the width of the fonts to set the width of your items in your menu.
So when there is no Impact font in the system, the items increase their width a lot more.
The width of each character of the Impact font is way to narrow compared to the other ones you put there.
If you try with equivalent width fonts I'm sure you will fix your problem.
In the iPhone, and I guess Android, you cannot find the Impact font there.
Try Helvetica, Arial instead of Impact and change your letter-spacing to 2.0px or something like that.
I don't see the 'two row' problem in any browser, even IE6.
And if want to make sure your visitors gets to view the exact font you're using.. may it be Impact or any sort of fancy fonts. Try using http://www.fontsquirrel.com/fontface/generator.
Just upload your desired font, download the kit & follow the uberly simple instructions (^_^)
this is the code for menu CSS code. It will work on Firefox but not in IE6.
.menu li a:hover .menu ul li:hover a{
background-image:url(images/ye.jpg);
color:#000000;
text-decoration:none;
}
IE6 only responds to :hover on a-elements. You try to use it on a list item.
Unless you pasted incorrectly, it looks like you also might be missing a comma between your two rules?
.menu li a:hover, /* <--- comma */
.menu ul li:hover a {
background-image:url(images/ye.jpg);
color:#000000;
text-decoration:none;
}
Unless you made a typo, the selector looks wrong.
It should be enough with this CSS, unless you have more uls inside the .menu lis.
.menu li a:hover {
background-image:url(images/ye.jpg);
color:#000000;
text-decoration:none;
}
Try this tutorial : www.learnwebdesignonline.com/css-tutorials/css-hover.htm
Razy