CSS - How Can I Replace <th> Fields With Css?

hey,

I got a form and use javascript to perform simple validations on it.

When all form fields are valid, ready_for_submit is true and i want to show a div saying everything is filled in correctly. (a different div is shown when not all fields are filled in correctly).

I got that working but what i want is that both div's have the same position. Now when one div is hidden, an empty line is shown, and below that line the visible div is shown. (Its the other way around when the other div is hidden.)

html Code:
Original - html Code <td colspan="4" align="right"> <div id="not_ready" style="visibility: visible;"> <img name='img_subRegister' src='images/invalid.gif'> Not all required data is valid<br> <input type="button" name="subRegister" value="Register" onclick="checkFormData(true)"> </div> <div id="ready" style="visibility: hidden;"> <img name='img_subRegister' src='images/valid.gif'> All data is valid<br> <input type="button" name="subRegister" value="Register" onclick="checkFormData(true)"> </div> </td>

  

    <td colspan="4" align="right">
    <div id="not_ready" style="visibility: visible;">
        <img name='img_subRegister' src='images/invalid.gif'>
        Not all required data is valid<br>
        <input type="button" name="subRegister" value="Register" onclick="checkFormData(true)">
    </div>
    <div id="ready" style="visibility: hidden;">
        <img name='img_subRegister' src='images/valid.gif'>
        All data is valid<br>
        <input type="button" name="subRegister" value="Register" onclick="checkFormData(true)">
    </div>
    </td>

How can i set both div's on the same position?

Changing visibility is done with javascript like this:
javascript Code:
Original - javascript Code if(ready_for_submit == false){ document.getElementById("not_ready").style.visibility = "visible"; document.getElementById("ready").style.visibility = "hidden"; return; } else{ document.getElementById("not_ready").style.visibility = "hidden"; document.getElementById("ready").style.visibility = "visible"; }

  

  


 if(ready_for_submit == false){


     document.getElementById("not_ready").style.visibility = "visible";


     document.getElementById("ready").style.visibility = "hidden";


     return;


 } else{


     document.getElementById("not_ready").style.visibility = "hidden";


     document.getElementById("ready").style.visibility = "visible";


 } 

thanks in advance.

I'm creating a site with a few div layers. Like so:

Code:

<div id="mainDiv">
	<div id="topLinks"><a href="##" class="linkStyle">Calendar</a> | <a href="##" class="linkStyle">Site Map</a> | <a href="##" class="linkStyle">Home</a></div>
	<div id="siteContent">
		<div id="mainContent">
			<div id="header">
				<a href="##"><img src="img/logo.gif" width="131" height="30" border="0" alt="Logo" title="Logo" style="padding: 10px 0px 12px 19px;" /></a>
				<div id="orangeNav">Top Navigation</div>
			</div>
			<div id="content">
				 ****** Need left navigation and right content here**** 			</div>
		</div>
		<div id="bottomNav">Bottom Navigation Here</div>
		<div id="footer">Footer Info here</div>
	</div>
</div>

The problem is with the bold green part. I'm trying to create a left-side navigation with content to the left. If I create a table, I'm done and it works. Of course, I'm trying not to use a table to set up the design.

The the other div tags are all position: relative. If I add two div tags that are position: absolute and place them, the text put in the absolute tags are not affecting the rest of the page and the footer either covers or gets covered by the absolute tags. However, I can't get it to work with relative div tags.

I'm a beginner so I'm struggling. I know I've done it before, but it's just not working this time.

In case you need it, here's the style sheet:

Code:

body {
 background-color: #1D1F12;
 margin: 0px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
}
/* The whole container for the page */
#mainDiv {
	position: relative;
	top: 0px;
	left: 0px;
	width: 767px;
	padding: 7px 0px 25px 13px;
}
/* START: Calendar | Site Map | Home link and related styles */
#topLinks {
	position: relative;
	width: 757px;
	padding-bottom: 8px;
	text-align: right;
	font-size: 10px;
	color: #999999;
}
#topLinks .linkStyle {
	font-size: 10px;
	color: #999999;
	text-decoration: none;
}
#topLinks .linkStyle:hover {
	text-decoration: underline;
}
/* END: Calendar | Site Map | Home link and related styles */
/* START: items within the lighter background block */
#siteContent {
	position: relative;
	width: 741px;
	padding: 14px 13px 35px 13px;
	background-color: #393D23;
}
#mainContent {
	position: relative;
	border: 3px solid #ffffff;
}
#header {
	position: relative;
	height: 104px;
	background-image: url(img/bg-header.gif);
	border-bottom: 4px solid #FFF1B8;
}
#orangeNav {
	position: relative;
	height: 25px;
	background-color: #993300;
	border-top: 1px solid #ffffff;
	border-bottom: 3px solid #ffffff;
	text-align: center;
	vertical-align: middle;
}
#orangeNav .navImg {
	padding: 4px 8px 0px 8px;
}
#content {
	position: relative;
	background-image: url(img/bg-content.gif);
	padding: 0px 0px 25px 0px;
}
#leftSide{
	position: relative;
	left: 9px;
	top: 12px;
	width: 150px;
}
#nav {
	position: relative;
	width: 150px;
	border: 1px solid #A8A81F;
	background-color: #E0DD92;
	padding-top: 5px;
}
#nav .navItem {
	padding: 5px 8px 5px 8px;
}
#nav .navItem:hover {
	background-color: #E9E6B0;
}
#nav .link {
	font-size: 10px;
	color: #393D23;
	text-decoration: none;
}
#nav .link {
	font-size: 10px;
	color: #393D23;
	text-decoration: none;
}
#nav .link:hover {
	text-decoration: underline;
}
#rightSide{
	position: relative;
	left: 200px;
	top: 12px;
	width: 520px;
	font-size: 11px;
	border: 1px solid red;
}
#bottomNav {
	position: relative;
	background-color: #989A8C;
	padding: 2px 25px 2px 0px;
	text-align: right;
}
/* START: footer area and related styles */
#footer {
	position: relative;
	padding: 20px 0px 0px 0px;
	color: #BFC1B8;
	font-size: 10px;
	line-height: 14px;
	text-align: center;
}
#footer .linkStyle {
	font-size: 10px;
	color: #BFC1B8;
	text-decoration: none;
}
#footer .linkStyle:hover {
	text-decoration: underline;
}

Edited to add: I have included the div tags for the left and right portions: #leftSide and #rightSide

Hello

I would like to have some text replaced after, for example 10 seconds, with new text. And with fading in and fading out

Example given:
after opening page
fade in - show text1 "Welkom to the pleasure dome" - fade out
fade in - after 10 sec "For the latest Items, go to..." - fade out
fade in -after 10 sec "For ordering , call 0800-orderIT" - fade out

and so on. But al on the same place ( footer )

I did see this somewhere, but I am not sure if it was CSS only.

Thanks

I'm into redesigning our web shop, and am thinking about navigation. Today we have a 30-item tree menu, "norton commander"-style. I'm looking for a modern, user-friendly alternative.

I've understood that top menus are very "in" now, so I have concidered that, but failed to narrow down the menu items.
I need a vertical menu that can hold many items, but also is user friendly. this menu is good, but I would like to load the submenu items via ajax. Anybody know if anyone has done that?

Can anybody point me in the right direction of any blog/article/script about how to deal with the navigation problem?

Hi--

I'm sure I'm missing something incredible easy, but I'm working on no sleep so please help!

I've got image buttons and for rollovers I want to have a simple color highlight on the top so I've got the image in the background of a <div> then in a nested <div> I put a 100% transparent .png inside a link tag. Using CSS, I said replace that with the semi-transparent .png.

In Firefox it displays the highlight at the bottom of the button image; in IE 6, it doesn't even display the background.

My code:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
a img {border: none;}
.button {width: 193px; height: 116px; background-image:url(button.jpg);}
.button2 a:link {background-image:url(transparent.png); border: none; width: 193px; height: 116px; display: block;}
.button2 a:hover {background-image:url(hover.png); border: none; width: 193px; height: 116px;}
-->
</style></head>

<body>

<div class="button"><div class="button2"><a href="#"><img src="transparent.png" width="193" height="116" /></a></div></div>
</body>

</html>

Hi, I'm having difficult with learning forms and how to style them. I've gotten mostly what I am looking for just now I don't seem to be able to make adjustments: Adjusting the size of the text-window, wrapping the frame boarder around the fieldset. Those are my main issues, any help would be greatly appreciated.

Hy-
A pretty simple(?) question (I guess)

Is there a way to format the look of radio buttons and checkboxes with css?

e.g. to make it "fit" with this textfield style:
style="font-size: 11px; font-family: Verdana; border-width: 1px; border-color: black;"

regards
Sheriff

Can I use custom fields in IE or not?
This is the complete example page I'm working with:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  
<head>
<base href="http://localhost:9080/garage68/">
<title>TestCSS</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<style type="text/css">
<!--
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12pt;
	color: #00FF00;
	background-color: black;
}
.content {
	position:absolute;
	width:75%;
	margin:5px 0px 0px 165px;
	border:0px;
	line-height: 20px;
	z-index:3;
}
fieldset {
	border: #26a solid 1px;
	width: 85%;
	margin-bottom: 5px;
}

header {
	font-weight: bolder;
	color: blue;
}

date {
	font-weight: bolder;
	color: red;
}

-->
</style>
</head>
	<body>
	<version>version: 3.1.0</version>
	<div class="content">
		<fieldset>
			<date>2004-05-04</date>	
			<hr />
			<header>Title1</header>
			And Entry
		</fieldset>
				
		<fieldset>
			<date>2004-01-21</date>	
			<hr />
			<header>Title 2</header>
			A Second Entry
		</fieldset>
	</div>
  </body>
</html>

You'll see the difference taking a look at it in IE versus Firefox. It seems like it's picking up some things (even from the custom tags) but leaves off other things. How can I get these two pages to look the same (as in both look like the firefox version)?

Hi,

I have a form in my website but i have problems on fixing the size of the text area. I mean, I have a form with 5 single-line fields, and one comments field which is a multi-line field, the problem comes when I try to fix the size of that multi-line field to be the same weight as the singleline fields... I can handle with that, because the weight of the fields arent the same depending on the navigator used, and desperatly for me, I cannot fix the same wight for all fields....

any solutions? I'll really apreciate a help

thanx in advance

Hi,

I'm creating a form and for some reason I can't get rid of the space between each line of the fields.

I've tried making the margin and padding 0 but no joy. Is it me or just browser bugs?

Help appreciated PHP Addict

Code:

<div style="width: 350px; float: right;">
<div style="width: 100px; text-align: right; float: left; background: yellow;">
<label for="">field Name:</label>
</div>
<div style="width: 100px; float: left; background: orange;">
<input name="Address1" type="text" id="Ad1" value="$Address1" size="15" maxlength="25">
</div>
<div style="width: 120px; float: right; background: blue;">
Error Message
</div>
<br />
<div style="width: 100px; text-align: right; float: left; clear: left; background: yellow;">
<label for="">field Name:</label>
</div>
<div style="width: 100px; float: left; background: orange;">
<input name="Address1" type="text" id="Ad1" value="$Address1" size="15" maxlength="25">
</div>
<div style="width: 120px; float: right; background: blue;">
Error Message
</div>
<br />
<div style="width: 100px; text-align: right; float: left; clear: left; background: yellow;">
<label for="">field Name:</label>
</div>
<div style="width: 100px; float: left; background: orange;">
<input name="Address1" type="text" id="Ad1" value="$Address1" size="15" maxlength="25">
</div>
<div style="width: 120px; float: right; background: blue;">
Error Message
</div>
</div>

When using Safari, whenever you click inside an input field, a highlight goes around the field (focus ring). Is there anyway to use CSS to remove the focus ring altogether?

is there a way to disable the 3d shadowing effect on form fields? so i can just have a border.

I've seen some text inputs with pretty snazzy styling, such as borders with rounded corners. How is this done?

to start: this is my first post and i hope this forum is as helpful as the others i am a member of..

i have a basic text game i am working on and code is already layed out for me.. but i am looking to give the game my own style.. i have created the look i want in photoshop and sliced and sent over to dreamweaver but i am a noob and dont know how to get the things functioning.. at all

pretty much everything can be set as the background except for the form but i want the blue gradient in input fields and images as buttons. i would like to have big font size in boxes and also have white letters.. also i want the whole centered x and y when viewer goes to page

like i said: im a noob and just getting back into the web dev stuff and am pretty rusty so if anyone can help me out i will be SOOOOOO thankful!!!

here is the link to the jpg.. let me know if you need the psd but i have 2 or 3 dif fonts in it that are not common fonts

Code:

http://i951.photobucket.com/albums/ad353/zac_exuro/Untitled-1-2.jpg

Hi,

I am having trouble clearing labels and fields.

I have set up my labels to float left and my fields to float left.

When i have more than one set of label and field, they do not align underneath each other.

Please could someone suggest the best way to clear the label and field so the next row will display correctly?

Thanks