CSS - How Could I Get Buttons Like These...

Was working on a new design for one of my sites today and when I inadvertently discovered using buttons as tabs, however...

I am more of a programmer than I am a designer. The tabs look differently in Firefox than they do in IE.

In IE, I give the currently tab more padding than the other buttons and those other buttons stay attached to the <div> below them.

In Firefox/Mozilla, the other buttons are raised up.

See here*

*You will notice that the Home page has rounded corners, while the About page does not; can't decide which one I like better

The other issue I have in IE is that when I button is being clicked/activated, it detaches itself from the <div> below.

--

Maybe a good time to also ask how I can accomplish something using div's or span's that I used to do with table's:

How would I have a 700px wide box, with a div at the top, split 50/50 so that I could have a small logo at the top left and a search box (on the same row) at the top right? I have always:
Code:

<table width="700">
<tr>
<td width="50%">logo</td>
<td width="50%" align="right">search box</td>
</tr>
</table>

--

One mo If I am using HTML 4.01 strict, can I still use: Code:

<td align="center" valign="middle">

or do I have to: Code:

<td style="text-align:center;vertical-align:middle">

Cheers!

Hi,

Im just learning css and notice that alot of elements such as navigation can be done using bullet points.

Im wanting to make the .nav div into a button so i need to to be 30 pixels high and have a have a 1pixel white line underneath it, also is there a way to stop the indent?

my second question is when i add an image as a bullet point its aligned to the bottom of the text, can you change the position of it so its in the middle of it?

Code:

.nav {
	height:30px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight:bold;
	line-height:30px;
}

.bul-sec {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	list-style-position: outside;
	list-style-image:url(images/bullets/sec.gif);
	line-height:30px
}

or is there a better way to do this? Thanks!

I'm designing a web site and I have everything look identical in IE 5.01-7, Firefox 1.5 and Opera 9 (I still have to check mac compatibility) - though one thing that isn't the same on all is the input buttons. In IE, they're relatively the same but in Firefox it is completely off. I've attached an image to show what they all look like. I've tried a few things but I can't manage to get the firefox button to align correctly with the text input to the left of it.

Here's my CSS for the inputs:
Code:

input {
	background: #fff;
	border: 1px solid #000;
	height: 23px; }

any help is appreciated, thank you!

Simple question but I'm curious if anyone can work out how the 'Browse' buttons are done on this page, they have rounded corners yet looking through the css I can't see any images that account for them... http://www.haveamint.com/forum/

I have 2 buttons that are not lining up in IE7. I have it working Safari and Firefox on the MAC, but my PC IE browser won't align the buttons. I have tried everything, but no luck.

Here's the site: http://www.caillouette.com/Utilitrek/four/

Here's the CSS for the button elements:
Code:

#bottombox{
clear:both;
	float:left;
	display:inline;
	width:710px;
	height:61px;
	margin:0px 0px 0px 0px;
}

.collectionBig
{
position: relative;
font-family: arial, helvetica, sans-serif;
background: url(images/nav/bigBN/collectionBig_on.gif) no-repeat;
display: inline;
width: 271px;
height: 61px;
margin: 0 0 0 0px;
padding: 0;
}

.collectionBig a
{
background: url(images/nav/bigBN/collectionBig_on.gif) no-repeat;
display: inline;
color: #000000;
font-size: 11px;
width: 271px;
height: 61px;
float: left;
color: black;
text-decoration: none;
}

.collectionBig img
{
width: 271px;
height: 61px;
border: 0;
background: url(images/nav/bigBN/collectionBig_on.gif) no-repeat;

}

* html a:hover
{
visibility:visible;
}

a:hover img
{
visibility:hidden;
}

.memberBig
{
float:right;
position: absolute;
top:0;
margin-right:5px;
font-family: arial, helvetica, sans-serif;
background: url(images/nav/bigBN/membershipBig_on.gif) no-repeat;
/* white-space: wrap;  */ 
display: inline;
width: 414px;
height: 61px;

padding: 0 0 0 0;
}

.memberBig a
{
display:inline;
color: #000000;
font-size: 11px;
width: 414px;
height: 61px;
float: right;
color: black;
text-decoration: none;
}

.memberBig img
{
width: 414px;
height: 61px;
border: 0;
}

"collectionBig" and "memberBig" are wrapped inside of the "bottombox" div

any help is appreciated.
-S

The problem that I am having is that my nav buttons will not show up unless you click on the the space first than they are there. This is the code it is done is html, css and php help would be great thanks. PHP Code:
<?php ?>
<html>
<head>
<title>CSS</title>
<style type="text/css"> 

a.menu , a.menu:link {
font-family:Arial, Helvetica, sans-serif;
font-weight : bold;
font-size:12px;
line-height : 30px; 
text-align : center;
text-decoration:none; 
color : #ffffff; 
} 
a.menu:visited {
background : url('Images/Untitled-1.png') no-repeat 0% 0%; 
width: 160;
height: 35;
color : #ff0000; 
} 
a.menu:hover {
background : url('Images/Untitled-2.png') no-repeat 0% 0%; 
color : #ffffff; 
font-weight : bold; 
} 
a.menu:active , body {
background : url('Images/Untitled-2.png') repeat; 
font-weight : bold; 
line-height : 30px; 
text-decoration : none; 
text-align : center; 
color : #ffffff; 
} 
body {
background-image : url(Images/brushedmetallighter.jpg); 
} 


</style>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body>
<table width="199" height="210" border="0" align="left" bordercolor="#666666">
  <tr>
    <td width="187" height="80" align="left" valign="top" background="brushedmetallighter.jpg">
      <?php  
$hostname = "xxxx";    
$database = "xxxx";   
$username = "xxxx";   
$password = "xxxx";   
$connpt = mysql_pconnect($hostname, $username, $password) or trigger_error(mysql_error(),E_USER_ERROR);     
mysql_select_db($database, $connpt);    
$sql = "SELECT * FROM mega ORDER BY productsID";    
$result = mysql_query($sql, $connpt) or die(mysql_error());    
if (mysql_num_rows($result) < 1) {    
    print "There are no items to display.";    
}  
else {     
    while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {    
        $Name = $row['productsName']; 
        $productsID = $row['productsID']; 
        $LeftBanner = $row['LeftBanner'];
        $BottomBanner1 = $row['BottomBanner1'];
        $BottomBanner2 = $row['BottomBanner2'];
        $BottomBanner3 = $row ['BottomBanner3'];
        $UpperLeftImage = $row ['UpperLeftImage'];
        $UpperRightImage = $row ['UpperRightImage'];
        $LowerLeftImage = $row ['LowerLeftImage'];
        $LowerRightImage = $row ['LowerRightImage'];      
        $Label = $row['Label'];   
        echo "<a href=\"mg_frame3.php?productsID=".$productsID."\"target=\"mainFrame\" class=\"menu\">".$Label."</a>  ";    
    }  
} 
?>
   </td>     
  </tr>
  <tr>
    <td height="50" align="left" valign="top" background="brushedmetallighter.jpg"><p><br>
        <br>
      </p>
    </td>
  </tr>
  <tr>
    <td height="71" align="left" valign="top" bordercolor="#000000" background="brushedmetallighter.jpg></td>
  </tr>
</table>
</body>
</html>

Hi I have built some nav buttons on my site and they looked as I wanted however when i attached links to them a border appeared around the image can someone tell me how to get rid of them please. DYNAMIC WEB DESIGN thankyou in advance.

I've created navigation buttons in Photoshop by making an 818px wide document, spacing out the words, then slicing them up. My navigation division is 818px wide but when I insert the buttons I created, they don't fit. I do not have any borders around them that I can tell.

Why would this happen?


http://www.oharenoise.org/new/2009_news_releases.htm

Hi,

Im trying to style the button tags, mainly to obtain rounded corners, using images. I can't use '<a>' links to style, which would be simpler, as the button is being used for a program written specifically to use button tags.

I have the button working in IE 5, 8 and 9 and firefox but other incarnations do not.

body { behavior:url( hover.htc ); }

Code:

/* REQUIRED BUTTON STYLES: */                   
button {
            position: relative;
            color:#000000;
            border: 0;
            padding: 0;
            cursor: pointer;
            overflow: visible; /* removes extra side padding in IE */
            outline: 0;
 
}
 
button::-moz-focus-inner {
            border: none;  /* overrides extra padding in Firefox */
}
 
button span {
            position: relative;
            display: block;
            white-space: nowrap;    
}
 
@media screen and (-webkit-min-device-pixel-ratio:0) {
            /* Safari and Google Chrome only - fix margins */
            button span {
                        margin-top: -1px;
            }
}
 
 
/* OPTIONAL BUTTON STYLES for applying custom look and feel: */                 
button.submitBtn {
            padding: 0 15px 0 0;
            margin-right:5px;
            font: normal 12px Tahoma;
            color:#000000;
            text-align: center;
            background: transparent url(btn_sprite2.gif) no-repeat right -140px;
}
           
button.submitBtn span {
            padding: 3px 0 7px 15px;
            height:15px;
            background: transparent url(btn_sprite2.gif) no-repeat left top;
            color:#000;
           
}
           
button.submitBtn:hover, button.submitBtnHover { /* the redundant class is used to apply the hover state with a script */
            background-position: right -210px;
}
           
button.submitBtn:hover span, button.submitBtnHover span {
            background-position: 0 -70px;
}
 
button.submitBtn:active, button.submitBtnActive { /* the redundant class is used to apply the hover state with a script */
            background-position: right -140px;
}
           
button.submitBtn:active span, button.submitBtnActive span {
            background-position: left top;
}

Code:

<button value="submit" class="submitBtn"><span>Submit</span>

The above is the method i have used so far. Does anyone know how i could improve on this, or another method that maybe beneficial?

Any help will be appreciated.

Cheers.

I'm trying to get these CSS buttons into a CSS list, but they aren't stacking vertically and I can't seem to remove the bullet (at least, not on FF). Any insight as to how I can get these to appear top to bottom?

http://www.concrete-creative.com/buttons/buttons_list.html

the HTML:
Code:

<div>
<ul class-"buttons">
	<li class="button1"><a href="#"><span>Gray Buttons</span></a></li>
	<li class="button6"><a href="#"><span>Orange Button</span></a></li>
</ul>
</div>

the CSS:
Code:

ul.buttons {
  list-style-type: none
  }

/* GRAY BUTTON */
li.button1 a {
    background: transparent url('images/gray_ends.png') no-repeat scroll top right;
	font-family: Helvetica, Verdana, Arial, sans-serif;
    color: #000000;
    display: block;
    float: left;
    font: normal 11px arial, sans-serif;
    height: 22px;
    margin-right: 6px;
    padding-right: 8px; /* sliding doors padding */
    text-decoration: none;
}
li.button1 a span {
    background: transparent url('images/gray_body.png') no-repeat;
    display: block;
    line-height: 12px;
    padding: 5px 0 5px 8px;
} 
li.button1 a:hover {
    background-position: bottom right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
}
li.button1 a:hover span {
    background-position: bottom left;
} 

then same CSS for orange button - button6

I am using a CSS with my forms, including setting the color and text font for the <INPUT> buttons. However, if the button is disabled, the colors revert to system default. I've tried but can't seem to set the color if the button is disabled. Is it even possible?

Thanks,

I'm trying to do custom active buttons in a Joomla horizontal menu. But they don't align correctly with the text. I assume it's because the pseudo element with the button is an absolute inside a relative positioned section. The only way I can move it is to fiddle with padding on the relative section. But that fixes some buttons and messes up others.
I've tried a lot of other things but they move the whole element and not just that background image.


Does anyone know a way to do this?

Here's the code:

Code:

ul.frc-hmenu>li>a
{
   position: absolute;
   display: block;
   height: 23px;
   cursor: pointer;
   text-decoration: none;
   color: #4A4A4A;
   padding:3px 12px;
   line-height: 23px;
   text-align: center;
}
/*change from absolute positioning*/
ul.frc-hmenu>li>a:before, ul.frc-hmenu>li>a:after
{
   position: absolute;
   display: block;
   content:' ';
   top: 0;
   bottom:0;
   z-index: -1;
   overflow: visible;
  background-image: url('../images/menuitem.png');


}

Hi I am trying evenly space a header menu and for some reason when it needs to word wrap it shoots the text to the bottom (even if I adjust the width on #header li a).

Thanks so much.

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>

<style type="text/css">
body{
	color: #fff;
	font: 10pt Arial, Helvetica, sans-serif;
}
* {
	margin: 0; 
	padding: 0; 
}
#header{	
	width:760px; 
	margin: 0 auto;
}
#header ul{ 
	height: 44px; 
	line-height: 44px; 
	display: block; 
	list-style: none; 
	background: #1F2C56; 
}
#header li{ 
	display: inline; 
	background: #395A8D;  
	float: right;  
}
#header li a{ 
	height: 44px; 
	line-height: 44px; 
	display: block; 
	width: 94px;
	text-align: center;	
border-left: 1px solid Black;  
	float: left; 
}
#header li a:hover{ 
	background: #1F2C56; 
	text-decoration: none;
}
#header .visual{ 
	height:263px; 
	background: #1F2C56;  
	border-top: 3px solid Black;   
}
a{ color: #FFFFFF; text-decoration: none; }
</style>
</head>
<body>
<div id="header">
	<h1>Welcome</h1>
        <ul>
            <li><a href="link8.html">Link 8 Link 8 Link 8</a></li>
            <li><a href="link7.html">Link 7</a></li>
            <li><a href="link6.html">Link 6</a></li>
            <li><a href="link5.html">Link 5</a></li>
            <li><a href="link4.html">Link 4</a></li>
            <li><a href="link3.html">Link 3</a></li>
            <li><a href="link2.html">Link 2</a></li>
            <li><a href="link1.html">Link 1</a></li>
        </ul>
	<div class="visual"> </div>
</div>
</body>
</html>

Hey,

In Firefox, Safari and Chrome etc, the poll in the sidebar on my website looks perfect: Lil Wayne HQ

But in Internet Explorer, it displays the text underneath the radio button, instead of to the right of the button.

This is what the poll currently looks like in IE:



But this is what I would like it look like, and what it already looks like in other browsers:



Anyone know how I can fix this with css? And I am using a IE specific style sheet.

Thanks

Is there a way to make text flow through to a new line if there is too much text to fit in the defined width of a button?