HTML - Page Is Loading Well In Ie, Chrome, Safari ... Not Firefox

Ok, so i worked very hard for about 4 hours to make my page valid (click). Now, i worked out everything to work in firefox and safari and then installed opera and it looks fine in that, as well as in mobile safari (for iPod Touch). But, believe it or not, when i try it in IE, everything is completely messed up. I am extremely tired of me having to go the extra mile because the idiots behind IE dont know how to make a fricken browser.

Anyways, with the rant out of the way, can anyone help me fix this up? any tips or ideas on what is causing this?

http://Flysinger.com

thanks,
-ajp

Hi Guys,

This is my first post on this forum.

Basically, Ive agreed to turn someone website, into a joomla template, and then format articles and such until it looks exactly like the original site. This would give them the ability to add their own content without my help(I offered to redo the site, but they like their current one even though its quite bad).

All was going well, and I sent out an email to check the progress of the site to the client, and he replied to me that the site was all distorted in Safari.

Being a windows programmer, I was used to IE/firefox, Safari and the other browsers never really crossed my mind. Anyway, I downloaded safari, chrome and opera, and tested the sites out. Opera they were fine, but chrome and Safari, some things align WAYYY to the left, almost off screen.

I'm guessing it may be a CSS issue, but Ive checked, rechecked, deleted, restored almost everything and its still messed up in those browsers!

This is a paying client, so I need to get this sorted out as soon as possible.

The pages in question are he
http://www.longboardcapital.net/inde......7&Itemid=27

http://www.longboardcapital.net/inde......48&Itemid=2

Ive paused on content creation, as this is a big problem.

Have any of you ever experienced the same or similar problem? can you all offer any suggestions?

Thank you so much for your help,
-Tim

Greetings,

If you access the following website http://www.chrisnieratko.com/ in IE / Firefox, you can view the site perfectly. However, with Chrome / Safari, you can't. You just see a bunch of code with ascii question marks. I know it's missing the doctype declaration, but is it the question marks that make it not visible for those browsers? (Chrome / Safari)

When the site's pages are opened in notepad, textpad and notepad++, the question marks aren't there... so how do you eliminate them? Does anybody know of another editor that will view / edit these? Does anybody know if that's even the problem? How did they just appear out of nowhere?

Most importantly; How would YOU fix this problem in the easiest way possible? (I'm guessing a certain type of text editor with a search function, then search / eliminate them and re-save the file?)

Any help is MUCH appreciated! Thank you so much in advance for your time!

Hello,

I have a strange spacing issue that I am having trouble correcting. I have some weird spacing that shows up in Safari and Chrome. Doesn't show up in FF or IE. Look he

http://www.digitalsomething.com

Under the links in the header you'll see a white gap between the links and the search bar. The odd thing is if you look at the forums, the gap is gone:

http://www.digitalsomething.com/forum

Any ideas as to what is causing this?

My site here is working in FF v3.5.9 but when I just recently loaded it in Safari and Chrome the page just doesn't work. I don't understand why because I developed it and tested it when using Safari and Chrome is built on Webkit too.

http://www.meta.projectmio.com/sss.html


It seems like a recent thing, but it still works in FireFox so I don't know what's going on?

Any ideas?

well my issue comes when you try to use ctrl-mouswheel to zoom in or out on my page. works fine in ie8 and ff3, but not in chrome and safari. there isnt really a need for this to work, except the fact that no professional website should have such a major error. http:www. fab-tennis .com click the book a lesson tab, its the easiest way to tell since its the longest page i have. sorry for the bright colors.

when you zoom in or out, the iframe which is usually fits exactly between my header and footer, shrinks to a small box maybe 500px in height instead of having height:100% of the table cell that it is in. i would reccomend trying the zoom on ff then try it on chrome or safari to see what im talking about.

HTML Code:

<html>

    <body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" bgcolor="#FFFF00" style="overflow-x: hidden; overflow-y: hidden;">	
    
    <link rel="stylesheet" type="text/css" href="css/basic.css" />
    
    <!--[START HEADER]-->
    <div style="position:absolute; top:0px; left:0px; width:100%;">
        <table align="center" class="Header" cellspacing="0" cellpadding="5" style="height:40px">
            <tr align="center">
                <td width="20%" class="headerLeft" id="1" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)">
                    home
                </td>
                
                <td width="20%" id="2" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)">
                    book a lesson
                </td>
                
                <td width="20%" id="3" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)">
                    biography
                </td>
                
                <td width="20%" id="4" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)">
                    qualifications
                </td>
                
                <td width="20%" class="headerRight" id="5" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)">
                    photos
                </td>
            </tr>
        </table>
    </div>
    <!--[END HEADER]-->
    
    <!--[START BODY]-->
    <table align="center" cellspacing="0" cellpadding="0" class="Body"><tr height="40px"><td></td></tr>
    <tr><td valign="middle" align="center">
            
        <iframe name="iBody" id="iBody" marginheight="0px" marginwidth="0px" frameborder="0" scrolling="auto" allowtransparency="true" src="home.html"
        style="width:100%; height:100%; border:0px;">
            BODY
        </iframe>
                
    </td></tr>
    <tr height="40px"><td></td></tr></table>
    <!--[END BODY]-->
    
    <!--[START FOOTER]-->
    <div style="position:absolute; bottom:0px; left:0px; width:100%">
        <table align="center" class="Footer" cellspacing="0" cellpadding="5" style="height:40px">
            <tr align="center">
                <td width="20%" class="footerLeft" id="6" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)">
                    cancel lesson
                </td>
                
                <td width="20%" id="7" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)">
                    seven
                </td>
                
                <td width="20%" id="8" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)">
                    eight
                </td>

                <td width="20%" id="9" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)">
                    nine
                </td>
                
                <td width="20%" class="footerRight" id="10" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)">
                    ten
                </td>
            </tr>
        </table>
    </div>
    <!--[END FOOTER]-->

	<script type="text/javascript" src="javascript/basic.js"></script>
    
    </body>
</html>

Hi, i have the encountered some problem recently.

Pls check these 2 simple sites whcih were done with Dreamweaver and have a simple .swf file embedded.

www.asia-leap.com
www.drjeanho.com

The flash were loading ok for the past few months in IE, Firefox and Mac Safari, however, just noticed that the .swf files were not loading anymore recently in Mac Safari and Firefox.

Please HELP!!!

Many thanks. Would appreciate it if you could reply to the email provided: faraway_c@yahoo.com

YC

there is my code. any reason why it looks good in chrome/safari but it looks bad in mozilla? in mozilla it has a bunch of lines going through it and the images are all seperated. any help would be much appreciated. Thanks, George

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>share</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
body {
	background-color: #ffffff;
	background-image: url(../background-for-website.png);
	background-repeat: repeat-x;
}
#apDiv1 {
	
	z-index:1;
}
</style>
</head>

<body>
<!-- Save for Web Slices (share.psd) -->
<center>
<table id="Table_01" width="792" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="5">
			<img id="share_01" src="images4/share_01.png" width="791" height="155" alt="" /></td>
		<td>
			<img src="images4/spacer.gif" width="1" height="155" alt="" /></td>
	</tr>
	<tr>
		<td colspan="5">
			<img id="share_02" src="images4/share_02.png" width="791" height="137" alt="" /></td>
		<td>
			<img src="images4/spacer.gif" width="1" height="137" alt="" /></td>
	</tr>
	<tr>
		<td colspan="5">
			<img id="share_03" src="images4/share_03.png" width="791" height="142" alt="" /></td>
		<td>
			<img src="images4/spacer.gif" width="1" height="142" alt="" /></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="2">
			<img id="share_04" src="images4/share_04.png" width="544" height="70" alt="" /></td>
		<td> <div class="apDiv" id="apDiv"><a href="http://www.facebook.com/sharer.php?u=https://www.facebook.com/pages/itunes-cards-for-free/200510223345141" target="_blank">
			<img id="share_05" src="images4/share_05.png" width="137" height="21" alt="" />
            </a></div> </td>
		<td rowspan="4">
			<img id="share_06" src="images4/share_06.png" width="110" height="257" alt="" /></td>
		<td>
			<img src="images4/spacer.gif" width="1" height="21" alt="" /></td>
	</tr>
	<tr>
		<td rowspan="3">
			<img id="share_07" src="images4/share_07.png" width="137" height="236" alt="" /></td>
		<td>
			<img src="images4/spacer.gif" width="1" height="49" alt="" /></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img id="share_08" src="images4/share_08.png" width="319" height="187" alt="" /></td>
		<td><a href="../page 5/redeem.html"><img src="images4/button.png" onmouseover="this.src='images4/button-3.png'" onmouseout="this.src='images4/button.png'"/></a>
        
      </td>
		<td rowspan="2">
			<img id="share_10" src="images4/share_10.png" width="75" height="187" alt="" /></td>
		<td>
			<img src="images4/spacer.gif" width="1" height="30" alt="" /></td>
	</tr>
	<tr>
		<td>
			<img id="share_11" src="images4/share_11.png" width="150" height="157" alt="" /></td>
		<td>
			<img src="images4/spacer.gif" width="1" height="157" alt="" /></td>
	</tr>
</table>
</center>
<!-- End Save for Web Slices -->
</body>

</html>

It 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>

Hi everyone,

I have been working on a website here www.ds-installations.co.uk/examples.html.

I am nearing the end of design/development but I have a weird display bug in Chrome and Safari. For some reason, the content displays off to the right of the main page?

I have checked all the code through the W3C CSS and HTML validators and it all seems fine. I have tested in IE6+, FF and Opera which seem to work fine?

I would really appreciate any help on this, I have been looking and tweaking for hours to try and fix it and I can't see anything obvious?

Thanks very much in advance for any help!

Dan

Hi!
this is really weird.
I build a simple page with a table with a background picture.

In Explorer it's all good but in Chrome & Firefox, you cant see the background picture of the table.

help please?
thanks

Jeni

Hi,

Facing a strange issue. My html page contains a div element with fixed height and width and its overflow property set as hidden.
as shown below:
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=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <div style="height: 200px;width: 400px; border: 3px coral solid; overflow: hidden;">
      <input type="text" value="AAAAAAA" />
      I am rahul working to counter special feature of safari Web tool kit
      I am rahul working to counter special feature of safari Web tool kit
      I am rahul working to counter special feature of safari Web tool kit
      I am rahul working to counter special feature of safari Web tool kit
      I am rahul working to counter special feature of safari Web tool kit
      I am rahul working to counter special feature of safari Web tool kit
      I am rahul working to counter special feature of safari Web tool kit
      I am rahul working to counter special feature of safari Web tool kit
      I am rahul working to counter special feature of safari Web tool kit
      I am rahul working to counter special feature of safari Web tool kit
      111
      111
      232
      23
      23
      232
      32
      3
      <input type="text" value="1111111" />
      <input type="text" value="1111111" />
      <input type="text" value="1111111" />
      <input type="text" value="1111111" />
      <input type="text" value="1111111" />
    </div>
</body>
</html>

Now if you open this html page in safari or chrome. As the content of the div is overflowing and div's overflow property is set as hidden so no scrollbar is displayed(as desired). Set focus on input type text, keep mouse pressed and drag the mouse. You will observe that div's content starts scrolling(which was not desired).

Now open this page in ff/Ie and perform same operation content does not scrolls(desireable).

How can I make sure that div's content does not scrolls in safari too.

Code spinet will help.

You can test this by copy pasting the html content in a test page and open in safari or chrome?


Thanks,
Regards

I have a simple slide over menu for navigation in a div. Safari and Firefox both work. ON IE it's shifted over to the right a little more and the slide over menus wont appear. Any options?

Hi,

I have a site that loads fine on Chrome and IE.

Don't see a section of it on Safari or Firefox. Page comes up blank. its supposed to show flash object.

The site is

kidsooda.com

The section page that does not work in Safari and FF is

kidsooda.com/inside/#/contact

If you have any ideas I'd really appreciate it.


THANK YOU !!

Hi,

My website layout is based on html tables about 750 pixels wide and was set up in Dreamweaver 4. It works fine in Explorer, but in Firefox each page explodes to the full screen size during loading before snapping back to the correct size when loading completes. This is ok, but I would prefer it to display correctly whilst loading (as it does in Explorer) as it looks rather messy. Is there a way to prevent this?

Thanks,

Richard.