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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    IE Positioning Problem

    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

    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.

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,699
    Thanks
    0
    Thanked 233 Times in 228 Posts
    Hi there dlinkdesign,

    your page did not validate...

    ...so I recoded it...
    Code:
    
    <!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

  • #3
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by coothead View Post
    Hi there dlinkdesign,

    your page did not validate...

    ...so I recoded it...
    Code:
    
    <!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?


  •  

    Posting Permissions

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