CSS - Hover Tips

I am on this big personnal project where I want to make a site where people can go look for resources and references.

Saying that, I would like to know which programming language should be included in the project. CSS, HTML, VB, Cobol, Java, will be included for sure.

Also, if anyone have good links to add to the links page, or to check out, please let me know. You can contact me at drummer_sweety@yahoo.ca Of course the devshed forum will be part of the links

Thank you for your help!

PHP Code:
#searchBox {
    float:right;
    margin:0em;
    padding:0em;
    margin-right:0.2em;
    clear:right;
    background-image:url(/images/site/backgrounds/searchBox.jpg);    
    /*border:black solid 1px;*/
}
#searchBox input {
    margin:0em;
    padding:0em;
    background-color:#d2c5a2;
    
}
.submit {
    background-color:#6F5F42;;
    color:#483e2b;
    font-size:smaller;
    font-weight:bold;
    margin:0em;
    padding:0em;
} 





and html

PHP Code:
<div id="searchBox">
            <form action="search.php" method="post" style="margin:0em; padding:0em;">
                <fieldset style="border:1px solid #a29383; margin:0em; padding:0.1em;">
                    <label>What are you shopping for?</label><input type="text" name="search" size="14"/>
                    <input class="submit" type="submit" name="submit" value="Search" />
                </fieldset>
            </form>        
        </div> 





i dont know but for some reason in firefox the three elements of form (label, input & submit) are on the same line but in IE they are in two lines.. I have just tried width:55%; but the submit box goes outside the top box.. but in FF the searchbox goes haywire and take the whole box!!

also is there anyway to make sure that the font sizes are same/similar in both IE and FF?

http://www.zahra-zahra.com/fullpage.html


EDIT: to say i have tweaked it and firefox problem is solved but IE still puts the form OUTSIDE The box..

Hi,

I recently started migrating from a table layout to a css based one. I've probably made the classic mistake of using IE to develop only to find it looks awful in other browsers e.g. firefox.

Being relativity new to CSS I've looked at various websites and if I understand the issue correctly some browsers like firefox adhere strictly to the CSS standard whereas IE doesn't.

My question is would I be better developing separate CSS files for each browser type and use a script to determine which one?

If anyone can point me at a resource that points out the differences between IE CSS standards and other browsers I'll be internally grateful.

Regards

Paul

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!

look at my site. it is very boxy and almost TOO structured. is there a design trick i can use to mix it up a little? specific examples would be greatly appreciated.

Thanks for taking the time to read my question.

This works in FF but not IE6. What do I need to change to make it work

I have borders around my images which are links and I want the border color to change on hover

HTML
Code:

<a href="LisaClarkDesigns_About.htm"><img class="ImgNav" src="images/AboutNav.gif" alt="Click here to navigate to the About Lisa Clark Designs page." /></a>

CSS for container
Code:

img.ImgNav {
border: 1px solid #999999;
padding: 0px;
margin: 0px 10px 0px 10px;
width: 52px;
}

CSS for hover
Code:

<a href="LisaClarkDesigns_About.htm"><img class="ImgNav" src="images/AboutNav.gif" alt="Click here to navigate to the About Lisa Clark Designs page." /></a>
<a href="LisaClarkDesigns_Portfolio.htm"><img class="ImgNav" src="images/PortfolioNav.gif" alt="Click here to navigate to the Lisa Clark Designs Portfolio page." /></a>
<a href="LisaClarkDesigns_Fees.htm"><img class="ImgNav" src="images/FeesNav.gif" alt="Click here to navigate to the Lisa Clark Designs Fees page." /></a>
<a href="LisaClarkDesigns_Contact.htm"><img class="ImgNav" src="images/AboutNav.gif" alt="Click here to navigate to the Lisa Clark Designs Contact page." /></a>

Thanks,

Brad

I know this has been discussed loads. And I have read a tonne of articles telling people it cannot be done in pure CSS. But I wanted a little clarification.

I want a hover: over a <tr>. Now Im not fussed if it doesn't work in IE5/6 even 7 (although obviously it would be nice!) its a little feature to help users. My app is internal, so as long as the CSS doesn't break the page, then IE users just wont get the hover, while others will.

This is what I have:

.result_lines{
background-color:#EAEAEA;
}

.result_lines tr:hover{
background-color:#666666;
color:#FFFFFF;
}


Now, having not done this, I wasn't even sure if the order of my syntax was correct, so a little direction would be perfect.

Note: I don't want to use JS.

hey there i was wondering why on hover the .indexThumbDiv dosnt display as a block in IE6 but in IE7 and firefox it does.

head:
PHP Code:
.indexThumbDiv{display:none;}
a.indexThumbA:hover .indexThumbDiv{display:block;} 




body:
PHP Code:
<a class="indexThumbA" href="link">
span class="indexThumbDiv"></span>
<img src="link" width="120" height="120" border="0"  style="vertical-align:bottom"/>
</a> 

Hi there,

I would like for the background of a text link to change colour when the mouse hovers over the text... no problem

a:hover {background:#72b83c}

However I would like to STOP the background of an image doing the same thing.... this I am having trouble with. I've tried

a:hover img {background:none}
a:hover img {background:none!important}

But it doesn't seem to work (the background still changes behind the image (showing the colour around the left and bottom of the image).

Can anyone offer any suggestions?

Paul

Hi,

I have found a nice feature on this website;

click here

When you mouse over grey - orange images another div comes out.

What this is called?

Is there any example code that I can work on?

Thanks.

I have the following css
Code:

#navigation li {
	display: inline;
	background: url(Images/greenbg.gif) repeat-x center top;
	text-align: center;
	padding: 0;
	margin-right: 4px;	
	float: left;
}

for the following html
Code:

<div id="navigation">
<ul>
<li><a href=""><span>Menu1</span></a></li>
<li><a href=""><span>Menu2</span></a></li>
<li><a href=""><span>Menu3</span></a></li>
<li><a href=""><span>Menu4</span></a></li>
<li><a href=""><span>Menu5</span></a></li>
</ul>
</div>

<br style="clear: both" />

and I can't figure out how to get the background to change when I hover. Anyone have any ideas? I tried this to no avail
Code:

#navigation a:hover li {
	display: inline;
	background: url(Images/greenbghover.gif) repeat-x center top;
	text-align: center;
	padding: 0;
	margin-right: 4px;	
	float: left;
}

Hi guys,
Was wondering if you could tell me where I'm going wrong with this. Basically I have used the class "WhiteBoldLinks" on some text BUT when the mouse goes over the link I cant get the underline and text colour to work which is assigned to the class "#WhiteBoldLinks a:hover" .

How do I use this? Or have I coded it wrong?

PHP Code:
.WhiteBoldLinks {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
}
#WhiteBoldLinks a:hover {
    text-decoration: underline;
    color: #FF0000;
} 

http://www.knowledge2work.com/testing/test.htm is a link to a menu that I have created. Essentially what I want to happen is that the mouseover on the submenu changes the background color and the text color as well. I have done this using td:hover and ids and it works just fine in Firefox but not at all in IE. Why is this?

i have 2 divs div1 and div2

there is an image in div2 and there is a link in div1, by default the image in div2 is hidden and i have used
#div2 img{
visibility: hidden; // also i tried display: none;
}

when i move the mouse over the link in div1 i want the image in div2 to appear

following is my code
#div1 a:hover #div2 img1{
visibility: hidden; or display: none;
}

the image in div2 is not appearing

without using javascript or jquery can this simple effect be done by using css code

can someone tell me the correct syntax to show the image

please advice.

thanks

Hello:
I would like to have a big font size of title on my web site for search engine optimuzation purpose, I wrap the title with a H1, then I define H1 in css as
FONT-WEIGHT: bold;
FONT-SIZE: 34px;
COLOR: #000000;

in other place I also have
A:hover {COLOR: #6460AD; TEXT-DECORATION: underline;

the title I put in is a hyper link, so when the mouse hovers on the title, the title shown as underlined, I want it to be TEXT-DECORATION: none

I don't know the syntax in H1 definetion to disable the underline