|
CSS - Space To Invisible Divs
Hi all!
I have some DIVs and I want only one of them to be visible. Here is some simplified code: Code:
<p>
<a href="javascript:void(0);" onclick="document.getElementById('div1').style.visibility='visible';document.getElementById('div2').style.vis ibility='hidden';">Show DIV 1</a>
<a href="javascript:void(0);" onclick="document.getElementById('div1').style.visibility='hidden';document.getElementById('div2').style.visi bility='visible';">Show DIV 2</a>
</p>
<div id="div1" style="visibility:visible">
this is the content of div 1
<br/>line 2
<br/>line 3
</div>
<div id="div2" style="visibility:hidden">
this is the content of div 2
<br/>line 2
</div>
By clicking the <a> link, one DIV becomes visible, the other is hidden. The problem is that there is a gap between them, both in FF2 and IE7. Can someone explain me why there is this gap, and if there is a way I can remove it? TIA Alex Similar Tutorialsdefault template from DW. I get these white gaps and cant get rid of them. Going mad. Any advice for a newbie appreciated. Code and pic... Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
.oneColFixCtrHdr #container {
width: 780px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColFixCtrHdr #header {
padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
background-color: #FF9933;
}
.oneColFixCtrHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.oneColFixCtrHdr #mainContent {
padding: 0 20px;
background-color: #00CCCC;
}
.oneColFixCtrHdr #footer {
padding: 0 10px;
background-color: #FF0000;
}
.oneColFixCtrHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
-->
</style>
</head>
<body class="oneColFixCtrHdr">
<div id="container">
<div id="header">
<h1>Header</h1>
<!-- end #header --></div>
<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<!-- end #mainContent --></div>
<div id="footer">
<p>Footer</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
I have the following code. I realize some of you are going to cringe when you see the tables in the div tags. This application was completely tables a few months ago and I have nearly completed the switch to divs.. but this page is a generated page that is customizable and I haven't had the time to spend on converting it. unfortunately I cannot give a link to this page. I've believe I've slimmed this down to only the relevent code. The extra space occurs after the outerImageTable's content. If I set the outerImageTable's background color then the extra space also changes colors so it is part of the outerImageTable. note: There would actually be multiple instances of the innerImageTable each representing a tab. Code: <div id="content" class="ParentDivBrowse"> <div id="subContent" class="ChildDiv"> <div class="outerImageTable"> <div class="innerImageTable"> <img src="/XXXXYYYY/images/leftselected.bmp" /> <button class="XXXXTabSelected" tabindex='-1' type="submit" name="DLG1_T801_MAIN" value="0" onClick="buttonClick(this)"> Mainn </button> <img src="/XXXXYYYY/images/rightselected.bmp" /> </div> </div> <div style="float:left;"> <table border="0" cellspacing="0" cellpadding="0" width="100%"> <tr> <td colspan='2' valign="middle"> <table class='XXXXDlgTable'> <tr> <td colspan="2" height="60%"></td> </tr> </table> </td> </tr> </table> <table class="XXXXActionTable"> <tr> <td class="XXXXActionTable"> <table class='XXXXActionWidthFix'> <tr align='center'> <td width='0'></td> <td align='center' class='ActionButtons'> <button title='Clear' onMouseOver="Clear_img.src='/XXXXYYYY/images/actions/shadow/action_clear.png'" onMouseOut="Clear_img.src='/XXXXYYYY/images/actions/plain/action_clear.png'" onClick='buttonClick(this)' id='button_Clear' name='Clear' tabindex='-1' value='Clear' type='submit'> <img vspace='0' width='16' height='16' name='Clear_img' src='/XXXXYYYY/images/actions/plain/action_clear.png'> Clear </button> </td> <td width='0'></td> </tr> </table> </td> </tr> </table> </div> </div> </div> Thanks if anyone can help me. CSS entrys Code:
.OmniTabSelected{
font-size: 12px;
font-family: avenir, arial;
color: white;
background-color: #826182;
border-top:1px solid;
border-bottom:1px solid;
border-top-color:black;
border-bottom-color:#826182;
border-left: 0px;
border-right: 0px;
height:19px;
vertical-align: top;
margin-right: -2px;
margin-left: -2px;
padding:0px;
padding-right:8px;
padding-left:8px;
padding-right:expression('2px');
padding-left:expression('2px');
}
.innerImageTable{
position: relative;
float: left;
cellspacing:0px;
cellpadding:0px;
border: 0px;
margin-top:-2px;
margin-top:expression('-4px');
white-space: nowrap;
vertical-align:;
}
.outerImageTable{
position: relative;
float:left;
cellspacing:0px;
cellpadding:0px;
border: 0px;
margin-top:2px;
margin-top:expression('4px');
}
.ParentDivBrowse {
position: relative;
width: 100%;
width:expression(document.body.clientWidth < 997 ? '997px' : '100%');
min-width:997px;
max-width:100%;
overflow:hidden;
}
.ChildDiv {
position: relative;
width: 100%;
width:expression(document.body.clientWidth < 997 ? '837px' : '100%');
}
i have two divs on top of eachother with images in each. there is a space i can't get rid of in IE..looks perfect in firefox. i've tried cutting out the margins and padding to no avail. seems like ie regularly has spacing problem from google searches but none of their fixes have worked yet. I'm having a hard time getting 2 DIVs to line up appropriately. The DIV in question (#main) should just sit directly below the header (#header) DIV. If I include a clearing element (hr class="clear") then I get a space between my DIVs. If I don't include the clearing element, then I get an overlap. The problem is that it only overlaps to the height of my navigation bar (#navigation). Any suggestions would be greatly appreciated. Site is he www . deepwaterchurch . com / cms Hi, I am experiencing additional space between 2 divs (#welcomeandsearch and #welcometext) but only when previewed in IE 6. They should be flush together and are when previewed in IE 8. My css all validates. Here is the css and html: Code: #welcomeandsearch {width:940px; float:left; margin: 0px}
#welcome {width:730px; float:left; color:#FFA000; font-size:1.75em; font-weight:normal; margin: 0px}
#welcometext {width:970px; float:left; padding: 0;}
#search {width:190px; float:left; color:#363636; font-size:0.75em; font-weight:normal;}
#searchbox {width:200px; float:left; color:#363636; font-size:1.0em; font-weight:normal; height:25px;}
form input.button {width:25px; height:15px; background:#FFC666; color:#363636; font-weight:bold; border:none; font-size:11px; margin:0 auto; padding:0px;}
form input.textfield {color:#363636; font-size:0.75em; font-weight:normal;}
<div id="welcomeandsearch">
<div id="welcome">
Welcome
</div>
<div id="searchbox">
<form id="form1" name="form1" method="post" action="">
<label>Search:</label>
<input name="textfield" type="text" class="textfield" id="textfield" value="enter keywords here" />
<input name="button" type="submit" class="button" value="Go" />
</form>
</div></div>
<div id="welcometext">to the Visa Europe Customer Self Help Resource. This online resource has been developed to assist all staff with their most common IT related problems and requests.</div>
Any ideas? Thanks. I've been trying to solve this problem about my website. My site What it is suppose to look like. Image Thanks in advance. Hi there. A very frustrating problem and so simple a situation . I have two divs, one stacked on top of the other. Nothing special with positioning or anything. Total barebones stuff. If I put an image (whether with image tag or as background-image) in the top div, the div will be padded on the bottom. This only happens in IE. As an example I have my page he URL The top div bgcolor is lime green, and you'll see it adds some extra space under the image. Compare in IE & FireFox and you'll see what I mean - green can be seen under the image in IE. The bottom of the image in the top div should be butted up against the top of the second div, whose bgcolor is red. No green should exist between the image and red. Thanks for any help, this should be rediculously simple for someone who knows CSS quirks well. page passed validation - xhtml 1.0 @ w3c.org I know it has to be a padding or margin issue, but I cannot figure out where it is coming from. I have spent several days going back to this and trying to look at it with fresh eyes with no luck. I am sure it will be a 'duh' type of thing when I get a solution. Here is the webpage: http://www.palmettobaydesigns.com/new/layout.html I am getting extra space of about 10px it looks like between the white rounded top image that makes the top of my box and the div below it called .box - in ff4. In IE 8 I am getting about 1px space below the box. Thanks in advance! Ive exhausted trial and errors through reading tons of these forums and am having no luck at all! I only have IE6 to preview my extremely simple yet, bugging the H out of me, buggy page. Html Code <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- TemplateBeginEditable name="doctitle" --> <title>EvilgoodDotCom</title> <!-- TemplateEndEditable --> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable --> <link href="../CSS/evilgood_style1.css" rel="stylesheet" type="text/css" /> </head> <body ><div id="container" ><div id="header" > </div ><div id="nav1" > </div ><table id="subcontainer" width="680" height="470" ><tr ><td rowspan="3" ><div id="nav2"> </div ></td ><td rowspan="2" ><div id="main_content"> </div ></td ><td ><div id="misc_content"> </div ></td ></tr ><tr ><td ><div id="contact"> </div ></td ></tr ><tr ><td colspan="2" ><div id="footer"> </div ></td ></tr ></table ></div><!--End Table "Container"-- --></body> </html> CSS Code body { white-space: nowrap; text-align: center; } #container { text-align: left; width: 680px; height: 600px; border: 0; padding :0; margin: 0; background-color: #333333; } #subcontainer { width: 680px; height: 470px; border: 0; padding :0; margin: 0; background-color: #bf7936; } #header { width: 680px; height: 100px; border: 0; padding :0; margin: 0; background-color: #666666; } #nav1 { width: 680px; height: 30px; border: 0; padding :0; margin: 0; background-color: #999999; } #nav2 { width: 100px; height: 470px; border: 0; padding :0; margin: 0; background-color: #ffffff; } #main_content { width: 360px; height: 430px; border: 0; padding :0; margin: 0; background-color: #cccccc; } #misc_content { width: 220px; height: 290px; border: 0; padding :0; margin: 0; background-color: #ff3333; } #contact { width: 220px; height: 140px; border: 0; padding :0; margin: 0; background-color: #cc3333; } #footer { width: 590px; height: 40px; border: 0; padding :0; margin: 0; background-color: #ff9999; } Am I missing something obvious and/or can anyone give me a sure-thing answer??!! -any questions you have about my procedure and stuff is absolutely welcome! P.S. how can i get a screenshot i have of the IE6 preview to someone with a potential answer??? This is the weirdest thing, and I don't know what is wrong, and its driving me crazy. I have the following html code. Code: <body> <div id="container_bg"> <div id="container"> <div id="brand_bar"> <div id="logoleft"> Logo1 </div> <div id="logoright"> Logo2 </div> </div> <div class="header"> Big Image goes here </div> <div class="body"> <div id="left"> Left Column </div> <div id="right"> Right Column </div> </div> </div> </div> <div class="clear"></div> <div id="footer_bg"> Footer goes here </div> </body> </html> The css is as follows... Code:
body {
margin: 0px;
background: #CCC;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: center;
}
.clear {
clear: both;
}
#logoleft {
float: left;
width: 350px;
}
#logoright {
width: 347px;
}
#container_bg {
width: 768px;
margin: 0px auto;
background-image: url(../images/container_bg.gif);
background-repeat: repeat-y;
padding-bottom: 20px;
}
#footer_bg {
width: 768px;
height: 40px;
margin: 0px auto;
background-image: url(../images/footer_bg.gif);
}
#container {
width: 700px;
margin: 0px auto;
text-align: left;
}
#left {
float: left;
width: 250px;
}
#right {
width: 450px;
}
The weird thing is...I can't make left and right add up to 700 or its "bigger" than its container. I actually have to make the total add up to 697 or they won't stay on the same line. Is there just a mysterious 3 px space between divs...or am I missing something? The same with logoleft and logoright...if I make them the same (350px) to add up to 700px...it won't stay on the same line...what is going on? inner circle design Ok. If you view this page in Firefox(any version) it works fine with the rollovers and all. When viewed in IE, when you mouseover the portion to the left of the about us button, the contact us button acts as if it were being rolled over. I used a JavaScript rollover, and styled it with CSS. I'm thinking the problem lies in the CSS, although it is valid(as is the XHTML page). Can anyone steer me in the right direction? Thanks. Hello all, Site is here. As you can see, there are 4 links along the top. They are all images controlled by CSS. Here's the XHTML code I am working on: Code: <div id="logonav"> <ul> <li id="ln1"><a accesskey="k" href="./" title="To The Main Page"></a></li> <li id="ln2"><a accesskey="t" href="timeline/" title="A little about me"></a></li> <li id="ln3"><a accesskey="i" href="about/" title="Info about this little web space"></a></li> <li id="ln4"><a accesskey="c" href="contact" title="Contact Me"></a></li> </ul> </div> As you can see, there is NO actual value for the anchor: nothing. Well, the WAI-AAA validator doesn't like that. There has to be something there. The problem is that if I add text there it, of course shows up on the page. I don't want that, I want my images... So, can I add the text, but make it invisible somehow? I've played with transparencies a bit, but nothing's working. Anyone know any tricks? The CSS code that controls them is he Code:
#logonav {
background : url(./pix/MenuBar.jpg) no-repeat;
height:40px;
width : 780px;
}
#logonav ul {
margin : 0;
padding : 0;
white-space : nowrap;
list-style : none;
}
#logonav li {
float : left;
width : 130px;
text-align : center;
margin-left : 25px;
}
#logonav li a {
font : bold 0.9em Arial, Helvetica, sans-serif;
text-decoration : none;
display : block;
line-height : 26px; /* trick provided by trx */
height : 26px;
}
#ln1 a {
background : url(./pix/home_off.gif) no-repeat;
font : bold 0.9em Arial, Helvetica, sans-serif;
text-decoration : none;
display : block;
line-height : 26px; /* trick provided by trx */
height : 26px;
color : #B04F4F;
}
#ln1 a:visited {
background : url(./pix/home_click.gif) no-repeat;
}
#ln1 a:hover {
background : url(./pix/home_mouse.gif) no-repeat;
}
#ln2 a {
background : url(./pix/time_bio_off.gif) no-repeat;
font : bold 0.9em Arial, Helvetica, sans-serif;
text-decoration : none;
display : block;
line-height : 26px; /* trick provided by trx */
height : 26px;
color : #B04F4F;
}
#ln2 a:visited {
background : url(./pix/time_bio_click.gif) no-repeat;
}
#ln2 a:hover {
background : url(./pix/time_bio_mouse.gif) no-repeat;
}
#ln3 a {
background : url(./pix/about_off.gif) no-repeat;
font : bold 0.9em Arial, Helvetica, sans-serif;
text-decoration : none;
display : block;
line-height : 26px; /* trick provided by trx */
height : 26px;
color : #B04F4F;
}
#ln3 a:visited {
background : url(./pix/about_click.gif) no-repeat;
}
#ln3 a:hover {
background : url(./pix/about_mouse.gif) no-repeat;
}
#ln4 a {
background : url(./pix/contact_off.gif) no-repeat;
font : bold 0.9em Arial, Helvetica, sans-serif;
text-decoration : none;
display : block;
line-height : 26px; /* trick provided by trx */
height : 26px;
color : #B04F4F;
}
#ln4 a:visited {
background : url(./pix/contact_click.gif) no-repeat;
}
#ln4 a:hover {
background : url(./pix/contact_mouse.gif) no-repeat;
}
Just as an example, I'll add "Home" to the bar in red text. Bsaically, I figure that still has to be there, but invisible! How? Thanks! Chris Hi, I am using this class for .textbox, input.text_class, select.select_class{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color: #000000; background-image: url(./textbox_shadow.gif); height: 18px; width: 160px; margin: 0px; padding: 0px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #BFBFBF; border-right-color: #E2E2E2; border-bottom-color: #EEEEEE; border-left-color: #C8C8C8; } for text box , how can I made tghe text box invisible or hidden style.display = "none"; Ok, I know IE is buggy, but this one has been driving me nuts for a while now... I'm applying borders to the edges of a div as shown by A list apart. Pretty simple stuff and I have it working perfectly under Mozilla Firefox. IE on the other hand isn't taking it so well (imagine that). The thing is, it's like nothing I've ever seen. I changed some positioning on the page one night and ever since then it's been doing it. The lower right hand image is just not rendering. What's worse, is if I add a border to the element it will displace things as a border should but the border itself doesn't show up! I don't know how I managed to muck things up this way, but I would appreciate a hand with it if anyone has any ideas. Here is the IE Screenshot and the Firefox Screenshot Also... The CSS and The HTML Hi Guys, Is there a way to make a DIV invisible in IE but still available for mouse events? I have an arrows image used for navigating a map, I have placed invisible DIV boxes at select places on the arrows image and have various events triggered when these DIV's are clicked, this works fine in FF but in IE (as per usual) if the DIV doesn't have its backgroundColor set then the mouse events don't fire, it is like IE is saying 'the user can't see them therefore they aren't there'. Is there any way around this? P.S I can't use any kind of opacity (as it will effect the map image below the arrow image) and I have to use DIV's, slicing the image or <map> aren't an option for this. Cheers, Chris I have a site with a cityscape and need text/image div to appear to pass behind skyscrapers. The javascript for all the div motions are worked out. I had planned to just overlay a higher z-index graphic of the skyscraper where I wanted the text to pass behind, but as the site now requires the ability to scale the images on a window resize, that has become difficult if not impossible to make work seamlessly. So what I would like to do is have one div (textDiv) pass behind another (towerDiv) that shows through to the background, but when it does, it is hidden in the same way it would have been if passing behind a div with an image or background. Is it possible to make a div behave this way with css configuration? Z-index Visible 30 towerDiv 20 >-------textDiv---------> >-------------> 10 CityCityCityCityCityCityCityCityCityCityCityCityCityCity An alternative I've thought of would be to have the textDiv jump from one div container to another somehow, but that would require javascript and I'll place that question there. Thanks How would I change this to make list elements invisible? At the moment it just greys them out? div.sideBox ul li.disabled { display: block; padding: 2px 0 2px 7px; border-top: 1px solid #ccc; color: #777777; } So Id like to make the element basically like it doesnt exist. I dont want any spaces left over. Ive tried this div.sideBox ul li.disabled2 { visibility:hidden; } but it leaves an empty space. I am looking for a way (preferably using CSS) to make an I-beam or cursor inside a text field to become invisible. This may be achieved by changing its color to match the bgcolor, by making it invisible altogether, or even simply to get it to stop blinking (when the bg color is black). Any help would be appreciated. |
|||||||