|
CSS - Css Button Overlaps Formfield
how can i stop my buttons overlapping the formfield, without using spacers? Using margin-top=5px; doesnt work
Code: <style type="text/css">
<!--
* { margin: 0px; padding: 0px; border-style: none; text-align: center; }
.ff { font: 11px Verdana, Geneva, sans-serif; margin: 2px 0px 0px; padding: 0px; border: 1px solid #0FF; color: #000000; }
a.Butt:link, a.Butt:active, a.Butt:hover, a.Butt:visited { color: #FFF; background: #06F; padding: 2px; border: 1px outset #00C; }
-->
</style>
</head>
<body>
<p><input name="pword" type="text" class="ff" id="pword" size="30" maxlength="40" /> </p>
<p><a href="#" class="Butt">login</a> <a href="#" class="Butt">reset</a></p>
<p>ready</p>
<p> </p>
</body>
Similar TutorialsHello, My code overlaps on FF unlike at IE , but I need the positioning at one div though. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sample Title</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
div#con{background:#685127;
margin:10px;
width:350px;
padding:20px;
border: 2px solid #000;
position:relative}
div#con2{background:#cc0033;
height:80px;
padding:0;
margin:0;
border:2px solid #2ff;
float:left}
</style>
</head>
<body>
<div id="con2">
<p>lorem fill column strong column fill fill column strong column fill</p>
</div>
<div id="con">
<p>fill fill column strong column fill</p>
</div>
</body>
</html>
Hi Could someone take a look at this please http://dmumford.bizhat.com/rca/fixtures.htm When viewed in firefox you will see my data table overlaps the div coloured brown, anyone know why this is ? Thanks for your help. I was reading through some articles here about dropdowns and have found that the Son of Suckerfish menus were a good bet. When it rolls over it displays it correctly in IE by putting the dropdown under the link, but in Firefox it puts it smack over the top of it so you cannot read the original link. It worked in both browsers untill I added the main links to what they in the code below to include the pics. I had to put them in divs to align the text next to the icon correctly (verticle mid align next to img?? I jsut set a top margin to push it - is this best?). Heres a link to show you: http://skyyfinancial.com/demo/menutest2.php I put it all together and my list looks like this: Code:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div>
<ul id="nav">
<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
<div id="link" style="float:left; margin-top:12px;">Hard Money Loan General </div></a>
</li>
<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
<div id="link" style="float:left; margin-top:12px;">Real Estate Leasing General </div></a>
<ul>
<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
<div id="link" style="float:left; margin-top:12px;">Lease to Own</div></a></li>
<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
<div id="link" style="float:left; margin-top:12px;">Apartment</div></a></li>
<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
<div id="link" style="float:left; margin-top:12px;">Commercial</div></a></li>
</ul>
</li>
</ul>
</div></td>
</tr>
<tr>
<td><div>
<ul id="nav2">
<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
<div id="link" style="float:left; margin-top:12px;">Home Loans General</div></a>
<ul>
<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
<div id="link" style="float:left; margin-top:12px;">Purchase</div></a></li>
<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
<div id="link" style="float:left; margin-top:12px;">Refinance</div></a></li>
<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
<div id="link" style="float:left; margin-top:12px;">Construction</div></a></li>
<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
<div id="link" style="float:left; margin-top:12px;">Second Mortgage</div></a></li>
</ul>
</li>
<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
<div id="link" style="float:left; margin-top:12px;">Broker Application</div></a>
</li>
<!-- etc. -->
</ul>
</div></td>
</tr>
<tr>
<td><div>
<ul id="nav3">
<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
<div id="link" style="float:left; margin-top:12px;">Commercial Lending General </div></a>
</li>
<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
<div id="link" style="float:left; margin-top:12px;">Financial Analysis</div></a>
</li>
<!-- etc. -->
</ul>
</div></td>
</tr>
</table>
As of right now it works as it should and I only have the one serious issue with it overlapping. Any help on the rest of my questions would be great as well. Other questions I had: Because I had to split them up, I had create a new id for each in IE or it wouldnt work. Only the first one would work. I renamed them and duplicated the code over to the new names ( so theres 3x as much code). I think this could be a javascript issue, but I am not positive. I put my css and javascript at the bottom of this post. I can make a new thread in javascript forum if someone can tell me if that is the problem. ( I looked at it and it seems maybe it needs some type of loop? Not positive ) Lastly, in order to list the lists under eachother, i had split them up into a div per row inside of a table. Otherwise they would just continue across the page. Anyway better of doing this? css: Code:
#menu, #menu ul {
padding: 0;
margin: 0;
list-style: none;
font-family:Arial, Helvetica, sans-serif;
font-size:14px; color:#636363;
font-weight:bold;
}
#menu a {
display: block;
width: 275px;
}
#menu li {
float: left;
width: 275px;
}
#menu li ul {
background-color:#FFFFFF;
position: absolute;
width: 200px;
left: -999em;
}
#menu li:hover ul {
left: auto;
}
#menu li:hover ul, #menu li.sfhover ul {
left: auto;
}
Javascript Code:
sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
Thanks for the help Hi, folks. I'm running into a pretty serious problem to which I'm really, really hoping someone will know a solution. We use a menu system on our site which is made up of layers. It provides for flyout-hierarchical menus, and up until now has caused me no grief. However, now that I've embedded a flash movie onto a particular page the layers that comprise the flyout menu items are hidden beneath the Flash movie. I've tried putting the object tag inside a div and setting the z-index of the div to 1 (and also to -1) but that didn't work. Can anyone take a look and let me know if they have any ideas? http://www.unbc.ca/test.html Cheers and TIA, Pablo i know that IE doesnt support the :hover being added to anything but links, is this the same with :active? was just wondering whether i could have a style change when the user clicks on a form button basically if i add a border around a button in FF i can click the button however the effect of "pressing" a button is lost.. IE mainatain this! is there a solution or will i have to live with it? Hello everyone! I'm currently working with the <button> tag, simply because I want Safari users to be able to see button effects added onto submit buttons. It's pretty simple, except, I'm having problems centering text. Obviously, text-align: center; works for putting the text in the center of the button, but not the middle. I want to vertically align the text as well as horizontally. Anyone? Thanks in advance. I have a series of image buttons with rollovers that are generated in CSS so I've applied a class to each like this: <a class="homebutton" title="Home" href="#">This is the Home Button</a> This works great but I now would like to apply a second class to the href that calls an animated scroll function from a javascript file. I've tested the function on a simple button and it worked perfect: <a href="#divtwo" class="scroll">Scroll Down</a> What I would like to do is essentially combine the two so that it would be something like: <a class="homebutton" title="Home" href="#divtwo" class="scroll">This is the Home Button</a> But when I do that it ignores the "scroll" class and simply jumps to the #divtwo location on the page without the animation. Ideas on how to have two classes on one button? Any help would be GREATLY appreciated! I'm using CSS in my forms - bunches! It's all going very well but there is an issue with the input / file command where adding a class reformats the browse button... it does not for example reformat the submit button. For example <input class="textarea" type="file" name="image1"> would produce the required input box with the MS Browse... button.. however when the class is present it turns off the new formating that XP has and displays the regular old MS buttons.. is there any wayto turn this off with out removing the class. The only way I can think of is to create and ASP or JS componenet to find the files manually with out using the build in stuff that Billy Gates has so kindly provided us with. If any one knows a way round this - much appreciated. Dave I have four social media buttons on my webpage that aren't being activated properly. http://www. andreagriecodesign .com/test/about.html When viewing the page on Firefox, they only become activated when the cursor is dead center of the button or below (to the bottom edge of the button). Any suggestions why and how to fix? I don't have this problem with any other images on any other pages. Thanks Hey, I try to set a button like that: Code:
<!-- Buuton --><table border="0" class="SiteButtonManageOff" onmouseover="this.className='SiteButtonManageOn'" onmouseout="this.className='SiteButtonManageOff'"><tr><td class="SiteButtonManageIn" onClick="location.href='/s/index.asp';">Edit</td></tr></table><!-- Buuton -->
.SiteButtonManageOff
{
font-family: arial;
border-width:1px;
border-color:#cccccc;
border-style:solid;
background-color:#2D3B72;
display: inline;
}
.SiteButtonManageOn
{
font-family: arial;
border-width:1px;
border-color:#cccccc;
border-style:solid;
background-color:#6280F6;
display: inline;
}
.SiteButtonManageIn
{
font-family: arial;
font-size: 11px;
font-weight: normal;
color: #FFFFFF;
white-space: nowrap;
cursor:pointer;
}
In IE it's look great but in FF the text go to the top of the button, any solution? Hello, Does anyone know of a way to design a button using CSS (or something else), and then save it as an image file? Thanks, Jeff Hello. I have created a form with CSS and Divs. My problem is my "Submit your Testimonial" button background is all messed up and doesn't look like my "Reset Form" button in IE 6.0 SP2. It looks fine in Firefox. Not sure how or where this gets changed. It seems to be adding a thicker border or something? Here is the page: http://www.nessphysiotherapy.com/testimonials.php Suggestions? Thanks Matt Hi all, I want to place a PHP button NEXT TO text.When I place a button it goes under the text. This what it looks right now... Code: Member Stats Current balance: 0.00 $ Points: 0.00 Lifetime Earnings: 0.00 $ [Cashout button] I want it to look like this : Code: Member Stats Current balance: 0.00 $ [Cashout button] Points: 0.00 Lifetime Earnings: 0.00 $ This is the Button code... Code: <form class='searchform' action='****URL here****' method='post'><input type='hidden' name='offer'><input type='submit' class='button' value='Cashout!'></form> How can I place it there? Anyone know a trick to get a submit button to display on the same line as an input field and not have it drop. My issue is that it is either pushed down a few pixels, or up a few pixels, as if something is padded. Code: <form action="#" method="post">
<span>Join our mailing list</span>
<input type="text" name="email" value="your e-mail address" class="v-email" />
<input type="submit" value="" name="submit" class="btn" />
</form>
In the above example, the submit button is pushed down a few pixels as if it is padded. In Firefox however, it is pushed up a couple pixels. How can I get it to display inline perfectly. Assume that the styled button and the input field are the same height. ok.. ive been putting together this navigation for my website and i have run into troubles! code is below. link to get a visual: http://www.reston.com/Tysons%20Corner%20COM/ Basically the 4th button is there if you roll over you see theres a link there.. but the image isnt display. Really confused. The 5th one doesnt roll over Code:
/***********************************************************************
4 - PRIMARY NAVIGATION
************************************************************************/
#primary-nav {
position: absolute;
background: transparent url(img/bg/primary-nav-v2.gif) no-repeat;
list-style: none;
width: 760px;
height: 26px;
top: 167px;
left: 1px;
z-index: 10;
padding-left: 5px;
}
#primary-nav li {
float: left;
background-position: 0 -26px;
}
#primary-nav li ul {
position: absolute;
background: transparent url(img/primary-nav-top.png) no-repeat;
list-style: none;
width: 159px;
left: -9999px;
margin-left: -9px;
padding-top: 5px;
}
#primary-nav a {
display: block;
height: 0px !important;
text-decoration: none;
overflow: hidden;
}
#primary-nav li a {
background-position: 0 0;
}
#primary-nav li#nav-1 {
background: transparent url(img/bg/nav-1.png) no-repeat;
margin-right: 1px;
}
#primary-nav li#nav-2 {
background: transparent url(img/bg/nav-2-shopping.png) no-repeat;
margin-right: 1px;
}
#primary-nav li#nav-4 {
background: transparent url(img/bg/nav-4-restaurants.png) no-repeat;
}
#primary-nav li#nav-5 {
background: url(img/bg/nav-5-history.png) no-repeat;
}
#primary-nav li#nav-1:hover,
#primary-nav li#nav-1.sfhover,
#primary-nav li#nav-2:hover,
#primary-nav li#nav-2.sfhover,
#primary-nav li#nav-4:hover,
#primary-nav li#nav-4.sfhover,
#primary-nav li#nav-5.hover,
#primary-nav li#nav-5.sfhover
{
background-position: 0 -26px;
}
#primary-nav li#nav-1 a,
#primary-nav li#nav-2 a,
#primary-nav li#nav-4 a,
#primary-nav li#nav-5 a {
width: 140px;
height /**/: 26px;
padding: 26px 0 0 0;
}
#primary-nav li#nav-1 ul li,
#primary-nav li#nav-2 ul li,
#primary-nav li#nav-4 ul li,
#primary-nav li#nav-5 ul li {
background: transparent url(img/bg/primary-nav-link-up.png) no-repeat;
height: 21px;
}
#primary-nav li#nav-1 ul li.bottom,
#primary-nav li#nav-2 ul li.bottom,
#primary-nav li#nav-4 ul li.bottom,
#primary-nav li#nav-5 ul li.bottom {
background: transparent url(img/bg/primary-nav-bottom.png) no-repeat;
height: 14px;
width: 159px;
}
#primary-nav li#nav-1 ul li a,
#primary-nav li#nav-2 ul li a,
#primary-nav li#nav-4 ul li a,
#primary-nav li#nav-5 ul li a {
overflow: hidden !important;
overflow: visible;
font-size: 10px;
color: #FFF;
height: 19px !important;
height: 19px;
width: 140px;
padding: 1px 3px 2px 19px;
}
#primary-nav li#nav-1 ul li a:hover,
#primary-nav li#nav-2 ul li a:hover,
#primary-nav li#nav-4 ul li a:hover,
#primary-nav li#nav-5 ul li a:hover{
background: transparent url(img/bg/primary-nav-link-over.png) no-repeat 0 0;
}
#primary-nav li:hover ul,
#primary-nav li.sfhover ul {
left: auto;
}
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html class="sIFR-active" id="home" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head style="background-color: rgb(255, 0, 0);">
<title>TysonsCorner.com™</title>
<link rel="shortcut icon" href="#">
<link href="home.css" rel="stylesheet" type="text/css">
<link href="global.css" rel="stylesheet" type="text/css">
<link href="nav1.css" rel="stylesheet" type="text/css">
</head><body>
<div id="container">
<!-- HEADER AREA STARTS HERE -->
<div id="header">
<ul id="primary-nav">
<!-- PRIMARY NAVIGATION (CATEGORIES) STARTS HERE -->
<li id="nav-1"><a href="#" title="Tysons Corner Homepage">Tysons Homepage</a>
<ul>
<li><a href="#" title="Tysons 1 Stores">News</a></li>
<li><a href="#" title="Tysons 2 Stores">Events</a></li>
<li><a href="#" title="More Tysons Shopping">Contact Us</a></li>
<li class="bottom"></li>
</ul>
</li>
<!-- PRIMARY NAVIGATION (BRANDS) STARTS HERE -->
<li id="nav-2"><a href="#" title="Tysons Corner Shopping">Tysons Shopping</a>
<ul>
<li><a href="#" title="Tysons 1 Stores">Tysons I Stores</a></li>
<li><a href="#" title="Tysons 2 Stores">Tysons II Stores</a></li>
<li><a href="#" title="More Tysons Shopping">More Tysons Shopping</a></li>
<li class="bottom"></li>
</ul>
</li>
<!-- PRIMARY NAVIGATION (PRODUCTS) STARTS HERE -->
<li id="nav-3"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
<ul>
<li><a href="#" title="Cajun Food">Cajun</a></li>
<li><a href="#" title="Grilled Food">Grilled</a></li>
<li><a href="#" title="Foreign Food">Foreign</a></li>
<li><a href="#" title=" Full List Restaurants">Complete List</a></li>
<li class="bottom"></li>
</ul>
</li>
<li id="nav-4"><a href="#" title="Tysons Homepage">Home</a> </li>
<li id="nav-5"><a href="#" title="Tysons Homepage">Home</a> </li>
</ul>
</div>
<div id="content">test</div>
</body></html>
If you can spy the issue plz let me know Hey all, Wondering why my second button doesn't sow up (presumably, neither would the 3rd or 4th, though I haven't tried yet on those). Code: http://www.whywaitwebs.com/clients/icc/jobd.php You can see the one button there, there should be a second as well... here is the relevant CSS: Code: #links {
padding-top:120px;
padding-left: 0;
background-repeat: no-repeat;
display: block;
font-size: 0;
line-height: 0;
height: 31px;
margin: 0;
overflow: hidden;
text-align: center;
text-decoration: none;
text-indent: -99999px;
width: 740px;
}
a.link1{
width:185px;
height:31px;
display:block;
background: url(links.jpg);
background-position: 0 0;
}
a.link1:hover{
background-position: 0 31px;
}
a.link2{
width:185px;
height:31px;
display:block;
background: url(links.jpg);
background-position: 0 0;
}
a.link2:hover{
background-position: 185px 31px;
}
Thanks very much in advance!! Hi, Is it possible to change the default button image so that the same image can be used even when different text is set as the value of the button? I mean, can I change the button image in a way, that it will appear correctly when the value is set to "OK" and also when the value is set to "Much Longer Value"? Thanks and Regards, Sim085 |
|||||||