HTML - Css Not Working Out Properly With Html
Hello all!
I was going to give my website a new structure, so i would be able to make more stylesheets, without making different HTML's. And to give my website more differences between the stylesheets, i decided to put the leftpanel buttons into the css stylesheet too, so i was able to give them different looks just by changing the css. So i changed the source (src) to an transperant .png file called "linky.png", and then i gave each button an id. Each ID was named the name of what the button refers to, and what it is (Example: ID="Homebutton"). Now as you can guess, each button can't be seen, only be pressed on. So i went to my stylesheet (Classic.css) and entered the names and gave them properties (look below to see an example). Code: #Homebut { background-color: #FFFFFF; background-image: url("Classic/Home.png"); background-repeat: no-repeat; } And i was really excited over the result. I opened index.html using Firefox, but my excitement was over. The buttons didnn't show up. All i could 'see' was my invisible button. I don't think that this is a really big and hard problem to solve, it's probaly just something i spelled wrong or wrote wrong. But i checked everything, and i couldn't find any things that looked like that at all. That's why i kindly ask you to help me. Download everything you need for solving my problem right here! If there is anything else you need to solve my problem*, just ask for it and i'll see what i can do. *=anything else than money xP Similar TutorialsI have an html page and right above this page i placed an flash file by putting a layer above this file...now the problem is b/w IE and mozilla firefox. When i see my page in IE the links are working properly but in firefox links are not working properly becauz of flash file behind html page.....so can u plz help me out with this. Thanks in advance. I'm trying to design a website for my self and I have a problem. My default browser is Safari so I didn't notice the problem till now. I designed the site layout in photoshop and the site in dreamweaver and it works fine in IE and Safari but in Firefox the site layout gets split at the top of the page and you can see the background in a line. Now the layout has two CSS styles for content in the middle and sidebar on the left both have background color that matches the design #333 and #646464. These are noticeable in the split. The site is sv-photography.net Any one got any ideas on how to fix this? SebastjanV Hi, I've just finished creating the layout for my website. I was just wondering if anyone could tell me why my text does not fit in the boxes that I have created using layers while in Internet Explorer it seems to work fine. Here is the link: http://www.geocities.com/seto.chaos/ And here is the code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Welcome to Gameplatforms</title> <script language="JavaScript" type="text/JavaScript"> <!-- function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true); //--> </script> <style type="text/css"> <!-- body { margin-top: 0px; margin-bottom: 0px; } --> </style></head> <body bgcolor="black" body link="yellow" vlink="purple" alink="red"> <div id="Layer5" style="position:absolute; background-color:#666666; left:10px; top:176px; width:211px; height:667px; z-index:5"><font size="2" face="Arial" color="Yellow"> </font> <div id="Layer4" style="position:absolute; background-color:#999999; left:15px; top:100px; width:185px; height:48px; z-index:4"> <div id="Layer4" style="position:absolute; left:31px; top:6px; width:86px; height:36px; z-index:4"> <p><font color="Yellow" size="6" face="Arial"><font color="Yellow"></font> <a href="Reviews%20Page.htm">Reviews</a></font> </font></p> </div> <p><font color="Yellow" size="2" face="Arial"><br> <br> </font></p> </div> <div id="Layer4" style="position:absolute; background-color:#999999; left:15px; top:170px; width:185px; height:48px; z-index:4"> <div id="Layer4" style="position:absolute; left:44px; top:6px; width:86px; height:36px; z-index:4"> <p><font color="Yellow" size="6" face="Arial"><font color="Yellow"></font><a href="http://gameplatforms.proboards62.com">Forum</a></font> </p> </div> <p><font color="Yellow" size="2" face="Arial"><br> <br> </font></p> </div> <div id="Layer4" style="position:absolute; background-color:#999999; left:15px; top:240px; width:185px; height:48px; z-index:4"> <div id="Layer4" style="position:absolute; left:44px; top:6px; width:86px; height:36px; z-index:4"> <p><font color="Yellow" size="6" face="Arial"><a href="Videos%20Page.htm">Videos</a></font></p> </div> <p><font color="Yellow" size="2" face="Arial"><br> <br> </font></p> </div> <font size="2" face="Arial" color="Yellow"> <div id="Layer4" style="position:absolute; background-color:#999999; left:15px; top:31px; width:185px; height:48px; z-index:4"> <div id="Layer4" style="position:absolute; left:50px; top:7px; width:86px; height:36px; z-index:4"> <p><font color="Yellow" size="6" face="Arial"><a href="News%20Page.htm"> News</a></font></p> </div> <p><br> <font color="Yellow" size="4" face="Arial"><br> </font></p> </div> </font></div> <font size="2" face="Arial" color="Yellow"> <div id="Layer4" style="position:absolute; left:144px; top:143px; width:5px; height:18px; z-index:4"><font color="Yellow" size="4" face="Arial"> <a href="News%20Page.htm"> News </a></font></div> <div id="Layer3" style="position:absolute; left:10px; top:141px; width:1108px; height:26px; background-color:#666666; z-index:3"><font size="2" face="Arial" color="Yellow"> <div id="Layer4" style="position:absolute; left:440px; top:2px; width:6px; height:16px; z-index:4"><font color="Yellow" size="4" face="Arial"> <a href="Reviews%20Page.htm"> Reviews </a></font></div> </font> <div id="Layer4" style="position:absolute; left:687px; top:2px; width:5px; height:18px; z-index:4"><font color="Yellow" size="4" face="Arial"><a href="http://gameplatforms.proboards62.com">Forum</a></font></div> <font size="2" face="Arial" color="Yellow"> <div id="Layer4" style="position:absolute; left:916px; top:2px; width:5px; height:18px; z-index:4"><font color="Yellow" size="4" face="Arial"> <a href="Videos%20Page.htm"> Videos </a></font></div> </font></div> <div id="Layer1" style="position:absolute; left:10px; top:14px; width:1108px; height:884px; z-index:1"> <p> </p> <p> </p> <p> </p> <p><br> </p> <p><br> </p> <div id="Layer3" style="position:absolute; left:0px; top:841px; width:1108px; height:40px; background-color:#666666; z-index:3"><font size="2" face="Arial" color="Yellow"> <div id="Layer4" style="position:absolute; background-color:#999999; left:9px; top:9px; width:1090px; height:24px; z-index:4"> <p><font color="Yellow" size="2" face="Arial">Contact us: <a href="mailto:kaibachaoschampion@gmail.com">Email:</a> <a href="mailto:kaibachaoschampion@gmail.com">kaibachaoschampion@gmail.com</a></font></p> </div> </font> </div> <div id="Layer5" style="position:absolute; background-color:#666666; left:948px; top:162px; width:160px; height:667px; z-index:5"><a href="http://www.play-asia.com/SOap-23-83-19kw-49-en.html"> </a> <a href="http://www.play-asia.com/SOap-23-83-19kw-49-en.html"><img src="http://www.play-asia.com/paOS-32-74-z.html" border=0 alt="Play-Asia.com - Buy Video Games for Consoles and PC - From Japan, Korea and other Regions!" width="160" height="600"></a> </div> <div id="Layer5" style="position:absolute; background-color:#666666; left:251px; top:162px; width:666px; height:667px; z-index:5"> <div id="Layer4" style="position:absolute; background-color:#999999; left:30px; top:110px; width:607px; height:87px; z-index:4"> <p><font size="2" face="Arial" color="Yellow">Text text text text text text text text text text text </font></p> </div> <div id="Layer4" style="position:absolute; background-color:#999999; left:30px; top:210px; width:607px; height:72px; z-index:4"> <p><font color="Yellow" size="6" face="Arial"> Title</font></p> </div> <div id="Layer4" style="position:absolute; background-color:#999999; left:30px; top:290px; width:607px; height:153px; z-index:4"> <p><font color="Yellow" size="2" face="Arial">Text text text text text text text text text text text</font></p> </div> <div id="Layer4" style="position:absolute; background-color:#999999; left:30px; top:30px; width:607px; height:71px; z-index:4"> <p><font color="Yellow" size="6" face="Arial">Title</font></p> </div> <div id="Layer4" style="position:absolute; background-color:#999999; left:30px; top:450px; width:607px; height:72px; z-index:4"> <p><font color="Yellow" size="6" face="Arial">Title</font></p> </div> <div id="Layer4" style="position:absolute; background-color:#999999; left:30px; top:530px; width:607px; height:119px; z-index:4"> <p><font color="Yellow" size="2" face="Arial">Text text text text text text text text text text text text text </font></p> </div> <font size="2" face="Arial" color="Yellow"></font></div> <p><br> </p> </div> <div id="Layer2" style="position:absolute; left:162px; top:14px; width:667px; height:123px; z-index:2"><img src="http://i5.photobucket.com/albums/y157/kaibachaoschampion/Logo.png" width="800" height="125"></div> </font> </body> </html> Thanks Hello to all, I am new to the forum and I hope some of you experts can give me some advice. I use firefox and my website looks exactly how i want to in it, however I just noticed that in IE it seems as though my little spacer images arent working properly, is there any quick/easy fix for this? Im not exactly a "pro" so the easiest work around would be awesome, however i do have to get this fixed one way or another so any help is greatly appreciated. Here is the link for the site: http://infinityreinforcing.com/photos.html the projects line up perfectly in FF, but in IE it is a big ol mess, thanks in advance. I have an e-mail form on my site and when someone clicks the submit button I get sent two e-mails. Did I do something wrong or miss something? Here is the code I am using. Code: <form name="form1" method="post" action="http://wrathchild.edit-strike.nl/securemail.php"> <input type=hidden name="subject" value="Request from site"> <input type=hidden name="required" value="fullname,email"> <input type=hidden name="redirect" value="http://wrathchild.edit-strike.nl/thankyou.html"> Name:<br><input type=text name="fullname"> <P> E-mail:<br><input type=text name="email"> <P> What kind of graphic would you like ?<br> <select> <OPTION VALUE="signature">Signature <OPTION VALUE="spray">CS:S Spray/Logo <OPTION VALUE="Web Banner">Web Banner <OPTION VALUE="other">Other </select> <p> Details:<br><textarea name="details" rows="10" cols="50"> </textarea> <P> <P> <P> <input type="submit" name="Submit" value="Submit"><br> </form> Myself and my co-worker have been staring and digging at this for a week. If anyone has any ideas, I would appreciate any feedback. http://rwshome.com/mega/index.html You will see in every browser the top nav and right side nav CSS image rollovers function just LOVELY. Butttttt...in IE6, they do not work at all. I have combed the code about 50 times. I cannot figure out why it isn't working. We are at our witts end on this issue, so I figured I would register and see if anyone here could shed some light. On an even better note, we have this same CSS rollover code on about 60 other webites and it works fine in IE6. Weeeeeeeee! Sometimes, a pair of fresh eyes just helps and it's something simple. I hope that is the case. Thanks Pete Hi all, I've created a simple login with some free code i found online. I wanted to change the login button to an image, just for aesthetics, but no matter what i try, it wouldnt work - the form does make sure i'm entering the right user & password, but once i do enter them, i get the same page with an empty form. (if i try the original type="button" code, it works just fine) I've been googling it for hours, with no results... i've tried anything and everything. ANY help would do :-) this is the code: <script language="javascript"> <!--// function pasuser(form) {if (form.id.value=="1") {if (form.pass.value=="1") {location="MainPage.htm"} else {alert("Invalid Password")}} else {alert("Invalid UserID")}} //--> </script> these are the buttons: WORKING BUTTON: <input type="button" value="Login" onClick="pasuser(this.form)"> NOT WORKING BUTTON: <input type="image" value="Login" onClick="pasuser(this.form)" src="Materials/Login.png" alt="Login" /> in the development of a website i've been given about 50 Word files as my client would have them designed as a webpage - i've NEVER had success doing a simple conversion - is there any good way to convert these .doc files to html without total destruction of the layout? anyone? many thanks, Glenn Hi Guys. I recently updated my website, I moved my company logo so it would be above my main navigation, however by doing this I needed to change the .css slightly (the "Stage" width was altered - this was the only thing I changed). By doing this it allowed for a slightly newer navigation layout which you can view HERE. However since I have done this, the website is no longer viewable properly using a Mac (it still looks fine on a PC) why would this have changed? (I took a screen grab of what I mean - you can view it HERE I'm not a pro by any means, I have self taught myself but I am seriously stumped by this. Any help is welcome! I recently finished creating this html/css layout design. It's been put together with the use of tables, and is valid CSS and XHTML 1.0. However it just won't seem to show up correctly in any browser other than Internet Explorer. What is up!? Can someone please check my code over and help me out? I need to have this done by tomorrow and am totally lost! Thanks in advance! Here's the URL: http://barrel-house.ca/test/ Hi all, Just wondering if someone may shed some light on why SSI would work for my php pages but not my HTML ones? .htaccess root/include (I don't want to be setting this type of access across the site so it sits at the .shtml location): Options +Includes AddHandler server-parsed .shtml PHP (works): <?php include("../include/copyright.shtml"); ?> HTML (fails): <!--#include virtual="../include/copyright.shtml"--> Trying to load the HTML file with the include will through the following error: [an error occurred while processing this directive] Here is the layout: PHP: root/common/myPage.php HTML: root/common/myPage.html SSI: root/include/copyright.shtml If I move the copyright.shtml to the root location or put it in the same location as the files I'm trying to serve the include to, it works fine. Obviously with the site structure you want to keep all your .shtml files together so having them all stored in a common area is far more practical. Just not sure why HTML is having such a problem targeting a dir! Any help would be greatly appreciated. Thanks all! Cheers, Nick. I'm new to html and ftp, and I inputted some html from the godaddy ftp that should work and it's not working but just showing the html language. on the page I titled the file index.html, but it's still not working. Go here please: http://animalcon.com/ Any suggestions? thanks -Nate HI, I am trying to fix a webpage ( http://www.d.umn.edu/itss/labs/maps/ ) which uses some pretty complex html (atleast for me) to show pop ups when you rollover the numbers on a map of the building. They work fine in IE and Fire Fox but dont work properly in Safari. Any ideas on why it acts funny in Safari? Here is the code used to show the pop up for one of the numbers on the map. <!-- BEGIN POPUP CODE _MWAH 177_ --> <div class="test-popup"> <div id="lab-title" class="pdiv"> <p class="ptitle">MWAH 177</p> </div> <table width="100%" cellpadding="0" cellspacing="0" style="margin: 0px; padding: 0px"> <tr><td> <div id="lab-info" class="pdivnob"> <p class="pinfo"><img src="pcicon.jpg"><img src="bwprinticon.jpg"><span class="pinfot">TODAY'S HOURS:</span> 8:00am - 8:00pm</p> </div> </td></tr></table> <table class="pinner" cellpadding="0" cellspacing="0" style="margin: 0px; padding: 0px; border-bottom: 1px solid black; border-top: 1px solid black" width="100%"> <tr> <td valign="top"> <div id="lab-info2" class="pdivnob"> <p class="pinfo"><span class="pinfot">CURRENT AVAILABILITY:</span></p> </div></td> <td valign="middle"> <img src="http://labstats.d.umn.edu:8080/PieChart?lab=6&title= " height="90" border="0" align="middle"> </td> </tr> <tr> <td colspan="2" align="center"> <img src="key.jpg"> </td> </tr> </table> <div id="lab-links" class="pdiv"> <p class="plinks"><span class="pinfot"><a href="http://labstats.d.umn.edu:8080/public/public.swf?map_id=4&lab_id=6&srv=http://labstats.d.umn.edu:8080" target="_blank">ROOM VIEW</a> | <a href="https://summit.d.umn.edu/r25/html/Computer_Labs.html" target="_blank">SCHEDULE</a> | <a href="#10" target="_self">LAB INFO</a></span></p> </div> </div> <!-- END POPUP CODE --> I have been sent a flash file to use on my website as an ad. I have successfully inserted it as a html into my website, and it is all working fine apart from one thing. The link is not working. I have followed all the tutorials correctly, and when you hover over it, it displays the link in the pane at the bottom of Internet Explorer. The problem is that I can't edit the flash file, and it did not come with any hyperlink added to the swf. Is there a way I can make this work so that it goes to the link when clicked on? This is my html code so far: <a href="http://www.rspb.org.uk" target="_blank"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab" width="498" height="380" id="test1"> <param name="movie" value="http://s1.2mdn.net/1286313/GOLDFINCH-RSPB-LBANNER-SWF.swf " /><embed src="http://s1.2mdn.net/1286313/GOLDFINCH-RSPB-LBANNER-SWF.swf " width="468" height="60" name="test1" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" /></object> </a> Hello, I am attempting to make it so when a user selects an option from a drop down menu, the option will also appear in a nearby input box I've named "readout" below. I've gotten it to at least display a javascript alert with the user-selected value, theoretically ruling out the HTML as the problem. I've bolded the part below where I expect the value to change, however, it remains at the starting value of 1. Any suggestions? //-----------------------------------------------> <script> var FKeyPad = document.Keypad; var flag = true; function resetIndex(selObj) { if(flag) selObj.selectedIndex = -1; flag = true; } function doSomething(selObj) { alert(selObj.value); FKeyPad.ReadOut.value = "selObj"; flag = false; } </script> <FORM name="Keypad" action=""> <select onchange="doSomething(this)" onclick="resetIndex(this)"> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> <input name="ReadOut" value="1" type="Text" size=1 width=20% maxlength="2" readonly="readonly" class="box"> </FORM> //-----------------------------------------------> I have a website that has an image that loads at the top of the page, and then text about the image that loads below it. My problem is I placed an anchor by the text, underneath the image, so when a certain link is clicked it skips the image and goes right to the text where the anchor is....but when I click on a link to refer to that anchor, it loads to where the anchor is before the image size (width and height) loads. Then, the image loads, and expands th epage, and the image is on screen instead of the text I anchored to. Is there any easy way to make it so the anchor waits for the image to load before going to where it is....or so the image preloads the size and expands to that width and height before bothering to load the entire image so the anchor will be positioned right....or anything along those lines? To clarify, it looks like this: <p><img src="image location" /></p> Text: <a name="reviews" id="reviews"></a> and then the link : <a href="site.php?cnt=<? echo($cnt); ?>&pg=<? echo($pg - 5); ?>#theanchor"> Prev 5 </a> and the anchor position loads before the image loads, so instead of skipping the picture and displaying the text, it just displays only the bottom 90% of the image or so. Any ideas would be welcomed , --Tony Hey everyone, I am new to HTML-CSS-etc. and I have a problem. When I am building my page within Dreamweaver and preview it in my browser-my CSS dropdown menu works fine. Then I import everything(files/directories) onto my FTP server and make it go live on my site. When I make it live on my site, everything shows, except the CSS menu bars DO NOT drop down or do anything. Here is the snip of the code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head> <meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>MahaRaja_RedRedeux</title> <link rel="icon" href="templates/fav.gif" type="image/x-icon"> <script language="JavaScript" type="text/javascript"> //<![CDATA[ <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> //]]> </script> <script type="text/javascript" src="required/popmenu.js"> </script> <style type="text/css"> /*<![CDATA[*/ <!-- @import url('required/maharaja.css'); @import url('required/maharaja-menus.css'); --> /*]]>*/ </style> <style type="text/css"> /*<![CDATA[*/ li.c1 {width:89px;} /*]]>*/ </style> <link href="required/maharaja-menus.css" rel="stylesheet" type="text/css"> </head> Does anyone see anything wrong here? Hi all, I'm new to these forums and would appreciate any help I can get So I've made this eBay listing and the html part of it all works fine, but eBay won't let me submit it because: "Your listing cannot contain javascript (".cookie", "cookie(", "replace(", IFRAME, META, or includes), cookies or base href." Please can someone help me edit my html to get rid of these 'contaminants'? I have a feeling that it's to do with my linked thumbnail pictures... Here's a link to the small text file for the html: http://www.mediafire.com/?dy9mkf4tbrfud34 Thanks in advance, Will. I didn't realy know where to post this as it deals with many different tread topics, so here it is. I'm maintaining a website that is mostly hlml, but has some php pages for form validation and email x-fer. The site is currently running at 1&1 hosting service and I need to move it in-house. I have setup a new server with 2003 server R2 and IIS 6 with PHP 5.x installed. When I moved the site files to the local server the site no longer parses correctly. The problem is the imbeded PHP require(); statements in my html document no longer get parsed. In fact the only way I can get php code to get parsed is to give the files a .PHP extension, then the HTML tags don't get parsed. This site has been running for years at 1&1 with this method and I am really not at liberty to change the file extensions until an entirely new site is completed. Environment; 2003 server r2 IIS 6 PHP 5.x the code is like this; <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>...</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <meta name="author" content=".."> <meta name="subject" content="..."> . . head stuff . </head> <body> <?php require ("toplabel.html"); ?> <!-- End ImageReady Slices --> <table border="0" cellpadding="10" cellspacing="0" width="770"> <tr> <td height="600" bgcolor="#c1c1c1" width="20%" valign="top"> <!-- Left Side Column --> <? require ("left_column.html") ?> <!-- End Left Side Column --> </td> <td width="60%" align="center" valign="top"> <!-- Main Content . . . --> ... etc. the toplabel.html are my image ready slices for our logo and top menu the left column.html is for the left side menu bar all the pages in the site make these calls. My htaccess file is like this; AddHandler application/x-httpd-php .php .html .htm AddType x-mapp-php4 .html .php .php3 .php4 .inc .htm AddType text/x-server-parsed-html .shtml .html .htm AddType application/x-httpd-php .html I need to get the server to parse the files like the server is is currently live on at 1&1 hosting. The server there with parse the php code embedded inside of HTLM docs. and will parse the HTLM code embedded inside the PHP files. What I have now does neither. Any ideas? Update; Found out that IIS does not use .htaccess file for directory managment, these changes where for not... I'm looking into the application mapping in IIS Manager, think the answer might lie in there somewhere... |