|
HTML - Firefox Coding Incompatibility
I've noticed this for awhile now, and it's driving me nuts. I've been working on a layout ofor my online costuming portfolio, and recently I added a scrolling table to post any site updates I make. As soon as I put in the coding for the scrolling table with the updates, the whole page went crazy in Firefox. In IE, it looks fine.
Here's the coding I used for the whole layout.. HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Natalie's Cosplay</title>
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
</head>
<body>
<div id="wrapper">
<h1></h1>
<div id="head-1" style="WIDTH: 401px; HEIGHT: 386px"></div>
<div id="nav">
<ul>
<li><a href="http://www.geocities.com/lnyworikkukenm//index.htm"><font size="1">HOME</font></a></li>
<li><font color="#000000" size="1"><a href="http://www.geocities.com/lnyworikkukenm/Aboutme.html">ABOUT ME</font></a></li>
<li><font color="#000000" size="1"><a href="http://www.geocities.com/lnyworikkukenm/completed.html">COMPLETED COSTUMES</font></a></li>
<li><a href="http://www.geocities.com/lnyworikkukenm/inprogress.html"><font color="#000000" size="1">IN</font><font color="#000000"
size=1>-PROGRESS COSTUMES</a></font> </li>
<li><font color="#000000" size="1"><a href="http://www.geocities.com/lnyworikkukenm/planned.html">PLANNED
COSTUMES</font></a></li>
<li><font color="#000000" size="1"><a href="http://www.geocities.com/lnyworikkukenm/links.html">RECOMMENDED
SITES</font></a></li>
<li class="last"><a href="MAILTO:Chinesefightinyo@aol.com"><font color="#000000" size="1">CONTACT ME</font></a></li>
</ul>
</div>
<div id="body-left">
<h2><font color="#000000"><em><font
color=#000000>G</font></em>al</font>lery</h2>
<div id="gallery">
<div class="gal" id="gzero"><a href="http://geocities.com/lnyworikkukenm/caterina.html"><img height="163" alt="Latest Costume: Caterina Sforza from Trinity Blood" src ="bigcat.jpg" width=221 ></a></div>
<div class="gal" id="gone"><img height="41" src="1cat.jpg" width =57 ></a></div>
<div class="gal" id="gtwo"><img height="41" src="2cat.jpg" width =57 ></a></div>
<div class="gal" id="gthree"><img height="41" src="3cat.jpg" width =57 ></a></div>
<div class="clear"></div>
</div>
<table width="133" border="0" cellspacing="0" cellpadding="3" align="center"><tr><td align="middle"><a href="http://www.website-hit-counters.com/" target="_blank"><img src="http://www.website-hit-counters.com/cgi-bin/image.pl?URL=8421-4416" alt="free website hit counters service" border="0" ></a></td></tr><tr><td align="middle"><font style="FONT-SIZE: 9px; COLOR: #24092c; FONT-FAMILY: Geneva, Arial, Helvetica, sans-serif; TEXT-DECORATION: none">Get a <a href="http://www.website-hit-counters.com" target="_blank" style="FONT-SIZE: 9px; COLOR: #444444; FONT-FAMILY: Geneva, Arial, Helvetica, sans-serif; TEXT-DECORATION: none" title="free website hit counter">free website hit counter</a> .</font></td></tr></table>
</div>
<div id="body-right">
<h2 align="left"><font
color=#000000>W</font>elcome!</h2>
<p align="center">
<br><font color="#000000" size="1">Please don't use
any of my photos without asking! If you have any questions or comments, please
send me an e-mail! <br>Thanks! ~Natalie</font></p>
<h2></h2>
<div style="OVERFLOW: auto; WIDTH: 400px; HEIGHT: 300px">
<table cellpadding="0" cellspacing="0" style="WIDTH: 350px">
<tr>
<td>
<font ><font size="1"><font
color=#000000>~<u>UPDATES UPDATES UPDATES</font>
</td>
</tr>
</table></font>
</div>
<div class="clear spacer"></div>
</div>
<div id="footer" align="center">
</div></a>
<div></div></div>
<p align="center">
c 2007 Natalie's Cosplay<br>
Template from <a href="freewebsitetemplates.com">Free Website Templates</a><br><br></p>
<div></div>
</body>
</html>
Similar TutorialsHi there, Im sorry to be bringing up this rather well trodden topic, but after extensive searching through forums and trying everything I could find, I must admit I need some expert advice. Building a website, mostly html, with a small amount of css for text. Site works well in safari, firefox, chrome, but not IE. IE (7) displays the top navigation bar section, but ignores the rest of the site. Ive been trying to validate and fix all the problems, but some of the issues raised I cant fix without changing the site's appearance. I dont believe my css is complex, and other info sites have suggested what Ive used should be supported by IE7. The only thing I can now think is that for some reason ie7 doesnt recognise the second table onwards. I am sorry to be using tables - this may be my downfall - but my client wanted to have the site as accessible across the world (and so rubbish olf browsers etc) so I wanted to use as little css as possible. Any suggestions would be very much appreciated, Lindsay the url is: http://www.mosaiccreative.co.uk the css is as follows: @charset "UTF-8"; p { margin-left: 34px; margin-right: 30px; margin-top: 30px; font-family: verdana; font-size: 14px; font-weight: lighter; line-height: 16px; color: #333333; } h1 { margin-left: 161px; margin-top: 2px; font-size: 14px; font-family: verdana; font-weight: lighter; color: #333333; } h2 { margin-left: 30px; margin-top: 0px; font-family: verdana; font-size: 12px; color: #993300; font-weight: lighter } h3 { margin-left: 0px; margin-top: 6px; font-size: 12px; font-family: verdana; font-weight: lighter; line-height: 25px; color: #333333; } h4 { margin-left: 167px; margin-top: 0px; font-family: verdana; font-size: 12px; font-weight: lighter; color: #333333; } h5 { margin-left: 135px; margin-right: 30px; margin-top: 0px; font-size: 14px; font-family: verdana; font-weight: lighter; line-height: 16px; color: #333333; } h6 { margin-left: 34px; margin-right: 30px; margin-top: 0px; margin-bottom: 0px; font-family: verdana; font-size: 14px; font-weight: lighter; line-height: 16px; color: #333333; } .style2 { font-family: verdana; font-size: 12px; } .style3 { font-family: verdana; font-size: 14px; font-weight: bold; text-decoration: underline; } .style4 { font-family: verdana; font-size: 14px; font-weight: bold; } .style6 { font-family: verdana; font-size: 14px; font-weight: normal; text-decoration: underline; } Hi all, I'm new to this site, I hope someone can help me figure out what on Earth I've done wrong. I've been editing this website to a new, CSS layout with DIVs instead of frames and tables. In my browser, IE6, it looks PERFECT, but in IE7, the DIV with the navigation text is overlapping the DIV with the header image, and in Firefox 2.0.0.16, the DIVs might as well not even be there--all the text runs right on top of the image! A screencap of what it looks like in my browser is he http://i44.photobucket.com/albums/f3...ta-browser.gif A screencap of how it's turning out in IE7: http://img.photobucket.com/albums/v6...IE7Version.jpg Firefox screencap: http://i44.photobucket.com/albums/f3...layout-cap.jpg I have no idea what I've done wrong, or why it shows up perfectly in one browser, but not in any other. The page used in the example is here, so you can see how it is on yours and peruse the code for mistakes: http://cityofdemons.com/lmr.html Thanks in advance for anything you can tell me! Hello all! Cool place here and I hope with lots of experts. I have a n html template for a mod on my site and I cannot for the life of me figure out how to get it how I want. Basically what I want to do is remove the leftside images and move the titles on the right into its spot. I will post an image of what I am talkiking about and the code. Remove what is circled in red and put the tiles on the right into its spot. HTML Code: <div class="quick_links_elink" style="background-color: white;">
<div class="lcont_top">
<div id="lcont_img__unit_id__" style="left: 0px; position: left;">
<a href="__category_url__" class="main_l">
<img style="top:10px; max-height:16px;" alt="" src="__category_cover_image__" width="50px"/>
</a>
</div>
<div id="js_control_section0__unit_id__" style="padding-left: 5px;">
<a href="__category_url__" class="main_l">
__category_name__
</a>
</div>
<div class="js_control_section" id="js_control_section__unit_id__" title="Show / Hide" bximg="lcont_img__unit_id__" bxchild="lcont_other__unit_id__" style="background-position: 0px -17px;"></div>
</div>
<div class="quick_links_elink_lcont" id="lcont_other__unit_id__" style="display: none; top:40px; background-color: white;">
<a href="__category_url__" class="main_l">
<img alt="" src="__category_cover_image__" style="top:50px; width:80px; max-height:40px;"/>
</a>
<div class="lcont_other" >
__sub_categories_list__
<div class="clear_both"></div>
</div>
</div>
<script type="text/javascript">
var oShowHideController__unit_id__ = new ShowHideController();
$("#js_control_section__unit_id__").click( function() { oShowHideController__unit_id__.ShowHideToggle(this) } );
/*$("#js_control_section0__unit_id__").click( function() { oShowHideController__unit_id__.ShowHideToggle("#js_control_section__unit_id__") } );*/
</script>
</div>
THANKS in advance! At this website: http://sungbc.org/missions.php I liked how they made it so that the different people could be clicked on and a new mini-page would load on the page. Does anybody know how to do that Hey guys, i am very very new to html and i designed and coded www.e-smartonline.com for myself, i know the way i made the html was not good, i have trouble with the links cause everything is pushing them cause of the way i coded it.. lol. I was wondering if someone can fix my booboo? fix the links left and right so that it works well. thanks a lot guys! im having some trouble with putting stuff in the middle of my site because whenever i put something in the middle it moves my left nav bar down if you go here u can see what im talking about right now im using kompozer to make the site http://www.freewebs.com/zxgamerreviews/test22.html Hey Everyone, I need to set up some kind of html form which provides people with a registration ID, or number of sorts. The application of this kind of system would be so that if I had people registering for a conference, they could receive a committee assignment immediately. I'd appreciate any responses helping me. Thanks Guys (and ladies!) Bromo8824 My site PLEASE READ ENTIRE THING! Some stuff I'm saying may be hard to express in typing, so use my link above to get a better picture. I need some coding help for website........Right now, if I want to post an article one of my journalists submitted, I have to go in and edit each page individually, the article doesn't just show up.....How do I make it so when someone submits an article, it gets posted on the front page, in the news and events section, and in my archives? For the front page, I want my two latest articles up there with a photo and a small description with a "more info" link that brings you to the actual article. For the news and events page, I want the latest article on the left hand side with a photo, a description, a title and the link, with the 2 previous articles on the right with all of that but no photo. For the archives page, I just want all the articles for that month in order, with the latest being on top, with a title, a description, and a link. Hello Everyone: I created a page in HTML and added javascript. I want it to have a search function.I have created a form which is basically a textfield and a "submit button".The "submit button" is meant to display web pages in a new window when I type in particular keywords into the textfield next to the "submit button" on the website.I have written the codes below so far and it is not working.I would appreciate it if you guyz can help me out.The webpage is not online just incase you guyz need to know.Thanks very much <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script language="Javascript" type="text/javascript"> var keywords = "transistor Google Microsoft ipod " function gothere(placetogo) { if( keyWords.search(placetogo) == -1) { alert(placetogo+"is not an accepted keyword" ) } else { document.location = "C:\Documents and Settings\Teeboi\My Documents\Memorial University\WebPages" + placetogo + ".html" } } </script> <title>DESIGN CONCEPT</title> </head> <body bgcolor="#B0B0B0"> <form name="myForm"> <input type="textfield" name="searchtext" value="transistor" /> <input type="button" name="thebutton" value="Submit" onclick="javascript:gothere(document.myForm.searchtext.value)" /> </form> </body> </html> I work for a hospital and we are moving into a new building. The employees want me to put a simple countdown "ticker" on our intranet. The move is in a few months. Any one know code to create a date countdown? Hello, I am trying to create a page with a link that opens on a new page. This link will have an iframe to display another website. What I then want to do is have a pop over appear that will take me back to the original page. Is this possible and if so how would I code this. Oh and another thing. The first page will redirect itself after 10 secs. So this is what I want: Page A has a link that will open Page B Page A will redirect to another page after ten secs Page B will display a pop over when you click the pop over it will take you back to page A instead of opening a new page or changing to the link within page B. I hope this makes sense. So I all I need to know is how to make the pop over go back to page A. Thanks Hello, I am pretty new to the whole html world so forgive me if this is a simple problem. I have look all over for a post explaing this problem but i haven't found anything. I am making a site for a friend using Dreamweaver. I know i know, i regret not coding it from scratch but its too late now. Anyways I have a pretty good page layout going now but I have ran into a problem with loading my images. On my home page an image in a table nested inside another table will load when viewing in safari but seems to disappear in firefox. What is going on? Its a pretty simple piece of code. I place; <img src="Pictures/RDV couplepalm.jpg" width="200" height="" style="float:right; padding: 8px; margin-left:10px; margin-bottom: 10px" / inside of a paragraph in a row of a table. I have rewritten the code for this image, copied it from a working image and screwed around with the table heights (although I wasn't too sure what i was doing). What else should I try? I have attached screen shots of the site in both browsers a copy of the problem jpeg aswell as a copy of the html. Any information anyone could givee me would be REALLY appreciated! Thank you. Hello, here's my test site, http://testingsite.onlinewebshop.net/HOME2.html I've added a few things that i havent uploaded yet, but i was wanting to know how the coding looks. I want to make sure things are looking correctly. Also can someone tell me what is wrong with my coding that this flash example, http://testingsite.onlinewebshop.net/Untitled-1.swf won't show up on the site? I appreciate your help! The top section has several code errors, the bottom section is where the code was taken from, any help please, I'm a newbie to coding thanks in advance <p class="8"><a href="Photo%20Gallery2.htm" target="_parent">Click image for Photo Gallery</map></p></h3> ----------------------------------------------------------------------------------------------------------- <h3 class="c18"><a href="Photo%20Gallery2.htm"><span class="c22"><img src="alifephoto2.jpg" alt="Photo Gallery of ships, mammels, icebergs and fish" width="190" height="103" border="0" usemap="Index.htm#MapMap" class="style1"></span></a> <span class="c22"><map name="MapMap" id="Map3"> <area shape="rect" coords="-2,-2,189,103" href="Photo%20Gallery2.htm" target="_self" alt="Photo Gallery of ships"> <p class="8"><a href="Photo%20Gallery2.htm" target="_parent"></a></p> <p class="8"><a href="Photo%20Gallery2.htm" target="_parent">Click image for Photo Gallery</map></p></h3> Back Story: New Manager at a manufacturer and they had a friends child or something do the website so I've got some issues... I simply updated some info on the bottom of some pages on the site and the page now looks like the spacing is off and is being folded towards the header... This one is correct... This one got messed up somehow... You can see how above the header saying "Innovative Outdoor Products..." the spacing is gone and the entire table got pushed up... If I had messed with the code, I know I could figure it out but, it just sort of happened... Here's the coding of the messed up page... Coding is actually the same just different images... Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>T-Reign</title>
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/interior.css" />
<!-- START EMBED CODE -->
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {};
var attributes = {};
attributes.id = "oxylusflash";
params.allowFullScreen = "true";
params.allowScriptAccess = "always";
params.base = "";
params.bgColor = "#000000";
params.wmode = "transparent";
// Specify xml file here
flashvars.xmlFile = "data.xml";
swfobject.embedSWF("main.swf", "flashAlternativeContent", "1024", "350", "10.0.0", "js/expressInstall.swf", flashvars, params, attributes);
</script>
<!-- END EMBED CODE -->
</head>
<body>
<div id="container">
<div id="header">
<div id="header_logo">
<h1 id="logo"><a href="index.html">T-Reign</a></h1>
</div>
<div id="header_navigation">
<ul class="menu">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li class="active"><a href="products.html">Products</a></li>
<li><a href="news.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="home_flash"><!-- START FLASH CONTAINER -->
<div id="flashAlternativeContent"><a href="http://www.adobe.com/go/getflashplayer"> <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> </a></div>
<!-- END FLASH CONTAINER --></div>
<div id="content_panel">
<div class="innertube">
<h3><img src="images/title_innovativeProducts.gif" alt="Innovative Products Built To Last" width="660" height="13" /></h3>
<img src="images/title_fishingSeries.jpg" alt="Fishing Series" width="666" height="64" />
<table style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<p>Fishing is all about fooling fish into biting. Sounds simple, but in reality it takes skill, determination and gear. Lots of gear.</p>
<p>Whether you fish from a boat miles offshore, wade crystalline mountain streams or paddle a kayak through the bayou, keeping your pliers, Bogagrip, landing net or wading staff handy is critical. And unlike other outdoor activities, if you happen to drop an item, the chances of retrieving it from the depths is slim.</p>
<p>That's why T-REIGN™ retractable gear tethers make the perfect fishing companion. Fly fisherman can keep nippers, hemostats and tippet spools right on their vest. And a retractable tether makes more sense for landing nets than a magnetic setup, since you can simply let go if the fish makes another run.</p>
<p>With T-REIGN you'll never lose your gear again. But we can't make the same promise about the landing that big one.</p>
</td>
</tr>
<tr>
<td>
<h4><a href="accessories.html" target="new"><img src="images/title_treignProductsGreen.gif" border="0" alt="T-REIGN Products" width="666" height="34" /></a></h4>
</td>
</tr>
<tr>
<td><img src="images/photo_fishing.jpg" alt="TREIGN Product Shot: Fishing" width="664" height="281" /></td>
</tr>
<tr>
<td align="center"><img src="images/grx_ruleTrident.gif" alt="" width="419" height="43" />
<h4>Retractable Gear Tether</h4>
<br /></td>
</tr>
<tr>
<td>
<h4><img src="images/title_productsGreen.gif" border="0" alt="Products" width="666" height="34" /></h4>
</td>
</tr>
<tr>
<td><img src="images/grxProductFishing.jpg" alt="Photo: Fishing Series Products" width="666" height="324" /></td>
</tr>
<tr>
<td>
<h4><img src="images/title_attachmentsGreen.gif" alt="Attachement Style Options" width="666" height="34" /></h4>
</td>
</tr>
<tr>
<td><img src="images/grxAttachementFishing.jpg" alt="Photos: Attachement Options" width="666" height="296" /></td>
</tr>
<tr>
<td>
<h4><img src="images/title_featureGreen.gif" alt="Features" width="666" height="34" /></h4>
</td>
</tr>
</tbody>
</table>
<table style="background-image: url(http://members.hypermart.net/controlpanel/FileManager/images/bg_features.jpg); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; width: 100%; background-position: initial initial; background-repeat: no-repeat no-repeat;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-top: 20px;">
<ul>
<li>Highest quality, extreme duty and ready for the elements. Featuring stainless steel spring and hardware.</li>
<li>Made in the USA</li>
<li>Quick disconnect gear attachment for easy gear change out or for sharing.</li>
<li>Rugged Kevlar cord is durable and lightweight.</li>
<li>Lifetime service policy</li>
</ul>
</td>
</tr>
<tr>
<td style="padding-top: 20px;" align="center"><img src="images/grxFeatureChartFishing.png" alt="Features chart" width="646" height="297" /></td>
</tr>
<tr>
<td style="padding-top: 20px;" align="center"><img src="images/grxFeaturePhotoFishing.png" alt="Features photo: fishing" width="542" height="242" /></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="footer_trademark">T-REIGN is a registered trademark of West Coast Corporation</div>
<div id="footer_copyright">© West Coast Corporation 2010 - 2011</div>
<div id="footer_contact"><a href="mailto:sales@t-reign.com">Send Email</a><br />ph /// (909)923-7800 fax /// (909)923-0024</div>
</div>
</body>
</html>
Thanks in advance for the help... Hey guys! I am just starting a little thing to open, edit, and display HTML stored in txt files. It works fine until I tried to make it so that when you first open the form it already has the txt file's content inside the textarea (to edit it). Obviously it just displays the raw code! I am wondering if there is a way around this. here is my code; Code: <html>
<body>
<form action="write.php" method="post">
Content: <br><br>
<textarea cols="40" rows="5" name="texttest">
<?php
$file = file_get_contents ('text.txt');
Echo $file;
?>
</textarea>
<br>
<INPUT type="submit" name="button1" value="Update">
</form>
</body>
</html>
Any help would be awesome! On my website so far, I am doing very well but I need to know how to go to next page from a link at the bottom of the page. Example: Next Page 1 2 3 4 5 6 7 8 9 The numbers will represent the chapters but how do I do it????? How do I begin coding a web design PSD? Any decent tutorials? I know that one could use Adobe Fireworks and slice up the images, but I don't have Fireworks. Hi all! Quick question about the two different browsers, IE and Safari. . . On my home page at www.rentxotic.com I have two buttons programed to be in the top right corner, IE doesn't load this 100% of times, but safari always has it no matter what page your on. Does anyone know what the compatibility issue is with this? How can I fix it? THANKS - Ryan PS all you guys have been such a great help, your time is much appreciated! |
|||||||