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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 21
  1. #1
    New Coder
    Join Date
    Nov 2006
    Posts
    59
    Thanks
    1
    Thanked 0 Times in 0 Posts

    IE skewing my content to the left !?

    Hi

    Code:
    <div id=#container> displays all of my content</div>
    My logo at the head of the browser remains centred but everything within the #container is displaying to the left of the browser window in IE. It's perfectly centred with my logo in FF.

    Can anyone suggest how to overcome this ?

    Thanks for any suggestions.

  • #2
    New Coder
    Join Date
    Oct 2010
    Location
    Norwich, CT
    Posts
    35
    Thanks
    4
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by webdiv View Post
    Hi

    Code:
    <div id=#container> displays all of my content</div>
    My logo at the head of the browser remains centred but everything within the #container is displaying to the left of the browser window in IE. It's perfectly centred with my logo in FF.

    Can anyone suggest how to overcome this ?

    Thanks for any suggestions.
    We would need an example of your working code and CSS, please attach!

  • #3
    New Coder
    Join Date
    Nov 2006
    Posts
    59
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by MissPhoenix View Post
    We would need an example of your working code and CSS, please attach!
    Code:
    <div id="logo"><img src="img/logo.jpg"> </div>
    
    <div id="nav">
    <ul>
        <li><a href="0">0</a></li>
        <li><a href="0">0</a></li>
        <li><a href="0">0</a></li>
        <li><a href="0">0</a></li>
        <li><a href="0">0</a></li>
        <li><a href="0">0</a></li>
        <li><a href="0">0</a></li>
    </ul></div>
    
    <div id="indexcontainer"> 
      <p><img src="img/1.JPG" width="300" height="450"> 
      <p>content</p>
        <p>content </p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        
      <p>Thank you for visiting<a href="mailto:..."><font size="2">Contact 
        me</font></a></p>
    </div>
    Code:
     body {
          color:#BDBDBD;
          font:x-small/1.5em Georgia,Serif;
          voice-family: "\"}\""; voice-family:inherit;
          font-size:small;
          }
        
    #logo {
    	position: relative;
    	padding-top: 10px;
    	margin-left: 175px;
    }
    
    #indexcontainer {
    background-color: #424242;
    padding-top: 5px;
    padding-right: 50px;
    padding-bottom: 20px;
    padding-left: 20px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 800px;
    height: 500px;
    text-color: gray;
    }
    
    a{
    text-decoration: none;
    }
    a:link {
    color:white;
    background color: gray;
    }
    
    a:visited {
    color: white;
    }
    
    a:hover {
    color: white;
    background-color: #c0c0c0;
    }
    
    #indexcontainer img {
    float: left;
    margin-top: 5px;
    margin-right: 20px;
    margin-left: 5px;
    }
    
    #nav {
    font-family: Arial, Helvetica, sans-serif;
    font-size: .9em;
    }
    
    #nav ul {
    list-style: none;
    margin-top: 5px;
    margin-left: 370px;
    margin-bottom: 10px;
    padding: 0;
    padding-top: 4px;
    }
    
    #nav li {
    display: inline;
    }
    
    #nav a:link, #nav a:visited {
    padding: 3px 10px 2px 10px;
    color: #white;
    background-color: #424242;
    text-decoration: none;
    border: 1px solid #BDBDBD;
    }
    
    #nav a:hover {
    color: #FFFFFF;
    background-color: #c0c0c0;
    }

  • #4
    New Coder
    Join Date
    Oct 2010
    Location
    Norwich, CT
    Posts
    35
    Thanks
    4
    Thanked 3 Times in 3 Posts
    The float:left might be causing it, for all images if you apply align=left it will align to the left where the text wraps around it. If that's the look you're looking for I would replace float with align.

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    webdiv, do you have a valid doctype on your page?

  • #6
    New Coder
    Join Date
    Nov 2006
    Posts
    59
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    I thought of the 'float' but if I change it to 'align' all it does is stop the text wrapping to the image and I need that. Also, changing it to 'align' changes nothing in IE as the #container is till displaying to the left of the browser window. hhmmmmm !

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Please post all of your code or provide a link to your page.

  • #8
    New Coder
    Join Date
    Nov 2006
    Posts
    59
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View Post
    Please post all of your code or provide a link to your page.
    All of the code is at the top ?

  • #9
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    No, it isn't which is why I asked about the doctype. If I paste your code into a document with a correct doctype etc then #indexcontainer is centred for me in IE7. So there must be something else wrong.

    A link to your page would be much better, but if you can't do this then post the entire html inclusing the head and the doctype.

    Changing float to align will definitely fail as align is not a css property. There's no reason why float shouldn't work.
    Last edited by SB65; 10-27-2010 at 06:37 PM.

  • #10
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by webdiv View Post
    All of the code is at the top ?
    Then you are missing some code. I dont see any html opening or closing tags. No opening or closing body and head tags. All you posted was code for two divs and their content and the css.

    No, it isn't which is why I asked about the doctype. If I paste your code into a document with a correct doctype etc then #imagecontainer is centred for me in IE7. So there must be something else wrong.

    A link to your page would be much better, but if you can't do this then post the entire html inclusing the head and the doctype.

    Changing float to align will definitely fail as align is not a css property. There's no reason why float shouldn't work.
    Beat me to it! lol
    Last edited by teedoff; 10-27-2010 at 06:37 PM.

  • #11
    New Coder
    Join Date
    Nov 2006
    Posts
    59
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Add this below to the code at the top; then you have all of the code with the exception of
    Code:
    </body> </html>
    at the bottom of the doc'.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Home</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body background="img/bckgrnd.jpg" >
    I'm afraid I do not have the files on a server as they are still in design so can't give you a link to them.

    Thanks for your help. I'm a beginner to this.

  • #12
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post
    so you are saying that you can view this in a browser but it is not uploaded to the internet..

    if so, please view this in your browser where you are seeing the problems, and view the source code from the browser and copy the 'entire' source code to your next reply.

    this will enable one of us to better help and snippets of code in multiple posts is very confusing to most of us.

  • #13
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    And are you saying that with that code in IE that the div #indexcontainer is not centred on the page? It is for me in IE7.

  • #14
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    One thing you should do, and religiously, is validate your code. You have a few errors that, if fixed, might resolve your problem. You can copy and paste your source code here and click check to see the errors.

  • #15
    New Coder
    Join Date
    Nov 2006
    Posts
    59
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    And are you saying that with that code in IE that the div #indexcontainer is not centred on the page? It is for me in IE7.
    Yes. The actual container with all of its content is off to the left leaving the logo centred at the top. All of the actual content inside the div remains where it should be. It is the same with all of my x8 pages.I'm not sure what version of IE it is bit it's the one that came with Win7 Home Premium which I have only recently bought.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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