CSS - Few Ie Quirks (visibility:visible?)

OK, so its not that festive, but merry christmas anyway!

I have a site which I need to touch up for tomorrow but I''m having trouble with div visibilities and hoped someone could see what I'm doing wrong.

In the page http://www.thoroughbredmusic.co.uk/bands.php?id=1 The logo in the top right corner of the div is hidden. I changed fixed this by changing the visibility of the container div #outerwrapper which is the main div you can see with the yellow border, but this in turn collapsed the bottom of the black container up to the text 'The Rosetta Life Band Long Description goers here'. The two cells on the right with the Album cover and next gig are still visible, but going outside of the black box and over the background. You can see this at http://www.thoroughbredmusic.co.uk/problem.php?id=1

Its really bugging me!

Thanks for your help and merry christmas!

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

Hi,

Why doesn't my vertical nav display in IE?
http://www.sabahseaside.com/sti/testindex.php
Code:

<div id="wrap"> 
<?php include 'banner.php'; ?> 
<div id="right">
		 <div class="prop"></div>
		 <div id="menu">
	<ul id="navmenu">
		<li><a href="facilities.php">Facilities</a></li>
		<li><a href="otherinfo.php">Map & Info</a></li>
		<li><a href="tours.php">Tours</a></li>
		<li><a href="otherprops.php">Other Properties</a></li>
		<li><a href="links.php">Links</a></li>
		<li id="bottom"><a href="contact.php">Contact</a></li>
	</ul>
</div>
<div class="clear"></div>
</div>
<div id="main">

http://www.sabahseaside.com/sti/layout.css

I'll admit right off - I don't know much about CSS.

I have a page that displays the event logs on my servers. If I display the whole message of each event it will take up way too much space. I'd like to have it so that if you move your mouse over the message like of the event, a "window" pops up (without navigating away from the page they are on) with the whole message.

I know my viewers are going to be using IE 6.1.

I've looked through here and on google for it, and I think I'm just looking in the wrong place.

Thanks.

Hello, I'm learning CSS and need some help in solving a simple issue. I have a basic set of 6 thumbnails and I would like a drop shadow background image for each (just experimenting with bckgr images; I know this can be done with CSS).

Code:

<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	background-color: #bbb;
}
.wrapper {
	height: 400px;
	width: 744px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10%;
	background-image: url(images/glowBg.jpg);
	background-repeat: no-repeat;
}
.imageHolder {
	height: 400px;
	width: 600px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(images/galleryBg.jpg);
	background-repeat: repeat;
}
.imageHolder img {
	border: 1px solid #999;
	margin-top: 50px;
	margin-right: 45px;
	margin-left: 45px;
	background-image: url(drop.gif);
	background-repeat: no-repeat;
	margin-bottom: 30px;
}
.imageHolder img:hover {
	border: 1px solid #F00;
	margin-top: 50px;
	margin-right: 45px;
	margin-left: 45px;
	margin-bottom: 30px;
	background-image: url(drop.gif);
	background-repeat: no-repeat;
}
-->
</style></head>

<body>
<div class="wrapper">
  <div class="imageHolder"><img src="images/gallery/1th.jpg" width="100" height="100" /><img src="images/gallery/2th.jpg" width="100" height="100" /><img src="images/gallery/3th.jpg" width="100" height="100" /><img src="images/gallery/4th.jpg" width="100" height="100" /><img src="images/gallery/5th.jpg" width="100" height="100" /><img src="images/gallery/6th.jpg" width="100" height="100" /></div>
</div>
</body>
</html>

My problem is that drop.gif for the img tags is not showing up. It is in the same directory as the .html. If you go to http://mydomain/drop.gif it appears, and if you use it for background image of .imageHolder it appears as well so the image/path isn't messed up. I'm beating my head against the wall to get this little thing working. Please help! =D

I am attempting to create a link on a page that will only appear when it is hovered upon. This is to direct an administrator to an admin page. Here is what I have attempted so far to no avail:

Code:

div.headleft {
    text-align: right;
    width: 100%;
}

div.headleft a:link {
    display: none;
}

div.headleft a:visited {
    display: none;
}

div.headleft a:hover {
    display: block;
    background: inherit;
    color: #ff0000;
}

div.headleft a:active {
    display: none;
}

I have tried a few variations to the above snippet of code and am at my wits end...

My gratitude ahead of time...

Hi,
I am using following css to apply vertical scrollbars in some tables:
"clear: both;
/*overflow: auto;*/
overflow-x: hidden;
overflow-y: auto;
height: 164px;
padding-left: 0px; /*changed_v5*/
padding-top: 0px; /*changed_v5*/
width: 100%;

border-bottom: 1px solid #A5B9D1;
scrollbar-base-color: #EAEEF4;
scrollbar-arrow-color: #506286;
scrollbar-DarkShadow-Color: #506286;
vertical-align: top;"

it seem to be working absolutely fine in IE,safari and firefox but not in Netscape.
Can anyone help me regarding this???
Is there any single style which cud work all the 3 browsers mentioned above

Hi,

I am pulling my hair out why the images are not visible on this page
http://www.zahnarzt-oberland.de/Gmunden/Inhalte/test.htm

It is based on this CSS gallery:
http://www.cssplay.co.uk/menu/slide_show.html

thank you in advance
Raggi

dear all,

is it possible, using css or otherwise, to have a div on my page remian visible even when the page is scrolled hoizontally and the div goes out of view.

the div in question runs vertically down the left hand side of the page.

there are javascript menus i have seen that do this (albeit usually when scrolling vertically), but i wonder if it can be done with css.

many thanks, mark

i have a div that has a background img. when i have p's within this div the background img only shows up if theres a line of text there. i specified the height: 277px to fix this (if theres a better way, pls let me know). and tried to put overflow:visible within p's but its still clipping. any ideas?

containing div:
Code:

#content .col {
	width:	303px;
	height: 277px;
	background: url(../images/one_third_box_top.png) no-repeat;
	float: left;
	
}

p:
Code:

#content p, ul {
	padding: 0 25px 0 30px;
	line-height: 1.5em;
	overflow: visible;
}

edit: this problem is in mozilla, but not in IE... weird.
theres also one minor thing on a totally different subject. paths..

my paths a
Code:

/pub
	/css
		main.css
	/images
		foo.jpg
		foo2.jpg
	index.html

obviously i have a link to the main.css in the index file but when i try to use url(images/foo.jpg), foo.jpg wont load? the path looks right unless im missing something... instead i have to url(../images/foo.jpg) for it to work... i always thought the '../' meant parent directory of the file (which is index.html since its linked from it)... right?

thanks in advance.

When I place my flash file in a html document I don't want the scroll bars visible, unless the window is resized smaller than the dimensions of the flash movie.

I'm using this piece of code nicely to turn the scroll bars of the browser window off, but it dosn't turn them back on when needed.

<STYLE TYPE="text/css">
BODY {overflow:hidden;}
</STYLE>

This link,

http://www.one9ine.com/flash.html

works the way I'm trying to work out. No scrollbars visible untill, the browser window is rezised smaller that the flash movie content.

Cheers for the help.

Hey guys,

I built a site that uses a linked list as an multi-level menu. This menu works fine in Moz/Netscape, but I have to use IE behaviours (thus JavaScript) for it to work in IE. Because this is a list I've contained it in a div with overflow: auto. And set a new external css file using JavaScript to convert that list into the multi-level menu.

The problem is the menu's horizontal submenus appears within the parent div, rather than overflowing above the parent. I was able to fix this problem using a z-index and overflow: visible in IE. However, in Gecko based browsers the menu's submenu's links aren't accessible over the site content also contained in an overflow: auto div. But, as said works fine in IE.

Here is the site. To test this bizare functionality manipulate the #contentArea and #navArea properties in this css file.

You will notice that there is a DHTML custom scrollbar if JS is enabled, this is because the only way I could get the submenu's to be accessible above the content in Gecko is to make the div overflow: hidden.

Myself, and the developer of the orginal menu, have been working on this for weeks (well, more me) and haven't determined how to make the menu accessible while mantaining overflow: auto on the #contentArea div. Just today we had some limited success changing the #navArea position to fixed rather than absolute in Gecko. After some repositioning the menu was fully accessible at medium/100% text size. But, once the site was resized using font sizes (it uses a relative font size 'em' for an elastic layout) the fixed div wouldn't stay in position.

I'm hoping that someone here is able to tell me how to set overflow: visible to overflow above an overflow:auto div in NS/Moz (I'm using FF0.8) and still work in IE?

I'd greatly appreciate it because I want to replace the custom scrollbar with default scrollbars for accessibility. Thanx.

I am trying to set a height of a container div, and have the inner div spill out of the container without changing the height of the container div:
Code:

	<style media="screen" type="text/css">
		.inner{
			width: 80px;
			height: 80px;
			background-color: #0000FF;
		}
		
		.outer {
			width: 120px;
			height: 20px;
			background-color: #FFFF00;
			overflow:visible;
		}
	</style>

IE 6 is giving me trouble. It insists on making the container div the same height as the inner div. Anything I can do to tell IE6 to not change the height of the container?