|
HTML - I Need Help!!!! Web Page Not Displaying Properly In Safari Or Fire Fox.
I've spent almost a week designing, coding and uploading this site. Only to have it not display properly in firefox or safari. I've included a link to the site and several screenshots as well as the source code. Please help!
This image shows it as it is int ie 7 on windows xp http://img.photobucket.com/albums/v6...asintended.jpg this image shows it on safari and fire fox: http://img.photobucket.com/albums/v6...art/safari.jpg website link: www.tavasystems.com Thanks in advance. Similar TutorialsIt works great in Firefox, IE, and even on my iPhone (Safari), but it's having problems in Chrome and on my friend's Mac (Safari). I have a form with 2 tables inside. The first table is aligned left at 47% of the width. The second table is aligned right at 47% of the width. It should look like this: But instead looks like this in Chrome and Safari...it appears that it's centering both tables instead of aligning them left and right to give 2 separate columns. Any ideas? Here is some of my stripped down code: ----------------------------------- <div id="FormLayer" style="position:absolute; width:680px; height:455px; z-index:3; left: 65px; top: 330px; border:0"> <form action="form.php" method="post" name="orderform" id="orderform"> <input type="hidden" name="recipients" value="email.com"> <input type="hidden" name="required" value="actor:Actor's Name, email:Your Email=confirm:The emails you entered did not match, show:Name of the Show, episode:Your Episode|date:Air Date, character: Character's Name, description: Description of Scenes"> <input type="hidden" name="good_url" value="success.htm"> <table width="47%" align="left" border="0" cellspacing="0" cellpadding="5"> <tr> <td><div align="left" class="style3"> <label for="actor"><span class="style2"> Actor's Name:</span></label> </div> </td> </tr> <tr> <td><input name="actor" type="text" id="actor" size="40" maxlength="50"></td> </tr> <table width="47%" align="right" border="0" cellspacing="0" cellpadding="5"> <tr> <td><div align="left" class="style3"> <label for="character"><span class="style2"> Character's Name:</span></label> </div> </td> </tr> <tr> <td><input name="character" type="text" id="character" size="40" maxlength="50"></td> </tr> </table> </form> Hello Gurus, I have a HTML webpage index.html and the expecation is that when user selects from drop drown opton it needs to display a webpage in the iframe underneath the option list. Below is the code snippet. From the code, you will see that it displays all www sites such as google.com, yahoo.com just fine without issues, however the local opel.html is not coming up at all. I am pasting the code of index.html as well as the page that i want to call i.e. opel.html. Pleaes help <!----------------------INDEX.HTML CODE STARTS HERE------------------> <!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> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Your Murrieta</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="default.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="header"> <div> <table> <h1><a href="#" Style="font-family:Edwardian Script ITC" color="White">Your Murrieta</a></h1> </table></div> <p>Showcase of Your World</p> </div> <!-- start page --> <div id="page"> <div id="pagebg"> <div id="content"> <div class="post"> <form action="" method="post"> <SELECT ONCHANGE="if (window.frames && window.frames.iframes) { window.frames.iframes.location.href = this.options[this.selectedIndex].value; }"> <OPTION VALUE="opel.html">My Home Page <OPTION VALUE="http://www.google.com">My Fmaily <OPTION VALUE="http://www.yahoo.com">My Hobbies <OPTION VALUE="http://www.rediff.com">My Friends </SELECT> <iframe id="theFrame" name="iframes" src="opel.html" align="top" height="1460" width="1760"></iframe> </form> </div> <!-- start content --> <!--aaa--> </div> </div> <!--content--> <!-- end content --> <!-- start sidebar --> <div style="clear: both;"> </div> <!-- end page --> <!-- start footer <!-- end footer --> </body> </html> <!--------------------OPEL.HTML CODE STARTS HERE-------------> <html xmlns="http://www.w3.org/1999/xhtml"> <!-- start page --> <body> <table style="margin-left:0%"> <tr> <td> <!--First Panel --> <div style="font-size:9pt;font-family:Georgia; color:Navy; width:345px; background-image:url(images/gray-gradient.gif); background-repeat:repeat;">ERP</div> <div> <table cellspacing="0" cellpadding="15" width="345px" height="79px" bgcolor="#ffffff" align="left" style="background-image:url(images/cnsl.jpg); background-repeat:repeat;margin-right:1%;"> <tr align ="left" width="400px" > <td align ="left"> <ul class="link" type="none" style="font-size:8pt;font-family:Arial;"> <li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="http://www.coexsys.com/erpoffering.html" id="l16">Offerings</a> </li> <li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="http://www.coexsys.com/id145.html" id="l18">Request More Information</a> </li> </ul> </ul> </td> <td align ="left"> <ul class="link" type="none" style="font-size:8pt;font-family:Arial;"> <li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="mailto:sales@coexsys.com" id="l17">Email us</a> </li> <li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="http://www.coexsys.com/id144.html" id="l18">Contact us</a> </li> </ul> </td> </tr> </table> </div> </td> </body> </html> I don't know if this should really go in the css forum or here, but here it is. The page in question is at the following link: http://www.sikaband.com/archives/new/index.html and the css file being referenced is: http://www.sikaband.com/archives/new/blackstyle.css Viewing the page in Firefox, the links in the navigation bar are centered the way they ought to be. Safari for some reason shunts the text off to the right a good ways. When I put a visible border on the div in question, I can see that the div itself is aligned properly, it's just the text inside that's off. I'm confused. The title says it all, my site just doesn't properly work in safari. heres the link www.royaltee-design.com help would really be appreciated thanks Hi guys this is my first post here, hope you can help. I am currently designing a websitefor the company I work for and the first page is almost completed with the exception of a little glitch. When the page first loads there are a few elements that are in the wrong place. Then when the page is refreshed these elements go where they are supposed to be. I have looked through the html and the css and can't find any problem as to why this is happening. I would really appreciate any suggestions as to why this is happening or how to fix it. If you need anything else just let me know and I'll post it. Thank you As you can see here Here is what it should look like but only does after hitting refresh Hi. I have a question regarding my site. If you click on the link using IE you will see that the images in my tables are cut off on the right, and haven't been scaled at all... In Google Chrome they appear fine. Here is the HTML code snippet: Code: <table>
<tbody>
-snip-
<table>
<tr>
<td>
<div class="large">
<a href="http://picasaweb.google.com/lh/photo/QnqiMcSvmlR_osQplmz-Iw?authkey=Gv1sRgCNbCzI295-KBIg&feat=directlink" target="_blank">
<img class="large" src="http://lh3.ggpht.com/_lPPWxJaDX_0/S1tmkLXjmBI/AAAAAAAAAVA/782xI-SkNVQ/s640/step1-2.jpg" alt="CashCrate offers page." title="CashCrate offers page.">
</img>
</a>
</div>
</td>
</tr>
</table>
-snip-
</tbody>
</table>
And here is some css code: Code: div.large {
width: 100%;
height: 200px;
border: none;
margin-top:6px;
margin-bottom:6px;
overflow: auto;
}
img.large {
width: 98%;
height-max: 600px;
padding: 2px;
border: ridge;
border-color: #66E066;
}
I'm wanting to know what I need to add/change to make the images appear right in all browsers(I've only tested in IE and Chrome). If you need any more info about my page, ask . Thanks. Hi everyone! On a site I am making there's a table which -- only in the IE-s including version 7 -- is not properly displayed: the column containing the text is only approx. half filled in width. Most (not to say all) other browsers get this right... Anyone got an idea, why this could be? Thx and best, T All, i have a minor problem with hyperlinks not displaying properly. In some instances, IE7 does not underline the hyperlink or only partly underlines the link. Please see http://www.tauntonflowershow.co.uk/ and look at the downloads yellow box at the top of the screen. Firefox, Opera etc are all OK. Grateful for any advice you can offer. Hi, I'm new to HTML. I have not yet started using CSS. I'm just using basic html. I'm having problem creating a nested table as shown in the attachment without using CSS style sheets. I appreciate anyone's suggestions in this. I pasted the code that tried below. <h3> 5) - Nested Table </h3> <table align="left" width="350" bgcolor="#ffff00" border="1"> <tr height="75" align="left"> <td height="100" > </td> <td height="75"> test2 </td> <td height="75"> </td> </tr> <clear="left" /> <tr> <td> <table align="left" bgcolor="f5f5dc" border="1"> <tr> <td width="100%" height="75"> a nested table </td> <td width="100%" height="75"> With this text at the top </td> </tr> <tr> <td width="100%" height="75"> </td> <td width="100%" height="75"> </td> </tr> </table> </td> </tr> <tr height="75" align="left"> <td></td> <td></td> <td></td> </tr> </table> Thanks in advance I have three user input text boxes called; "name", "email" and "phone" and one text field to display that information called; "feedback". When a "Submit" button is clicked, the three text boxes are validated to check that what was typed inside them was OK. I then want to display the Users' name, email and phone number on individual lines in the text field, for example, name on line 1, email on line 2 and phone number on line 3. At the minute when I submit the information only the phone number displays on the first line of the text box. In the text field "feedback"; I know the HTML probably interprets my code as; the name is being replaced by the email and then the email is being replaced by the phone number. Here is the relevant section of my code. function validate(){ if (validateName () && validateEmail() && validateformatNumber()){ var myName=document.survey.visitor.value; document.survey.feedback.value=myName; var myEmail=document.survey.email.value; document.survey.feedback.value=myEmail; var myPhone=document.survey.phone.value; document.survey.feedback.value=myPhone; return true; }else{ return false; }} I think the solution could be something simple but I haven't much of an idea of how to do it. Thanks in advance. I'm trying to make a sidebar to navigate through the website and basically lays out the entire site on the sidebar (which is a tree with nodes and leafs etc), but when it tries to display the text, it gets really squished up on the right side, but there are still horizontal scrollbars -.- This is the html after all the PHP stuff: Edit: I put in "width:100em;" in the li section of css. It formatted the text properly, but then the scrollbar continues on forever. Is there any way to find out how many pixels are needed to format the text properly? More specifically, is there any way (javascript, php) to find the length of a string in pixels? 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">
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div#navigation").height(window.innerHeight-16);
});
</script>
<!--<link type="text/css" rel="stylesheet" href="Styles.css" />-->
<style type="text/css">
#navigation {
position:absolute;
width:25%;
height:500px;
background-color:#C0C0C0;
margin:0px;
border:0px;
padding:0px;
float:left;
overflow:scroll;
overflow-x:scroll;
overflow-y:scroll;
}
#main {
width:75%;
height:100%;
}
li {
overflow:visible;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled</title>
</head>
<!--Use a tree for this-->
<div id="navigation" >
<ul><li>FoodFoodFoodFoodFoodFoodFoodFoodFoodFoodFoodFoodFo</li>
<ul><li>FruitFruitFruitFruitFruitFruitFruitFruitFruitFruit (Level 2)</li>
<ul><li>RedRedRedRedRedRedRedRedRedRedRedRedRedRedRedRedRe (Level 3)</li>
<ul><li>CherryCherryCherryCherryCherryCherryCherryCherryCh (Level 4)</li>
<li>StrawberryStrawberryStrawberryStrawberryStrawberry (Level 4)</li>
<ul><li>Uber BerryUber BerryUber BerryUber BerryUber Berry (Level 5)</li>
<ul><li>Extreme StrawberryExtreme StrawberryExtreme Strawb (Level 6)</li>
<ul><li>WOWWOWWOWWOWWOWWOWWOWWOWWOWWOWWOWWOWWOWWOWWOWWOWWO (Level 7)</li>
<ul><li>supercalifragilisticexpialadocioussupercalifragi i (Level 8)</li>
</ul></ul></ul></ul></ul><li>YellowYellowYellowYellowYellowYellowYellowYellowYe (Level 3)</li>
<ul><li>BananaBananaBananaBananaBananaBananaBananaBananaBa (Level 4)</li>
</ul></ul><li>MeatMeatMeatMeatMeatMeatMeatMeatMeatMeatMeatMeatMe (Level 2)</li>
<ul><li>BeefBeefBeefBeefBeefBeefBeefBeefBeefBeefBeefBeefBe (Level 3)</li>
<li>PorkPorkPorkPorkPorkPorkPorkPorkPorkPorkPorkPorkPo (Level 3)</li>
</ul></ul></ul></div>
</html>
http://goldenworldgoods.awardspace.com/ Hello again, I did this site in Dreamweaver, looked fine in my dreamweaver editor, uploaded it and voila everything goes nuts. List of Problems: The Links are not positioned properly, not big enough plus the drop downs to the bottom and not to the right. That was properly my fault since I just copied a suckerfish method... But can someone help with this. If you study the News Header in the CSS, it says it has a background image, how ever it doesn't show when I uploaded it. I know the url and the pic is correct cause it worked in Dreamweaver... The background for "welcome" is all the way up there which isn't supposed to happen, it supposed to be right on top of the Hello text but that isn't happening either. The hello and welcome are supposed to be aligned to the left of the right header. Thats about it, please can someone help me. I've changed the format of this like 3 times just to get it correctly done, but nothings working. Thank you And don't worry I got it all validated and what not Hi there, I am currently designing a website for an art gallery. I thought I had finished it today while viewing it in firefox on my mac, but when I went to view it on internet explorer on a PC the page is not rendered properly! i don't know what to do! I have 2 divs - centercol & rightcol - centercol displays the main content, and rightcol displays an image specific to the content on the page. on my mac it shows like this: on a PC in internet explorer it shows like this: website is at http://pennystewartdesigns.com/merrepen/html/main.html NB: Main page functions fine, but when you click on any other tabs the rightcol displays below the main content in IE. My code is he 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>
<title>Merrepen Arts | About Us</title>
<link rel="stylesheet" href="http://pennystewartdesigns.com/merrepen/html/style.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://pennystewartdesigns.com/merrepen/html/coin-slider-styles.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://pennystewartdesigns.com/merrepen/html/menusm.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://pennystewartdesigns.com/merrepen/html/pagenavi-css.css" media="screen" />
<script type="text/javascript" src="http://pennystewartdesigns.com/merrepen/html/js/cufon-yui.js"></script>
<script type="text/javascript" src="http://pennystewartdesigns.com/merrepen/html/js/cufon-yankaff.js"></script>
<script type="text/javascript" src="http://pennystewartdesigns.com/merrepen/html/js/jquery-1.4.2.min.js"></script>
<!-- menu -->
<script type="text/javascript" src="http://pennystewartdesigns.com/merrepen/html/js/menusm.js"></script>
<!-- scripts for use -->
<script type="text/javascript" src="http://pennystewartdesigns.com/merrepen/html/js/script.js"></script>
<!-- slider -->
<script type="text/javascript" src="http://pennystewartdesigns.com/merrepen/html/js/coin-slider.min.js"></script>
<!-- tabs-categories -->
<script type="text/javascript" src="http://pennystewartdesigns.com/merrepen/html/js/tabs-hoverintent.js"></script>
<script type="text/javascript" src="http://pennystewartdesigns.com/merrepen/html/js/tabs-superfish.js"></script>
<script type="text/javascript" src="http://pennystewartdesigns.com/merrepen/html/js/tabs.js"></script>
<link rel="stylesheet" href="http://pennystewartdesigns.com/merrepen/html/tabs.css" type="text/css" media="screen" />
</head>
<body>
<div id="page">
<div id="header">
<div class="logo">
<p align="center"><img src="http://pennystewartdesigns.com/merrepen/html/images/logo1.png" align="middle" alt="Merrepen Arts"/>
</p></div>
<div class="topnav">
<ul class="menusm">
<li><a href="http://pennystewartdesigns.com/merrepen/html/main.html">Home</a></li>
<li><a href="http://pennystewartdesigns.com/merrepen/gallery">Gallery</a></li>
<li class="current_page_item"><a href="http://pennystewartdesigns.com/merrepen/html/about.html">About Us</a></li>
<li><a href="http://pennystewartdesigns.com/merrepen/html/dalyriver.html">Daly River</a></li>
<li><a href="www.merrepenfestival.com.au" target="_blank">Festival</a></li>
<li><a href="http://pennystewartdesigns.com/merrepen/html/contact.html">Contact</a></li>
<li><a href="http://pennystewartdesigns.com/merrepen/html/visit.html">Visit Us</a></li>
</ul>
<div class="clr"></div>
</div>
<!--/topnav -->
<div class="clr"></div>
</div>
<!--/header -->
<div class="clr"></div>
</div>
<div id="centercol" style="background-image: url('http://pennystewartdesigns.com/merrepen/html/images/bg/bgabout.gif'); background-repeat:no-repeat; background-position:top right">
<div class="box post">
<div class="content">
<div class="post-title">
</div>
<!--/post-title -->
<div class="blog-content">
<div class="post-excerpt">
<p align="center">
<h3>About Merrepen Arts</h3><br /><br />
</p>
content.<br /><br />
</div>
</div>
<!--/post-excerpt -->
<div class="clr"></div>
<!--/content -->
</div>
<!--/box -->
</div>
</div>
<!--/centercol -->
<div id="rightcol">
<div class="wtitle">
<h3></h3><br />
</div>
<div class="content">
<div id="credit">
<img src="images/about.jpg" alt="Merrepen Arts" />
<!--/content -->
</div>
<!--/box -->
</div>
<!--/content -->
<!--/box -->
</div>
<!--/rightcol -->
<div class="clr"></div>
<!--/columns -->
<div class="clr"></div>
<!--/page -->
<div class="clr"></div>
<div id="page_bottom">
<div id="footer">
<div class="textf">
<div class="text1">© Copyright <a href="http://www.pennystewartdesigns.com">Merrepen Arts</a>. All Rights Reserved.
</div>
<div class="text2"><a href="http://www.pennystewartdesigns.com">Design</a></div>
</div>
</div>
<div class="clr"></div>
<!--/footer -->
</div>
</body>
</html>
my CSS for these divs are he Code: /*=== Layout ===*/
#page { margin:0 auto; padding:0; width:1200px;}
/*=== Center Column ===*/
#centercol { margin-left:20px; padding:0 0 38px; float:left; width:800px;}
/*=== Right Column ===*/
#rightcol { margin:0; padding:0 0 0 40px; float:right; width:400px; border-left:1px solid #dfdfdf; }
.box { margin:0; padding:20px 0;}
.box .content { }
.box_r { margin:0 0 24px; padding:0; background:none; border:none;}
.box_r .content { margin:0; padding:0;}
.small_link { padding:10px 0; margin:0 auto; text-align:center;}
.small_link a { color:#939393; text-decoration:none;}
.small_link small { font-size:11px;}
can anyone help? this is the first time i've had this problem & ive been looking at this code for far too long now. it all looks like gobbledy gook to me now!! arrggghhhhhh. so frustrating! penny Can someone please tell me why this page does NOT print properly? http://www.unreal-deals.com/ebooks11...-printable.php I've tried everything I can possibly think of, removed all word html tags, cleaned up the source formatting, and still it doesn't work. Print preview on IE7 shows only 7 pages, and when I print it only prints 1 page then 60+ blank pages. Whats going on? Thanks I created a template with photoshop and saved into 1024 x 768 and worked it with front page. when i opened it in firefox the site is apearing at the left side of the window even if i edited in front page to be shown in the middle.In explorer it works just fine. ANy ideas please? Hello all. I am creating my page from home on my personal desktop computer. It has a 17 inch, HP v72 crt monitor. The problem that I am having is getting my page to look right on other computers. eg.,image/text/link placement. Example: My page looks fine when I view it from home on my own pc. But when I view it on my pc at work, everything is out of place. How can I create a website that will look good on all the various monitor sizes, and screen resolutions? Thanks! I've been trying to get a design to work properly under Firefox for several days. Unfortunately because of ip issues I can't post any code. The basic problem is that I tell a table that I it to have height: 100% and it won't do it. Sometimes (not always) the table renders in such a way such that it is less than 100%. <table><tr><td><table class="gimme_some_height_already">...blah blah</table> Here's the annoying part. The problem is intermittent and goes away every time when I hit refresh under Firefox. Why should the page render differently just because I hit refresh? Also, when the table doesn't render properly, the links don't work. I have standard, nothing special <a> links inside the table. When the table is misrendered and I click on a link, instead of transferring to that page, the table just gets bigger! It's as if the table were in a very delicate state, and if someone touched or sneezed on it the whole page would move and rerender. Very strange. None of this happens under IE. I know that many people think that when IE and Firefox disagree that I ought to go with what Firefox says, but really hitting the refresh buttons shouldn't make the page look different. Does anyone know what is going on, and perhaps how I could go about fixing it? I've tried many variations, trial and error combinations and dirty tricks. Our organization's webpage was created in Dreamweaver, with some additional javascript and html code added by an intrepid staff member with just enough knowledge to be dangerous. The page displays properly in Internet Explorer and Firefox for Windows, as well as Firefox and Netscape for Mac. However, the page displays a white screen in Safari. The page is loading, because the page title displays, and it is possible to view the source code for the page using the "View --> View Source" menu option. But none of the page content shows up. I did not find any relevant help in the Safari forums on the apple page, so I'm wondering if this is a simple coding problem that I don't know enough to ferret out. Any assistance would be greatly appreciated. The website address is http://www.buttecounty.net/bclibrary Thanks, Derek PROBLEM SOLVED |
|||||||