CSS - A Festive Visibility Problem

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;
                                        }

Hey,
I think i just need someone else to look at this for me. I've been coding all day and would probably be able to figure this out if I just went to bed and did it tomorrow. If you roll over an image that's alson an anchor at www.deeperdevotion.com/wp, you'll find that it places a background-color or underline or both on it. The thing is, I can't find the code in my CSS that's causing me the trouble.

my css is located at www.deeperdevotion.com/wp/wp-content/themes/dd/styles/101106.css

Thanks.

Hello everyone, I am hoping I could get some help on this.

I'm the new Marketing guy at this company. One of my duties is to fix an issue with our website which was built by the last guy to sit in this chair. I may not know how to build a proper webpage, but this guy knew exactly how not to do it and ran with just that.

So, the issue lies within this example page:
tinyurl.com/rediculouswebsite


The footer ends up under-lapping the table when viewed in IE (when not in compatibility mode) and Firefox.

I know this is a ridiculously constructed site, I just need to fix this one problem and be done with web development forever. High fives and scotch from my boss very well may ensue.

Thank you all very much.

Hello. I am new at css and web design so if these are easy problems please excuse.

First of all, the website url

http://www.onlinecasinoboss.com

In Firefox, the unordered lists <ul> in the left column do not display correctly. The left margin is way too big. I'm not sure why, please look at the page in IE to see what I want it to look like.

And in Internet Explorer, the spacing between my top image, header bar, and main page is screwy. There should be no space between the header image and header bar (the flags are in this area). Also there should only be 2px spacing between the header and the main page, however it appears there is atleast 24px there. Again please refer to the page in FF to see what I want it to look like.

I like css, and have decided to pursue my first design in css based off of the many professional designers reconmendations and reviews. But I must say it is a major headache to deal with cross-browser/platform display problems. And what professional designer wants to rely on 'css-hacks' when producing a product for a major vender.

Just beginner bitching.

Thanks for the help!

Go to my site. Click on Pokemon.

What do I need to do to make it so the layout works on every page with every browser? Do I need to edit my .CSS file?

hello !

can someone tell me what i have wrong in CSS

i can see it in FF okay, but IE makes me worry :

http://www.autobazar.eu/sk/wallpapers2.php

thanx for your reply

i am making a website....and i am new to css.....so i don't know how to correct the problem.....!

my problem is of margin.....my website layout gets affected by different web browsers...!
my layout gets affected when some one restores the window...!
please help...!

here is my css code...:

Code:

body, ul, ol, li, p, h1,h2, h3, h4, h5, h6, form, blockquote{
margin:0px;
padding:0;
}
body{
margin: 60px 0px 0px 180px;
font: normal 11px Verdana,Arial,Helvetica,sans-serif;
color:#333333;
background-position:top left;
background: #202020 url(images/bgr.jpg) no-repeat;
background-position: center top;

}
 
#top{
position:relative;
margin:0 auto;
width:980px;

background-repeat:no-repeat;
background-position:0 29px;
}

#head{
height:120px;
position:relative;
}

#start{
height:40px;
position:relative;
background-image:url(images/start.png);
background-repeat:no-repeat;
width: 980px;
}

#main{
position:relative;
float:left;
width:960px;
padding-left:10px;
padding-right:10px;
border-left: 1px solid #232a36;


background-image:url(images/line.gif);
background-repeat:repeat-y;


}
#top .content{
position:relative;
float:left;
width:640px;
margin-right:20px;
}
.sidebar{
position:relative;
top:-155px;
right:205px;
float:right;
width:300px;
background-color: #ffffff;
}

.sidebar-footer{
position:relative;
top:-129px;
right:-95px;
float:right;
width:300px;
background: #1C2634 url(images/sidebar-footer.jpg) no-repeat scroll center top;
height: 10px;
}

.bsa{
position:relative;
float:left;
width:278px;
padding: 10px;
}

.bsa2{
position:relative;
float:left;
width:278px;
background: #FFFFFF url(images/advertiser.jpg) repeat-y;
border-right: 1px solid #3b73a5;
border-bottom: 1px solid #3b73a5;
margin-bottom:1px;
padding: 15px;
}

.footer{
position:relative;
clear:both;
width:928px;
top:-40px;
padding:40px 20px 20px 20px;
background-image:url(images/footer-top.jpg);

background-repeat:no-repeat;
background-color:#FFFFFF;
margin-left:1px;
float:left;

}

.footer_meta{
text-align:center;
margin:5px 0 ;
clear:both;
}

/*--------------------head--------------------*/
#head h1 a{
top:1px;
left:20px;
text-indent:-9999px;
position:absolute;
outline:none;
width:380px;
height:100px;
z-index:2;
}

.description{
position:absolute;
top:0;
text-indent:-9999px;
}

/*------------------content--------------------*/


.breadcrumb, .entrys, .featured_entry, .featured_entry2, .navigation{
width:600px;
line-height:34px;
background-image:url(images/bg_box_content.jpg);
background-repeat:no-repeat;
background-position:top left;
border:1px solid #b2b2b2;
background-color:#fff;
padding:0 20px;
margin-bottom:14px;
position:relative;
float:left;
}

.entrys{
line-height:22px;
padding:20px;

}

/*------------------top menu--------------------*/

div#navHeader {background: url(images/bg_skeletonTop.png) no-repeat 0px 45px; height: 90px; position:relative;}

ul#menu {margin-left: 20px;}
	ul#menu li {float:left; margin-right: 5px; list-style: none;}
	ul#menu li a {display: block; color:#FFFFFF; font-size: 1.25em; font-weight: bold; text-decoration: none; height: 45px; padding: 1px 0 0 20px; float:left;}
	ul#menu li a:hover {color:#00a2ff;}
	ul#menu li a span {display: block; padding:12px 20px 31px 0px; }
	
	ul#menu li.navSelected a, ul#menu li.current-cat a, ul#menu li.current-cat-parent a {background: url(images/bgnavLeft.png) no-repeat scroll 0 1px; color:#fff}
	ul#menu li.navSelected a:hover, ul#menu li.current-cat a:hover {color:#f2f2f2;}
	ul#menu li.navSelected a span, ul#menu li.current-cat a span, ul#menu li.current-cat-parent a span {background:url(images/bgnavRight.png) no-repeat top right;}

#subMenu {clear:both;}
	#subMenu ul {font-size: 0.9em; font-family:"Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial; }
	#subMenu ul {position:absolute; padding: 8px 0 8px 0; bottom:0; left:20px}
	#subMenu ul li {float:left; margin-right: 10px; color:#7c8d93; list-style: none;}

I got the bellow css that I am using to display a drop down menu on my page.
On firefox the drop down menu width looks ok , all the menu options looks the same. But in IE the drop down menu width is showing different. Is displaying the menu options broken as the size of the text.

The bellow lines are a representaion of how the menu in IE is showing. In Firefox all the lines are display the same.

How can I make it look the same in IE as in Firefox?

Drop down menu options
--------------------option 1
--------------------------------option 2
--------option 3
------------------------------------------------option 4

#menuh-container
{
position: absolute;
top: 8.2em;
left: 21.7em;
width:auto;
}

#menuh
{
font-size: 12px;
font-family: arial, helvetica, sans-serif;
width:auto;
float:left;
margin:2em;
margin-top: 0em;
width:auto;
}

#menuh a
{
text-align: left;
display:block;
border: 1px solid #555;
white-space:nowrap;
margin:0;
padding: 0.3em;
width:auto;
}

/* menu at rest */
#menuh a:link, #menuh a:visited, #menuh a:active
{
color: white;
background-color:#3399CC;
text-decoration:none;
}

/* menu on mouse-over */
#menuh a:hover
{
color: white;
background-color: #8FD400;
text-decoration:none;
width:auto;
}

/* attaches down-arrow to all top-parents */
#menuh a.top_parent, #menuh a.top_parent:hover
{
background-image: url(navdown_white.gif);
background-position: right center;
background-repeat: no-repeat;
}

/* attaches side-arrow to all parents */
#menuh a.parent, #menuh a.parent:hover
{
background-image: url(nav_white.gif);
background-position: right center;
background-repeat: no-repeat;
}

#menuh ul
{
list-style:none;
margin:0;
padding:0;
float:left;
width:auto;
/* width of all menu boxes */
/* NOTE: For adjustable menu boxes you can comment out the above width rule.
However, you will have to add padding in the "#menh a" rule so that the menu boxes
will have space on either side of the text -- try it */
}

#menuh li
{
position:relative;
min-height: 0px;
vertical-align: top;
width:auto;
}

#menuh ul ul
{
position:absolute;
z-index:500;
top:46px;
display:none;
padding: 1em;
margin:-1em 0 0 -1em;
width:auto;
}

#menuh ul ul ul
{
top:0;
left:100%;
}

div#menuh li:hover
{
cursorointer;
z-index:100;
}

div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:block;}

div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}

/* End CSS Drop Down Menu */

Every time i code my site and use the Ap div with relative position and fix the position myself it creates unnecessary space under my web page. Meaning it creates blank space.

I have created this style

.class1 A:link {text-decoration: none;color:white;}
.class1 A:hover {text-decoration: underline; color:Orange;font-weight:bold}
.class1 A:visited {text-decoration: none;color:white;}
.class1 A:active {text-decoration: none;color:white;}

In the aspx page but the problem is that when the user visit some link and try to put the mouse again on that link color is not changing but yea it is making bold font.

What can be the problem or something I am missing ??

I know that IE6 has floating issues, just I was wondering if there was a way around this problem.

Everytime I make a 2 column page they dont line up correctly in IE6.

http://monarkstudios.ca/contact/

On IE7 or Firefox they work great. I was having a problem with IE7, and I adjusted the widths and it fixed it for that.

Any solution or way around it?

Thanks.

Hello,

I am having a bit of problem with UL code in my sidebar for my website. In Safari the two items in my list display correctly under the paragraph of text, but in most other browsers the first part of the first item, jumps up and overlays itself in the upper paragraph.

Here is my CSS code:
Code:

ul.sidebar {
  margin: 0 0 5px 0;
  padding: 5px 0 0 25px;
}

ul.sidebar li {
  font-size: 75%;
  list-style-type: circle;
}

ul.sidebar li a {
  color: black;
  list-style-type: circle;
  height: auto !important;
}

And here is its implementation on the website:
Code:

<div id="midcont">
        <!-- left body div starts here-->
        <p>Please use the contact form to the right for inquiries. Most questions are answered within 24-48 business hours. Below is our direct contact information.</p>
        <br/>
        <ul class="sidebar">
        <li><b>E-Mail:</b> xxx@xxx.com</li>
        <li><b>Phone: </b>(xxx) yyy- zzzz</li>
        </ul>
        <!-- left body div ends here-->
      </div>

Thanks in advance for all your help!

Link is he http://setupyourblog [dot] com

Hi everyone
I am very new to making a website using CSS. I use Dreamweaver to help me and don't write the code so I am still learning. APOLOGIES IF I AM BEING STUPID - please be kind!

My new website is looking good in all browsers except one web page in IE6 and IE7 where the thumbnail images, instead of wrapping below each other - string out in a long line across the web page. I am using the same class multiple times, and the container # width dimensions have been specified

The web page is www"."marcusbunyan"."com/marcuscss/the-symbolic-order/tso-thumbnail.html

The code for the relevant section of the web page is

Code:

<div id="tsothumbnail">
  <div class="tsothumbnail"><a href="/the-symbolic-order/tso-a.html"><img src="/assets/images/the-symbolic-order/a-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div>
  <div class="tsothumbnail"><a href="/the-symbolic-order/tso-b.html"><img src="/assets/images/the-symbolic-order/b-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div>
  <div class="tsothumbnail"><a href="/the-symbolic-order/tso-c.html"><img src="/assets/images/the-symbolic-order/c-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div>
  <div class="tsothumbnail"><a href="/the-symbolic-order/tso-d.html"><img src="/assets/images/the-symbolic-order/d-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div>
  <div class="tsothumbnail"><a href="/the-symbolic-order/tso-e.html"><img src="/assets/images/the-symbolic-order/e-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div>
  <div class="tsothumbnail"><a href="/the-symbolic-order/tso-f.html"><img src="/assets/images/the-symbolic-order/f-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div>
  <div class="tsothumbnail"><a href="/the-symbolic-order/tso-g.html"><img src="/assets/images/the-symbolic-order/g-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div>
  <div class="tsothumbnail"><a href="/the-symbolic-order/tso-h.html"><img src="/assets/images/the-symbolic-order/h-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div>
  <div class="tsothumbnail"><a href="/the-symbolic-order/tso-i.html"><img src="/assets/images/the-symbolic-order/i-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div>
  <div class="tsothumbnail"><a href="/the-symbolic-order/tso-j.html"><img src="/assets/images/the-symbolic-order/j-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div>
  <div class="tsothumbnail"><a href="/the-symbolic-order/tso-k.html"><img src="/assets/images/the-symbolic-order/k-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div>
  <div class="tsothumbnail"><a href="/the-symbolic-order/tso-l.html"><img src="/assets/images/the-symbolic-order/l-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div>
  <div class="tsothumbnail"><a href="/the-symbolic-order/tso-m.html"><img src="/assets/images/the-symbolic-order/m-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div>
  <div class="tsothumbnail"><a href="/the-symbolic-order/tso-n.html"><img src="/assets/images/the-symbolic-order/n-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div>
  <div class="tsothumbnail"><a href="/the-symbolic-order/tso-o.html"><img src="/assets/images/the-symbolic-order/o-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div>
  <div class="tsothumbnail"><a href="/the-symbolic-order/tso-p.html"><img src="/assets/images/the-symbolic-order/p-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div>
  <div class="tsothumbnail"><a href="/the-symbolic-order/tso-q.html"><img src="/assets/images/the-symbolic-order/q-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div>
  <div class="tsothumbnail"><a href="/the-symbolic-order/tso-r.html"><img src="/assets/images/the-symbolic-order/r-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div>
  <div class="tsothumbnail"><a href="/the-symbolic-order/tso-s.html"><img src="/assets/images/the-symbolic-order/s-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div>
  <div class="tsothumbnail"><a href="/the-symbolic-order/tso-t.html"><img src="/assets/images/the-symbolic-order/t-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div>
  <div class="tsothumbnail"><a href="/the-symbolic-order/tso-u.html"><img src="/assets/images/the-symbolic-order/u-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div>
  <div class="tsothumbnail"><a href="/the-symbolic-order/tso-v.html"><img src="/assets/images/the-symbolic-order/v-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div>
  <div class="tsothumbnail"><a href="/the-symbolic-order/tso-w.html"><img src="/assets/images/the-symbolic-order/w-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div>
</div>

and the .css is
Code:

#container {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 1053px;
	text-align: left;
	margin-top: 7px;
	height: auto;
	vertical-align: top;
	overflow: visible;
   }
#container #tsothumbnail {
	clear: right;
	float: left;
	height: auto;
	width: 600px;
	margin-left: 180px;
	margin-top: 40px;
	margin-right: 220px;
	position: relative;
	margin-bottom: 30px;
}

#container #tsothumbnail .tsothumbnail {
	clear: right;
	float: left;
	height: 66px;
	width: 92px;
	position: relative;
}

The html and css both validate.

Thankx for your help much appreciated
Marcus

Hi, I have a div with a form in it that's not displaying properly in IE. It's meant to display a breadcrumb menu and text input on opposite sides of the screen then followed by a hr, but in IE the input displays below the menu text and interferes with the hr...

CSS:

Code:

	

#contentHeader { 
   margin-top: 2px; 
   font: 11px lucida grande, verdana, arial, sans-serif; 
   padding-top: 2px; 
   clear: all; 
} 

#pathway { 
   float: left; 
} 
#searchForm { 
   text-align:right; 
   float:right; 
   margin-right: 5px; 
} 

html:

Code:

<div id="contentHeader"> 
      <span class="pathway">Home </span>       
<div id="searchForm"><form action='index.php' method='post'><input class="inputbox" type="text" name="searchword" size="15" value="search..."  onblur="if(this.value=='') this.value='search...';" onfocus="if(this.value=='search...') this.value='';" /><input type="hidden" name="option" value="search" /></form></div> 
   </div> 
   <hr /> 

you can see what happens here - http://jmaid.org/index.php?option=c...ntpage&Itemid=1 - How can I fix this?

TIA