PDA

View Full Version : {resolved} Table: works in FF, not in IE (with pics)

daniel981
11-30-2006, 05:07 PM
Hey there everyone...

Ive been racking my brain on this for a few days now and I need to ask you experts!

This table looks and acts perfect in FireFox, but the top bar is all messed up in Internet Explorer.
See it live here (http://www.thedistinct.com/table/).

In FireFox -
http://www.thedistinct.com/table/table_ff.gif


In IE -
http://www.thedistinct.com/table/table_ie.gif


<!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>Damn Table Issue</title>
<style>
.msgBoxOuter {
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #BFB8BF;
border-bottom-color: #BFB8BF;
border-left-color: #BFB8BF;
}
</style>
</head>
<body>
<table width="50%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="95%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="5px" height="26"><img src="images/MenuTopLeft.gif" /></td>
<td background="images/MenuTopCenter.gif">&nbsp;&nbsp;Announcements</td>
<td width="5px"><img src="images/MenuTopRight.gif" width="6" height="26" /></td>
</tr>
<tr>
<td colspan="3" bgcolor="#FFFFEA" class="msgBoxOuter">
<p><a href="1.html" target="_blank">&nbsp;This is announcement No. 1</a></p>
<p><a href="2.html" target="_blank">&nbsp;This is announcement No. 2</a></p>
<p><a href="3.html" target="_blank">&nbsp;This is announcement No. 3</a> </p>
<p><a href="4.html" target="_blank">&nbsp;This is announcement No. 4</a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>


Any ideas? :confused:

Thank you very much for looking at this.

If you need the images and the html, I've zipped it up into this (http://www.thedistinct.com/table/table.zip) file.
david_kw
11-30-2006, 06:59 PM
It's so sad. I'm following an example and still can't get it to work right for you. I started with some code from CSS Play and this is as far as I could get before I gave up. Hopefully someone else can pinpoint my error. How do I get that stupid little piece of the header to float right??

http://www.exfer.net/test/css_mid_test.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" xml:lang="en">
<head>
<title>CSS Layout</title>
<style type="text/css">
body {
color: #000;
font-family: georgia, "times new roman", times, serif;
padding: 0;
margin:0;
font-size:120%;
}
* html .container {
margin-left: -400px;
position: relative;
}
/*\*/
* html .container, * html .content {
height: 1px;
}
/**/
.content {
padding:10px;
display:block;
}
.width {
width: 50%;
min-width: 400px;
margin:0 auto;
height:100%;
}
.container {
border:1px solid #BFB7BF;
background:#FFFFEA;
}
* html .minwidth {
padding-left: 400px;
}
/*\*/
* html .minwidth, * html .layout {
height: 1px;
}
/**/

.clear { clear:both; }

#outerheader { position:relative; display:block; }
#header { display:block; }
#leftheader { float:left; position:relative; left:0px; width:6px; height:26px;
background:white url(/images/MenuTopLeft.gif) no-repeat; }
#rightheader { float:right; position:relative; right:0px; width:6px; height:26px;
background:white url(/images/MenuTopRight.gif) no-repeat; }
#centerheader { height:26px; position:relative; display:block; text-align:center;
background:white url(/images/MenuTopCenter.gif) repeat-x;
margin-left:6px; margin-right:6px; }
#footer { height:30px; background:#fd8; text-align:center;}
</style>
</head>

<body>
<div class="width">
<div class="minwidth">
<div class="layout">
<div id="outerheader">
<div id="header">

<div id="leftheader"></div>
<div id="centerheader">Announcments</div>
<div id="rightheader"></div>
<div class="clear"></div>
</div>
</div>
<div class="container">
<div class="content">
<p><a href="1.html" target="_blank">This is announcement No. 1</a></p>

<p><a href="2.html" target="_blank">This is announcement No. 2</a></p>
<p><a href="3.html" target="_blank">This is announcement No. 3</a></p>
<p><a href="4.html" target="_blank">This is announcement No. 4</a></p>
</div>
<div id="footer">
<p>&copy; Copyright 2006. All Rights Reserved.</p>

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


david_kw
david_kw
11-30-2006, 07:06 PM
Ack! Just tested it and it looks like hell in IE6. I guess I wasn't as close as I thought heh. So much for my ability to take 2 working samples and integrate them.

david_kw
daniel981
11-30-2006, 07:10 PM
Thanks David for trying it out... :)



It's so sad. I'm following an example and still can't get it to work right for you. I started with some code from CSS Play and this is as far as I could get before I gave up. Hopefully someone else can pinpoint my error. How do I get that stupid little piece of the header to float right??

...

david_kw
daniel981
11-30-2006, 10:09 PM
ok, after more trial and error I finally found a solution to keep IE6 happy and get the results that FireFox produced...

Here's (http://www.thedistinct.com/table/index3.html) the live page that works in both.

What I had to do:
before I had it like this:
---------------------
| |announcements | |
---------------------
|_________________|

Two Rows, top row having 3 columns
the bottom row being one big column.

Now, I have:
--------------------
| |announcements| |
--------------------
|_|_____________|_|

Two Rows, both having the same
number of columns...

Then I had to adjust the CSS so it would work for each section hence the msgBoxOuterLeft, msgBoxOuterRight, msgBoxOuterBottom...

I hope this makes sense... If there are any questions, post and I will try and respond. Thanks for the efforts though! :thumbsup:

The 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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Damn Table Issue</title>
<style>
.msgBoxOuterLeft {
border-left-width: 1px;
border-left-style: solid;
border-left-color: #BFB8BF;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #BFB8BF;
}
.msgBoxOuterRight {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #BFB8BF;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #BFB8BF;
}
.msgBoxOuterBottom {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #BFB8BF;
}
</style>
</head>
<body>
<table width="50%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="5" height="26"><img src="images/MenuTopLeft.gif" /></td>
<td background="images/MenuTopCenter.gif" width="*">&nbsp;&nbsp;Announcements</td>
<td width="5"><img src="images/MenuTopRight.gif" width="6" height="26" /></td>
</tr>
<tr>
<td bgcolor="#FFFFEA" class="msgBoxOuterLeft">&nbsp;</td>
<td bgcolor="#FFFFEA" class="msgBoxOuterBottom">
<p><a href="1.html" target="_blank">&nbsp;This is announcement No. 1</a></p>
<p><a href="2.html" target="_blank">&nbsp;This is announcement No. 2</a></p>
<p><a href="3.html" target="_blank">&nbsp;This is announcement No. 3</a> </p>
<p><a href="4.html" target="_blank">&nbsp;This is announcement No. 4</a></p>
</td>
<td bgcolor="#FFFFEA" class="msgBoxOuterRight">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>



Later!