CSS - A:hover .span{display:block} Not Working In Ie6?

Hello,

First, I am new to webcoding so I apologise if what I am asking is too stupid. I am doing a little navigation bar for my blog with the hover effect. My problem is that the hover effect only work when I use {display: block;} but I need it to be inline, because when doing {display:block} it displays vertically. However when I do {display: inline-block;} the list items do show up inline horizontally but they show up only as images, neither does the hover effect or the links work.

Second, in IE and in chrome it displays differently.

Thank you very much for all the help!

Also, here is the code!

CSS

#header-wrapper2{
height:80px;
width:580px;
margin:0;
float: right;
background-color: #000000;
}

#header-wrapper2-navbar{
height: 40px;
width: 243;
margin-top:40px;
margin-left: 3px;
padding:0;
}

#header-wrapper2-navbar li{
margin:0;
padding:0;
}

#header-wrapper2-navbar li,#header-wrapper2-navbar a{
height: 40px;
display: block;
}

#news{
left:0px;
width:78px;
background: url('') 0 0;
}

#news a:hover{
background: url('') 0 -44px;
}

#products{
left:78px;
width:88px;
background: url('') -78px 0;
}

#products a:hover{
background: url('') -78px -44px;
}

#about{
left:166px;
width:77px;
background: url('') -166px 0;
}

#about a:hover{
background: url('') -166px -44px;
}

HTML

<div id='header-wrapper2'>
<ul id='header-wrapper2-navbar'>
<li id='news'><a href='()></li>
<li id='products'><a href='></li>
<li id='about'><a href='></li>
</ul>
</div>

I've been seeing people using ul and li tags to make their menus in css.

So I've started trying to do the same, here is an example.

But obviously here, the buttons are not displaying inline. All of the styles are within the page code itself. I've got a display: inline style on the li tag, but it's still not working?

How can I get this to work or is there any other way to get a ul li menu to display this way?

Hi!

Is is vicious to display a table as "display: block" to force margin-collapsing?

Otherwise there's no margin collapsing with other elements.

Thanks

I have a drop down menu located at http://www.fieldspianos.com/new/index.php

If you hover over the menu items they turn black and white when you are right on the text but not if you are in the area surrounding it which is what I also need to occur. You can view the source on the page for the html but I will include the css below.

This is the basic layout of the menu:
Code:

<ul>
<li>About Us</li>
     <ul>
         <li><a href="#">Locations</a></li>

etc..etc..etc..


Here is the css:
Code:

/*Begin Content of drop down menu*/
a {
	outline:none;
}

* html div#dropdownmenu ul {
	float: left;
}

* {
	margin: 0;
	padding: 0;
}

div#dropdownmenu {
	float: left;
	background-color: #C8C6C6;
		font-size:11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

div#dropdownmenu ul li {
	list-style-type: none;
	float: left;
	background-color: #000000;
	position: relative;
}

div#dropdownmenu ul li:hover {
	list-style-type: none;
	background-color: #000000;
}


/*Hides drop downs when not overed over and reveals them when they are hovered over.*/
body div#dropdownmenu ul li ul {
	display: none;
}

body div#dropdownmenu ul li:hover ul {
	display: block;
}



div#dropdownmenu ul li ul {
	margin: 0;
	width: 13em;
	position: absolute;
	left: -1px;
}

div#dropdownmenu ul li ul li {
	width: 100%;
	background-color:#bdb35e;
	color: #660000;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	padding: 3px;
}

div#dropdownmenu ul li ul li:first-child {
	border-top: 1px solid #000;
}

div#dropdownmenu ul li ul li:hover {
	color: #FFFFFF;
	background-color: #000000;
}

div#dropdownmenu ul li ul li a {
	color: #660000;
	text-decoration:none;
	outline: none;
}

div#dropdownmenu ul li ul li a:hover {
	color: #FFFFFF;
	background-color: #000000;
	text-decoration:none;
	outline: none;
}

div#dropdownmenu ul li:hover ul, div#dropdownmenu ul li ul:hover {
	display: block;
}

Any help is greatly appreciated, this seems like it would be a simple fix but I can't figure it out. Maybe I am overlooking some small detail. Thanks!

I would like to have a table with 6 td's across and the 7th td to break line and default to under neath the first td.
I tried using display block and firebug outline the area where my content should be but it is still to the right of the 6th td.
I would just like to do this to keep it in the same row so i can hide and show it dynamically outside of those first 6 td's.

i coudnt find the forum search feature...?

but anyone help with wht i am doing wrong? much appreciated

I have this CSS for my "globalNav" class:

.globalNav {width: 217px; background-image:url(images/barbackground.jpg); background-color: #1B619E; background-repeat: repeat-x; border-right: 1px solid #075284; position: absolute; left: 0px; top: 125px; height: 450px}

.globalNav A {background-color: #004E82; border-top: 1px solid #407AA1; border-bottom: 1px solid #00375C; border-right: #00406B; color: white; font-weight: bold; padding: 2px 5px 2px 5px; text-decoration: none; display: block}

This is my code for globalNav:

<div class="globalNav">
<a href="#">Global 1</a>
<a href="#">Global 2</a>
<a href="#">Global 3</a>
<a href="#">Global 4</a>
<a href="#">Global 5</a>
<a href="#">Global 6</a>
</div>


For whatever reason, display block won't work in IE unless I remove the width, height, and positioning. Anyone know any tricks to make this work?

can someone explain why a specific CSS works in IE but not Mozzila? This is the Page and its the word "button" directly below the logo.

Code:

.Page_Title {font-size: 13px;
             color: #999;
             font-weight: bold;
             padding-left: 25px;
             background-color: #eeeeee;
}

Any ideas?

Thanks.

Hi, I guess this is a fairly easy one to sort out. I have a main menu of 5 links which i want to highlight when you mouse over the area. At the moment I have coded the menu in a table which I know is not so great, but its the only way I can get the background image to display across the whole of the <div> and this only works in FF, in IE6 you have to mouse over the link text itself before the highlighting will appear. I just want to know the "correct" way to code this so that when the mouse hovers over the line the link is on the highlighting will appear.

Take a look at www.webwizedezignz. co . uk to see what its like at the moment.

Cheers in advance

I'm very aware of all sorts of IE bugs, but I've never heard of a safari bug with the display:block property within an inline anchor. Does anyone have a solution for this bug? view this page with the latest Safari:
animalcrossingbay.net/cmps_index.php

I have several <a>'s on my page, where their display is set to block, and I want to put a submit button in each of them. When I put the <button> in the <a></a>, though, the submit button doesn't go to the processing page, it just goes where the <a> was headed.

How to I get the submit button to go to the processing page and not where the <a> was headed? I could put the submit button below the <a> block, but that's very unattractive, and I want the user to be able to click anywhere in the block to go to the next page (except for where the submit button is.) Any help much appreciated!

I'm trying to use image sprites to make images on my website switch to another image when the user hovers over them. These images are each placed in their own td that are set at different percentages within a 100% table.

The reason I need to use percentages is because I want the table and images to re-size to fit each individual computer screen. They do this beautifully, but when I add the image sprite, which has "display: block;" in its CSS, my images wont re-size. They just cut off.

Is there a way to use image sprites without the display: block code? Or is there a similar way to make images seamlessly grow and shrink to fit a browser without using a width percentage?

Thanks!

So, I'm trying to figure out the proper way to use display:block based on what my needs are.

My needs:
I'm wanting to create essentially a box with a header, image, and paragraph inside. I want to make it so that when any part of the box is hovered over, it is essentially a link... (changes text color when hovered over).

However, I know certain elements aren't supposed to go within <a> tags, such as <h3>, <div>, <p>, etc....

In IE, when I do it this way, using those tags inside the <a href> tag, it works fine. However, in FF, some of the elements aren't applied....

For example, I have 3 boxes of equal length, which all have the same CSS classes, just different content. When I load the page in FF, 1 of the 3 will make the header, image, and paragraph seperate links, and not use the class I have set for it. (The 1 of the 3 isn't always the same... it could be the first box, or second box, or even third box).

Sorry for the vagueness, but I'm trying to explain the best I can... If you need to see the code (or site), let me know... Because of the business I'm creating this for, I can't publish it's link until they launch officially. But I can create another page that has the same code to show you what is going on.

If you need further clarification as well, just let me know.

Thanks.

Hi,

I have this style for font size. I then use span class to use it, but it only works in IE and not FF. Any ideas why? Have i got something wrong with it?

PHP Code:
 .11px {
font-family: verdana, arial, tahoma;
font-size: 11px; } 

I'm new to CSS (Other then very basic CSS)

Anyway I have a menu which uses a tags, that also have a background image.

I am adding in the background image with CSS, I have the display set to inline-block as block would put everything to the next line and inline would not allow for the image to show though in full (only enough for the text inside the link.

Anyway using display: inline-block it seems to put padding on the links, is there a way to remove this? i want the background images from the links to be next to each other with no spacing or padding.

My code:

#buttonBackground {
display: inline-block;
background-image:url(/media/images/button_background.jpg);
background-repeat:no-repeat;
width: 113px;
padding-top: 4px;
height: 23px;
text-align:center;
vertical-align: bottom; (This isn't working either?)
}

and a sample link:

<a href="default.asp" id="buttonBackground">HOME</a>

Anyone able to help me remove the padding surronding the a tag?

I hate IE so much.

Ok, I have a list, with a display:inline-block; property.
Wanting a row of images, with text under each mage.

I thought I solved this with this property, but with IE, it doesnt put the images in a row, but places them one under the other.

FORM:
Code:

<ul>
<li>
<img src="images/news/dummy.png" name="News" width="100" height="100" /><br />
Category<br />
00/00/00</li>
</ul>

CSS:
Code:

#images ul
{
list-style:none;
text-align:center;
}

#images li
{
margin-right:15px;
display:inline-block;
}

Either a fix for IE, or a alternative to this would be great.
Thanks in advance, Joe.