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 10 of 10
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    13
    Thanks
    1
    Thanked 1 Time in 1 Post

    IE Positioning Problem

    Alright... I'm sure you all have seen this one tons of times. I've done a lot of research on it, tried all kinds of different things, but my positioning when I look at the site I have made on IE7 is still screwed. Firefox everything lines up beautifully... but IE no such luck.

    http://www.personal.psu.edu/mgs5053

    HTML:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    
    <head>
    
    <style type="text/css">
    
    #container #content .column1 h2 {
    	text-align: center;
    	color: #ead978;
    }
    #container #content .column2 h2 {
    	text-align: center;
    	color: #ead978;
    }
    
    </style>
    
    <link rel="stylesheet" href="style.css" type="text/css" media="screen">
    
      <title>Marcus G Stoll - ePortfolio</title>
      
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      
      </head>
      
    <body>
    
    	<div id="outside_container">
    	<div id="container">
    
    		<a href="#"><img src="logo.png" id="logo" style="border:none" alt=""></a>
      		<ul id="menu">
        		<li><a href="#">Home</a></li>
            	<li><a href="#">Personal Profile</a></li>
            	<li><a href="#">Course Work</a></li>
            	<li><a href="#">Resume</a></li>
            	<li><a href="#">Aspirations</a></li>
        	</ul>
    		<img src="welcome.png" name="welcome" id="welcome" style="border:none" alt="">
        
        <div id="content">
        
        	<div class="column1">
            
            	<h2><big>about me</big></h2>
                <p> My name is Marcus Stoll and I am a sophomore pursuing a Marketing degree at the Pennsylvania State University with a minor in International Business.</p>
                <p> I am currently seeking an internship to further my experience and understanding in the marketing field.</p>
    
       	  	</div>
            
      <div class="column2">
            
            	<h2><big>education</big></h2>
                <p>The Mary Jean and
          Frank P. Smeal College
          of Business Administration</p>
    	  		<p>Bachelor of Science in
         Marketing</p>
    	  		<p>Graduation Date: May 2011</p>
          		<p>GPA: 3.29</p>    
                
            <img src="psulogo.png" name="psulogo" id="psulogo" style="border:none" alt="">
        
        </div>
    
    
    </div>
    </div>
    <div id="footer">
    	<span id="footer_text">
        	<small><small><span style="color:#ffffff">Copyright Marcus G Stoll 2009</span></small></small>
        </span>
    </div>
    </div>
    </body>
    </html>
    And CSS:
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    <style type="text/css">
      body {  
        margin:0px; padding:0px;  
        background-color:#000;  
        font-family:Arial, Helvetica, sans-serif;  
    }  
    #outside_container {  
    	background:url(background2.jpg) repeat-x #000000; 
    }  
    #container {  
        background:url(background1.jpg) no-repeat;  
        min-height:940px;
    	width:1110px;
    	position:relative;
    }  
    
    #logo { position:absolute; top:30px; left:240px;
    	overflow:auto;
    }
    
    #welcome { position:absolute; top:225px; left:145px; 
    	overflow:auto;
    }
    
    #psulogo { position:absolute; top: 600px; left:345px; 
    	overflow:auto;
    }
    
    ul#menu {
    	margin:0px; padding:0px;
    	position:absolute; top:135px; left:140px;
    	overflow:auto;
    }
    	
    ul#menu li {
    	margin:0px; padding:0px;
    	list-style:none;
    	margin-right: 50px;
    	font-size: 16px;
    	text-transform:uppercase;
    	display:inline;
    }
    ul#menu li a {
    	text-decoration:none;
    	color:#CCC
    }
    ul#menu li a:hover {
    	text-decoration:none;
    	color: #ffffff;
    }
    
    #content {
    	padding-top:520px;
    	padding-left:72px;
    	width:840px;
    	color:#FFF;
    	font-size:18px;
    	line-height:20px;
    	overflow:auto;
    }
    .column1 { float:left; width:230px; margin-right:335px; }
    .column2 { float:left; width:230px; }
    
    #footer {
    	border-top:1px solid;
    	padding: 10px;
    	position:absolute;
    	top:908px;
    	left:350px;
    	overflow:auto;
    	height: -14px;
    }
    
    </style>

    Again, please check the link above for further explanation... it seems to only be the text parts that move, as far as I can tell my images still line up correctly.

    Thanks!

    Marcus
    Last edited by mgs5053; 02-17-2009 at 03:26 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You need to fix the errors in your markup first, see http://validator.w3.org/check?uri=ht...Inline&group=0
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Feb 2009
    Posts
    13
    Thanks
    1
    Thanked 1 Time in 1 Post
    Well... I fixed as much as I could, but it seems I am still left with three simple problems. I did some research on them but can't seem to find fixes and I can't seem to find a place where the code is off.

    http://validator.w3.org/check?uri=ht...Inline&group=0

    This is my first time coding, so sorry if I am missing something. Graphics I am great with, but the coding is something I'm trying to improve.

    Thanks.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    <script type="text/javascript"> function MYALERT() {
    alert("Disclaimer: Due to Internet Explorer positioning bugs, site is best viewed with Firefox. Thanks!"); } MYALERT()
    </script>

    <html>
    You can't put your <script> tag there! It should be after <html> tag and inside your <head> tag.

    It's a bad idea to give that alert for people. Your layout is fairly simple, so can easily make it compatible in all available browsers.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Feb 2009
    Posts
    13
    Thanks
    1
    Thanked 1 Time in 1 Post
    Hehe I warned you I was new to this ... ok I fixed everything up, it now clears validators.

    And the only reason I had that disclaimer in there was just as a temporary thing until I can figure this problem out, but for ease of testing I took it out.

    I edited my first post with the correct code that passes validation.

    It seems as if it is only my actual text areas that are moving, as far as I can tell the Nittany Lion logo, the "Welcome..." box, and my name at the top remain in correct places, then again I could be off again and everything is screwed.
    Last edited by mgs5053; 02-17-2009 at 07:45 PM.

  • #6
    New Coder
    Join Date
    Feb 2009
    Posts
    13
    Thanks
    1
    Thanked 1 Time in 1 Post
    Sorry for the bump, I know forums look down on it but I didn't really see any rules here about it, and didn't want this to fall on to the second page and be missed.

    If anyone could help here it would be incredibly appreciated, I am trying to apply for internships here and am looking to put this on a resume to help seperate me from other applicants, so I'm in kind of an urgent mode.

    Again, I am having alignment problems in IE (I have IE7 and it still is screwed)... the links to other pages seem to move up slightly, and the 'about me' and 'education' text boxes seem to move up, slightly left, and the text seems to have a different size, possibly even font.

    Thanks!

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I was looking for something a lot more obvious! It's hardly moving at all...

    That's probably just the different browsers default margin/padding your seeing. They are not the same from browser to browser.

    Zero out all defaults with this line added to the top of your CSS:
    Code:
    * {
    margin: 0;
    padding: 0;
    }
    Then you can specify your own margin and padding and it should be the same in all browsers.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New Coder
    Join Date
    Feb 2009
    Posts
    13
    Thanks
    1
    Thanked 1 Time in 1 Post
    Alrighty I tried that... still to no avail. Slight movements once again.

    Maybe it has something to do with the default font set that I selected? Cause it appears to me as if the fonts are the only thing really changing. To save some time I snapped some snippets comparing them side by side, check them out below. Everything remains the same except 'about me' 'education' and my footer.

    http://www.personal.psu.edu/mgs5053/Capture.JPG

    http://www.personal.psu.edu/mgs5053/Capture2.JPG

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    You don't seem to specify a font size for you <h2> in .column1 or 2. Maybe what your seeing is the different default font sizes.

    What seems to be moving is the space between the tops of .column1/2 and your <h2>. In FF and IE8 there is a space there, in IE7 the <h2> is right up against the top of it's .column

    If it's not the font-size then it's the padding/margin.
    See the cap:
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    mgs5053 (02-19-2009)

  • #10
    New Coder
    Join Date
    Feb 2009
    Posts
    13
    Thanks
    1
    Thanked 1 Time in 1 Post
    Awesome! Thanks for the advice, I think I finally figured it out:

    Code:
    <!--[if IE]>
    	<style type="text/css">
    
    	     #content { padding-top:545px; }
    		    .column1 { padding-top:5px; }
    		    .column2 { padding-top:5px; }
    		    .column1 h2 { padding-bottom:10px; }
                       .column2 h2 { padding-bottom:10px; }
                #footer { padding-top:19px; }
    	</style>
    <![endif]-->


  •  

    Posting Permissions

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