...

View Full Version : IE Positioning Problem



mgs5053
02-16-2009, 12:23 AM
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:

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

@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

abduraooft
02-16-2009, 08:14 AM
You need to fix the errors in your markup first, see http://validator.w3.org/check?uri=http%3A%2F%2Fwww.personal.psu.edu%2Fmgs5053&charset=%28detect+automatically%29&doctype=Inline&group=0

mgs5053
02-16-2009, 07:03 PM
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=http%3A%2F%2Fwww.personal.psu.edu%2Fmgs5053&charset=(detect+automatically)&doctype=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.

abduraooft
02-17-2009, 09:13 AM
<!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.

mgs5053
02-17-2009, 04:26 PM
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.

mgs5053
02-18-2009, 05:35 AM
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!

Excavator
02-18-2009, 06:52 AM
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:

* {
margin: 0;
padding: 0;
}

Then you can specify your own margin and padding and it should be the same in all browsers.

mgs5053
02-19-2009, 04:19 AM
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

Excavator
02-19-2009, 05:34 AM
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:
http://nopeople.com/webfiles/Clipboard01.jpg

mgs5053
02-19-2009, 06:32 AM
Awesome! Thanks for the advice, I think I finally figured it out:


<!--[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]-->



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum