CSS - Input Field With Wrong Colour Background

Hey Guys,

I have validated both my html and css. The only errors that come back for my css is that I have the same colour background and whatnot. BUT that's what I want. So there aren't really errors.

Here is my page:
jacenta.com/whichsbc

What I have been attempting to achieve and been utterly failing is:

If you goto the menu on the side and hover over you will see a light grey background show up. Basically I want that to extend to ethier ends of the box. Is there anyway for this to be done??? I've tried everything and I just can't seem to figure this one out. A good example of what I am looking for is in my drop down menu at the top when you select a heading and a dropdown comes down, hover over an item and a light blue background will show up.

It's probally something simple... I know. But ahh. It's just so frusterating!

If someone could help me out I would apperciate it so much!
You all are such a great help.
- Jacenta

Hi all,
the page i am talking about is...

http://sydneynightowl.com.au/home.php

The problem is the the div 3column seems to start too early in the work flow and also the background colour on the header bleeds.

The div and header should be starting after the first 3 divs (which are set to float)

I hope i have explain this correctly, any help is apriciated.

The css code is

Code:

@charset "utf-8";
/* CSS Document */


body {background-color:#000000;
	background-image: url(../images/background.jpg);
	background-repeat:no-repeat;
	background-position:center top;
	color:#FFFFFF;
	font-family:"Lucida Sans Unicode", sans-serif;
	font-weight:100;
	font-size:12px;}


#container {
	position:absolute;
	width: 700px;
	left:50%;
	margin-left:-358px;
}
	
	#header {
	margin-top:0px;
	height: 115px;}
	
		#toolbar {height: 30px;
		line-height:10px;
		padding: 0px 10px;
		font-variant:small-caps;
		}

	#cornerlogo {
	position:fixed;
	top:5px;
	left:5px;
}

	
	#topnavigation {height: 35px;
	line-height:35px;
	text-align:center;}
	
	#content { border-bottom:1px;}

		.3column {width:695px;
		padding-right:5px;
		padding-left:5px;
		margin-top:5px;}
	
	
		#leftcolumngl {float:left;
		width:223px;
		height:370px;
		padding-right:5px;
		padding-left:5px;
		padding-top:5px;
		margin-top:15px;
		margin-right:5px;
		border:#FFFF00 solid thin;}
	
		#middlecolumngl {float:left;
		height:370px;
		width:225px;}
	
		#rightcolumngl {float:left;
		height:370px;
		width:230px;
		padding-left:5px;}
	
		#leftcolumn { float:left;
		width:230px;
		padding-right:5px;}
	
		#middlecolumn {float:left;
		width:230px;}
	
		#rightcolumn {float:left;
		width:230px;
		padding-left:5px;}
		
		#imagecolumn {float:left;
		width:340px;
		padding-left:5px;}
		
		#infocolumn {float:left;
		width:340px;
		padding-left:5px;}
		
	
	#footer {height: 30px;
	border:thin solid #FFFFFF;
	clear:both;
	text-align:center;
	margin-bottom:30px;
	margin-top: 30px;
	line-height:25px;}

#bgfirst {
	position:absolute;
	top:190px;
	left:0px;
	width:90%;
	height:200px;
	margin-bottom:20px;
	background-color:#00CC00;
}

#bgsecond {position:absolute;
	top: 400px;
	right:0px;
	width:90%;
	height:200px;
	background-color:#660066;
}



a:link {color: #fffc00; font-weight: normal;}
a:active {color: #fffc00; font-weight: normal;}
a:visited {color: #fffc00; font-weight: normal;}
a:hover {color: #fffc00; font-weight: bold;}

a.event:link {color: #fffc00; font-weight: normal;}
a.event:active {color: #fffc00; font-weight: normal;}
a.event:visited {color: #fffc00; font-weight: normal;}
a.event:hover {color: #fffc00; font-weight: bold;}

a.club:link {color: #fffc00; font-weight: normal;}
a.club:active {color: #fffc00; font-weight: normal;}
a.club:visited {color: #fffc00; font-weight: normal;}
a.club:hover {color: #fffc00; font-weight: bold;}

h1 { text-align:center;
	color:#000000;
	background-color:#fffc00;
	margin-left:3px;
	margin-right:3px;
	font-variant:small-caps;
	font-size:22px;}

h2 {text-align:center;
	color:#fffc00;
	background-color:#333333;
	margin-left:3px;
	margin-right:3px;
	font-variant:small-caps;
	font-size:18px;}

.ourprice {
	display:inline;
	color:#FF0000;
	line-height:20px;
	font-variant:small-caps;
	font-size:14px;}


img {
	border-color:#fffc00;
	border-style:solid;
	border-width:thin;
}

img.noborder { border:none;}

img.venues {float:left;	
	margin:10px;}

	.mainnavimages {
	border-color:#979700;
	border-style:solid;
	border-width:thin;
}

p {line-height:15px;}

strong { color:#fffc00;}

I have a FAQ web page which has a list of questions at the top which link to the answer for that question (on that page).

I have used 'on click' to change the background colour of the div which contains the answer to the question you have clicked on.

Code:

<a href="#name" onclick="document.getElementById('namediv').style.background='#99ccaa'" >click here !!! </a><br>

And this works, but it becomes a problem when i scroll back to the questions and click on another one. It will change the background of the new div as required but I can't find a way to revert the previous div back to its original background color.

any ideas?

Thanks

I was wondering on this table I have I want it to have black background colour but I want to change the opacity to where you could see the background image too

Hi there,

I have a text field which I would like to change colour on hover. Any ideas how I would do this?

I tried using a class with a:hover but it didn't work.

Thanks!

Hi all, I would be very grateful if someone could help me out with a coding problem. Basicaly, I have two columns and I want both to fill with the background colours with the same height. My sample coding is below. (NOTE: Ive had to remove the urls from the DOCTYPE and <html>, please replace with correct code).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="w3.org/1999/xhtml" >
<head><title>100% Height CSS Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">

#all{
WIDTH: 950px;
PADDING-TOP:0px;
MARGIN: 3px auto 0px;
POSITION: relative;
BACKGROUND-COLOR: #fff;
FLOAT: left;
}
#leftside{
FLOAT:left;
WIDTH:169px;
MARGIN: 0px;
PADDING: 0px;
BORDER-RIGHT: 1px solid #999;
POSITION: relative;
BACKGROUND-COLOR: #ededed;
}
#rightside{
BORDER: 0px solid #000;
WIDTH:775px;
FLOAT:left;
POSITION: relative;
MARGIN: 0px 0px 0px 5px;
BACKGROUND-COLOR: #F4CDD8;
}
</style>
</head>
<body>
<div id="all">
<div id="leftside">a<br>b<br></div>
<div id="rightside">c<br>d<br>e</div>
<div>
</body>
</html>

In the above example I would like the "leftside" div to stretch to the same height height as the "rightside" div filling the area up with the "leftside" background colour and also extending the 1px border.

All help much appreciated.
Thanks

Soph

Can anyone tell me how to change the background colour of all tooltip texts on a web page?

Cheers.

Dear all,

I have an iframe of variable width (width="100%") and a fixed height. Within the iframe I show multiple divs containing calendar appointments.

Quite often, the number of divs that are side by side causes the iframe to scroll horizontally, which is fine, but when I scroll to the right I lose my background image and colour in the portion that wasnt visible when the page loads.

If I reduce the screen size down, and refresh, then expand again, the area of the iframe that appears has a white blank background.

Is there any way around this?

Many thanks, Mark

Essentially I'm creating a 'drop-up' menu without javascript.

Here is my test page:
http://38.99.165.179/kalle/cssmenu/index3.html

PROBLEM:

I am using 'float: left' to arrange my main menu items horizontally.

With 'float: left' it seems like I lose control over the #menu_container background color. It's supposed to be a shade of red. If I delete 'float: left', I regain control over the container background, and the shade of red appears.

Why is this happening?

This problem doesn't seem to exist if I use 'display: inline' instead of 'float: left', to sort my main menu items horizontally. BUT 'display: inline' causes other issues, and so for various reasons I'd like to try to keep using float: left.

Here is my code:
Code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>

<style>

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #555555;
    color: #EEEEEE;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

#top {
    width: 100%;
    height: 80%;
    text-align: center;
}


/* MENU BAR */

#menu_container {
    width: 100%;
    margin: 0 auto;
        
    /* doesn't work!!! */
    background-color: #CC6666;
}

   
#menu {
    font-size: 16px;
}

#menu a {
    text-decoration: none;
    color: #FFFFFF;
}

#menu ul {
    
}

#menu li {
    position: relative;
    display: block;
    height: 1.2em;
    margin-right: 50px;
    text-align: left; 



/* PROBLEM */
/* With 'float: left', the background color disappears for #menu_container. */
/* Disable 'float: left' here, and you see what I mean. */
/* Why does this happen?

    float: left;

/* The 'float: left' is needed to sort my main menu items horizontally. If I use the alternate way 'display: inline', then my drop-up menus don't automatically attach themselves to the correct spot. I want to avoid manually positioning them. */

}

#menu li ul {
    background-color: #BBBBBB;
    position: absolute;
    bottom: 1.2em;
    display: none;
    list-style: none;
    width: 110px;
    padding: 0px;
}

#menu li:hover ul {
    display: block;
    white-space: nowrap;
}

#menu li:hover ul li {
    display: block;
}

#menu li:hover ul li:hover {
    background-color: #777777;
}

/* END - menu bar */


#bottom {
    margin-top: 70px;
    height: 150px;
    text-align: center;
    clear: both;
    padding-top: 2px;
    background-color: #222222;
}


</style>

</head>


<body>


<div id="top">

    content

</div>

<div id="menu_container">
   
    <ul id="menu">
        <li><a href="#">Home</a>
            <ul>
                <li><a href="#">Anything</a></li>
                <li><a href="#">Needed</a></li>
                <li><a href="#">Here?</a></li>
            </ul>
        </li>
        <li><a href="#">Something 1</a>
            <ul>
                <li><a href="#">Imagine</a></li>
                <li><a href="#">the</a></li>
                <li><a href="#">Possibilities</a></li>
                <li><a href="#">of Magic!</a></li>
            </ul>
        </li>
        <li><a href="#">Something 2</a>
            <ul>
                <li><a href="#">Taste</a></li>
                <li><a href="#">the</a></li>
                <li><a href="#">Sensation</a></li>
                <li><a href="#">of the Bubbles</a></li>
                <li><a href="#">on your Tongue!</a></li>
            </ul>
        </li>
        <li><a href="#">Something 3</a></li>
        <li><a href="#">Contact</a></li>
    </ul>


</div>


<div id="bottom">

    content

</div>

</body>
</html>

Hi guys,

Is it possible in CSS to change the colour / image of the page background dynamically. So that as you hovered over different links , the background of the page changed. I know you can do this in JS but how would you do it in CSS?

I was kinda thinking something like:

a.linkname:hover, a.linkname:focus body { background-color:#00FF00; }

but thats just a guess and doesnt work lol.

Many Thanks,

Alvin.

I would like the link colour to change and the background of the <li> to change as well. I can't figure out what CSS to use for it though. I have made bold and underlined the li I want to change on hover.

Code:

<li id="menuitem_2mainnav">
<a id="menulink_2mainnav" class="mainlevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=2">Meetings</a>
<ul id="menulist_2mainnav">
<li id="menuitem_2_1mainnav"><a id="menulink_2_1mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=14">TEST 1</a></li>
<li id="menuitem_2_2mainnav"><a id="menulink_2_2mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=15">TEST 2</a></li>
<li id="menuitem_2_3mainnav"><a id="menulink_2_3mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=16">TEST 3</a></li>
<li id="menuitem_2_4mainnav"><a id="menulink_2_4mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=17">TEST 4</a></li>
</ul>
</li>

I have tried:
Code:

#menulist_2mainnav li:hover{ color:#000000 !important;  }

But it doesn't change the links text colour.

input fields in tabs not appearing in IE7 though it works fine with IE8 and Firefox3

http://www.refinethetaste.com/html/cp/default.asp?Section=orders&Process=AddOrder

Hi all,

I cannot figure why last two form inputs at the following website appears wrong near the end.

I also included a screenshot.

http://www.refinethetaste.com/yk/addproject.asp

I am using the following code to create a custom input field:

Code:

input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus { outline: 0 none; }

This essentially removes the border from the input field however this does not work in Safari on a Mac (works fine in Safari on Windows). Any one know how to fix this?

Hi

I am currently having problems changing the size (or width) of INPUT fields within a form when they have a class assigned to them. If I remove the class that is assigned then the size attribute works fine.

Do I need to specify the size of the INPUT field within the CSS file that holds the class? And if so how do I do it?

Thanks in advance for any help.