CSS - Vertical Css Navigation Menu Buttons Overflow When Adding 10+ Buttons

Hi,

Does anyone know how to veritcally align text using CSS? like <tr valign='middle'> when using tables.

My page is on:
http://www.3003online.com/demos/ecoceylon/v2/

You can see a difference in the "Home - About Us - Products - Contact Us" links when viewing from IE and Mozilla Firefox.

Basically, I would like the text to be centered vertically in the bar... but CSS by default puts it on top. I tried adding padding,which helped in IE... but Firefox still shows the links a bit higher than they should be.,... any ideas how to fix this?


Also, a different problem in case anyone knows how to fix it... you can see a small brown bar on the top bar. It is 50px in height. But I have no idea how to make its width as wide as the remainder of the page (this would change with different resolutions).

The main content of the page is 760px wide. I would like a brown box next to that, which is 50px in height and the remainder width. Any ideas? "width: auto;" doesn't work unfortunately

[ this is a follow up to my previous thread
http://forums.devshed.com/showthread.php?t=270438

Any help would be greatly appreciated.

Thanks very much.

when you put overflow: auto; into a div it adds a horizontal scroll bar in, is there a way using css and/or html to make it add a vertical scroll bar instead of a horizontal one so when the text got to the end of the div instead of extending the div it just adds a vertical scroll?

Thanks in advance!

Here's my next IE challenge (or frustration). It deals with the overflow attribute. Overflow property was a challenge on my page since the page emulates position fixed for IE.

The present scenario deals with the pre element. Sometimes the content in the pre container exceed the parent container's width. IE expands the parent containers width as a result. The workaround for this scenario relates to the overflow property and using a wrapper with the height set to 1% . Now, IE maintains the parent container width. Apparently, the wrapper ensures that IE renders hasLayout. I am not exactly sure why it works, but it has predictable results.

The workaround involves wrapping a pre element in a div, WrapOverflow. Now, you could set the overflow auto attribute on the child pre element. Apparently, the wrapper ensures that IE renders hasLayout. I am not exactly sure why it works, but it has predictable results.

Firefox has no need for the wrapper and still renders the page accurately with the superfluous code. The problem relates to IE rendering pre/wrapper with a smaller height. By controlling the horizontal expansion; the workaround has somehow constrained the height as well. The net effect is a vertical scroll bar, which is not ideal.

Compare the scenario in both Firefox and IE; set the browser next to each other; notice the div.WrapOverflow pre container height. Screenshots are below and review the code for a full illustration.

Yes, you must be thinking change overflow auto to overflow vertical. Let's not jump to a quick conclusion. Understanding what is going on here is important as well. The pre container's height should grow in IE, but the page's complexity and various hacks muddle the scenario. I have already spent a month on this scenario, but do not have the skill to decipher what various hacks impose on my layout. Let me know if you have any good ideas, explanations, or suggestions on this situation.

http://neville.f2o.org/nifty_TEMP2.html

Hey guys,

Never needed to ask for help before but I've ran out of ideas with this one.

I'm in the process of making a web development site and ironicly, came into a problem with the CSS.

I have a main content area like every site does where all the content goes. And then a navigation to the right of the content box for things like search, or additional links that I might want to add.

http://img254.imageshack.us/img254/1762/heightproblempp4.jpg <--- Img here

Because I need the navigation to be 100% height, its caused me a lot of time trying to get it to work. I need to set the .body and the .cont_nav css classes both to 100% height for the navigation height to work as I would "correctly".

However when .body has a set width its causing overflow of the text. (seen below)

http://img257.imageshack.us/img257/8436/footerproblemic6.png

And im hoping there is a way to get both the content not overflowing and height set to 100% so that the navigation can work.
Code:

.body <--- White Area with curl 
{
background-color: white; 
color: #333333; 
background-image: url(images/curl.jpg); 
background-repeat:no-repeat; 
height: 100%; <---- Problem
}

#wrap 
{
width: 75%; 
float: left;
}

.content 
{
padding-top: 70px; 
width: 80%; 
margin-left: 80px;
padding-bottom: 60px;
}

.cont_nav  <--- Right navigation
{
float: left;
width: 200px; 
padding-left: 15px; 
padding-right: 15px; 
background-color: #c9c9c9; 
border-left: 1px solid #a3a3a3; 
border-right: 1px solid #a3a3a3; 
height: 100%; <--- Only works when body height is set to 100%
}

.cont_nav_inner 
{
padding-top: 15px;
}

HTML Code:
Code:

<div class="body">
    <div id="wrap">
	<div class="content">
       <!-- MAIN CONTENT HERE -->
        </div>
    </div>
    <div class="cont_nav">
             <div class="cont_nav_inner">
              <img src="css/dropdown/themes/nvidia/images/ads.gif" alt="Sponsors" class="icon"/><h2 style="padding-bottom: 4px;">Sponsors</h2>
                <small>We are suppored by</small><br />
                <!-- Sponsored by images go here -->
                <hr />
            </div>
    </div>
</div>

I hope you can fully understand my situation, Im rubbish at explaining problems :P

Summary: Left navigation only works at 100% height when a parent is set, however when the parent (.body) has a height of 100% the content overflows. Praying for a way that full height can be possible that the content doesnt overflow as atm if i fix the navigation the content breaks if i fix the content the navigation breaks .

-Phil

I want to get buttons like these with my CSS: http://members.cox.net/npalmi188/test.jpg
how do I do this? (don't worry about the color codes)
everytime I try to get something near it I get this gay gray extra bevel to my button, anybody know how to fix that? here's the code I was using that had the gray bevel:
Code:

input.button 
     { 
       font-family: MS Sans Serif;
       font-weight: none;
       font-size: 10px;
       color: #ffffff;
       background: #4C5844;
     }

So what I want is to have 2 forms with buttons aligned horizontally.

<form><input type="submit"></form>
<form><input type="submit"></form>

They should be like this: [Button 1] [Button 2]

But instead, they go like this:

[Button 1]
[Button 2]

And I don't know the CSS for it, so thanks in advance.

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>

Is there a way to create oval buttons with CSS? I have an image of the button, and if I slice the image up in three sections, for example with two ends and a middle section for text, it becomes a mess if you go over a certain length. Is there a better way using CSS?

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/

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 currently working on a project for which I am considering using either Flash or CSS.

Basically, what I need to do is draw a button, say a simple circle, on top of another image. Alternatively, I could also use an image of the circle if need be. Either way, what I need to do is be able to position that image in a specific spot over the other image. I was able to get this to work in IE, but not Firefox.

Is there a way that I can place the image on top of the other image and keep it relative to the original, larger, image?

To give you a better idea of what I'm trying to do, think about putting pointers on a map like google maps. Are there any tutorials or examples of this that anyone can suggest?

Brent

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,

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!