|
CSS - Table <td> Collapse (show/hide) Problem In Netscape 7.1
I am using a table with 5 rows and 5 columns of data.
First i hide <td>'s using style.display="none"; When i use style.display=""; for showing up <td>'s , in IE its working fine, but in Netscape 7.1 (Windows) the columns get collapsed on one another. Can anybody know why this happens ? Is there any other way it can solved. Need help pls. Similar Tutorialsplease look at the image below I think, the image I sent will be able to explain what my problem is Code: <script>
function SetState(obj_checkbox)
{ if(obj_checkbox.checked)
{
document.getElementById('NwLink').style.display = "block";
return true;
}
else
{
document.getElementById('NwLink').style.display = "none";
return true;
}
}
</script>
<form name="form">
<table width="600">
<tr>
<td>
News:<br>
<input type="checkbox" onclick="SetState(this)">
</td>
</tr>
<tr id="NwLink" style="display: none;">
<td>
Intro text:<br>
<input type="Text" name="NewsIntroText">
</td>
</tr>
<tr>
<td>
and here is some more text
</td>
</tr>
</table>
</form>
Hi there, Was wondering if anyone had a solution with what I am trying to achieve if at all possible. I've been playing with a drop down that opens onclick with pure css. What I am trying to accomplish to have the dropdown close automatically when pointer is not on the dropdown menu. I know this is possible with jQuery but get this, I am trying to accomplish this in pure css. My code is below which is pure css which again works onclick to open the 2nd tab. Again, I am trying to achieve an automatic close behavior such as with a hover but not by using the hover class or javascript. <!doctype html> <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> <!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]--> <!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]--> <!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]--> <!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]--> <head> <meta charset="utf-8"> <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <!-- Mobile viewport optimized: j.mp/bplateviewport --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects --> <script src="js/libs/modernizr-1.7.min.js"></script> <style> div.items ul:not(:target) {display:none;} div.items ul:target {display:block;} .tabs { float:left; clear:none; width:200px; height:30px; border:solid 1px #cccccc; padding:10px; background:#000000; } a { text-decoration:none; } .tabs a { float:left; margin:8px 5px 5px 5px; color:#ffffff; } ul { width:222px; float:left; clear:both; padding:10px 0px 10px 0px; margin:-8px 0px 0px 222px; line-height:35px; list-style:none; } li { border-left:#cccccc solid 1px; border-right:#cccccc solid 1px; border-bottom:#cccccc solid 1px; } ul li a { margin-left:15px; } </style> </head> <body> <!-- Start Tabs --> <div class="tabs"> <a href="#">Dashboard</a> </div> <div class="tabs"> <a href="#item2">Data & Reports</a> </div> <div class="tabs"> <a href="#">Data Archives</a> </div> <!-- End Tabs --> <!-- Start 2nd Tabs Content --> <div class="items"> <ul id="item2"> <li> <a href="#">Sales By Device</a> </li> <li> <a href="#">Delivery</a> </li> <li> <a href="#">Revenue</a> </li> <li> <a href="#">Sales By Purchase Type</a> </li> <li> <a href="#">Data Archives</a> </li> </ul> </div> <!-- End 2nd Tabs Content --> </body> </html> I'm looking for a way to show / hide a DIV triggered buy mousing over / clicking on a tab. The action will not navigate away from the page, just show / hide the DIV. I found this script: http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm But it seems like a lot of JS overhead. Is there a simpler way? I need a space where the user can select from a large group of options, so I thought I'd use a <div> and have a link saying OPEN which would make the <div> visible (whereupon the user could select choices, then close the <div>) Problem is, I am not sure exactly how to do this. I can make the <div> with the id and everything, but I am not sure how to make the div visible from the initial page. Is it something like document.theDiv.style.visibility="visible"; How do I put that into a link that the user can click to show the div? I am very new to css. I am trying to show and hide text by clicking a button. My intention is to use this in a threaded discussion board. For example I'd like the topics to be displyed when the page loads 1) topic 1 (Open/Close) 2) topic 2 (Open/Close) On hitting the Open button this would be something like this: 1) topic 1 (Open/Close) ---message 1 ---message 2 ---message 3 ---message 4 2) topic 2 (Open/Close) Hope someone can suggest me an answer or point me to one. Thanks I am normally quite good at css but I have hit a wall. I want a 2 column layout. The left column will be alot smaller than the right (one is for navigationa dn the other for content). I want to be able to show and hide the left column. When I hide it I want the rightcolumn to take up the space that the left column took up. Incase my description was confusion I have drawn this simple picture. Picture I am wanting to do this with just divs, no tables. And very little or no javascript. Thankyou. I've got a basic search and advanced search form that I switch between using divs and css properties. Theres probably a much better way todo it, but here is how I have gone about it: Code:
//Basic search form within a td on the right of page
<div id="basic_search" style="position:relative;">
<table width="100%" border="0" cellpadding="2" cellspacing="2">
<tr>
<td align="left" valign="top"><h2 class="headings">Basic Search</h2></td>
</tr>
......
</table>
</div>
<div id="advanced_search" style="position:absolute; visibility: hidden; ">
<table width="100%" border="0" cellpadding="2" cellspacing="2">
<tr>
<td align="left" valign="top"><h1 class="headings">Advanced search </h1></td>
</tr>
..............
</table>
</div>
I then use the following javascript to hide the basic search and show the advanced search in its place (And pushing down anything below it, as the advanced search is a longer form) Code:
onclick="MM_showHideSearch('advanced_search','relative','show');MM_showHideSearch('basic_search','absolute',' hide')"
MM_show_HideSearch is a modified version of the common MM_showHideLayers from dreamweaver Code:
function MM_showHideSearch(div_id,position,v){
obj = MM_findObj(div_id);
if (obj.style) {
obj=obj.style;
v=(v=='show')?'visible':(v=='hide')?'hidden':v;
obj.visibility=v;
obj.position=position;
}
}
This works fine in Firefox and almost works in ie. In IE it hides the basic search, shows the background of the advanced search, but none of the elemements. However if I put an alert(), function within the showHideSearch function (Without changing anything else), then the change works perfectly in IE. (I was using an alert function in testing) Is there anything else I could call in IE to have the same effect? Is it possible to expand a table with DIV's using CSS hidden/visible? If I select an option from a select field in one row, to have a hidden select field appear in the row directly below, moving the contents directly below down a row? Expanding the table when a hidden row becomes visible. Or should I just use DIV's and forget about using the table format? Mistake. Sorry! HI Guys, Is there a way to do the following with just css? Code: <script language="javascript">
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
function HideContent(d) {
document.getElementById(d).style.display = "none";
}
</script>
// above code in header Code: <fieldset class="radio" style="padding-left: 20px;">
<legend><strong>Postal/Billing Address</strong></legend><br /><br />
<label for="Mixed1">
<input type="radio" name="postal_yn" onclick="HideContent('shaddress');"> Same
</label>
<label for="Mixed1">
<input type="radio" name="postal_yn" onclick="ShowContent('shaddress');"> Different
</label>
<div id="shaddress" style="display:none;padding-left: 20px;">
<label for="postal_address">
<br /><span style="line-height:25px;">Please enter your postal address:</span><br />
<textarea type="text" name="postal_address" rows="3" cols="25"><?php if(isset($_POST['postal_address'])) echo $_POST['postal_address'];?>
</textarea>
</label>
</div>
</fieldset>
Works in IE, but not NN: Code:
<SCRIPT LANGUAGE="javascript"> <!--
function doSection(secNum){
//display the section if it's not displayed; hide it if it is displayed
if (secNum.style.display=="none") {
secNum.style.display=""
} else {
secNum.style.display="none"
}
}
--> </SCRIPT>
And here is the code to make it happen: Code: <A HREF="javascript:void(0)" onclick="doSection(Sec1)">What factors affect the color of meat and poultry?</A> <DIV ID="Sec1" STYLE="display: none"> <P>Myoglobin, a protein, is responsible for the majority of the red color, in meat and poultry. Myoglobin does not normally circulate in the blood but is fixed in the tissue cells. When bruising occurs during gathering, myoglobin circulates in the blood, and a small amount can be found in the meat after processing. This purplish color can leave small dark spots that resemble bruising. Exposure to light in the meat case can also affect color. (USDA) </P> </DIV> Anybody see what I did wrong? Any good links to CSS in NN, possibly used with js? Hi guys, I hope I have posted this in the right category? Can anyone advise me on how I could hide this form field using some sort of yes no radio checkbox Postal Address - same / different ** If different is selected the field below is displayed. PHP Code: <label for="postal_address"> Postal Address:<br /> <textarea type="text" name="postal_address" rows="3" cols="25"><?php if(isset($_POST['postal_address'])) echo $_POST['postal_address'];?> </textarea> </label> Any help would be greatly appreciated. I'm using a mixture of javascript and css to hide/show a div on my page. This all works fine in both firefox and ie but ie screws with the layout only after the javascript fires the first time. Click here to see what I mean. Notice the change in padding on the left div that is being shown/hidden (only in IE, firefox has no problem). Also, If you click the button too fast in IE, the browser does not accept the click. It seems as though IE needs a second to rest after it runs the javascript. Here is the css: Code:
#leftcol{
width:15%;
float:left;
padding:0 2%;
margin:0.5% 0;
border:0.1em solid #0af;
}
#content{
background:#eee;
padding:0 2%;
margin:0.5% 0 0 20%;
}
the javascript: PHP Code: function toggle_left_col() { if (document.getElementById) { var leftNav = document.getElementById('leftcol'); var content = document.getElementById('content'); if(leftNav.style.display == 'none') { leftNav.style.display = 'block'; content.style.marginLeft = '20%'; }else{ leftNav.style.display = 'none'; content.style.marginLeft = '0'; } } } and the markup: PHP Code: <p><input type="button" onclick="toggle_left_col();" value="show/hide" /></p> <div id="leftcol"> <h3>Lorem Ipsum</h3> <p>Integer tempor nunc. Phasellus luctus odio nec magna. In dapibus malesuada diam. Pellentesque ultricies, augue id porta faucibus, elit sem varius sem, quis mollis mi massa quis leo. Nulla facilisi. Sed porttitor consectetuer nisl. Nullam iaculis rhoncus urna. Praesent euismod. Sed vitae ligula. Pellentesque quis magna nec ligula feugiat fringilla. Etiam sodales, mi at laoreet iaculis, odio elit nonummy velit, ut venenatis est dolor in felis.</p> </div> <div id="content"> <h3>Lorem Ipsum</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam molestie feugiat leo. Ut eget mi. Nullam sagittis. Suspendisse ut tellus ac massa ultricies sodales. Fusce sagittis. Vivamus ante. Donec ante leo, feugiat ut, elementum sit amet, dictum non, ligula. Donec auctor ipsum. Suspendisse potenti. Curabitur posuere fermentum enim. Duis tempus lobortis ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ullamcorper. Mauris velit.</p> <p>Sed fermentum condimentum augue. Pellentesque quis velit et metus eleifend tempor. Praesent in orci. Morbi pede enim, rutrum quis, dapibus eu, dapibus ac, wisi. Sed non mauris quis eros tincidunt elementum. Aliquam vulputate rutrum wisi. Nulla accumsan, nunc sit amet tincidunt viverra, urna neque lacinia turpis, dapibus consequat dui tellus tincidunt lacus. Nunc sit amet mi vel diam varius imperdiet.</p> </div> Any ideas? My problem is pretty obvious when you look at the following link. Currently only the first three links in the list in the middle work. (Firewall, power backups, tape backup system): http://www.zacwittedesign.com/jeremy/network.html They show/hide correctly, but I need them to end up on top of eachother. I don't know how to do this without using the absolute positioning, but I can't use that because it needs to be reletive to the rest of the page. Can't I somehow anchor the layers at the same point? Thanks, Zac I've been trying get a template working to transfer my site over to CSS (I've been reading about it and it seems to be the way to go) - have been working on it all weekend and have cracked a 3 column grid that seems to work well. You can see where I've got to he http://www.discographynetwork.com/nav2.php The only small problem I have in ie is a missing pixel to the left of the home button. If you have a suggestion for that I'd be grateful. However, when I looked at it in Mozilla and Netscape the buttons mess up and the tag line doesn't stay in it's div. Can someone point me in the right direction. Thanks. Hello all, When trying to position:absolute an object within another relatively positioned and left floated in netscape 7.1, for some reason the contained element ignores the parents position:relative property and goes to the top left edge of the body. Try www.signplanning.com in Netscape 7.1 and you will see that compared to I.E. the left-side is pushed up and it should look like the Internet Explorer. Thanks in advanced. BAF Hi, i have 2 links with email and website. After visited these two links, both should appear yellow (a:visited). Well, with the IE everything functions marvelously, but with the Netscape only one link (website) functioned, but email does not activate itself yellow after the attendance. Here is the Code: Code:
style type="text/css">
<!--
a:link {color: #000000; font-family: Verdana; font-size: 10px; text-decoration:none; }
a:visited {color: #ffff00; font-family: Verdana; font-size: 10px; text-decoration:none;}
a:hover {color: #ffcc33; font-family: Verdana; font-size: 10px; text-decoration:none;}
p {
font-family: Verdana;
font-size: 12px;
color: #ccffff;
}
body {
background-color: #9095af;
}
.style1 {color: #ccffff; font-family: Verdana; font-size: 11px; }
.style2 {color: #ccffff; font-family: Verdana; font-size: 20px; }
.style3 {color: #000000; font-family: Verdana; font-size: 12px; }
.style4 {color: #000000; font-family: Verdana; font-size: 10px; }
-->
</style>
if($email) {
$eintrag= "<tr><td><span class='style3'>$text</span></td></tr>";
$eintrag.="<tr><td><a href='mailto:$email'>$email</a>, <span class='style4'>$datum</span></td></tr>";
$eintrag.="<tr><td><hr></td></tr>\n";
}
if($website) {
$eintrag= "<tr><td><span class='style3'>$text</span></td></tr>";
$eintrag.="<tr><td><a href='$website'>$website</a>, <span class='style4'>$datum</span></td></tr>";
$eintrag.="<tr><td><hr></td></tr>\n";
}
What's the problem here??? Greetings I am having a problem changing the bg colors of my tables in netscape and firefox using CSS... Ive tried everything i know, You can view the pages at RateHQ.com look at it in IE and Netscape Any ideas would be great! Thanks, Derek Hi.. I'm having a problem with floating on a CSS stylesheet. For some reason my text keeps apearing way off to the right of where it is supposed to.. It works fine with IE but not with Netscape. Any ideas? You can view the page he www.localalberta.com The CSS: www.localalberta.com/completeStyle.css Thanks Guys.. I'm working on a tabbed content Interface to be used at the bottom of some pages in a CMS. Works in FF but only partially in IE (sometimes). The tabbed portion of the interface is set up with CSS and background images. In IE im having trouble getting them to show properly but only on 1 layer. When the Javascript changes the display property of the div it brings up the appropriate background image. But only on 3 of the 4 content divs. The fourth panel "Specs" or the div#panel4{} is displaying ok, except that it will not bring up the image for the div#TopRight4 Here is the code, and a link to a test page so that you can view it in action... any ideas? html4strict Code: Original - html4strict Code <html> <style type="text/css"> <!-- body {margin:0;padding:0;} div#container {position:absolute;left:20px;top:20px;width:631px;} div#panel2, div#panel3, div#panel4 {display:none;} div#panel1 {display:block;} div#panel_style{margin-top:5px;} div.panel_links1{width:131px;float:right;text-align:center;line-height:47px;vertical-align:50%;} div.panel_links2{width:131px;float:right;text-align:center;lineheight:47px;vertical-align:50%;} div.panel_links3{width:131px;float:right;text-align:center;lineheight:47px;vertical-align:50%;} div.panel_links4{width:131px;float:right;text-align:center;lineheight:47px;vertical-align:50%;} div.panel_links a{text-decoration:none;} div.panel_links a:hover{color: gray;text-decoration:underline;} div.panelTopLeft{ background-image:url(images/CP_top_left.gif); width:100%; height:47px; float:left; } div.panelTopRight1{ background-image:url(images/CP_Four_Tab4.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelTopRight2{ background-image:url(images/CP_Four_Tab3.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelTopRight3{ background-image:url(images/CP_Four_Tab2.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelTopRight4{ background-image:url(images/CP_Four_Tab1.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelCenterLeft{ background-image:url(images/CP_center_left.gif); background-repeat:repeat-y; width:100%; float:left; height:100%; } div.panelCenterRight{ background-image:url(images/CP_center_right.gif); background-repeat:repeat-y; background-position:100% 0; width:100%;height:100%; float:right; } div.panelLowLeft{ background-image:url(images/CP_low_left.gif); background-repeat:no-repeat; width:631px; float:left;} div.panelLowRight{ background-image:url(images/CP_low_right.gif); background-repeat:no-repeat; width:6px; height:6px; float:right;} --> </style> <script language="JavaScript" type="text/javascript"><!-- var divArray = new Array('panel1','panel2','panel3','panel4'); function setDisplay(objectID){ for ( var i = 0; i < divArray.length; i++ ) { var d = document.getElementById(divArray[i]); d.style.display = (d.id==objectID)?'block':'none'; } } --></script> </head> <body> <div id="container"> <div id="panel1"> <div class="panelTopLeft"> <div class="panelTopRight1"> <div class="panel_links1"><a href="javascript:void('')" onclick="setDisplay('panel4');">Specs</a></div> <div class="panel_links2"><a href="javascript:void('')" onclick="setDisplay('panel3');">Swatches</a></div> <div class="panel_links3"><a href="javascript:void('')" onclick="setDisplay('panel2');">Features</a></div> <div class="panel_links4">Options</div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>Blah Blah Blah</p> </div> </div> <div class="panelLowLeft"> <div class="panelLowRight"> </div> </div> </div> <div id="panel2"> <div class="panelTopLeft"> <div class="panelTopRight2"> <div class="panel_links1"><a href="javascript:void('')" onclick="setDisplay('panel4');">Specs</a></div> <div class="panel_links2"><a href="javascript:void('')" onclick="setDisplay('panel3');">Swatches</a></div> <div class="panel_links3">Features</div> <div class="panel_links4"><a href="javascript:void('')" onclick="setDisplay('panel1');">Options</a></div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>More Blah Blah Blah</p> </div> </div> <div class="panelLowLeft"> <div class="panelLowRight"> </div> </div> </div> <div id="panel3"> <div class="panelTopLeft"> <div class="panelTopRight3"> <div class="panel_links1"><a href="javascript:void('')" onclick="setDisplay('panel4');">Specs</a></div> <div class="panel_links2">Swatches</div> <div class="panel_links3"><a href="javascript:void('')" onclick="setDisplay('panel2');">Features</a></div> <div class="panel_links4"><a href="javascript:void('')" onclick="setDisplay('panel1');">Options</a></div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>Still Some more Blah Blah Blah</p></div> </div> <div class="panelLowLeft"> <div class="panelLowRight"> </div> </div> </div> <div id="panel4"> <div class="panelTopLeft"> <div class="panelTopRight4"> <div class="panel_links1">Specs</div> <div class="panel_links2"><a href="javascript:void('')" onclick="setDisplay('panel3');">Swatches</a></div> <div class="panel_links3"><a href="javascript:void('')" onclick="setDisplay('panel2');">Features</a></div> <div class="panel_links4"><a href="javascript:void('')" onclick="setDisplay('panel1');">Options</a></div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>And the last bit of Blah Blah Blah</p></div> </div> <div class="panelLowLeft"> <div class="panelLowRight"> </div> </div> </div> </div> </body> <html> Test Page |
|||||||