6 replies [Last post]
foodmonkey
Offline
newbie
Melbourne Australia
Last seen: 3 years 50 weeks ago
Melbourne Australia
Timezone: GMT+11
Joined: 2010-12-06
Posts: 5
Points: 6

#logo{margin: 0 auto;
position: absolute;
border: 0;
top: 0px;
left: 0px;
width: 850px;
height: 862px;
background-image: url(../images/logo_with_mirror_fade.png);
background-repeat: no-repeat;
}

if i have this in my style sheet - text input boxes don't work on the page.
if i comment it out of the css then everything works - if i comment it out of the html everything works - what is going wrong?

some of the html

foodmonkeys

These are our values

regia
regia's picture
Offline
Enthusiast
San Diego
Last seen: 16 weeks 5 days ago
San Diego
Timezone: GMT-4
Joined: 2010-10-24
Posts: 307
Points: 347

Post your HTML

in code tags, otherwise it is invisible!

Deuce
Deuce's picture
Offline
Guru
Las Vegas, NV
Last seen: 1 year 31 weeks ago
Las Vegas, NV
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4422
Points: 1841

Being position:absolute they

Being position:absolute they are probably behind another div or something.
Hard to say without a link or all of your html/css.

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

foodmonkey
Offline
newbie
Melbourne Australia
Last seen: 3 years 50 weeks ago
Melbourne Australia
Timezone: GMT+11
Joined: 2010-12-06
Posts: 5
Points: 6

here's the css and html - cheers

/* --------------------------
foodmonkeys style sheet
----------------------------*/
*{
	margin:0;
	padding:0;
}
 
html,body {height: 100%;}
 
body{
	background:#fff;
	font:12px/18px Tahoma, Arial, Helvetica, sans-serif, black;
	background-image:url(../images/fm_logo_watermark.jpg);
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position: 50% 100%;
}
 
/* setup the banner */
 
#banner{margin: 0 auto;
		Height: 40px;
		Color: black;
		Font-size:18px;
		Text-align: right;
		Padding-top:1em;
		background-image: -moz-linear-gradient(left, white, #336633, #a4f772);	
}
 
/* the foodmonkeys logo */
 
#logo{margin: 0 auto;
		position: absolute;
		border: 0;
		top: 0px;
		left: 0px;
		width: 850px;
		height: 862px;
		background-image: url(../images/logo_with_mirror_fade.png);
		background-repeat: no-repeat;
}		
 
/* the map stuff */
 
#map_canvas {width:300px;
			height:300px;
			border:1px solid black;
}
 
/* text alignment for the main text */
 
p.main {position:absolute;
		top:8em;
		left:20em;
		}
 
/* the vertical cascading menu */
 
/* ================================================================ 
This copyright notice must be untouched at all times.
 
The original version of this stylesheet and the associated (x)html
is available at <a href="http://www.cssplay.co.uk/menus/flyout2.html
Copyright" rel="nofollow">http://www.cssplay.co.uk/menus/flyout2.html
Copyright</a> (c) 2005-2009 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
.menu {
	z-index:1000;
	font-size:120%;
	margin:60px 0px 50px 2px;
}
 
/* remove all the bullets, borders and padding from the default list styling */
 
.menu ul {
	padding:0;
	margin:0;
	list-style-type:none;
	width:200px;
	border-width:200px;
}
 
/* position relative so that you can position the sub levels */
 
.menu li {
	position:relative;
	background-image: -moz-linear-gradient(left, #336633, #a4f772);
	height:26px;
}
 
/* get rid of the table */
 
.menu table {
	position:absolute; 
	border-collapse:collapse; 
	top:0; 
	left:0; 
	z-index:100; 
	font-size:1em;
}
 
/* style the links */
 
.menu a, .menu a:visited {
	display:block; 
	text-decoration:none;
	height:25px;
	line-height:25px;
	width:199px;
	color:#000;
	text-indent:5px;
	border:1px solid #fff;
	border-width:0 1px 1px 0;
}
 
/* style the link hover */
 
* html .menu a:hover {
	color:#fff; 
	background:#949e7c;
}
 
.menu :hover > a {
	color:#fff; 
	background:#949e7c;
}
 
/* hide the sub levels and give them a positon absolute so that they take up no room */
 
.menu ul ul {
	visibility:hidden;
	position:absolute;
	top:0;
	left:200px; 
}
 
/* make the second level visible when hover on first level list OR link */
 
.menu ul li:hover ul, 
	.menu ul a:hover ul {
		visibility:visible;
	}
 
/* keep the third level hidden when you hover on first level list OR link */
 
.menu ul :hover ul ul{
	visibility:hidden;
}
 
/* keep the fourth level hidden when you hover on second level list OR link */
 
.menu ul :hover ul :hover ul ul{
	visibility:hidden;
}
 
/* make the third level visible when you hover over second level list OR link */
 
.menu ul :hover ul :hover ul{ 
	visibility:visible;
}
 
/* make the fourth level visible when you hover over third level list OR link */
 
.menu ul :hover ul :hover ul :hover ul { 
	visibility:visible;
}
[code]
 
and the html
 
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="foodmonkeys.com.au" />
	<title>foodmonkeys</title>
	<link href="css/fm_style.css" rel="stylesheet" media="all" />
</head>
 
<!-- ok here's the banner -->
 
<div id="banner">
	<h1>foodmonkey values</h1>
</div>
<!-- and the logo -->
<div id="logo">
</div>
 
 
<!-- now here is the include for the vertical menu bar -->
<!--#include file="includes/html/fm_vertical_menu.html" -->
 
<div class="body">		
	<p class="main">These are our values
	</p>
 
<p <input type="text"></p>	
</div>
 
 
[code]
 
am i doing something completely wrong here?

foodmonkey
Offline
newbie
Melbourne Australia
Last seen: 3 years 50 weeks ago
Melbourne Australia
Timezone: GMT+11
Joined: 2010-12-06
Posts: 5
Points: 6

oops - forgot the server side include for the menu bar

<!-- now here is the vertical menu bar -->
 
<div class="menu">
	<ul>
		<li><a href="../index.shtml"> foodmonkeys home</a></li>
		<li><a href="../fm_our_values.shtml"> our values</a></li>
 
<!-- heroes and zeroes menu -->
 
		<li class="sub"><a 	href="#nogo"> heroes and zeroes &#187;</a>
			<ul>
				<li><a href="../fm_heroes.shtml"> heroes</a></li>
				<li class="sub"><a href="#nogo"> zeroes &#187;</a>
					<ul>
						<li><a href="fm_zeroes_name_and_shame.shtml"> name and shame</a></li>
						<li><a href="fm_zeroes_get_a_list.shtml"> get a list</a></li>
					</ul>
				</li>
			</ul>
		</li>
 
		<!-- find my ingredient -->
 
		<li><a href="../fm_find_my_ingredient.shtml"> find my ingredient</a></li>
 
 
		<!-- clusters menu -->
 
		<li class="sub"><a href="#nogo"> clusters &#187;</a>
			<ul>
				<li><a href="..//fm_what_is_a_cluster.shtml"> what is a cluster</a></li>
				<li><a href="..//fm_join_a_cluster.shtml"> join a cluster</a></li>
			</ul>
		</li>
 
 
		<li><a href="#nogo">Item 5</a></li>
		<li><a href="#nogo">Item 6</a></li>
 
	</ul>
</div>
 
[code]

foodmonkey
Offline
newbie
Melbourne Australia
Last seen: 3 years 50 weeks ago
Melbourne Australia
Timezone: GMT+11
Joined: 2010-12-06
Posts: 5
Points: 6

sorry guys - didn't read the

sorry guys - didn't read the forum guidelines - it was like 3 in the morning and i was bouncing off the walls - trying to see if embedding divs would work (didn't) i just can't understand why the inclusion of the logo stuffs up text input boxes.

if you want to have a look at the page itself let me know a time and i'll put the server online (foodmonkeys.dyndns.org) - i keep it as localhost for sevurity reasons.

any help - much appreciated - that bloody #logo id - grrrrrr

foodmonkey
Offline
newbie
Melbourne Australia
Last seen: 3 years 50 weeks ago
Melbourne Australia
Timezone: GMT+11
Joined: 2010-12-06
Posts: 5
Points: 6

ok - got it solved

my borders were incorrectly set - i used the pix measurements from GIMP and these were overwriting the text box - instead of 850 by 862 - 80px by 85px was enough -

could i have altered the behaviour my varying the z-depth on the elements? you know forcing some into the background - what's considered best practice?

cheers from down under.