CSS - Visibility: Tablerow / Block

I am trying to put left and right shadows on a layer, I am doing this by using two alternatively padded layers on top of each other. This code does that:

PHP Code:
#maincontent{
    background-image: url(images/layout/contentpanel/contentpanel_background.gif);
    background-repeat: repeat-y;
    background-position: left;
    border: 0px !important;
    padding-left: 30px;
}
#maincontent_inner{
    background-image: url(images/layout/contentpanel/contentpanel_backgroundright.gif);
    background-repeat: repeat-y;
    background-position: right;    
    border: 0px !important;
    padding-right: 30px;
} 





PHP Code:
<div id="hold_content">

            <div id="maincontent">
            
            <div id="maincontent_inner"><? include("includes/homepageloremipsum.php")?>
</div><!-- End maincontent_inner -->
                        
            </div><!-- End maincontent -->

</div> 





Now, in firefox the shadow images work fine, however, on IE they start about 2 inches down. However, after scrolling up and down the page they start at the top so this is obviously some kind of layering problem. I can't work out what though. Any ideas?

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 am doing an alternative splash page for a website that uses the same template as the rest of the site but uses a black background color and hides a few elements, especially the h1 element.
Code:

<h1>Home</h1>

I have attempted using display:none; display:transparent; and visibility:hidden. The first two elements leave a faint outline of the link in both IE and Netscape. Using visibility: hidden works in IE but the outline remains in Netscape. I have cleared the cache and tried other various obvious things like assigning color: #000000;

Does anyone have any ideas. To see this in action, see
www.lubuto.org




Code:

h1 {                                   
                              
visibility:hidden;
                                        }

http://warcraftpress.com/theme/theme.html

I'm trying to have #footer be pushed down instead of the menu lapping over it. Basically, I want the menu to push it down, but it just overlays it.

Thanks

Hi Guys,

I have a generic Question/Problem to do with a Block Element (in this case a div) in an li tag. This seems to be a problem in browsers like IE8 and Safari but not IE7 and the latest FireFox version. Where with the div item 'drops down' a line from the li bullet.

Like this (. is the li):
.
Here is My Div Content

I want it to be like this:
. Here is My Div Content

Now this only doesn't happen if I just have plan text between the div with no class, so I'm thinking that something in my css dragHandle class may be at fault. Either that or I need to add something to it to do with float or display: line or block etc? Any thoughts or ideas are most appriciated (note I'm using a div in an li as I'm using the AJAX reorder list control and need something for a 'drag handle' to select an item in the list. The reorderlist uses ul and li to display itslef to I have to use this markup structure).

Here is my markup.

<ul>
<li>
<div class="dragHandle">
</div>
</li>
</ul>

DragHandle class is as follows
.dragHandle
{
width: 20px;
height: 25px;
background-image: url(/styles/icons/selectarrow.JPG);
background-position: center;
background-repeat: no-repeat;
cursor: move;
}

Hi, im trying to create a block of colour of various width. Im trying to do it with <span> like so

<span style="background-color:#336699; width:100px"></span>

Now why wouldnt that work and is there a better way to do what im trying to achieve?

I would like to have a table with 6 td's across and the 7th td to break line and default to under neath the first td.
I tried using display block and firebug outline the area where my content should be but it is still to the right of the 6th td.
I would just like to do this to keep it in the same row so i can hide and show it dynamically outside of those first 6 td's.

i coudnt find the forum search feature...?

but anyone help with wht i am doing wrong? much appreciated

I have this CSS for my "globalNav" class:

.globalNav {width: 217px; background-image:url(images/barbackground.jpg); background-color: #1B619E; background-repeat: repeat-x; border-right: 1px solid #075284; position: absolute; left: 0px; top: 125px; height: 450px}

.globalNav A {background-color: #004E82; border-top: 1px solid #407AA1; border-bottom: 1px solid #00375C; border-right: #00406B; color: white; font-weight: bold; padding: 2px 5px 2px 5px; text-decoration: none; display: block}

This is my code for globalNav:

<div class="globalNav">
<a href="#">Global 1</a>
<a href="#">Global 2</a>
<a href="#">Global 3</a>
<a href="#">Global 4</a>
<a href="#">Global 5</a>
<a href="#">Global 6</a>
</div>


For whatever reason, display block won't work in IE unless I remove the width, height, and positioning. Anyone know any tricks to make this work?

In the attached gif, you should be able to see exactly what I mean, if I don't explain it well enough.

I have a containing block, #content_main, defined as such:
Code:

#content_main
{
	margin-left: 170px;
	padding: .5cm .25cm 50px;
}

Headers (h1, h2, h3, etc) are used inside #content_main and are defined like this:
Code:

h1, h2, h3, h4, h5, h6
{
	font-family: georgia, serif;
	border-bottom: 1px solid #009;
}

If you look at the attached gif, you'll see the problem. The top one is what happens. It extends the border-bottom to the width of the containing block, even though it places the text correctly. The second one "Something Else" is what I want it to look like. I edited that with Fireworks.

Since it renders the same in Firefox and IE, I figure it's my code that's wrong. Any thoughts?

MPEDrummer

Hi guys,

can you give me some tips to centering a block (<div>) of code? I would like it centered vertically and horizontally and I would also like the background of the element centered (so the whole thing).
text-align doesn't work, it only centers the text, not the element.

Thanks,
Josh

Hi guys

I was just wondering why cant i see these two <b></b> "blocks" on each side of my <UL> block in ie6 but in Firefox i can?

Screenshot of situation:


here is my code for the <b> blocks:
PHP Code:
.navbar b.lefty {
display:block; position:absolute; z-index:604; 
height:100%; width:20px; 
top:0px; left:-20px; 
padding:0; margin:0;  
background-color:#ffffff;
}

.navbar b.righty {
display:block; position:absolute; z-index:604; 
height:100%; width:20px; 
top:0px; left:136px; 
padding:0; margin:0; 
background-color:#ffffff;
} 





Here is my code for the <UL> block:
PHP Code:
.navbar :hover ul {
z-index:604; 
width:136px; 
top:40px; left:0px; 
padding:0; margin:0; 
background-color:#333333; 
text-align:left;} 





Now here is my HTML:
PHP Code:
<ul> 
      <b class="lefty">d</b>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li>            
      <b class="righty">d</b>
</ul> 

I have a div block which contains links on the left, it is using absolute positioning, I want to have the contents div block on the right, I want it 20 pixels away from the right border and 20 pixels away from the left div block, so if I resize my left div block, my right div block is always 20 pixels ahead of it. The code is included below:

Code:

	<div 
		style="position:absolute; 
		top:20; left:20; width:200; height:200; 
		z-index:1; 
		padding:3px; 
		border: #0000FF 1px solid; 
		background-color:#FFFFFF;">

		<div align="left">- <a href="#1">News</a></div>
		<div align="left">- <a href="#3">FAQ</a></div>
		<div align="left">- <a href="#2">ABC</a></div>
		<div align="left">- <a href="#6">Forums</a></div>
		<div align="left">- <a href="#7">Contact</a></div>
	</div>
	
	<div 
		style="position:absolute; 
		top:20; left:235; right:20;
		z-index:1; 
		padding:3px; 
		border: #0000FF 1px solid; 
		background-color:#FFFFFF;">

		<div align="left">Caption</div>
		<div align="left">bla bla bla This is the right side.
		</div>
	</div>

hey, I have 4 block elements like this:

Code:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="test.css" />
</head>

<body>

<div id="banner">
</div>

<div id="logo">
<img src="images/logosmall.png">
</div>

<div id="registercontent">
</div>

<div id="footer">
</div>

</body>
</html>

and the following CSS:

#banner {
height: 75px;
width: 100%;
background-image: url(images/bg1.gif);
}

#logo {
position: absolute;
top: 30px;
left: 34px;
z-index: 10;
}

#registercontent {
position: static;
width: 600px;
margin-left: 50px;
margin-top: 50px;
margin-bottom: 50px;
padding-top: 20px;
padding-left: 25px;
font-family: verdana;
font-size: 12px;
border: 1px solid #39ce96;
color: #39ce96;
background-color: #efefef;
}

#footer {
height: 75px;
width: 100%;
background-image: url(images/bg1.gif);
}


now I have found out that when I include the 'logo' block in the page and view the page in browser, the positioning of my 'registercontent' goes haywire (specifically, the block loses its top margin), if I take out the 'logo' block, the 'registercontent' block returns to normal behaviour. Only problem is, I don't know why..!!! help much appreciated.

Hi!

Is it OK to mix inline and block elements?

For example:


<imp ... />

<p> .... </p>


Thanks

I have several <a>'s on my page, where their display is set to block, and I want to put a submit button in each of them. When I put the <button> in the <a></a>, though, the submit button doesn't go to the processing page, it just goes where the <a> was headed.

How to I get the submit button to go to the processing page and not where the <a> was headed? I could put the submit button below the <a> block, but that's very unattractive, and I want the user to be able to click anywhere in the block to go to the next page (except for where the submit button is.) Any help much appreciated!