HTML - Why Does Ie Overlay My Tables? Works Fine In Firefox, Chrome And Safari???

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

I am working on a website and so far it is coming together the way I intended. Looks good on Chrome, and Safari. IE is not right yet but it looks as expected since I haven't done the IE style sheet yet. However, Firefox is producing a completely unexpected problem.

http://nickbogatin.com

I will post code but I don't even have an idea as to where the error is yet.

Help would be appreciated.

Nick

Hello, I'm new to the forums =) I'm currently having a problem with my navigation which involves images. Initally I used the traditional image map method using area maps and the usemap function but it only worked in the webpage itself, and when the webpage shows in an iframe the links are nonexistent.

So I sliced my navigation to give the sliced images the url link instead. As usual, they work on their own but when the page is shown in an iframe, some of the links disappear (you can't even hover on them) only in Firefox, Chrome and Safari. But some of the links are also still intact. In IE and Opera they work perfectly fine.

Below is the code for the page which contains the navigation and links aforementioned, which will be displayed in an iframe of another page:

Code:

<!-- ImageReady Slices (mainframe.jpg) -->
<table id="Table_01" width="971" height="565" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td rowspan="4">
			<img src="images/mainframe_01.gif" width="200" height="531" alt="""  style="z-index:-3;"></td>
		<td>
			<a href="defence.html" target="_parent"
				onmouseover="window.status='STET Defence';  return true;"
				onmouseout="window.status='';  return true;">
				<img src="images/mainframe_02.gif" width="332" height="163" border="0" alt="" style="z-index:1;"></a></td>
		<td rowspan="4">
			<img src="images/mainframe_03.gif" width="438" height="531" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="163" alt=""></td>
	</tr>
	<tr>
		<td>
			<a href="maritime.html" target="_parent"
				onmouseover="window.status='STET Maritime';  return true;"
				onmouseout="window.status='';  return true;">
				<img src="images/mainframe_04.gif" width="332" height="134" border="0" alt="" style="z-index:1;"></a></td>
		<td>
			<img src="images/spacer.gif" width="1" height="134" alt=""></td>
	</tr>
	<tr>
		<td>
			<a href="homelandsec.html" target="_parent"
				onmouseover="window.status='STET Homeland Security';  return true;"
				onmouseout="window.status='';  return true;">
				<img src="images/mainframe_05.gif" width="332" height="138" border="0" alt="" style="z-index:1;"></a></td>
		<td>
			<img src="images/spacer.gif" width="1" height="138" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<a href="centre.html" target="_parent"
				onmouseover="window.status='STET Centre';  return true;"
				onmouseout="window.status='';  return true;">
				<img src="images/mainframe_06.gif" width="332" height="130" border="0" alt="" style="z-index:1;"></a></td>
		<td>
			<img src="images/spacer.gif" width="1" height="96" alt=""></td>
	</tr>
	<tr>
		<td>
			<a href="https://mail.stet.com.sg/owa/auth/logon.aspx?url=https://mail.stet.com.sg/owa&reason=0" target="_parent"
				onmouseover="window.status='Login to Intranet';  return true;"
				onmouseout="window.status='';  return true;">
				<img src="images/mainframe_07.gif" width="200" height="34" border="0" alt="" style="z-index:1;"></a></td>
		<td>
			<a href="sitemap.php" target="mainframe"
				onmouseover="window.status='Lost?';  return true;"
				onmouseout="window.status='';  return true;">
				<img src="images/mainframe_08.gif" width="438" height="34" border="0" alt=""></a></td>
		<td>
			<img src="images/spacer.gif" width="1" height="34" alt=""></td>
	</tr>
</table>
<!-- End ImageReady Slices -->

<div id="pict" style="position:absolute;top:200px;left:10px;z-index:0;">
<iframe name="news" src="news.php" FRAMEBORDER=no name="frame" allowTransparency scrolling=auto style="filter:chroma
(color=#FFFFFF)"  width="185" height="90"></iframe>
</div>

There is another iframe in this page which I wonder might be causing the problem. However even when I removed it the problem remains.

Any ideas how to fix it?

Would really appreciate the help, thanks!

Hello, my problem is simple, my code works in Safari and Firefox but does not work in Internet Explorer. The code is supposed to open up my other site inside a frame when visiting drewandjess.net. Works perfectly except with IE... it just displays some text that should be commented out. Any advice would be appreciated!

Domain: www.drewandjess.net

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<title>Andrew and Jessica's Wedding</title><!-->incase they have javascript turned off<!-->

<script type="text/javascript"><!-->changes title bar to match title on current page in frame<!-->
function changeTitle()
   {
   if (top.frames['main'].document.title)
      {
      top.document.title=top.frames['main'].document.title;
      }
   }
</script>
</head>


<frameset>
<frame name="main" src="http://www.weddingwire.com/youandme"scrolling="auto" target="main" ONLOAD="changeTitle();"><!-->You need the onload handler to make the javascript work<!-->

<noframes>

<body>
If you can see this message it is because you are using a browser that does not support frames. Please retry viewing this page with a browser such as Mozilla Firefox.
</body>

</noframes>

</frameset>

</html>

I need some serious help, I have no idea what to check:

www.enviral-design.com

go to th galleries page, and see what I mean.

if you are in Safari or Chrome, it loads exactly like it's supposed to(for me at least)
However, on IE or Firefox the gallery page loads all stretched, and as soon as you click on any thumbnails or spry accordion tabs the page just explodes!!

what gives??

I've replaced the css for the accordion spry panels with deault DW css, no luck. same with the .js file that the accordions use, also no luck....


I have no idea what to do, or where to start....

anyone?? please help me out!!

thanks for your time,

Lucas

http://www.ptacnik.com/index102.html

When previewing through Dreamweaver in ANY of these 3 browsers it looks fine. (from my local drive) But once online it only loads in Firefox. Is there something fishy with the frames perhaps? missing an XML doc on my end? I can't figure out what is causing this. Any help would be very much appreciated.

http://www.ptacnik.com/nav1.html is the top frame and the list below are the frames loaded under nav1.

http://ptacnik.com/about101.html

http://ptacnik.com/design.html

http://ptacnik.com/illustration.html

Hi,

Im trying to develop a simple HTML interface for virtual tours but I cant get the site to look the same in all browsers. The problem comes when I view the page in IE. I want the bottom table to only be the length of the window as done in both safari and firefox. My site can be viewed on:

http://www.fullvisual.com/informatic...tual_tour.html

why doesn't the width=100% work?

Thanks

Hello everyone! Thank you for taking the time to read this. Could anyone please look at my site in IE or FF and tell me how to remove the gap between the table row that has the links at the top and the row that starts the content? The address is http://www.hard2kill.org.

I figure it would be less cluttered by leaving the code off of this post and just accessing the page source from the site; however, if you would like me to post it here, I certainly can! When I view it in Chrome, it looks just fine. IE and FF show the gap.

Yes, I know using tables this way is bad designing, but I am continually learning more and trying to transition from them, so please leave personal opinions to yourself. If a fix can be made, then I would appreciate your input! I have all the cellspacing, cellpadding, and borders set to 0 so I am at a loss. Thanks in advance!

Uploaded with ImageShack.us

My website is www.tuckermatthewsphoto.com

This is what my side menu looks like when I open it in Firefox. Note the box to the left of "automotive". It's a link to the home page, just like the "Tucker Matthews Photography" image. I've tried ironing it out all day, caved in and asked for help. In safari the "Automotive" link is in line with the others. Please help! Check my source code and my CSS out! This is killing me!

So my site that i am developing has hit a bit of a snag.

In firefox it looks great, however when i switch over to IE i get a big white space. I am wondering if anyone knows how i can correct this white space?

http://www.wdwcanada.com/maps.php is the link.

Thanks,

Hi,

Thanks in advance for your help. I'm doing a web page that I would like to be viewed on 1024 resolutions without a horizontal scrollbar. It will contain images that are exactly 980px wide. The problem is that with ie7, as soon as it contains a div or a table, no matter what I do to try to remove all padding,margins,etc.. it adds 2px for each element (I guess 1px for each side). Below is some html as an example of my problem, where I've tried to remove everything I can think of... this works fine in firefox 3

<body style="width:998px;margin-top:0;margin-left:0;margin-right:0;padding:0;">

<div style="width:100%;textalign:center"><table border="0" cellspacing="0" cellpadding="0" style="width:998px;border-collapse:collapse;padding:0;margin:0;border:0;"><tr style="padding:0;margin:0;border:0;"><td style="padding:0;margin:0;border:0;">sdfsdfd</tr></td></table><div style="width:100%>
</body>

Hi

I have tried a lot of things and search the internet for hours regarding this matter... My image background doesn't reapeat in Internet explorer however works fine in any other browsers such as google chrome and firefox. Can you please help me get this fixed? I am new to xhtml and css and really it's really frustrating having this kind of problem.


Thank you

Website Link: www.pjrazon.co.uk/newlayout/index.html

screenshots if it helps:





CSS:
@charset "utf-8";
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #CCCCCC;
}

a:link { color: #ffffff;
text-decoration: none;
}
a:visited {text-decoration: none;}
a:hover {color: #b23937;}
a:active {text-decoration: none;}

#wrapper {
width: 1151px;
margin-right: auto;
margin-left: auto;
border-right-width: thin;
border-left-width: thin;
border-right-style: solid;
border-left-style: solid;
border-right-color: #999999;
border-left-color: #999999;
}
#wrapper #logo {
height: 120px;
width: 1151px;
}
#wrapper #navigation {
background-image: url(../images/nav.home.gif);
height: 32px;
}
#wrapper #navigation #navlabel {
color: #FFFFFF;
padding-top: 5px;
padding-left: 125px;
}
#wrapper #navigation #navlabel #nav li {
display:block;
width:100px;
float:left;
list-style:none;
}
#wrapper #header {
height: 391px;
background-image: url(../images/welcome.jpg);
}
#wrapper #mainContent {
height: 384px;
background-image: url(../images/maincontent.jpg);
width: 1151px;

}
#wrapper #bodyArea #footer {
background-image: url(../images/footer.jpg);
height: 73px;
clear: both;
}
#wrapper #bodyArea {
background: url(../images/bg_bodyarea.jpg) repeat-y;

}
#wrapper #bodyArea #mainContent #content {
display:block;
width:400px;
float:left;
}
#wrapper #bodyArea #mainContent #contentwrapper {
padding-left: 140px;
padding-top: 70px;
}

HTML:
<!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>Perfect Vision</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="logo"><img src="images/header.jpg" alt="logo" /></div>
<div id="navigation">
<div id="navlabel">
<ul id="nav">
<li><a href="homepage.html">Home</a></li>
<li><a href="profile.html">Profile</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>

<div id="header"></div>

<div id="bodyArea">
<div id="mainContent">
<div id="contentwrapper">
<div id="content">
<p>August 10 2010</p>
<p>&nbsp;</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam semper turpis in tortor interdum sed mattis lectus mollis. Pellentesque laoreet quam et mauris feugiat sit amet eleifend turpis imperdiet. Praesent condimentum libero vitae massa imperdiet pellentesque. Vestibulum et risus dolor, ac tincidunt velit. Maecenas lobortis diam tellus. Suspendisse auctor, velit ut imperdiet semper, erat orci pharetra tortor, venenatis vulputate metus eros ut felis. Cras ullamcorper odio sed felis ornare ultricies. Phasellus porta adipiscing aliquet. Aenean ligula tellus, blandit a pulvinar in, fermentum a erat. Sed arcu nisl, porta eu vestibulum at, luctus sed tellus. Aenean eget quam justo, quis ultricies ante. Vivamus tempor sollicitudin augue ut rhoncus. Sed odio mauris, imperdiet ut elementum vitae, dapibus at quam. Nullam in aliquam sem. Fusce consectetur laoreet elit, non consequat nunc tempus nec. Cras at enim ipsum. Praesent ipsum purus, tempus non sagittis volutpat, fringilla eget mi. Maecenas sed elit est. Morbi facilisis purus eget nunc tincidunt iaculis mattis quam pellentesque. </p>
<p> Sed tortor leo, laoreet sit amet mattis a, fermentum in ligula. Sed tempor lacus a lorem fermentum fermentum semper nunc sagittis. Vivamus et est porta purus mollis cursus eget in ante. Sed lacinia, diam in tempor suscipit, turpis enim posuere turpis, sit amet vestibulum quam nulla id elit. Vivamus ultricies tempus mi, non consequat velit mollis id. Curabitur vehicula, turpis id tempor condimentum, sem nulla molestie enim, vel commodo metus ipsum non nisi. Aliquam erat volutpat. Fusce venenatis porttitor massa eget suscipit. Sed purus turpis, iaculis id sollicitudin id, vulputate sit amet velit. Suspendisse sed velit non tellus eleifend venenatis vehicula ut elit. Integer sit amet ullamcorper nulla. </p>
<p> Vestibulum dictum ante eu nisl ornare tincidunt. Etiam id risus mauris. Duis nec turpis in neque porttitor euismod sed id odio. Sed molestie urna a magna fermentum egestas. Nulla facilisi. Quisque risus neque, sodales pulvinar rhoncus a, lacinia eget neque. Vivamus vel malesuada nisl. Proin mollis tempor felis id dapibus. Morbi velit mi, aliquet sed malesuada et, blandit vitae eros. Nulla nec lorem quam, eu aliquam sapien. Quisque venenatis, enim non ultricies lobortis, lectus dolor consectetur nulla, eu tincidunt metus enim vitae libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent sit amet neque eu libero commodo condimentum. Fusce hendrerit diam sed libero lacinia nec adipiscing massa posuere. Pellentesque eget libero risus, eget venenatis metus. Morbi quis dolor enim. Cras orci orci, ultrices nec consectetur sed, auctor non leo. Aliquam nec sem erat. Nam ut nunc sed leo tempor pretium. Maecenas sit amet tortor a neque congue iaculis eu in ipsum. </p>
</div>
</div>
</div>

<div id="footer"></div>
</div>


</div>
</body>
</html>

PROBLEM SOLVED