|
CSS - Vanishing Button
Similar TutorialsI've got a dropdown menu that works great in Firefox, Opera, Safari, and Chrome. In fact it ALMOST works in IE7, except for an annoying bug that happens when the person is using the drop down menu. As the user moves the mouse partway down the menu, the menu will suddenly vanish, making the rest of the menu unusable. The live website is he http://www.a-1plumbing.us/100.html Here's my menu CSS code: Code: /* menu */
#navcontainer {padding-left:235px; margin:0; height:36px;}
#menu {
position:relative; display:table;
list-style-type:none;
margin:0; padding:0;
/* width:552px; */
height:24px;
z-index:5;
}
.menuitem {
position:relative; display:table-cell; float:left;
margin:0; padding:0;
width:128.75px;
overflow:hidden;
}
.menuitem ul {
display:none; /* hide it first off */
margin: 0; padding:0;
list-style-type:none;
}
.menuitem li { margin:0; padding:0; overflow:visible;}
.submenu li { position:relative; z-index:10;}
/* 2-class selector to have higher weight than ".menuitem ul" */
.submenu .subsubmenu {
position:absolute;
top:0;
display:none;
}
.menuitem:hover {
overflow:hidden;
z-index:10;
position:relative;
}
.menuitem:hover ul{
display:block;
}
.meunuitem:hover, .menuitem:hover ul{
position:static; }
.submenu li:hover > .subsubmenu {
display:block;
}
#menu a {
display:block;
margin:0; padding: 0.2em 0.5em;
text-align:center;
text-decoration:none;
font: normal small-caps 1em Verdana, Arial, Helvetica, sans-serif;
color:black ! important;
}
#menu a:hover { text-decoration: underline; color:black }
.menuitem a { background-color:transparent;}
#menu .menuitem ul a { background-color:#D71921; color:white ! important; font-size:0.8em ! important;}
#menu .menuitem ul ul a { background-color:darkblue; color:white ! important; font-size:0.8em ! important }
#pindex #mindex, #p100 #m100, #pcontact #mcontact, #ptips #mtips {color: #005D8B ! important;}
#menu .menuitem ul a#sm { background:#D71921 url('../images/seal_small.gif') no-repeat center left ! important; padding-left: 1.5em ! important; }
#phoneNum {display:none}
.submenu {border:1px solid white;}
Here is my HTML code: Code: <div id="navcontainer">
<ul id="menu">
<li class="menuitem"><a href="home.html" id="mindex"><strong>Home</strong></a></li>
<li class="menuitem"><a href="100.html" id="m100"><strong>Guarantee</strong></a>
<ul class="submenu">
<li><a href="./100.html#s_100">100% Guarantee</a></li>
<li><a href="./100.html#s_time">On Time or it's Our Dime</a></li>
<li><a href="./100.html#s_seal" id="sm">Technician<br />Seal of Safety</a></li>
<li><a href="./100.html#s_clean">Cleanliness</a></li>
</ul>
</li>
<li class="menuitem"><a href="tips.html" id="mtips"><strong>Tips</strong></a>
<ul class="submenu">
<li><a href="./tips.html#ttt">Toilet Trouble</a></li>
<li><a href="./tips.html#tfd">Flooded Basement</a></li>
<li><a href="./tips.html#twl">Water Leak</a></li>
<li><a href="./tips.html#tbs">Blocked Sewer</a></li>
<li><a href="./tips.html#tnhw">No Hot Water</a></li>
<li><a href="./tips.html#tgl">Gas Leak</a></li>
<li><a href="./tips.html#tcd">Clogged Drain</a></li>
</ul>
</li>
<li class="menuitem"><a href="./contactus.html" id="mcontact" ><strong>About Us</strong></a>
<ul class="submenu">
<li><a href="./testimonials.html">Testimonials</a></li>
<li><a href="./service_area.html#serve">Service Area</a></li>
<li><a href="./feedback.html#feedback">Feedback Form</a></li>
<li><a href="./contactus.html#phone">Phone</a></li>
<li><a href="./contactus.html#address">Address</a></li>
</ul>
</li>
</ul>
</div> <!-- end NAV container -->
I've tried using "position: static" in several divs, but this bug does not seem to be related to the other (and well known) IE7 positioning bugs. Does anyone have any idea why the menus vanish as you mouse down them? It appears to be triggered if there is a DIV under the menu. For example, on this page ( http://www.a-1plumbing.us/tips.html ) the "Guarantee" drop down menu works quite well, because there is no div under neath it. (due to the improper floating IE7 bug, which I'll fix soon. :P ) Thanks for any input! -Suthern101 I'm currently attempting to make a simple template using CSS that has a fixed height header, an expandable content area beneath it and a fixed height footer that stays at the bottom of the page. The footer should move down when the content area expands further than the page height - I don't want to have a scrollable div for the content area. Easy, right? The problem I'm having is that I need to define 'overflow:auto' within the content div in order for it to be able to expand further than the initial 100% when necessary, but the inclusion of this property causes the footer to disappear without a trace in Safari. It works correctly in Firefox however. Below is the CSS stylesheet and the HTML from the template file. Any ideas what I can do to fix this problem? Thanks. Code:
html, body {
background-color: #efefef;
height: 100%;
margin: 0;
}
#container {
height:100%;
min-height:100%;
width: 790px;
padding: 0 5px;
margin-right: auto;
margin-left: auto;
margin: 0 auto -20px;
background-color: #fff;
overflow: auto;
}
#container .header {
float: left;
margin-top: 5px;
width: 790px;
height: 130px;
background-color: #000;
color: #fff;
}
#container .navigation {
float: left;
width: 790px;
height: 30px;
margin-top: 5px;
}
#container #content {
float: left;
margin-top: 5px;
width: 790px;
font-family: Verdana, arial;
font-size: small;
}
#spacer {
clear: both;
width: 790px;
height: 20px;
}
#footer {
height: 20px;
width: 790px;
margin-left: auto;
margin-right: auto;
background-color: #cecece;
}
Code:
<html>
<head>
<title>
{TITLE}
</title>
<link rel="stylesheet" type="text/css" href="./css/main.css" />
<link rel="stylesheet" type="text/css" href="./css/navigation.css" />
<link rel="stylesheet" type="text/css" href="./css/content.css" />
</head>
<body>
<div id='container'>
<div class='header'>
{HEADER}
</div>
<div class='navigation'>
{NAVIGATION}
</div>
<div id='content'>
{CONTENT}
</div>
<div id='spacer'></div>
</div>
<div id='footer'>
{FOOTER}
</div>
</body>
</html>
In Internet Explorer 6, the following HTML and CSS with negative margins causes the first letter of the heading to disappear: Code: <html>
<head>
<style type="text/css" media=screen>
#siteBody {
position: absolute;
top: 100px;
left: 100px;
width: 700px;
margin-left: 2em;
}
h1 {
margin-left: -1em;
}
</style>
</head>
<body>
<div id="siteBody">
<h1>This is the heading</h1>
<p>
This is the content.
</p>
</div>
</body>
</html>
There are ways to get the negative margin to work in IE properly, but at a loss of functionality. For instance, if I remove the width property from the siteBody CSS, and change the position to 'relative', the letter will appear. Also, if I remove the div and just place the 'siteBody' id on the body tag, then the first letter will appear. Any help is greatly appreciated as I've been searching for a solution for a couple of days now. Thanks, ---atomgiant 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. 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, 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 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 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 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 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 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! 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? 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? 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, I need quick help with this: I need to make matrix 4x4 of images. Each image has radio button over it (input type=radio). No table. Please show me some code with it - I know only the image has z-index:-1 and button z-index:0 but I have some trouble with position:absolute vs relative. It shouldn't be hard. Example: h t t p://img.photoamp.com/pa/07/07/21/gmqeT8S.jpg TIA 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 Is there a way in CSS to set rollover effects on form buttons? Such as different bg colour, diff fonts, etc.. |
|||||||