|
CSS - Button Not Submitting In Ie7 But Does In Ff
Similar Tutorialsi 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. 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 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. 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? 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 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 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! 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!! 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 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 Do any questions get answered here? How would I get a simple input form to align with a submit button? You can see the problem at: bit.ly/ovFGhR The CSS txt file: bit.ly/nMyP45 My CSS I think is telling the input text box to be a part of the paragraph above and the button sits below, misaligned. Please help!! I want to display the radio button inline align by right. firstly all options came than the texts display. code for CSS is mentioned below: Code: .label{
display:inline;
position:relative;
margin-right: 0.2em;
_top:0.2em;
}
.rad { display:inline; float:right; margin-right:05.em;}
and here the PHP code where i want to display the buttons. PHP Code: <input type="radio" class="rad" name="ans<?php echo $key+1;?>" value="<?php echo $getarray[$i];?>" > <label class="label"><?php echo "<font size=4>".$getarray[$i]."</font>";?></label> please see the image where the radio options came with wrong display. Morning guys, Im coding my blog and well im having big issues with the tabbed navigaion. Attached to this post you will see a image of what my headers suppose to look like. NOTE: ignore the homepage button NOTE: the green button is what i want to happen as a roll over effect Here is what it looks like in code; URL Check it in firefox and in IE, both have issues. Here is the XHTML: Code: <div id="container" align="center"> <div id="header"> <div id="navbox"> <ul> <li><a href="#">Home</a></li> <li><a href="#">What I Do</a></li> <li><a href="#">Recent Work</a></li> <li><a href="#">Contact Me</a></li> </ul> <img src="images/temp.gif" alt="dg" width="130" height="35" /> </div></div> <div id="content"> </div> <div id="footer"> </div> </div> CSS : Code: body {
margin: 0px;
padding: 0px;
background-image: url(images/bg.gif);
background-repeat: repeat-x;
}
#container {
color: #444444;
line-height: 140%;
font-size: small;
font-family: Tahoma;
padding: 0px;
margin: 0px;
}
#header {
width: 750px;
margin: 0 auto;
height: 195px;
background-image: url(images/headerbg.gif);
background-repeat: no-repeat;
}
#tabnav {
padding-top: 100px;
}
#tabnav ul {
display: table-cell;
list-style-type: none
}
#tabnav li {
list-style: none;
float: left;
margin-left: 5px;
width: 129px;
height: 35px;
background-image: url(images/buttonnormal.gif);
background-repeat: no-repeat;
}
#tabnav li a {
display: block;
padding-top: 8px;
width: 129px;
height: 27px;
font-size: 12px;
font-family: tahoma;
font-weight: bold;
color: #4d4d4d;
text-decoration: none;
}
#tabnav li a:hover {
background-image: url(images/buttonroll.gif);
background-repeat: no-repeat;
width: 129px;
height: 35px;
font-size: 12px;
font-family: tahoma;
font-weight: bold;
color: #ffffff;
text-decoration: none;
}
#tabnav li a:active {
background-image: url(images/buttonactive.gif);
background-repeat: no-repeat;
width: 129px;
height: 35px;
}
#tabnav li a:visited {
}
#tabnav li a:visited:hover {
}
#content {
}
#footer {
}
Could someone help me with this please? and it it to look like the picture Its been troubling me for days. Mak Hi There, If you put images in in replacement for standard form buttons they don't align properly. I have been trying to move away from nested tables with my current work in favour of css layouts and was wondering if there is any quick and easy way to align button images? If you look at the following URL the 'add to basket' buttons are higher up thean they should be..... http://www.storesprite.org/taml/vie...l?category_id=3 Thanks Ok I have a html page with 6 navigation buttons on pressing a navigation button it changes a iframe but what I want to do is have a differant colour for each iframe whick is no problem but can I add some code to the buttons to change the CSS of the main html page? Or does anyone have any idea how I can achieve this Regards Kev Hi all, I'm working on styling a form button at the moment. I've got it styled perfectly to how I want it, with the correct mouseover and mouseout colours (mouseOver = light grey, mouseOut = white). However when the page is loaded initially, the background colour is set to something I haven't manually chosen - darker grey. Once I put the cursor over it and off it, the desired colours appear; however it's just this initial-colour problem that I can't seem to root out. Here's the link. Button.html I believe this initial colour is the background colour of a standard button, but I can't seem to fix it so that it doesn't appear. Anyone know how to fix this? Thanks Jaiyan Code:
<html>
<head><title></title>
<style type="text/css">
INPUT.formButton {
color: Gray;
font: 11px Arial,Helvetica,sans-serif;
text-decoration: none;
background-color: white
border: 1px solid #708090;
text-align: center;
display: block;
width: 150px;
padding: 3px 5px;
/*margin: 7px;*/
}
</style>
</head>
<body>
<form action="/expense_attach.phtml" method="post">
<input type="submit" name="which" class="formButton" onmouseover="this.style.background='#DADADA'; return true" onmouseout="this.style.background='#FFFFFF';" value="Investigator">
</form>
</body>
</html>
|
|||||||