CSS - Css Background-image Button Method Slightly Changed

Hello,

I have the following code that creates a progress bar:

Code:

<style>
table.meter {
    background: url("img/m_bg.gif") left center repeat-x;
    height: 13px;
    font-family: sans-serif;
    font-size: 11px;
    }

table.meter td.mark{
    background: url("img/m_mark.gif") right center repeat-x;
    }

table.meter td.mark div{
    background: url("img/m_l.gif") left center no-repeat;
    }

table.meter td{
    background: url("img/m_r.gif") right center no-repeat;
    }

</style>

<table cellspacing="0" cellpadding="0" class="meter" width="250">
<tr>
  <td id="mark" width="60%" class="mark"><div>&nbsp;</div></td>
  <td>&nbsp</td>
  </tr>
</table>

This will make only image progress bar, but how can I write percents straight after table (on the right)?
I need it to look something like this:

<|||||||| > 60%

But if I write "60%" after </table> tag, it will appear on the next line, and if I add another <td> to the table, it will inherit background from table.meter style and I don't need that.

Hope somebody help me.
Thank you in advance.

In my first attempt at a heavily CSS-based layout, I've run into this frustrating problem. I currently cannot get IE to remove 2px around my search box and line up correctly.

Example FF:



Everything lines up perfectly.

Example IE:



You can see that the box around the search input is 2px lower than the box to the left.

Here are the applicable classes:

css Code:
Original - css Code /* class for the div containing the search input */ .search { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; border-bottom:1px solid black; vertical-align:middle; background-color:#FFFADE; text-align:center; padding-top:3px; margin-bottom:5px; height:20px; } /* class for the input fields */ .inputbox { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 10px; color : #000000; background-color : white; border : 1px solid black; } /* for the containing table td */ #right_boxes { font-family:arial,helvetica,sans-serif; font-weight:normal; font-size:12px; width:145px; border-left:1px solid black; padding:20px; border-top:4px solid black; }

  

  


 /* class for the div containing the search input */


 .search


     {


   font-family: Verdana, Arial, Helvetica, sans-serif;


   font-size: 11px;


   color: #000000;


   border-bottom:1px solid black;


   vertical-align:middle;


   background-color:#FFFADE;


   text-align:center;


   padding-top:3px;


   margin-bottom:5px;


   height:20px;


     }


 /* class for the input fields */


 .inputbox {


   font-family      : Verdana, Arial, Helvetica, sans-serif;


   font-size        : 10px;


   color            : #000000;


   background-color : white;


   border           : 1px solid black;


 }


 /* for the containing table td */


 #right_boxes


 {


         font-family:arial,helvetica,sans-serif;


         font-weight:normal;


         font-size:12px;


         width:145px;


         border-left:1px solid black;


         padding:20px;


         border-top:4px solid black;


 } 

The HTML for this section:
html4strict Code:
Original - html4strict Code <td id="right_boxes" valign="top"> <form action="index.php" method="post"> <div align="left" class="search"> <input alt="search" class="inputbox" type="text" name="searchword" size="20" value="search..." onblur="if(ths.value=='') this.value='search...';" onfocus="if(this.value=='search...') this.value='';" /> </div> <input type="hidden" name="option" value="search" /> </form>

  

 <td id="right_boxes" valign="top">


 <form action="index.php" method="post">


 <div align="left" class="search">                              


 <input alt="search" class="inputbox" type="text" name="searchword" size="20" value="search..."  onblur="if(ths.value=='') this.value='search...';" onfocus="if(this.value=='search...') this.value='';" />


 </div>


 <input type="hidden" name="option" value="search" />


 </form>            


  

I have tried everything that I can think of. Any suggestions or answers would be greatly appreciated.

TIA,

Conor

Okay, because of a conflict with Sothink Menu Builder I cannot use the container or wrapper tag the way I normally would on my CSS. Instead, I've done this:

Code:

* { margin:0; padding:0; }

body {
	margin: 0 auto;
	width: 1000px;
	text-align: center;
	background-color: #e0d7e6;
	height: 100%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	letter-spacing: normal;
	vertical-align: top;
	word-spacing: normal;
	white-space: normal;
	line-height: normal;
	padding: 0px;
	background-image: url(../images/shared/gifs/bacgrnd.gif);
	background-repeat: repeat-x;
}
#wrapper {
	text-align: left;
	position: relative;
	z-index: 0;
}

And the HTML:

Code:

</head>
<body><div id="wrapper">

webpage content

</div></body>

And it works well, except the page is off center (to the right) by a couple of pixels. It's in all browsers. Does anyone have a fix? Thanks in advance.

In short, I'm trying to get this one image to tile down the page to the bottom, underneath a static background image. Basically, it's a 2pixel high image that's ready to tile vertically, just having a tough time getting it to work.

You can clearly see the problem here, a gap at the bottom:

http://www.groundedgroup.com/clients/NWR/

Here's the relevant css:
http://www.groundedgroup.com/client...WR-GG/style.css

I've googled and subsequently tried out some solutions, but no luck. Got any ideas?

Thanks in advance.

PS - Is there a way to keep the spiders from indexing my links above? The site is on a test server, so I don't want the url indexed.

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>

How can I set the color inside a radio button. background-color won't work. it sets color around radio buttons. I tested color, it is not working for this as well.

Hi,

I have a question about setting up the Body background-image via a linked external stylesheet.

I have a index.html file and a myStyle.css file. I want to setup the background to load an image file, test.JPG.

When I embed the following in my index.html, I see the background show up:

** inside index.html file **
<BODY STYLE="background-image: url(test.JPG);"> blah </BODY>

BUT, when I define my background in the externally linked myStyle.css file, the background does not load:

** inside myStyle.css file **
BODY { background-image: url(test.JPG); }

** inside index.html file **
<LINK REL="stylesheet" TYPE="text/css" HREF="myStyle.css">
<BODY>
blah
</BODY>
</LINK>

Please help.

thanks!

Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!)

Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text.

What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at:
www.markmcm.co.uk/test/test.html

The CSS is as as follows:

Code:

/*
 *  Page Stylesheet 
 */
body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #eaeaea;
  border:0; margin:0; padding:0;
  height: 100%;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
#container {
	margin-left: auto;
	margin-right: auto;
   	min-height: 100%;
	width: 936px;
}
* html #container {
	height: 100%;
}
#content {
	float:left;
	position: relative;
	height: 528px;
	width: 936px;
	z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
	position: absolute;
	float: left;
	display: block;
	width: 312px;
	height: 176px;
}
.miniscreen1 {
	top: 0;
	left: 0;
}
.miniscreen2 {
	top:0;
	left: 312px;
}
.miniscreen3 {
	top: 0;
	left: 624px;
}
.miniscreen4 {
	left: 0;
	top:176px;
}
.miniscreen5 {
	left: 312px;
	top:176px;
}
.miniscreen6 {
	left: 624px;
	top:176px;
}
.miniscreen7 {
	left: 0;
	top:352px;
}
.miniscreen8 {
	left: 312px;
	top:352px;
}
.miniscreen9 {
	left: 624px;
	top:352px;
}
.info {
	height: 30px;
	top:3px;
	left: 40px;
	width: 265px;
	float: left;
	position: absolute;
}
.infobar  {
	left:0px;
	position: absolute;
	top: 140px;
	width: 312px;
	height: 36px;
	outline: none;
	color:#000;
	background: url("data/infobar.png") no-repeat 0 0;
	z-index: 650;
}
.infobar:hover  { 
	background-position: 0 -36px;
	outline: none;
	color:#fff;
}
#infobar span {
	display: none;
	outline: none;
}
.clip_title {
	outline: none;
	font-size: 85%;
	font-weight: 700;
	vertical-align: top;
	text-align: left;
}
.clip_sub {
	outline: none;
	height: 13px;
	font-size: 80%;
	line-height: 13px;
	font-weight: 700;
	vertical-align: top;
	text-align: left;
}

And the HTML is:

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">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Test Page</title>
		<meta name="description" content=" " />
		<meta name="keywords" content=" " />
		<meta name="generator" content=" " />
		<link rel="stylesheet" type="text/css" href="page.css" media="screen" />
	</head>
<body>

<div id="container">

	<div id="content">
		<span class="miniscreen1">			
		<a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
					
		<span class="miniscreen2">
		<a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
		
		<span class="miniscreen3">
		<a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
			
		<span class="miniscreen4">
		<a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen5">
		<a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen6">
		<a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen7">
		<a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen8">
		<a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen9">
		<a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
				
	</div>
</div>
	
</body>
</html>

There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!)

Here's the deal. I want to have one generic button image that I can use for all buttons. Therefore, I don't want to have words on the image but instead want to write them in afterward. Normally, you could just do something like

Code:

<input type="image" src="..."

and things are fine. However, like I said, I don't want to do that because this forces me to create an image with the words already on them. I want a black button that I can write the words on, but want it to still behave like a submit button. Which means, once I type in my username and password, I just want to be able to hit enter (and not be forced to click on the button) and submit the form. Am I asking for too much?

Hi
I am redesigning my blog and took it down completely. I want to place the day's text post on the day's photo post on top of the latter, while graying out the photo. Is that possible without using flash?

I'm trying to create a little background image for each image on this page. A kind of crappy looking polaroid type background image. It works fine in Firefox, but not in IE. Any ideas?

http://www.rhizaowns.com/holly/index.php

Code:

div.top {
border: 10px solid #CCCCCC;
border-bottom-width: 0px;
padding: 0px;
background-image: url(menutile.jpg);
}

The code above yields this .

It is uneven with the normal image, though both are the same size. I simply want to tile the bg image to the border even with the normal menu images. What am I doing wrong?

I am trying to put labels below images on my new site design. See: www.jwsuretybonds*com/jw09


I figured out how to get them vertically aligned, but I am having problems with the horizontal, as when I change the browser size, they move.


Here is one of the examples:
Code:

#homepage-bar h2.construction {
	position:fixed;
	top:225px;
	left:505px;
}

I tried changing to position: absolute; I also tried to use percentages on the left:


I know this is easy, but I can't find the fix after googling for 30 minutes. Help!

I'm fairly new to CSS, and have been using it to add styles to a personal profile page on another website. I noticed recently that in any pages I've used scrollbar codes, the word "scrollbar" would occasionally change to "AdMchaa" and then change back in a few days. I was always on the same computer and same IE 6 browser when I noticed this, with the same settings as far as I can tell. I figured it was a site glitch until I noticed it just now on a website I've just started working on - it even happened in an example where I'd used ampersand codes for the brackets so the code would display on the page, and again in textareas -

<style type="text/css">
body {
AdMchaa-face-color: COLOR;
AdMchaa-highlight-color: COLOR;
AdMchaa-3dlight-color: COLOR;
AdMchaa-darkshadow-color: COLOR;
AdMchaa-shadow-color: COLOR;
AdMchaa-arrow-color: COLOR;
AdMchaa-track-color: COLOR;
}
</style>


Yesterday the codes read fine and worked. Any info on this would be greatly appreciated!