|
JavaScript - Regexp Does Not Work In Firefox
Code:
<html>
<head>
<script>
function dt(){
var dt = new Date();
document.getElementById("time").innerHTML=dt;
}
function changeBgColor1(){
document.getElementById("bgc").style.backgroundColor='#ee0000';
}
function changeBgColor2(){
document.getElementById("bgc").style.backgroundColor='#880099';
}
function changeBgColor3(){
document.getElementById("bgc").style.backgroundColor='#888888';
}
function validate(){
var a = document.getElementById("input1").value;
var b = /[abcdef]/;
if(b.test(a)){
return true;
}
else {
alert("invalid character");
}
}
</script>
<style>
#bgc{
width:300px;
height:100px;
background-color:#cccccc;
font-weight:bold;
color:#ff00ff;
}
#time{
width:300px;
height:50px;
background-color:#aabb00;
}
</style>
</head>
<body onload="dt()">
<p id="time"> </p>
<p id="bgc" onmouseover="changeBgColor1()" onmouseout="changeBgColor2()" onclick="changeBgColor3()">
Hi There, pls change bg color
</p>
<form id="form1" onsubmit="validate()">
<input id="input1" type=text />
<input id="input2" type="submit" value="Submit" />
</form>
</body>
</html>
validate function does not work with IE or Firefox, it always returns true, even if some digits are entered in input box (which should not be validated by regexp). Why does regexp not work ? How to make it work ? Thanks Similar TutorialsPlease help. This works fine in IE but will not work in FireFox: <iframe name="ad" id="rotator" src="about:blank" scrolling="no" framespacing="0" frameborder="0" marginwidth="0" marginheight="0" border="0" style="width:450px; height:300px"></iframe> <script language="JavaScript" type="text/javascript"><!-- // Pages to rotate var pages=new Array('http://www.newquaynet.com/rotating_pages/page1.htm', 'http://www.newquaynet.com/rotating_pages/page2.htm', 'http://www.newquaynet.com/rotating_pages/page3.htm'); // Rotation interval, in miliseconds (1000 = 1 second) var rint=15000; var currentpage=-1; function rotator(){ currentpage++; if(currentpage >= pages.length){ currentpage=0; } document.all.rotate.src=pages[currentpage]; setTimeout('rotator()', rint); } rotator(); //--></script> Hello, i have a website at www.djchapperz.co.uk and i want to allow access to only internet explorer and firefox users. I've heard Javascript is good for this. If anyone could help me i would be grateful. The reason i want to do this is because in Google Chrome my site messes up on several pages. All help is welcome. Thanks in advance ChapperZHTID Heya, I wrote the following page in a day or two (please don't mind the layout). Everything seems to work excellent, apart from in Firefox (FF) in which it doesn't seem to work at all. None of the other browsers have any trouble with it. I'm pretty new to Javascript (everything you see in the source code is pretty much all I know) and I have absolutely no idea why it doesn't work in Firefox. The page in question could be found [link has been removed]. It's all there is to it. So yeah, how to actually make this work in FF? Thanks a whole bunch in advance! Much appreciated. i am using the following code to set the height of the div based on its contents. it works fine in IE but not in mozilla. Do anybody help me to solve this? <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript"> function fnCheckScroll() { document.getElementById('btnCheck').innerHTML = "The value of scrollHeight is: " + oID_1.scrollHeight + "px"; } function fnSetHeight() { oID_1.style.height = oID_1.scrollHeight; return false; } </script> </head> <body> <form id="form1" runat="server"> <div> <h1>scrollHeight Property Sample</h1> <p>This sample demonstrates the use of the <b>scrollHeight</b> property to retrieve the height of the viewable content.</p> <div id="oID_1" style="overflow: scroll; height: 200px; width: 150px; text-align: left"> The <b>scrollHeight</b> property is read-only, allowing you to obtain the actual height of the scrollable content. Even though the height of this <b>div</b> is 200 pixels, the height inside the scrolling text box might be less, since the wrapped text may not use the entire area within the object. The <b>scrollHeight</b> dimension may be useful for a variety of reasons; for example, the height of the <b>div</b> could be set to the <b>scrollHeight</b> to conserve horizontal space while respecting the set width as a maximum. </div> <p><button id="btnCheck" onclick="fnCheckScroll()">Check scrollHeight </button></p> <p><button id="btnSetIt" onclick="return(fnSetHeight());">Set DIV height to scrollHeight </button></p> <!-- START_PAGE_FOOTER --><br> <br> <br> </div> </form> </body> </html> I'm new to client side js, so I'm trying to figure out the relationship between the js frames object and the <frame></frame> tags. I have read and reread the information in my book on this subject and googled many examples, but still need clarification. if I have the following code in the body of an HTML document. Code: <frame name="f1"> </frame> <<frame name="f2"> </frame> Then I should get back 2 when I do this Code: alert(document.frames.length); Instead I get document.frames is undefined from Foxfire and get 0 from ie8. If I replace document with top, window, self or parent I get 0 in both Foxfire and ie8. I'm confused, J. How would I go about having this work for Firefox. Is there away to have JQuery work with it? Code: <script type="text/javascript">
region=[//2 dimensional array containing area codes and region pairs
["201","nj"],
["202","dc"],
]
function getRegion(code){
index=0;
while(true){
console.log(index);
if(region[index][0]==code){
return(region[index][1]);
}
index++;
if(index>=region.length){
return(undefined);
}
}
}
function getLocation(number){
out=document.getElementById('output');
var answer;
if(number.length<3){
return(void(0));
}
else{
var code=number.substring(0,3);
answer=getRegion(code)
if(answer==undefined){
out.innerText="unknown area code";
}
else{
out.innerText=answer;
}
}
}
</script>
...
<form>
<input type="text" id="number" onkeyup="getLocation(this.value)">
</form>
<div id="output">
</div>
function hasTagsInText(text) { if(text.indexOf("<TABLE") >=0 || text.indexOf("<table") >=0) return 'table'; ///this line of code doesnt work in firefox i am using the following code to set the height of the div based on its contents. it works fine in IE but not in mozilla. Do anybody help me to solve this? 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 runat="server">
<title></title>
<script type="text/javascript">
function fnCheckScroll() {
document.getElementById('btnCheck').innerHTML = "The value of scrollHeight is: " + oID_1.scrollHeight + "px";
}
function fnSetHeight() {
oID_1.style.height = oID_1.scrollHeight;
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>scrollHeight Property Sample</h1>
<p>This sample demonstrates the use of the <b>scrollHeight</b> property to retrieve
the height of the viewable content.</p>
<div id="oID_1" style="overflow: scroll; height: 200px; width: 150px; text-align: left">
The <b>scrollHeight</b> property is read-only, allowing you to obtain the
actual height of the scrollable content. Even though the height of this
<b>div</b> is 200 pixels, the height inside the scrolling text box might
be less, since the wrapped text may not use the entire area within the object.
The <b>scrollHeight</b> dimension may be useful for a variety of reasons;
for example, the height of the <b>div</b> could be set to the <b>scrollHeight</b>
to conserve horizontal space while respecting the set width as a maximum.
</div>
<p><button id="btnCheck" onclick="fnCheckScroll()">Check scrollHeight
</button></p>
<p><button id="btnSetIt" onclick="return(fnSetHeight());">Set DIV height to scrollHeight
</button></p>
<!-- START_PAGE_FOOTER --><br>
<br>
<br>
</div>
</form>
</body>
</html>
Hi there. Time ago I did come across a rather old but small js library called JQPopUp. it was ideal for a project I am working on (popping out windows with images AND with possibility of CSS styling). I am more skilled at CSS than Javascript and I ignore how to modify it so it works in Firefox. I know that it requires getElementById instead of id's but I don't know how to modify the event.clientX and event.clientY events. Is there anybody there who can lend a hand? The script is below. Thanks a lot... Figaroal PS: also tried to contact author and website... both gone. Code: /*************************************************************
* Program : JQPopUp.js *
* Purpose : Genereert diverse Popup schermpjes. *
* Author : Ron Bausch *
* Version 1 : 9 mei 2003 *
* Copyright : Ron Bausch *
* Website : www.justquick.com *
* Email : ron.bausch@wanadoo.nl *
**************************************************************/
var bStay=false;
var aHelp;
var aFields;
var iWidth;
var sWidth;
var sOption;
var sHtml;
var i,iX,iY,iClX,iClY;
var JQPrompt="";
function JQPopUp(sHelptext)
{ aHelp=sHelptext.split("|");
sWidth="";
iWidth=aHelp[0].length;
if (iWidth > 30 && iWidth <= 150) sWidth='width="250"';
else if (iWidth > 150) sWidth='width="375"';
if (!bStay)
{ if (aHelp.length==1)
idHelp.innerHTML='<table '+sWidth+' class="JQColorTable" cellpadding="0" cellspacing="0"><tr><td '+sWidth+' class="JQColorBody" align="center">' + aHelp[0] + '</td></tr></table>';
else if (aHelp.length==2)
idHelp.innerHTML='<table '+sWidth+' class="JQColorTable" align="center" cellpadding="0" cellspacing="0"><tr><td>'+aHelp[1]+'</td></tr><tr><td '+sWidth+' class="JQColorBody" align="center">' + aHelp[0] + '</td></tr></table>';
else if (aHelp.length==3)
{ bStay=true;
idHelp.innerHTML=
'<table '+sWidth+' class="JQColorTable" cellpadding="0" cellspacing="0">' +
'<tr><td><b>'+aHelp[1]+'</b></td></tr><tr><td '+sWidth+' class="JQColorBody" align="center">' + aHelp[0] + '</td></tr>' +
'<tr><td class="JQColorBody" align="center"><button class="JQColorTable" onClick="idHelp.style.visibility=\'hidden\'; bStay=false;">'+aHelp[2]+'</button>' +
'</td></tr></table>';
}
else if (aHelp.length==4)
{ bStay=true;
sOption=aHelp[2].replace(/ /g,"");
if (sOption.toUpperCase()=="CONFIRM")
{ idHelp.innerHTML=
'<table '+sWidth+' class="JQColorTable" cellpadding="0" cellspacing="0">' +
'<tr><td><b>'+aHelp[1]+'</b></td></tr><tr><td '+sWidth+' class="JQColorBody" align="center">' + aHelp[0] + '</td></tr>' +
'<tr><td class="JQColorBody" align="center"><button class="JQColorTable" onClick="'+aHelp[3]+' idHelp.style.visibility=\'hidden\'; bStay=false;">OK</button>' +
'<button class="JQColorTable" onClick="idHelp.style.visibility=\'hidden\'; bStay=false;">Cancel</button>' +
'</td></tr></table>';
}
else if (sOption.toUpperCase()=="PROMPT")
{ sHtml=
'<table '+sWidth+' class="JQColorTable" cellpadding="0" cellspacing="0">' +
'<tr><td><b>'+aHelp[1]+'</b></td></tr><tr><td '+sWidth+' class="JQColorBody" align="center">' + aHelp[0] + '</td></tr><tr><td>'+
'<form name="frmJQ">';
aFields=aHelp[3].split(",");
for (i=0; i<aFields.length; i++)
{ sHtml+=
'<b>'+aFields[i]+'</b><br>\r<input type="text" name="txt'+aFields[i].replace(/ /g,"")+'" size="30"><br>\r';
}
sHtml+=
'</tr></td><tr><td class="JQColorBody" align="center"><button name="cmdOK" class="JQColorTable" onClick="JQPrompt=document.forms.frmJQ; idHelp.style.visibility=\'hidden\'; bStay=false;">OK</button>' +
'<button name="cmdCancel" class="JQColorTable" onClick="idHelp.style.visibility=\'hidden\'; bStay=false;">Cancel</button>' +
'</form></td></tr></table>';
idHelp.innerHTML=sHtml;
}
else
{ idHelp.innerHTML=
'<table '+sWidth+' class="JQColorTable" cellpadding="0" cellspacing="0">' +
'<tr><td><b>'+aHelp[1]+'</b></td></tr><tr><td '+sWidth+' class="JQColorBody" align="center">' + aHelp[0] + '</td></tr>' +
'<tr><td class="JQColorBody" align="center"><button class="JQColorTable" onClick="idHelp.style.visibility=\'hidden\'; bStay=false;">'+aHelp[2]+'</button>' +
'</td></tr></table>';
}
}
iClX=event.clientX+10;
iClY=event.clientY;
iX = document.body.clientWidth - iClX;
iY = document.body.clientHeight - iClY;
if ( iX < idHelp.offsetWidth)
idHelp.style.left = document.body.scrollLeft + iClX - idHelp.offsetWidth;
else
idHelp.style.left = document.body.scrollLeft + iClX;
if (iY < idHelp.offsetHeight)
idHelp.style.top = document.body.scrollTop + iClY - idHelp.offsetHeight;
else
idHelp.style.top = document.body.scrollTop + iClY;
idHelp.style.visibility="visible";
idHelp.style.position="absolute";
}
}
function JQPopOut()
{ if (!bStay) idHelp.style.visibility="hidden";
}
document.write('<span style="visibility:hidden;" id="idHelp"> </span>');
// EOF
I'm a real novice and out of my depth with this, i hope someone can help. I have a small script that searches a single page for a keyword, it works fine with IE, but will not work with Firefox. Below is the code thats checks which browser is running and the action to take. Code: var NS4 = (document.layers); var IE4 = (document.all); var win = window; var n = 0; function findInPage(str) { var txt, i, found; if (str == "") return false; if (NS4) { if (!win.find(str)) while(win.find(str, false, true)) n++; else n++; if (n == 0) alert("Not found."); } if (IE4) { txt = win.document.body.createTextRange(); for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) { txt.moveStart("character", 1); txt.moveEnd("textedit"); } Can anyone help me out with this problem. Many thanks Jasper hi -- someone wrote a script for me to simulate an image map on a background header in wordpress. it works great in chrome and ie, but not firefox. can someone pls. help? thx. <code> <script type="text/javascript"> function geturl() { myMouseX=event.clientX if(myMouseX < 400) { return "http://www.alexandrazissu.com/az-blog/books/"; } else { return "http://www.alexandrazissu.com/az-blog/"; } } </script> </code> and then the call: <code> <div id="header-image" onclick="location.href = geturl();" style="cursor: pointer;"> </code> Hi all, firstly i'm not a coder but i am capable of doing as instructed. I have some script that when used in conjunction with a button highlights all the text between 2 tags to make it easier for copying, it works great in IE but doesn't work in firefox, could someone help please? Here's the script and the button is below. Code: <script type="text/javascript">
function selectCode(a)
{
// Get ID of code block
var e = a.parentNode.parentNode.getElementsByTagName('CODE')[0];
// Not IE
if (window.getSelection)
{
var s = window.getSelection();
// Safari
if (s.setBaseAndExtent)
{
s.setBaseAndExtent(e, 0, e, e.innerText.length - 1);
}
// Firefox and Opera
else
{
var r = document.createRange();
r.selectNodeContents(e);
s.removeAllRanges();
s.addRange(r);
}
}
// Some older browsers
else if (document.getSelection)
{
var s = document.getSelection();
var r = document.createRange();
r.selectNodeContents(e);
s.removeAllRanges();
s.addRange(r);
}
// IE
else if (document.selection)
{
var r = document.body.createTextRange();
r.moveToElementText(e);
r.select();
}
}
</script>
Html button Code: <input type="button" value="Highlight Code" onclick="selectCode(this); return false;"> Right now, it only works with IE. This goes in the header... Quote: <script language="JavaScript1.2"> function makevisible(cur,which){ strength=(which==0)? 1 : 0.2 if (cur.style.MozOpacity) cur.style.MozOpacity=strength else if (cur.filters) cur.filters.alpha.opacity=strength*100 } </script> and this goes in the image: Quote: <img style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)" src="SOURCE OF IMAGE"> It works great in IE, but not firefox or chrome. Any way I can alter this to get it to work in all 3 or at least Firefox and IE. Thanks for the help! Hello to all, I think that you will frequently read this boring sentence: "Javascript does not work with Firefox". Below a very very simple html with Javascript. Using MS IE v8 I have found that the code works very well. Filling nothings in the textfield "your name" and subsequently clicking on the button and a window will popup with the text "Sorry, you forget to: blah-blah ..." However, using Firefox instead...it does not work. A bit remarkable; the Javascript is very easy! Could you please check what went wrong? I have activated Javascript in the Firefox browser and the security is ok for Javascript. I hope that someone can provide me a useful hint. Best regards, Cornelis The Netherlands - Gouda (yes, the town where cheese is inherently linked) [CODE] <html> <head> <meta http-equiv="Content-Language" content="nl"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Inloggen van een nieuw lid</title> <script language = "Javascript"> function checkDate() { var message = "Sorry, you forget to: \n"; var voornaam = document.getElementById("voornaam"); var result = true; if (voornaam.value.length == 0) { message+="- You have not typed your name\n"; result = false;} if(!result) {alert(message)}; return result; } </script> </head> <body> <FORM METHOD="post" name=CheckDate onsubmit="return checkDate(this);" > <div style="position: absolute; width: 603px; height: 378px; z-index: 1; left: 30px; top: 13px" id="laag1"> <p align="center"><font face="Trebuchet MS" color="#00750F" size="5"><b> Test</b></font></p> <table border="0" width="100%" bgcolor="#C4FFC4" style="border-collapse: collapse" id="table3"> <tr> <td> </td> </tr> </table> <p align="left"> </p> <table border="0" width="69%" id="table1" height="210" style="border-collapse: collapse"> <tr> <td width="37%"><font face="Trebuchet MS">your name</font></td> <td width="59%"> <p align="center"><input type="text" name="voornaam" size="25"></td> </tr> <tr> <td colspan="2" height="90"> <p align="center"> <input type="submit" value="Register me" name="Registreren"> </td> </tr> </table> <p> </p> </div> </body> </form> </html> Hi Coders, I have a Javascript on my credit card page which populates the elements of a dropdown field (The Year field). It just works with Internet Explorer and not Firefox. Here is the script: <script type="text/javascript"> <% Dim orderDateYearx orderDateYearx = cStr(Year(Date)) %> yy="<%=orderDateYearx%>"; yyyy=parseInt(yy); yyyy=yyyy var listDocUpload = document.getElementById("expDate2"); var optn = document.createElement("OPTION"); optn.value = yyyy; yyyy=yyyy+"" optn.text = yyyy.replace("20",""); listDocUpload.options.add(optn); yyyy=parseInt(yyyy)+1 var optn2 = document.createElement("OPTION"); optn2.value = yyyy; yyyy=yyyy+"" optn2.text = yyyy.replace("20",""); listDocUpload.options.add(optn2); yyyy=parseInt(yyyy)+1 var optn3 = document.createElement("OPTION"); optn3.value = yyyy; yyyy=yyyy+"" optn3.text = yyyy.replace("20",""); listDocUpload.options.add(optn3); </script> The dropdown field in Firefox is just blank. I mean no elements reside within it. (but its clickable) Any ideas why this dropdown field in Firefox is not going to be populated? Thank you for all the comments. Hey guys, noobie here. I created a page with a thumbnail viewer. Click on a thumbnail and a larger version appears on the same page, NOT a pop up or Lightbox. It previews and validates fine. Even runs in IE. But not in FF(V. 3.6.18). Ideas? Code below with JS highlighted. [code] <?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>603 products page</title> <link rel="stylesheet" type="text/css" href="css/603.css" /> <script type="text/javascript"> <!-- <![CDATA[ function changeImage(filename) { mainimage.src = filename; } // ]]> --> </script> </head> <body> <div id="frame"> <div id="logoheader"> </div> <div id="navigation"> <table align="center" cellpadding="0" cellspacing="0"border="0"> <tr> <th><a href="index.html"><img src="images/buttons/homeup.png" border="0" alt="home"/></a></th> <th><img src="images/buttons/productsup.png" border="0" alt="products"/></th> <th><a href="web.html"><img src="images/buttons/webup.png" border="0" alt="web"/></a></th> <!--<th><a href="resume.html"><img src="images/buttons/resumeup.png" border="0" /></a></th>--> <th><a href="contact.html"><img src="images/buttons/contactup.png" border="0" alt="contact"/></a></th> </tr> </table> <!--home<a href="products.html"> | products | </a><a href="web.html">web / interface | </a><a href="resume.html">resume | </a><a href="contact.html">contact</a>--> </div> <div id="contentproducts"> <div id="tablediv"> <table align="center" cellpadding="0" border="0"> <tr> <th><a href="javascript:changeImage('images/imageslarge/lumbarlarge.jpg')"><img src="images/slices/images/lumbarslice.jpg" border="0" alt="hh"/></a></th> <th><a href="javascript:changeImage('images/imageslarge/shaverlarge.jpg')"><img src="images/slices/images/shaverslice.jpg" border="0" alt="hh"/></a></th> <th><a href="javascript:changeImage('images/imageslarge/laptoplarge.jpg')"><img src="images/slices/images/laptopslice.jpg" border="0" alt="hh"/></a></th> <th><a href="javascript:changeImage('images/imageslarge/bodyformlarge.jpg')"><img src="images/slices/images/bodyformslice.jpg" border="0" alt="hh"/></a></th> <th><a href="javascript:changeImage('images/imageslarge/footlarge.jpg')"><img src="images/slices/images/footslice.jpg" border="0" alt="hh"/></a></th> <th><a href="javascript:changeImage('images/imageslarge/boomboxlarge.jpg')"><img src="images/slices/images/boomboxslice.jpg" border="0" alt="hh"/></a></th> <th><a href="javascript:changeImage('images/imageslarge/hhlarge.jpg')"><img src="images/slices/images/hhslice.jpg" border="0" alt="hh"/></a></th> <th><a href="javascript:changeImage('images/imageslarge/wandlarge.jpg')"><img src="images/slices/images/wandslice.jpg" border="0" alt="wand"/></a></th> </tr> </table> <!--START--> <div id="largeimage"> <img name="mainimage" src="images/blank.jpg" alt="main image"/> </div> <!--END--> </div> </div> <div id="footer"> <img src="images/copyright.png" border="0" alt="footer logo"/> </div> </div> </body> </html> [code] The photo html files on the Fanac Fan History project's website are setup to be displayed properly when JavaScript is disabled and reformatted by a php script when JavaScript is enabled. The reformatting adds some features and positions each photo's caption and credits based on the width of the photo and the browser's page width. This worked well except that, when a photo page was accessed the browser's back button wouldn't work properly. This was because I had failed to include the replace option in my windows.open statement. The statement now reads fileWindow = window.open(fileURL, "_self", "", true); and this has cured the problem with IE but it still doesn't work with FireFox. Oddly enough it worked correctly with Google's Chrome with/without the replace and with Opera and Safari it also sort of worked without the replace. With replace Opera works correctly but Safari stll needs a double click. Any suggestions? I'm using the Javascript Tabifier (found he http://www.barelyfitz.com/projects/tabber/) on a new website I'm building. Here is the test page I've been trying it out on: http://www.myohmomma.com/test-2 It seems to be working well in IE, but doesn't even appear in Firefox. Any idea why? Additionally, there seem to be some positioning issues when I view it in Firefox, which I'm thinking is a topic for the CSS forums, but I thought could be relevant to my issue, somehow. I don't want to overwhelm anyone williing to help with code, so please let me know if there is more you need to see. This is what applies to the tabifier: In the head of my php document: [CODE]<script type="text/javascript" src="http://www.myohmomma.com/wp-includes/js/tabber-minimized.js"></script>[CODE] In the sidebar of my php document: [CODE] <div class="sidebar"> <div class="tabber"> <div class="tabbertab"> <h2>Welcome</h2> <img src="images/Welcome.png" alt="" /> <div id="Connect"> <div id="Connect-01"> <img src="images/Connect_01.png" width="315" height="48" alt="" /> </div> <div id="Connect-02"> <img src="images/Connect_02.png" width="27" height="87" alt="" /> </div> <div id="Facebook"> <img src="images/Facebook.png" width="76" height="82" alt="" /> </div> <div id="Connect-04"> <img src="images/Connect_04.png" width="21" height="87" alt="" /> </div> <div id="Newsletter"> <img src="images/Newsletter.png" width="77" height="82" alt="" /> </div> <div id="Connect-06"> <img src="images/Connect_06.png" width="21" height="87" alt="" /> </div> <div id="Twiiter"> <img src="images/Twiiter.png" width="75" height="82" alt="" /> </div> <div id="Connect-08"> <img src="images/Connect_08.png" width="18" height="87" alt="" /> </div> <div id="Connect-09"> <img src="images/Connect_09.png" width="76" height="5" alt="" /> </div> <div id="Connect-10"> <img src="images/Connect_10.png" width="77" height="5" alt="" /> </div> <div id="Connect-11"> <img src="images/Connect_11.png" width="75" height="5" alt="" /> </div> </div> </div> <div class="tabbertab"> <h2>Features</h2> <p>Tab 2 content.</p> </div> <div class="tabbertab"> <h2>Categories</h2> <p>Tab 3 content.</p> </div> <div class="tabbertab"> <h2>Search</h2> <p>Tab 4 content.</p> </div> </div> </div>[CODE] From my CSS stylesheet: [CODE].sidebar{ position: relative; top:0px; padding-top:20px; padding-right:10px; padding-left:10px; padding-bottom:0px; float:right; width:350px; } .sidebar ul{ list-style-type: none; margin: 0; padding: 0 10px 0 10px; background:#ffffff; } .sidebar ul li{ padding: 10px 0 10px 0; background:#ffffff; } .sidebar ul li h2{ font-family: Verdana, Geneva, sans-serif; font-size: 16px; color: #2d0a0b; border-top: 1px solid #2d0a0b; border-bottom: 1px solid #2d0a0b; padding: 5px 0px 5px 0px; background:#ffffff; } .sidebar ul ul li{ padding: 0; background:#ffffff; } /* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */ /*-------------------------------------------------- REQUIRED to hide the non-active tab content. But do not hide them in the print stylesheet! --------------------------------------------------*/ .tabberlive .tabbertabhide { display:none; } /*-------------------------------------------------- .tabber = before the tabber interface is set up .tabberlive = after the tabber interface is set up --------------------------------------------------*/ .tabber { } .tabberlive { margin-top:1em; } /*-------------------------------------------------- ul.tabbernav = the tab navigation list li.tabberactive = the active tab --------------------------------------------------*/ ul.tabbernav { margin:0; padding: 3px 0; border-bottom: 0px solid #778; font: bold 12px Verdana, sans-serif; } ul.tabbernav li { list-style: none; margin: 0; display: inline; } ul.tabbernav li a { padding: 3px 0.5em; margin-left: 0px; margin-right: 3px; border: 1px solid white; background: white; text-decoration: none; } ul.tabbernav li a:link { color: #2d0a0b; } ul.tabbernav li a:visited { color: #2d0a0b; } ul.tabbernav li a:hover { color: #2d0a0b; text-decoration:underline; background: white; border-color: white; } ul.tabbernav li.tabberactive a { color: #fbb1c0; background-color: #2d0a0b; border: 1px solid #2d0a0b; } ul.tabbernav li.tabberactive a:hover { color: #fbb1c0; text-decoration:underline; background: #2d0a0b; border-bottom: 1px solid white; } /*-------------------------------------------------- .tabbertab = the tab content Add style only after the tabber interface is set up (.tabberlive) --------------------------------------------------*/ .tabberlive .tabbertab { padding:5px; border:10px solid #2d0a0b; /* If you don't want the tab size changing whenever a tab is changed you can set a fixed height */ height:285px; /* If you set a fix height set overflow to auto and you will get a scrollbar when necessary */ overflow:auto; } /* If desired, hide the heading since a heading is provided by the tab */ .tabberlive .tabbertab h2 { display:none; } .tabberlive .tabbertab h3 { display:none; } /* Example of using an ID to set different styles for the tabs on the page */ .tabberlive#tab1 { } .tabberlive#tab2 { } .tabberlive#tab2 .tabbertab { height:200px; overflow:auto; } #Connect { position:absolute; left:30px; top:200px; width:315px; height:135px; } #Connect-01 { position:absolute; left:0px; top:0px; width:315px; height:48px; } #Connect-02 { position:absolute; left:0px; top:48px; width:27px; height:87px; } #Facebook { position:absolute; left:27px; top:48px; width:76px; height:82px; } #Connect-04 { position:absolute; left:103px; top:48px; width:21px; height:87px; } #Newsletter { position:absolute; left:124px; top:48px; width:77px; height:82px; } #Connect-06 { position:absolute; left:201px; top:48px; width:21px; height:87px; } #Twiiter { position:absolute; left:222px; top:48px; width:75px; height:82px; } #Connect-08 { position:absolute; left:297px; top:48px; width:18px; height:87px; } #Connect-09 { position:absolute; left:27px; top:130px; width:76px; height:5px; } #Connect-10 { position:absolute; left:124px; top:130px; width:77px; height:5px; } #Connect-11 { position:absolute; left:222px; top:130px; width:75px; height:5px; }[CODE] I've visited the forums so many times as a reader and usually find solutions here. I'm usually good at figuring it out on my own, but I'm really stumped. I am new at this and I think I'm in over my head. I'd reallly appreciate some help. |
|||||||