PDA

View Full Version : IE vs Firefox Layout problems

AgentDark
October 16th, 2007, 11:56 PM
http://209.31.112.10.ptr.us.xo.net/~agentd/new/index.html

In IE there is a break right after the tab image (the image with the tabs) on all the pages. In firefox it looks fine, the image connects with the table perfectly.

If you need any more clarification on what I mean check it in IE and Firefox.

Please dont post saying that IE is gay, I know that but I woud like my page to be more compatible.

If you know how to fix this compatibility problem please help.
Speedy Responce Requested
Thanks,
Mike
Buzz
October 17th, 2007, 01:02 AM
<table width="800" style="border-left: 2px solid black; border-right: 2px solid black; cellpadding="10" cellspacing="0" bgcolor="#006633" >
<tr bordercolor="#000000">

<tr bordercolor="#000000">


empty table row for starters.
AgentDark
October 17th, 2007, 01:30 AM
<table width="800" style="border-left: 2px solid black; border-right: 2px solid black; cellpadding="10" cellspacing="0" bgcolor="#006633" >
<tr bordercolor="#000000">

<tr bordercolor="#000000">


empty table row for starters.

Could you inturprate that? I took out the redundent border color thing it didn't help.
oracle128
October 17th, 2007, 01:34 AM
You have 2 <tr> tags there, but you only need one.

See what happens when you put everything from the TAB1.gif <img> tag to the <table> tag all on the one line.
AgentDark
October 17th, 2007, 02:05 AM
You have 2 <tr> tags there, but you only need one.

See what happens when you put everything from the TAB1.gif <img> tag to the <table> tag all on the one line.

I said that I removed one of them already. And I tried your suggestion to no avail.
rockboy
October 17th, 2007, 04:02 AM
You could experiment with css margins at the top of the table or at the bottom of the nav image. Another option is to put the nav image inside the table in the top row (tr) so that you aren't dealing with two independent elements (img and table).

Also, IE doesn't know how to deal with the transparent corners of your main banner png image. You could save it as a gif or make the corners green so that they don't show up white in IE.
Buzz
October 17th, 2007, 04:13 AM
Try correcting the DOCTYPE and picking just one... the adjust the tags to meet the DOCTYPE declaration. Move the image map out of the content area as well.

complete adjusted page which eliminates all the XHTML errors and warnings as well as the proprietary tags:


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>The DJHS Marching Band</title>
<style type="text/css">
<!--
body { background-color: #009933; }
-->
</style>

</head>

<body>
<div align="center" style="line-spacing: -4px;">
<img src="images/banner2.png" width="697" height="160" />
<br /><br />
<img src="images/TAB1.gif" width="800" height="51" border="0" usemap="#Map" style="margin-bottom: -4px;" />

<table width="800" style="border-left: 2px solid black; border-right: 2px solid black;" cellpadding="10" cellspacing="0" bgcolor="#006633" >
<tr>
<td bgcolor="#006633" align="center">
<iframe src="http://209.31.112.10.ptr.us.xo.net/~agentd/wordpress/" name="Content" width="90%" height="400" frameborder="0"></iframe>
</td>
</tr>
</table>

<img src="images/bottom.gif" width="800" height="27" />
</div>

<map name="Map">
<area shape="rect" coords="4,3,98,27" href="index.html">
<area shape="rect" coords="104,3,200,25" href="schedule.html">
<area shape="rect" coords="206,2,302,26" href="policy.html">
<area shape="rect" coords="308,1,406,25" href="media.html">
<area shape="rect" coords="410,1,507,25" href="scores.html">
<area shape="rect" coords="510,3,611,27" href="forms.html">
</map>

</body>
</html>