|
CSS - Form Elements Bleed Through Floating Div In Ie
I have a floating div with a solid background and a z-index set to 20. I have a form "behind" the div. For some weird reason, the drop down elements on the form "bleed through" the div.
Is there any way to fix this? Similar TutorialsHello all, sorry if this is a "newb" question, but I am having trouble with the code on my site. The element "#arrival" is not displaying the proper height unless I literally type code in to fill it up the full 400px. I haven't implemented any paragraph styles, I just want to get the basic elements done for this landing page. How would I go about fixing this? Also, do I have to "float" the "#arrival" element? I would like to have the dog house overlap the first div element of the dog jumping (#dog) like in the jpg. Any help would be greatly appreciated. Here is what it should like: http://i33.tinypic.com/2uh7evm.jpg But this is actually what is happening: http://www.amandambruce.com/DROH/index.html Thanks in advance, Amanda p.s. here is the code directly from the source: Code:
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Transitional//EN"
"(URL address blocked: See forum rules)">
<html xmlns="html://(URL address blocked: See forum rules)/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>The Dachsund Rescue of Houston</title>
<style type="text/css">
body{
background: url(images/background.jpg) no-repeat top center;}
#contain{
width: 800px;
height: auto;
margin-left: auto;
margin-right: auto;
}
#menu{ width: 466px;
height: 98px;
float: right;
margin-top: 15px;
}
#dog{ width: 491px;
heigth: 257px;
margin-top: 19px;
margin-left: 22px;
float: left; }
/* margin-top is the menu plus the remaining pixels (19) so,
from the very TOP of the page. I guess you keep "adding"
*/
#community{ float: right;
background: url(images/community_spot.jpg) no-
repeat;
width: 231px;
height: 259px;
margin-top: 19px;
margin-right: 22px;
}
#arrival{
clear: right;
background: url(images/arrivals.png) no-repeat;
width: 800 px;
height: 400 px;
}
p{
font-family: helvetica;
font-size: 12pt;
color: #000000;
padding-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="contain">
<div id="menu">
<a href="about.html"><img src="images/about_btn.png" alt="About
button" title="About" border="0"/></a>
<a href="adopt.html"><img src="images/adopt_btn.png" alt="Adopt
button" title="Adopt" border="0"/></a>
<a href="help.html"><img src="images/help_btn.png" alt="Help
button" title="Help DROH" border="0"/></a>
<a href="resources.html"><img src="images/resources_btn.png"
alt="Resources button" title="Resources" border="0"/></a>
<a href="contact.html"><img src="images/contact_btn.png"
alt="Contact button" title="Contact" border="0"/></a>
</div>
<div id="dog">
<img src="images/jumping.jpg" border="0"/> </div>
<div id="community"> </div>
<div id="arrival"> lll
</div></div>
</body>
</html>
Reply With Quote
Hi! Does floating an inline element automatically converts it to a block-level element? If yes, what does this give for an inline element: float: left; display: inline; ? Is it bad practice to float inline elements directly? (img, span, input, and so on). Thanks I am using a <dl> list to render dates and titles for a press release page. I want to display the date first and then display the title on the same line next to the date. If the title needs to wrap to more than 1 line, it should not wrap below the date - its left margin should be consistent. Simple example: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
dl {
width: 100%;
}
dt, dd {
float: left;
margin: 5px;
}
</style>
</head>
<dl>
<dt>12.24.2006</dt>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi consectetuer cursus lacus. Nullam imperdiet diam sit amet dui. Suspendisse nonummy, ante ut pharetra vehicula, augue neque porta arcu, vel adipiscing lorem augue eu purus. Aenean vulputate pellentesque arcu.</dd>
</dl>
<body>
</body>
</html>
My problem is that with a long title that wraps to more than 1 line, Firefox is putting the <dd> on its own line - it will not float it next to the <dt> as it should. If you change the title to something shoter like Code: <dd>A ShortTitle</dd> It displays as it should. Any ideas why this is happening? Hi everybody I'm having a problem (only in IE) with the following layout http://www.ruthwhiteyoga.com/shop/test2/list.htm The left fixed width column, right fixed width column and centre stretchy column all sit inside a holding div (100% wide) The left column is floated left, the right column is floated right and the centre column has margin left and margin right values that clear the two floated columns The problem is that in IE the floated product divs (in the centre column) ignore the margin-right. As soon as the content ends in the right column the product divs spill into the area that the margin should be keeping them out of (you might need to alter the width of your window to see this happening) I think the problem is that I can't give the centre column a width (100%) because it also needs a margin to force the content in - 100% plus 230px for the left column plus 230px for the right column will totally screw up the page Beyond sticking these three columns into a table (something I really really don't want to do) or using percentage for all three columns (so I can give the centre column a width value) is there anything I can do about this. Really appreciate any help Hello all. I've got a layout with three columns. The first column contains the navigation and the second two are variable content. All the columns can be any length, and consist of any number of divs; each div is a bordered block of variable-sized content. The problem is if I want to float an image around some text in the second or third column. Since the image is floating, its container doesn't extend fully, and the image overlaps the border and the block below it. However, if I put a "clear: both" spacer within the block, then the container clears elements in the left or right columns, and extends way too far down! What I really need is a way to just clear a single level of nesting, but "clear" seems to be pretty much all or nothing. I've also tried the pseudoclass :after trick to extend the box, but that didn't appear to do any good. It just added the content inside the border of each block, but doesn't enclose the image at all. I hope somebody has suggestions - I actually haven't found anything about this problem, but perhaps I'm just looking for the wrong terms. It seems like a fairly fundamental thing to do... Thanks! Hi all, I've made a rough mock up of how i want a site to look but not sure the best way to do it in css yet. The idea would be that the colour would bleed all the way to on side (alternating side) between sections, the image attached should help explain. Not so worry on exact code, but more conceptually how the best way you think to do it would be. sorry about the size of the image not sure how to make it smaller Please take a look at this mumbo jumbo example: Testing page The objective is to adjust the images of the four round corners of a content rectangle. Now the problem is that the two bottom round corners are not showing properly in Firefox 1.0. They bleed outside the rectangle towards the bottom, with a few pixels. And no matter what I change or try, it won't work. Second, the corners don't look even close to right in Internet Explorer 6.0. Do you have any idea how to correct this thing? Thanks a lot for anyone taking the time to help and give tips. hello everyone, 'tis my frist post... Just had'a quick question I'm working on a page, and l'm trying to create a text input with a background image, that has NO border, so that it nests inside of a table cell with no excess fluff. However the input has a 1 pixel high "line" that spans across the top of the element, and a 1 pixel high "line" across the bottom as well. I can't seem to get rid of it, is it possible? here's the code, l was trying to get to work with this: Code:
<HTML>
<HEAD>
<style>
/*Left searchBar Cap*/
td.leftCap{
background-color: #c0c0c0;
background-image: url('images/searchBar_1x1.gif');
background-position: 0px 0px;
width: 28;
height: 50;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0;
}
/*right searchBar Cap*/
td.rightCap{
background-color: #c0c0c0;
background-image: url('images/searchBar_1x3.gif');
background-position: 0px 0px;
width: 34;
height: 50;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0;
}
/*searchBar Top bar*/
td.searchTop{
background-color: #c0c0c0;
background-image: url('images/searchBar_1x2.gif');
background-repeat: repeat-x;
background-position: 0px 0px;
width: 425;
height: 16;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0;
}
/*searchBar Bottom*/
td.searchBottom{
background-color: #c0c0c0;
background-image: url('images/searchBar_3x1.gif');
background-repeat: repeat-x;
background-position: 0px 0px;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0;
width: 425;
height: 15;
}
/*center of searchBar*/
td.searchCen{
background-color: limegreen;
background-position: 0px 0px;
width: 425;
height: 19;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0;
}
BODY {
background-color: #c0c0c0;
background-attachment: scroll;
margin-top: 0;
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
}
/*input*/
.input {
background-image: url('images/searchBar_2x1.gif');
color: #191919
border-width: 0px;
padding: 0px;
border-style: hidden;
border: 0;
border-top-width: 0px;
border-bottom-width: 0px;
font-family: Comic Sans MS (cursive);
font-weight: extra-bold;
font-size: 10pt;
width: 425;
height: 19;
}
</style>
</HEAD>
<BODY>
<center>
<form>
<table cellpadding="0" cellspacing="0">
<tr><td>
<table cellpadding="0" cellspacing="0">
<tr>
<td class="leftCap">
</table>
<td>
<table bgcolor="#c0c0c0" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="searchTop">
<tr>
<td class="searchCen">
<input type="text" size="40" class="input" value="search google ... ">
<tr><td class="searchBottom">
</table>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td class="rightCap">
</table>
<td>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#c0c0c0" align="center">
<a onClick="javascript:searchGoogle();" href="#">
<img border="0" src="images/searchBar_1x4.gif" width="113" height="50"></a>
</table></table>
</form>
<script>
query = document.forms[0].elements[0].value;
function searchGoogle(){
if(query){
url = "http://www.google.com/search?hl=en&lr=&q="+query+"&btnG=Search";
window.open(url);
}}
</script>
</BODY>
</HTML>
Thanks for your help! Samantha G. Hi, If I place an input field or select box in a div and set the display to none - will that variable still be sent when the form is submitted? Thanks, I'm new to CSS. But I need to position four form elements in a very thin nav bar. Here is my HTML code: Code: <div id="nav">
<div id="nav_left">
<a href="index.php">Home</a> |<a href="complete.php"> Browse All Titles</a> | <a href="author.php">About Author</a></div>
<div id="bookmark"><table width="307" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="64" valign="middle">Browse by</td>
<td width="113" valign="middle"><form action="" method="get">
Title
<select name="var" size="1">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
<option value="I">I</option>
<option value="J">J</option>
<option value="K">K</option>
<option value="L">L</option>
<option value="M">M</option>
<option value="N">N</option>
<option value="O">O</option>
<option value="P">P</option>
<option value="Q">Q</option>
<option value="R">R</option>
<option value="S">S</option>
<option value="T">T</option>
<option value="U">U</option>
<option value="V">V</option>
<option value="W">W</option>
<option value="X">X</option>
<option value="Y">Y</option>
<option value="Z">Z</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="0">0</option>
</select><input type="image" class="inputbutton" src="img/input.jpg" alt="" width="15" height="15">
</form></td><td width="123" valign="middle"><form action="" method="get">Decade <select name="var" size="1">
<option value="1950">1950s</option>
<option value="1960">1960s</option>
<option value="1970">1970s</option>
<option value="1980">1980s</option>
<option value="1990">1990s</option>
<option value="2000">2000s</option>
</select><input type="image" class="inputbutton" src="img/input.jpg" alt="" width="15" height="15">
</form></td>
</tr>
</table>
</div>
</div>
And here are the applicable styles: Code: #nav {
background-image: url(../img/navback.jpg);
background-repeat: no-repeat;
background-position: left top;
border: thin solid #7a8251;
height: 25px;
width: 771px;
}
#nav_left {
width: 400px;
float: left;
text-align: left;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 7px;
padding-left: 5px;
}
#bookmark {
width: 300px;
float: right;
text-align: right;
display: inline;
padding-top: 5px;
padding-right: 3px;
padding-bottom: 5px;
}
.inputbutton {
margin-right: 3px;
margin-left: 3px;
}
select {
display: inline-table;
font-size: 75%;
padding: 0px;
}
But, the form elements are sitting low and not aligning as needed. The input buttons are sitting too high. They sit lot in Firefox on a Mac. On IE 7, the dropdowns sit even lower. I don't know what to do! Any ideas? Jeremy Hello all. I'm trying to get the form layout to mimic a table like structure so that all the input elements line up. I have the following: Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Search Home</title>
<style type="text/css">
.csc-mailform-field label { width: 10em; }
#mailformformtype_mail { margin-top: 1em; }
</style>
</head>
<body>
<form action="contact/contact-form/" id="mailform" enctype="multipart/form-data" method="post" onsubmit="return validateForm('mailform','First_Name,First%20Name,Last_Name,Last%20Name,Email,Email,Email_Message,Ema il%20Message','','','')">
<fieldset class="csc-mailform">
<div class="csc-mailform-field">
<label for="mailformFirst_Name">First Name</label>
<input type="text" name="First_Name" id="mailformFirst_Name" size="14" value="" />
</div>
<div class="csc-mailform-field">
<label for="mailformLast_Name">Last Name</label>
<input type="text" name="Last_Name" id="mailformLast_Name" size="14" value="" />
</div>
<div class="csc-mailform-field">
<label for="mailformSuffix">Suffix (e.g. Ph.D., M.D.)</label>
<input type="text" name="Suffix" id="mailformSuffix" size="14" value="" />
</div>
<div class="csc-mailform-field">
<label for="mailformEmail">Email</label>
<input type="text" name="Email" id="mailformEmail" size="14" value="" />
</div>
<div class="csc-mailform-field">
<label for="mailformPhone_Number">Phone Number</label>
<input type="text" name="Phone_Number" id="mailformPhone_Number" size="14" value="" />
</div>
<div class="csc-mailform-field">
<label for="mailformCompany">Company/Institution</label>
<input type="text" name="Company" id="mailformCompany" size="14" value="" />
</div>
<div class="csc-mailform-field">
<label for="mailformEmail_Message">Email Message</label>
<textarea name="Email_Message" id="mailformEmail_Message" cols="14" rows="5"></textarea>
</div>
<div class="csc-mailform-field">
<input type="submit" name="formtype_mail" id="mailformformtype_mail" value="Send Message" class="csc-mailform-submit" />
</div>
</fieldset>
</form>
</body>
</html>
I thought that by setting the width of the labels, it would force the inputs to all line up but apparently this does nothing. Also I did not place the size attributes on the input, this is a form generated by a CMS. Anyone able to guide me to find where to edit form elements? I want to change the 'check box' and 'drop down menu's' Suppose I have: 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>
<script type="text/javascript">
//**********************************************************
// This function adds another field to the form based on
// what field name is passed in.
//**********************************************************
function add_item(field) {
if(!document.getElementById) return; //Prevent older browsers from getting any further.
var field_area = document.getElementById(field + '_field');
var all_inputs = field_area.getElementsByTagName("input"); //Get all the input fields in the given area.
// Find the count of the last element of the list. It will be in the format '<field><number>'. If the
// field given in the argument is 'friend_' the last id will be 'friend_4'.
var last_item = all_inputs.length - 1;
var last = all_inputs[last_item].id;
var count = Number(last.split("_")[1]) + 1;
if(document.createElement) { //W3C Dom method.
var li = document.createElement("li");
var input = document.createElement("input");
input.id = field+count;
input.name = field+count;
input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
li.appendChild(input);
field_area.appendChild(li);
} // end if(document.createElement)
else { //Older Method
field_area.innerHTML += "<li><input name='"+(field+count)+"' id='"+(field+count)+"' type='text' /></li>";
} // end else
} // end function add_item(field)
//**********************************************************
</script>
</head>
<body>
<form>
<table>
<tr>
<td><label for="images">Images (for banner and sidebar)</label></td>
<td>
<ul id="images_field">
<li><input type="text" id="images_0" name="images_0" /></li>
</ul>
</td>
<td><input type="button" id="button" value="Add another image" onclick="add_item('images');" /></td>
</tr>
<tr>
<td colspan="3">
<label for="misc">Misc. (anything that falls outside of the above categories)</label><br />
<textarea rows="3" cols="3" id="misc" name="misc"></textarea>
</td>
</tr>
<tr>
<td colspan="3"><input type="submit" id="submit" value="Submit project" /></td>
</tr>
</table>
</form>
</body>
</html>
When I click the add another image button, it will create a new form field for another image. But it keeps stacking them on top of the elements below it. I would like for everything below it to be shifted down when a new element is inserted. I tried the clearfix method but couldn't get it to work. Thoughts? Edited to say that this behavior only appears in FireFox. Is it possible to style form elements (specifically checkboxes) with pure CSS, and without JS? I'm thinking of something similar to this (but without the JS): http://ryanfait.com/resources/custo...-radio-buttons/ Hi there! I've been diving into trying to make mobile web pages and though a lot of my former CSS experience helps me a great deal I get a bit perplexed about forms. I'd like to have all my form elements at the width of a 100% except for checkboxes and radiobuttons. Now, this almost works out all the way but I have a problem with how the strict rendering handles form elements. I've tried using both XHTML Mobile 1.2 and XHTML Mobile 1.0 but the same problems arise; Apart from wanting the elements to go 100% in width, I also would like them to respect margins. If I simply set the width to a 100% and my right and left margins to, say, 5px, I get the field pushed in 5 pixels from the left but I cannot get the 5 pixel indent from the right. I have tried using a wrapper div but it suffers the same result. I have figured out that this can have something to do with the rules of mobile pages provided by the XHTML mobile rendering specification but I'm now wondering if there's anything I can do to accomplish this. I've found out that mobile pages that have full width elements look (in almost all cases) very good on most handsets I've tested. Thanks in advance! Hi, I'm having a problem and was wondering if CSS can help me do what I need to. I have to build a form based on dynamic fields taken from a database. The form front end has to look nice and conform to spacing that is laid out in the paper version of it. An example of this would be: Name: ____________________ Address: __________________ That's the first line of one particular form. The problem lies in the fact that these fields are all dynamic, so I have no idea how long the field label will be. In one case it could be "Name" but in another it could be "First Name". I'd like to know if it's possible to set the text fields to automatically size to fill in the empty space left between each label. Otherwise I guess I'm going to have to setup a table that has a fixed width for the labels based on what I think could be the longest label name. If you have a CSS menu that has drop down menu items and form elements near the top of the page, the menu disappears behind the form elements in IE 6. For an example of what I'm talking about, go he http://www.swingleandassociates.com/catalog/tindex.php?section=c.training.php Hover your mouse over CONDITIONS and you'll see that the menu disappears behind the drop down box. Does anyone know how to fix this? I tried messing with z-index but it didn't seem to work. I may not have done it right thought. Anyone got an answer for that problem? The form elements (<select> specifically) on a background layer seem to be showing through a <div> layer positioned above it (at least in IE.) Does anyone know a trick or some such to stop the form elements from the background from showing through the <div>? t h a n k s Hi guys, I've tried for days but can't solve the problem. I wanna position a text field and button in the middle of a div or table. FF displays well, IE of course not (always on top). Vertical alignment etc doesn't work! Any suggestions? I have this code that works fine in firefox and MSIE and the whole page validates with tidy (Green checkmark). I can't post a URL because its on a private server. The part that isn't quite right on safari is these: I have a table load of these that are part of a big form named commit. <td width="30" bgcolor ="#e7e7e7"><input type ='submit' class='button_notdone' value='2' onclick="javascript:mapbutt(document.commit,2)" /></td> This is the javascript code for mapbutt function mapbutt(myform,dex) { myform.action.value='map'; myform.qnum.value=dex; } The javascript does not return false so after clicking and setting the action and qnum values it is supposed to fall through to the form's serverside action, which it does. The problem is the styling of the submits. On every other browser they are whatever color I specify in the style I assign to them. Here is the style for button_notdone .button_notdone { font-family: monospace; font-weight: bold; width: 28px; height: 22px; color:#ffffff; background:#000000; } The background color in this case is supposed to be black and the text color is supposed to be white, and on safari it is black text on grey. I tried changing "input" to "button" which does indeed display the background color but unlike a submit it does not display the value. I need the text of the value to show in the text color over the button or submit or whatever it ends up being. How can I get these submits to look like what I want on safari. Thank you. |
|||||||