...

View Full Version : IE Positioning Problem



dlinkdesign
11-15-2009, 10:18 AM
I can't seem to figure out if this is a z-index issue, or positioning pertaining to absolute and relative positioning, all the above or just something else completely. Basically, my site is perfect in Firefox 3.5, but in IE8 everything is Almost perfect. I can't figure out what to tweak to stop my header and headline from overlapping in IE8.

My Stylesheet (http://www.daphnelink.com/stylesheet.css)

If anyone wants to see the website in IE vs Firefox, it's the same link as above, just remove the stylesheet dot css from the end of the url.

Thanks in advance.

Note: Just tested in Google Chrome & Safari, same is IE8, overlapping. Looks perfect in Opera.

coothead
11-15-2009, 02:34 PM
Hi there dlinkdesign,

your page did not validate...
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.daphnelink.com%2F
...so I recoded it...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<!-- this is for coothead testing and can be removed -->
<base href="http://www.daphnelink.com/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Daphne Link</title>

<style type="text/css">
* {
margin:0;
padding:0;
}
body {
font-family:verdana,arial,helvetica,sans-serif;
font-size:12px;
color:#fff;
background-color:#282722;
}
#wrapper {
width:1024px;
margin:auto;
}
#header {
position:relative;
height:153px;
background-image:url(images/headerArea.gif);
overflow:hidden;
}
#header h5,#header h6 {
text-indent:-9999px;
}
#flash1 {
position:absolute;
top:-50px;
left:-116px;
width:700px;
height:300px;
}
#flash2 {
position:absolute;
top:-52px;
left:-206px;;
width:800px;
height:400px;
}
#styleNav {
margin:20px 0 16px 10px;
list-style-type:none;
}
#styleNav li {
display:inline;
padding:0 10px 10px 0;
}
#styleNav li a,#footer a {
color:#917d2c;
text-decoration:none;
}
#styleNav li a:active,#styleNav li a:hover,
#footer a:active,#footer a:hover {
color:#edda8b;
text-decoration:underline;
}
#content {
height:484px;
padding:20px;
background-image:url(images/content.gif);
overflow:auto;
}
#content h1,#content h2,#content h3 {
font-size:24px;
color:#edda8b;
}
#content p {
margin-bottom:28px;
color:#ccc;
}
#footer {
padding-right:40px;
margin-top:16px;
color:#ccc;
text-align:right;
}
</style>

</head>
<body>

<div id="wrapper">

<div id="header">

<h5>Daphne Link</h5>

<object id="flash1" type="application/x-shockwave-flash" data="headerFlash.swf">
<param name="movie" value="headerFlash.swf">
<param name="loop" value="false">
<param name="quality" value="high">
<param name="wmode" value="transparent">
</object>

<h6>Development &amp; Design</h6>

<object id="flash2" type="application/x-shockwave-flash" data="headerSloganFlash.swf">
<param name="movie" value="headerSloganFlash.swf">
<param name="loop" value="false">
<param name="quality" value="high">
<param name="wmode" value="transparent">
</object>

</div><!-- end #header -->

<ul id="styleNav">
<li><a href="http://www.daphnelink.com/">Home</a></li>
<li><a href="http://www.daphnelink.com/portfolio.html">Portfolio</a></li>
<li><a href="http://www.daphnelink.com/about.html">About</a></li>
<li><a href="http://www.daphnelink.com/contact.html">Contact</a></li>
</ul>

<div id="content">

<h1>Welcome to my website!</h1>

<p>This website features web development and design projects, as well as
my progress with game development and design.
</p>

<h2>Education</h2>

<p>Bachelor of Arts in Digital Media Communications and Minor in Computer Science</p>

<h3>Skills</h3>

<p>Programming Languages: C++<br>
Markup Languages: XHTML/HTML, CSS<br>
API Experience: OpenGL, Irrlicht Engine<br>
Software: Adobe Photoshop, Dreamweaver, Flash,
Director, Microsoft Visual Studio<br>
Other: 4 years of Beta Testing experience
</p>

</div><!-- end #content -->

<div id="footer">
Copyright &copy; 2009 <a href="http://www.daphnelink.com">Daphne Link</a>
</div><!-- end #footer -->

</div><!-- end #wrapper -->

</body>
</html>

coothead

dlinkdesign
11-15-2009, 11:15 PM
Hi there dlinkdesign,

your page did not validate...
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.daphnelink.com%2F
...so I recoded it...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<!-- this is for coothead testing and can be removed -->
<base href="http://www.daphnelink.com/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Daphne Link</title>

<style type="text/css">
* {
margin:0;
padding:0;
}
body {
font-family:verdana,arial,helvetica,sans-serif;
font-size:12px;
color:#fff;
background-color:#282722;
}
#wrapper {
width:1024px;
margin:auto;
}
#header {
position:relative;
height:153px;
background-image:url(images/headerArea.gif);
overflow:hidden;
}
#header h5,#header h6 {
text-indent:-9999px;
}
#flash1 {
position:absolute;
top:-50px;
left:-116px;
width:700px;
height:300px;
}
#flash2 {
position:absolute;
top:-52px;
left:-206px;;
width:800px;
height:400px;
}
#styleNav {
margin:20px 0 16px 10px;
list-style-type:none;
}
#styleNav li {
display:inline;
padding:0 10px 10px 0;
}
#styleNav li a,#footer a {
color:#917d2c;
text-decoration:none;
}
#styleNav li a:active,#styleNav li a:hover,
#footer a:active,#footer a:hover {
color:#edda8b;
text-decoration:underline;
}
#content {
height:484px;
padding:20px;
background-image:url(images/content.gif);
overflow:auto;
}
#content h1,#content h2,#content h3 {
font-size:24px;
color:#edda8b;
}
#content p {
margin-bottom:28px;
color:#ccc;
}
#footer {
padding-right:40px;
margin-top:16px;
color:#ccc;
text-align:right;
}
</style>

</head>
<body>

<div id="wrapper">

<div id="header">

<h5>Daphne Link</h5>

<object id="flash1" type="application/x-shockwave-flash" data="headerFlash.swf">
<param name="movie" value="headerFlash.swf">
<param name="loop" value="false">
<param name="quality" value="high">
<param name="wmode" value="transparent">
</object>

<h6>Development &amp; Design</h6>

<object id="flash2" type="application/x-shockwave-flash" data="headerSloganFlash.swf">
<param name="movie" value="headerSloganFlash.swf">
<param name="loop" value="false">
<param name="quality" value="high">
<param name="wmode" value="transparent">
</object>

</div><!-- end #header -->

<ul id="styleNav">
<li><a href="http://www.daphnelink.com/">Home</a></li>
<li><a href="http://www.daphnelink.com/portfolio.html">Portfolio</a></li>
<li><a href="http://www.daphnelink.com/about.html">About</a></li>
<li><a href="http://www.daphnelink.com/contact.html">Contact</a></li>
</ul>

<div id="content">

<h1>Welcome to my website!</h1>

<p>This website features web development and design projects, as well as
my progress with game development and design.
</p>

<h2>Education</h2>

<p>Bachelor of Arts in Digital Media Communications and Minor in Computer Science</p>

<h3>Skills</h3>

<p>Programming Languages: C++<br>
Markup Languages: XHTML/HTML, CSS<br>
API Experience: OpenGL, Irrlicht Engine<br>
Software: Adobe Photoshop, Dreamweaver, Flash,
Director, Microsoft Visual Studio<br>
Other: 4 years of Beta Testing experience
</p>

</div><!-- end #content -->

<div id="footer">
Copyright &copy; 2009 <a href="http://www.daphnelink.com">Daphne Link</a>
</div><!-- end #footer -->

</div><!-- end #wrapper -->

</body>
</html>

coothead

Ok, what you did works (of course) still not valid, but works, I had to close param tags, an breaks. Anyway, could I get some explanations on some things you did, because I don't want to just copy code and not know why you did what you did.

First, why did you position the header relative and overflow hidden? Why did you set overflow to auto on the content? I guess I need some explanation on the "overflow" usage.

Next, why did I not need my navigation (styleNav) in a div? I'm going to end up moving the navigation from the page anyway, with a flash navigation that will be in an object like you showed for my other two flash objects, but I'm still curious.

Also, maybe it's just a preference, but why use a triple hex color code vs a six digit one, like you did? It personally irks me to use a triple, and then turn around and use a six, so I tend to keep it uniform just using six, even though triple could be a time saver. Not sure if I should be using triple's, or if using six for all, like I do, is fine as well?

Other things I think I understand why you did them, like moving all of my css link styling together that went together, content, etc. probably to shorten code. No use in having redundant things going on when they can just go together.

And lastly, I'm not sure I'm correct as to why you did this, but needing removing the embed tags from the flash because it's non-standards compliant for xhtml. Correct?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum