CSS - Need Help Writing Css That Will Still Display Properly With Hidden Bar

gday

i have a bunch of tables that are only to be shown based on a javascript call, but for some reason, firefox is rendering the space of the table, where as IE 7 isn't..

eg.
<table style"display: none;"></table>

with a whole bunch of rows in it.. the webpage still loads blank space everywhere, rather than just empty space

thoughts?

I just tested my site with IE6 and it's very broken (although it's valid HTML 4.01 strict according to w3.org). Main problem I am having is the links. I have a left navigation box, and a list of links inside it, the links display is set to 'block'. When the user's cursor is on the same line as the link, I want the whole line to change BG color and be clickable. This works now with FF perfectly. In IE your mouse has to be ON the actual link for the background to change color, and there is space on the left of the link block.

Here is an example (not my site):
http://rmideas.com/menus/menutest/NavToBar.htm
The top right menu works like I want it to in FF, but in IE your cursor has to be on 'home'.

How can I get this to work properly in both FF and IE?

and I have overlapping problems, some code overlaps in one browser but looks fine in another.

This stylesheet was developed by volunteers (local students) who weren't asked to design for cross-browser compatibility.

In FF and Netscape the background CSS 'runs out' before the content does (problematic with black background) and there isn't any space between objects (adjoining columns, text etc.).

Because I need to make the fix asap (and I am not well versed in CSS for layout) my options here are a) pay my ISP web team to make the adjustments, b) redesign site templates using tables (which I can do, but I know is regressing) or c) get some specific feedback from you folks. The code does not validate (re. W3C CSS Validator) but I'm not experienced enough in this to know how to fix it.

In the long-term, I am definitely looking to improve my knowledge in this area and appreciate your patience with me.

I have copied the code below. Many thanks for any feedback, resources, pointers etc. you may be able to provide.



body{
background-color: Black;
background-position: center;
text-align: center;
vertical-align: center;
margin: 2px;
}

h4{
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: bolder;
color: black;
}

h6{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 7.5pt;
font-weight: normal;
color: black;
}

h1{
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bolder;
color: black;
text-transform: uppercase;
}

h2{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: bold;
color: #8B0000;
}


div#wrapper{
background-position: center;
background-color: #F0F1EB;
width: 762px;
height: 420px;
margin: 0px;
border: 1px solid #black;
padding: 0 px;


}

div#top{
background-position: center;
background-image: url(../images/top.jpg);
width: 760px;
height: 123px;
margin: 0px;
border: 0px;
padding: 0 px;
text-align: right;
vertical-align: top;
text-transform: uppercase;
}

div#toplinks{
background-position: center;
width: 634px;
height: 15px;
margin: 0px;
border: 0px;
padding: 2 px;
float: right;
vertical-align: top;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bolder;
text-align: center;
color: white;

}

div#midlinks{
background-position: center;
background-color: #F0F1EB;
width: 760px;
height: 17px;
margin: 0px;
padding: 0 px;
border-bottom: 1px solid #9E9E9E;;
border-left: 0px;
border-right: 0px;
border-top: 1px solid #9E9E9E;
}


div#midleft{
background-color: white;
width: 126px;
height: 16px;
margin: 0px;
padding: 6 px;
float: left;
border-bottom: 0px;
border-left: 0px;
border-right: 1px solid #9E9E9E;
border-top: 0px;
text-transform: uppercase;
color: red;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bolder;
text-align: right;


}

div#midleft a, div#midleft a:hover, div#midleft a:visited, div#midleft a:active{
text-transform: uppercase;
color: red;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bolder;
text-align: right;
text-decoration: none;
}

div#midright{
width: 631px;
height: 16px;
margin: 0px;
padding: 6 px;
float: right;
border:0px;
font-family: Arial, sans-serif;
font-size: 11px;
font-weight: bolder;
text-align: left;
color: white;
text-transform: uppercase;

}

div#midright a, div#midright a:hover, div#midright a:visited, div#midright a:active{
font-family: Arial, sans-serif;
font-size: 11px;
font-weight: bolder;
text-align: left;
color: #990000;
text-transform: uppercase;
text-decoration: none;
}

div#left{
background-position: center;
background-color: #F0F1EB;
width: 125px;
margin: 0px;
padding: 7 px;
float: left;
border-bottom: 0px;
border-left: 0px;
border-right: 0px;
border-top: 0px;
text-transform: uppercase;
color: black;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: 900;
text-align: right;
}

div#left a, div#left a:hover, div#left a:visited, div#left a:active{
text-transform: uppercase;
color: #990000;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: 900;
text-align: right;
text-decoration: none;
}

div#main{
background-position: center;
background-color: White;
width: 635px;
height: 470px;
margin: 0px;
padding: 0 px;
float: right;
border-left: 1px solid #9E9E9E;

}


div#mainl{
background-position: center;
background-color: white;
width: 310px;
height: 289px;
margin: 0px;
border: 0px;
padding: 10 px;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
text-align: left;
color: black;
}

div#main2{
background-position: center;
background-color: white;
width: 317px;
height: 450px;
margin: 0px;
padding: 10 px;
float: right;
border-bottom: 0px;
border-left: 1px solid #9E9E9E;
border-right: 0px;
border-top: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
text-align: left;
color: black;
}

div#main1col{
background-position: center;
background-color: white;
width: 625px;
height: 289px;
margin: 0px;
padding: 10 px;
border: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal;
text-align: left;
color: black;
}

div#main1col td, div#mainl td, div#main2 td{
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal;
text-align: left;
color: black;
}

div#main1col a, div#main1col a:hover, div#main1col a:active, div#main1col a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal;
text-align: left;
color: #8B0000;
text-decoration: underline;
}

div#mainl a, div#mainl a:visited, div#mainl a:hover, div#mainl a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal;
text-align: left;
color: #8B0000;
text-decoration: underline;
}


div#main2 a, div#main2 a:visited, div#main2 a:hover, div#main2 a:active{
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal;
text-align: left;
color: #8B0000;
text-decoration: underline;
}

.container { position: relative; left: 1px; top: 1px;}

.text {position: absolute; left: 5px; top: 0px;}


.container a, .container a:visited, .container hover, .container a:active {color: #666; text-decoration: none;}
.text a, .text a:visited, .text hover, .text a:active{color: white; text-decoration: none;}

Hi, all. I'm brand new to CSS and have run into my first speedbump. I've tried searching the forum already, forgive me if I missed a previously posted solution.

Today I put together a page at work and it looked correct in IE8 (which is the only browser we can use at work). When I got home, I discovered that it doesn't display properly in ANY other browser.

I've validated my code, and just can't figure out what the problem is.

(I tried to link to images here of what it should look like versus what it actually looks like, but apparently as a new user I'm not permitted to post URLs. I also don't seem to be able to insert images into this post, so if anyone would like to see the images, I guess I could email them to you.)

Can anyone tell me why the DIVs appear to be too long? Thanks in advance for any help.

Here is the HTML:

<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="comp.css" />
</HEAD>
<BODY>

<div id="parent">

<div id="left_top">
</div>

<div class="bigcontainer" id="right_top">
a very<br>special<br>place<br>on the<br>internet
</div>

<div class="container" id="left_mid">
additional reading
</div>

<div class="container" id="right_mid">
tab one | tab two | tab three | tab four | tab five
</div>


<div class="container" id="left_bottom">
first link<br>
second link<br>
third link<br>
fourth link<br>
fifth link<br>
sixth link<br>
seventh link<br>
eighth link<br>
</div>

<div id="right_bottom">
<p>
Lorem ipsum dolor sit amet...
</p>
</div>

</div>

</BODY>
</HTML>


Here is the CSS:

body
{
font-family: sans-serif;
font-size: 10px;
margin: 0;
padding: 0;
background-color: #e5e5e5;
}

div.bigcontainer
{
font-size: 20px;
font-weight: bolder;
vertical-align: middle;
padding: 20px 20px 0px 0px;
text-align: right;
}

div.container
{
font-size: 12px;
font-weight: bolder;
vertical-align: middle;
padding: 10px 20px 5px 0px;
text-align: right;
}

#parent
{
margin: 0px;
padding: 0px;
position:relative;
}

#left_top
{
width: 35%;
height: 190px;
background-color: #7d7d7d;
float: left
}

#right_top
{
width: 65%;
height: 190px;
color: #ffcc00;
background-color: #666666;
float: right;
}

#left_mid
{
width: 35%;
height: 35px;
color: #ffff99;
background-color: #ffd426;
float: left;
}

#right_mid
{
width: 65%;
height: 35px;
color: #666666;
background-color: #ffcc00;
float: right;
}

#left_bottom
{
width: 35%;
height: 100%;
padding: 20px;
color: #999999;
text-align: right;
background-color: #e5e5e5;
float: left;
}

#right_bottom
{
width: 65%;
padding: 20px;
color: #666666;
text-align: right;
background-color: #ffffff;
float: right;
}

I have two divs

Code:

<div class="QuickLinkDisplay" dir="ltr" lang="en">
Hello, World!<br />
Test<br />
Test
</div>

<br />

<div class="ContentDisplay" dir="ltr" lang="en">
Hello, World!<br />
Test<br />
Test</div>
</body>

The corresponding styles are as follows
Code:

div.ContentDisplay
	{

	background-color: rgb( 255, 250, 238 );
	background-image: url( ../../../images/ssplash/ContentBackground.gif );
	font-size: 10pt;
	left: 200px;
	margin-bottom: 0%;
	padding: 5px;
	position: absolute;
	width: 575px;
	
	}

div.QuickLinkDisplay
	{
	
	background-color: rgb( 255, 227, 160 );
	background-image: url( "../../../images/ssplash/QuickLinkBackground.gif" );
	left: 200px;
	padding: 5px;
	position: absolute;
	width: 575px;
	
	}

The problem is, that ContentDisplay which is supposed to be displayed under QuickLinkDisplay, is printed right in the middle of QuickLinkDisplay (see it in action here The middle column is all I'm concerned about)

Anyone know how to fix this?

CSS coding started. Please see post #3

Here's the design:

Is there a way to detect whether someone is using a mobile device, and write specific CSS according to whether the viewer is using a computer or Iphone/ Blackberry or other mobile device?

Any links or info is appreciated.

thanks
-

Hi.
I have a nav bar on my site which I created using Suckerfish Dropdowns.
my <UL>-s id is "nav".

Everything is working when I hide secong level list by Css: Code:

ul ul{display:none;}

But when I change it to (so as to not hide all second level lists) Code:

ul#nav ul{display:none;}

,
the browser still hides the list, but didn't show it on hover! : Code:

li:hover ul, li.sfhover ul{
 display: block; 
 }

This behaviour seems very strange for me.
Can anyone explain me that?

The address of the page is http://www.dinal.ru/new/

Thank you.
Artashes

Hi. I have this DIV element which has content inside, and which has some JS code implemented on it. Every thing works like a charm.

Then, I add a transparent PNG background. Everything's still working. But for the PNG background to be transparent in IE I have to set a filter on the DIV, like this:
CSS Code:
Original - CSS Code * html #master_container /* This is the DIV element */ { background-image: none; background-color: transparent; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='./images/main_window_glass.png', sizingMethod='scale'); }

  

 * html #master_container /* This is the DIV element */


 {


     background-image: none;


     background-color: transparent;


     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader


     (src='./images/main_window_glass.png', sizingMethod='scale');


 } 

Which in turn, for some blunt and very unknown reason, cancels any functionalities of the content inside the DIV or the JS code relative to the DIV.

Here, take a look: http://pilau.phpnet.us/mctours/index.html
Compare in FireFox and IE6 and tell me if you have ANY clue!
Thanks, very much, frustrated Pilau

I have a header.inc file and a footer.inc file that is called to each new file that I create.

The header.inc file holds all the javascripts as well as calls the css, etc. It also begins the body and the footer.inc file closes the body. In other words in each new file that I create I have a php statement calling the header, and at the bottom of the file another statement that calls the footer. So each new file is really only part of the body as the title and head are found in the header.inc file.

What I would like to do is be able to change the background color of the body of a new file if I choose to do so. But obviously because each new file is only part of the body I cannot put a css style in the new file.

Is there any way of writing a php statement that I can place in a new file that would allow me to change the background-color of let's say #faunabody for that particular page??.

Hope this is clear...thanks alot

Hey, does anyone know if there's a mozilla equivilent to writing-mode?

um .. that's all

Thanks

This is working fine in FF, but IE ignores it. I have large bottom margin and large negative bottom padding contained in a wrapper with overflow set to hidden, to keep my columns the same length for different content, which seems to be ignored in IE. Other than that I'm pretty happy with the site, but I don't really know what I'm doing, so I don't really know what I'm doing wrong..

Can anyone help?

Structure;
Code:

<div id="divBranding">
  
</div>

<div id="divWrapper">

	<div id="divSidebar">
	</div>
  

	<div id="divContainer">
    	</div>
  
</div>


<div id="divFooterWrapper">

	<div id="divInfo">
	</div>

</div>

CSS for body;
Code:

body {
	width: 800px;
	margin-right: auto;
	margin-left: auto;
}

CSS for wrapper;
Code:

#divWrapper {
	overflow: hidden;
	*html overflow:scroll;  
	display: block;
}

CSS for Sidebar;
Code:

#divWrapper #divSidebar {
	float: left;
	width: 198px;
	margin-bottom: -1999px;
	padding-bottom: 1999px;
	position: relative;
}

And CSS for Content;
Code:

#divWrapper #divContainer {
	float: right;
	width: 598px;
	margin-bottom: -1999px;
	padding-bottom: 1999px;
	position: relative;
}

And CSS for Footer Wrapper;
Code:

#divFooterWrapper {
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	clear: both;
}

I am having trouble with the overflow: hidden; in IE6. I have a simple example. I have rewritten this to make it as simple as possible.

[code]
<html>
<head>
</head>
<body>
<div style="position:absolute; top: 100px; width:200px; z-index:1; bottom: 113px; overflow:hidden">
<img src="images/700/900-pixel-height-image.jpg">
</div>
</body>
</html>

This simple page works fine in Firefox but in IE6 the overflow:hidden does not work. Why? I thought IE6 completely supported overflow.

I have some drop-down menus that are hidden behind a flash movie. I have set the z-index way up to 6 on them, but they still stay hidden. Anybody have any ideas?

http://www.husbandman.org/2baptist/

I have some hidden divs that on click they slide down under the link that was clicked. It works fine in firefox and ie, but in safari if you click it the first time it looks good, but when you click and close it and open it again the hidden div is off to the right i cant figure out why this is happening only in safari.

this is the good one
http://brendanperkinsDOTcom/ryangood.jpg

this is the bad one
http://brendanperkins.DOT/pic3.jpg

this is the css im using
Code:

/* Individual page divs (also in left column) */
.hidden-divs {
	position: relative;
	display: none;
	width: 387px;
	height: auto;
	border-top: 1px solid #dddddd;
	border-bottom: 1px solid #dddddd;
	font-size: 11px;
	line-height: 1.5em;
	padding-top: 10px;
	padding-bottom: 10px;
}

.hidden-divs a:link, .hidden-divs a:visited {
	color: #4d4d4d;
	font-size: 14px;
}

and this is my html for the nav and hidden divs
Code:

<div id="main-nav">
					<ul id="nav-higher" class="nav nav-higher">
						<!-- HOME -->
						<li><a class="trigger" rel="#header-6" onclick="return toggle_div('home-video', 'ryan_1');" href="#">Home</a></li>
						<li><div id="home-video" class="hidden-divs">
								<a href="readmore_home.htm" class="ceebox" rel="800 100 ajax">Why you are here</a>
							</div>
						</li>
						<!-- MEET RYAN -->
						<li><a class="trigger" rel="#header-5" onclick="return toggle_div('meet-ryan', 'ryan_2'); " href="#">Meet Ryan</a></li>
						<li><div id="meet-ryan" class="hidden-divs">
								<a href="readmore_meetryan.htm" class="ceebox" rel="800 220 ajax">BIO</a>
							</div>
						</li><!-- END OF MEET RYAN -->
						<!-- PROGRAMS -->
						<li><a class="trigger" rel="#header-4" onclick="return toggle_div('programs', 'ryan_3'); " href="#">Programs</a></li>
						<li><div id="programs" class="hidden-divs">
								<a href="readmore_programs.htm" class="ceebox" rel="800 400 ajax">Make Your Own Lunch&trade;</a>
							</div>
						</li><!-- END OF PROGRAMS -->
						<!-- BLOG -->
						<li><a rel="external" href="http://makeyourownlunch.com/">Blog</a><br /></li><!-- END OF BLOG -->
						<!-- REVIEWS -->
						<li><a class="trigger" rel="#header-3" onclick="return toggle_div('reviews', 'ryan_4');" href="#">Reviews</a></li>
						<li><div id="reviews" class="hidden-divs">
								<div class="blurbwrap" id="review1">
									<p class="blurb">&ldquo;UH-MA-ZING!!! I laughed so hard that I think I sprouted a six-pack!&rdquo;</p>
								</div><!-- blurbwrap -->
									<img class="review1-pic" src="images/Molly.jpg" alt="Review" />
									<p class="img_id"><strong>Molly Somerville</strong><br />Idaho Business Professionals of America</p>
								<div class="blurbwrap" id="review2">
									<p class="blurb">&ldquo;...In a nutshell Ryan blew those kids away&rdquo;</p>
								</div><!-- blurbwrap -->
									<img class="review1-pic" src="images/mell.jpg" alt="Review" />
									<p class="img_id"><strong>Misty Elliott</strong><br />Michigan Association of Student Councils and Honor Societies</p>
								<p><a onclick="return toggle_div2('review_section2');" href="#">more..</a></p>
									<div id="review_section2" style="display: none;">
										<div class="blurbwrap" id="review3">
											<p class="blurb">&ldquo;I cannot begin to tell you how much the students, the parents and the staff volunteers all LOVED Ryan and his message. It has been the most astounding feedback we have ever had about a speaker!&rdquo;</p>
										</div><!-- blurbwrap -->
											<img class="review1-pic" src="images/my.jpg" alt="Review" />
											<p class="img_id"><strong>Sara Gutowski</strong><br />Director of Programming, Michigan Youth Leadership</p>
										<div class="blurbwrap" id="review4">
											<p class="blurb">&ldquo;I have never had anyone make that much of an impression of me in only an hour!&rdquo;</p>
										</div><!-- blurbwrap -->
											<img class="review1-pic" src="images/loyalist.jpg" alt="Review" />
											<p class="img_id"><strong>T.G.</strong><br />Loyalist College</p>
										<div class="blurbwrap" id="review5">
											<p class="blurb">&ldquo;Ryan gives inspiration on how you can chase your dreams and make them real!&rdquo;</p>
										</div><!-- blurbwrap -->
											<img class="review1-pic" src="images/ffa.jpg" alt="Review" />
											<p class="img_id"><strong>M.W.</strong><br />Wisconsin FFA</p>
									</div><!-- review section 2 -->
							</div><!-- reviews -->
						</li><!-- END OF REVIEWS -->
						<!-- MEDIA -->
						<li><a class="trigger" rel="#header-2" onclick="return toggle_div('media', 'ryan_5');" href="#">Media</a></li>
						<li><div id="media" class="hidden-divs">
								<h3>Client Resources<br /><br /></h3>
								<p>Click <a href="html/av-checklist.htm" class="ceebox" rel="800 500 ajax">here</a> for Ryan's A/V requirements and event checklist<br /><br /></p>
								<p>Click <a href="html/speaker-intro.htm" class="ceebox" rel="800 380 ajax">here</a> for Ryan's speaker introduction<br /><br /></p>
								<p>Click <a href="html/bio.htm" class="ceebox" rel="800 500 ajax">here</a> for Ryan's bio (to be used in your program, website, blog, newspaper, magazines etc.)<br /><br /><br /></p>
								<h3>Media Appearances<br /><br /></h3>
								<p>Ryan on the radio If the player does not work, click <a href="pdf/Radio_Interview.mp3">here</a><br /><br /></p>
								<p id="radio"><embed flashvars="valid_sample_rate=true&external_url=http://www.ryanspeaks.com/Radio_Interview.mp3" type="application/x-shockwave-flash" wmode="transparent" allowscriptaccess="always" quality="high" src="http://www.odeo.com/flash/audio_player_standard_gray.swf"/><br /><br /></p>
								<h3>Photo Gallery <br /></h3>
								<p>Click images to enlarge..<br /><br /></p>
								<p id="zip"><a href="images/images-download.zip">Click here to download images..</a></p>
								<span><a href="images/ryan1_media.jpg" class="ceebox"><img src="images/ryan1_media_thumb.jpg" alt="Video Tag" /></a>&nbsp;&nbsp;&nbsp;&nbsp;</span>
								<span><a href="images/ryan2_media.jpg" class="ceebox"><img src="images/ryan2_media_thumb.jpg" alt="Video Tag" /></a><br /><br /></span>
								<span><a href="images/ryan3_media.jpg" class="ceebox"><img src="images/ryan3_media_thumb.jpg" alt="Video Tag" /></a>&nbsp;&nbsp;&nbsp;</span>
								<span><a href="images/ryan4_media.jpg" class="ceebox"><img src="images/ryan4_media_thumb.jpg" alt="Video Tag" /></a></span>
							</div>
						</li><!-- END OF MEDIA -->
						<!-- CONTACT -->
						<li><a href="html/contact-form.php" class="trigger ceebox" rel="800 500 ajax" onclick="return toggle_div2('ryan_5');">Contact</a></li>
						<li><a href="http://vimeo.com/1239140" rel="550 360" class="ceebox">Video</a></li><!-- END OF CONTACT -->
						<!-- LOGO, FOOTER -->
						<li>
							<img id="main_logo" src="images/logo.png" alt="Ryan Speaks Logo" />
							<div id="footer_content">
								
								 <form id="mailing_list" method="post" action="http://www.emailmeform.com/fid.php?formid=177854" enctype="multipart/form-data" accept-charset="UTF-8">
									<p id="click_to_join">Click JOIN to receive Ryan's inspiring monthly newsletter</p>
									<p><input type="text" name="FieldData0" value="" maxlength="100" size="30" /></p>                 
									<p><input id="mailinglist_submit" type="submit" class="btn" value="Join" name="Submit" /></p>
								</form>

								<p>or email us at <a href="mailto:info@ryanspeaks.com"><strong>info@ryanspeaks.com</strong></a></p>
								<p><a rel="external" href="http://www.facebook.com/ryanspeaks"><em>Facebook</em><!--<img src="images/facebook.gif" alt="Facebook" />--></a><em>&nbsp;.+&nbsp;</em><a rel="external" href="http://twitter.com/lunch_buddy"><em>Twitter</em><!--<img src="images/twitter.png" alt="Twitter" />--></a></p>
								<p>RyanSpeaks.com. All Rights Reserved.<a rel="external" href="http://designpilotonline.com"><strong>Website - Design Pilot</strong></a></p>
							</div><!-- Footer Content -->
						</li><!-- END OF LOGO FOOTER -->
						</ul>