Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    ime
    ime is offline
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    text/table positioning wont work on IE5

    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:
    Code:
    #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!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    ime
    ime is offline
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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 .
    Last edited by abduraooft; 10-07-2007 at 07:37 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    ime
    ime is offline
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    okay. I've got the header.php which contains the logo, a split line and the nav menu.
    Code:
    <!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
    Code:
    <?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?

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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? 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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    ime
    ime is offline
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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?

  • #8
    ime
    ime is offline
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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:
    Code:
    margin: 0 auto;
    in the wrapper.

    Why wont it work in IE??
    Last edited by ime; 10-07-2007 at 09:48 PM.

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Now please post your html(taken from browser's view source option) and it's CSS.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #10
    ime
    ime is offline
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Code:
    <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 &copy; 2007&nbsp;Blah. All rights reserved.</div>
    
    </body>
    </html>
    
    </div>
    
    </body>
    </html>

  • #11
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts
    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: &gt;

  • Users who have thanked BarrMan for this post:

    ime (10-08-2007)

  • #12
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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

    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>
    <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 Which Dtd (doctype) to use on page?

    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    ime (10-08-2007)

  • #13
    ime
    ime is offline
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Okay heres the source code:
    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">&gt; Home</a></li>
    <li><a href="#" tabindex="2">&gt; Link</a></li>
    <li><a href="#" tabindex="3">&gt; Link</a></li>
    <li><a href="#" tabindex="4">&gt; Link</a></li>
    <li><a href="#" tabindex="5">&gt; Link</a></li>
    </ul>
    </div>
    </div>
    
    <div id="contentStyle">
    Blah blah blah................</div>
    </div>
    
    <div id="copyright">Copyright &copy; 2007&nbsp;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?
    Last edited by ime; 10-09-2007 at 09:28 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •