text/table positioning wont work on IE5

ime

10-07-2007, 06:39 PM

hi,

I've got a website. It has a nav menu on the left and i am wanting too place 'content'(text,pics,etc.) on the right(along-side the menu).
I took a table and assigned it to a div. The div is as following:#contentStyle {
width: 827px;
min-height: 450px;
margin: 0 auto;
background-color: #ffffff;
padding-left: 208px;
padding-right: 25px;
margin-top: -158px;
vertical-align: top;
padding-top: 20px;

}
You can see i've done 208px of padding from the left(so it doesnt overlap the menu) and it works a treat in Opera and FF but in IE5 it simply doesnt! LOL! It takes the text(which is assigned to #contentStyle) and just squishes it and it gest placed right over the menu.
Is this not the way to do it or is there a trick to this?

Thanks alot!

abduraooft

10-07-2007, 06:46 PM

Remove all padding and then add a float:left to your left column and some margin-left(>= width of left column).
To get a clear picture of what you have, we want to see your all related codes. So please post a link or some more relevant parts of your code.

ime

10-07-2007, 07:08 PM

i did what you said. It works in a way but the margin-left on opera compared with IE theres alot of space between. What i mean is that in IE the contentLayout div is placed alot more to the right then in opera.

You want more code, tell me exactlly what you want. Its on my local machine so i cant give you the add.

abduraooft

10-07-2007, 07:21 PM

See, a style without it's html is not usefull to get an idea of it's layout.
Post your code having divs refered like contentStyle, contentLayout,.. and their containers or siblings which may take part in this game ;).

ime

10-07-2007, 07:32 PM

okay. I've got the header.php which contains the logo, a split line and the nav menu.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<link href="style/siteLayout.css" rel="stylesheet" type="text/css">
<link href="style/menu/menuStyle.css" rel="stylesheet" type="text/css">

<body>

<table width="852" height="103" border="0" id="headerOutline">
<tr>
<td width="219"><a title="Home page" href="index.php">
<div id="logo"></div>
</a></td>
<td width="292"></td>
<td width="300"></td>
</tr>
<tr>
<td colspan="3"><div id="separator_line"></div></td>
</tr>
<tr>
<td colspan="3"><?php include "style/menu/menu.php";?></td>
</tr>
</table>
</body>

Now i've got an index.php which contains the header.php and my content <?php include "header.php";?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Welcome to Berry Hill Cottages.co.uk</title>
<link href="style/siteLayout.css" rel="stylesheet" type="text/css">

</head>

<body>
<table width="201" border="0" id="contentStyle">
<tr>
<td width="195" valign="top">blah blah blah</p></td>
</tr>
</table>
<table width="200" border="0" id="copyright">
<tr>
<td>Copyright 2007 blah blah. All rights reserved. </td>
</tr>
</table>
</body>
</html>

Can you see something wrong there?:confused:

abduraooft

10-07-2007, 07:47 PM

Oh.. what I asked is the final html code taken from you browser's view source code option.
And now I've some more words to tell you. I thought you were using a CSS based layout but it is a table based one. Please have a look at Why Tables for Layout is Stupid? (http://www.hotdesign.com/seybold/) to get a good understanding of the scenario.
And have a look at http://bonrouge.com/3c-hf-fluid-lc.php to see some standard CSS based layouts.

ime

10-07-2007, 07:55 PM

i know tables restrict design in some ways but its a bit less messier.

hmmmmmm, i need to get this website done today because its for a project. What do you recon i should do?
Ditchj the tables and go all divastic?

ime

10-07-2007, 08:15 PM

EDIT: okay i took out all the tables leaving divs and only divs! i wrapped everything up BUT IE doesnt want to place it in the middle. In Opera its fine it all displays in the middle. I've got:margin: 0 auto; in the wrapper.

Why wont it work in IE??

abduraooft

10-08-2007, 04:54 AM

Now please post your html(taken from browser's view source option) and it's CSS.

ime

10-08-2007, 07:03 PM

<html>
<head>
<title>.</title>
<link href="style/siteLayout.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

<div id="wrapper">

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

<link href="style/siteLayout.css" rel="stylesheet" type="text/css">
<link href="style/menu/menuStyle.css" rel="stylesheet" type="text/css">

<body>

<div id="headerOutline">

<a title="Home page" href="index.php"><div id="logo"></div></a>

<div id="separator_line"></div>

</div>

</body>

<link href="menuStyle.css" rel="stylesheet" type="text/css">

<body>
<div id="vertmenu_bg">
<div id="vertmenu">
<ul>
<li><a href="#" tabindex="1">> Home</a></li>
<li><a href="#" tabindex="2">> Things to see & do</a></li>
<li><a href="#" tabindex="3">> Links</a></li>
<li><a href="#" tabindex="4">> Contact Us</a></li>
<li><a href="#" tabindex="5">> Rates</a></li>
</ul>
</div>
</div>
</body>
<div id="contentStyle">
Welcome!!!!!!!</div>
</div>

<html>
<head>
<link rel="stylesheet" type="text/css" href="siteLayout.css">
</head>
<body>

<div id="copyright">Copyright © 2007 Blah. All rights reserved.</div>

</body>
</html>

</div>

</body>
</html>

BarrMan

10-08-2007, 07:09 PM

Hmm.. Please check your code. It has 2 body's 2 html's and more. Also, if you want to have the symbol ">" you should do it with this: >

abduraooft

10-08-2007, 07:22 PM

If this your html code of a single page, then you have some errors in the document structure.

The document should start with a DOCType declaration, but I see it after 4 or 5 lines in your code.
The next tag should be <html>, then <head> and then <body>. And you should be careful to close these tags at proper place.
For instance modify the following

<!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" lang="en">
<head>
<title>Title</title>
<link href="style/siteLayout.css" rel="stylesheet" type="text/css"/>
<link href="style/menu/menuStyle.css" rel="stylesheet" type="text/css"/>

<link href="menuStyle.css" rel="stylesheet" type="text/css"/>

</head>
<body>

</body>
</html>

Here I've used strict xhtml doctype and so the document should follow its rules. All your other tags like <div>,<ul> etc should go inside <body></body>.
All the CSS, Javascript links have to be inside <head>

To get more on doctype, see this sticky thread http://www.codingforums.com/showthread.php?t=18346

After all validate your code with http://validator.w3.org/#validate_by_input
PS: Still ou missed your CSS along with your last post, update your code and then post.

ime

10-09-2007, 03:16 PM

Okay heres the source 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" xml:lang="en" lang="en">

<head>
<link href="style/siteLayout.css" rel="stylesheet" type="text/css"/>
<link href="style/menu/menuStyle.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div id="headerOutline">
<a title="Home page" href="index.php"><div id="logo"></div></a>
<div id="separator_line"></div>
</div>

<title>Welcome! -- Index</title>

<div id="wrapper">

<div id="vertmenu_bg">
<div id="vertmenu">
<ul>
<li><a href="#" tabindex="1">> Home</a></li>
<li><a href="#" tabindex="2">> Link</a></li>
<li><a href="#" tabindex="3">> Link</a></li>
<li><a href="#" tabindex="4">> Link</a></li>
<li><a href="#" tabindex="5">> Link</a></li>
</ul>
</div>
</div>

<div id="contentStyle">
Blah blah blah................</div>
</div>

<div id="copyright">Copyright © 2007 Blah. All rights reserved.</div>
</body>
</html>
</div>

See any faults?
PS- the menu and the content go off a bit to the side on IE5, how can i fix that?