IE6 alignment problem in header title

Discussion in 'CSS' started by tomah, Oct 8, 2007.

  1. #1
    Fine in Firefox, but the header title goes way over to the left. I can't figure out the issue at all. [link]

    Anyone help?
    I wish I had never got the bug to start designing. IE6 is a constant thorn in my side!
     
    tomah, Oct 8, 2007 IP
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I was working on your page and just lost the background image but try this:

    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <headprofile="http://gmpg.org/xfn/11">
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <meta name="distribution" content="global" />
      <meta name="robots" content="follow, all" />
      <meta name="language" content="en, sv" />
      <meta name="generator" content="WordPress 2.1.2" />
        <title> A New Design</title>
    <!-- leave this for stats please -->
    
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.armensblog.com/sandbox/?feed=rss2" />
    <link rel="alternate" type="text/xml" title="RSS .92" href="http://www.armensblog.com/sandbox/?feed=rss" />
    <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="http://www.armensblog.com/sandbox/?feed=atom" />
    
    <link rel="pingback" href="http://www.armensblog.com/sandbox/xmlrpc.php" />
    	<link rel='archives' title='October 2007' href='http://www.armensblog.com/sandbox/?m=200710' />
    	<link rel='archives' title='July 2007' href='http://www.armensblog.com/sandbox/?m=200707' />
    	<link rel='archives' title='May 2007' href='http://www.armensblog.com/sandbox/?m=200705' />
    	<link rel='archives' title='March 2007' href='http://www.armensblog.com/sandbox/?m=200703' />
    	<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.armensblog.com/sandbox/xmlrpc.php?rsd" />
    <style type="text/css" media="screen">
    /* 
    	Theme Name: Vertigo 3-Column
    	Theme URL: http://www.briangardner.com/themes/vertigo-wordpress-theme.htm
    	Description: Vertigo is a modern, 3-column Widget-ready theme created for WordPress.
    	Author: Brian Gardner
    	Author URI: http://www.briangardner.com
    	Version: 1.0		
    	The CSS, XHTML and design is released under GPL:
    	http://www.opensource.org/licenses/gpl-license.php
    	
    	Changelog:
    		v1.0 - 05.14.07
    		First Release of Vertigo 3-Column
    */
    
    * {
      margin: 0;
      padding: 0;
    }
    
    body {
      background: #fff url(http://www.armensblog.com/sandbox/wp-content/themes/dietriffic_theme/images/bg1.gif) top center repeat-y;
    }
    	
    #wrapper {
      width: 820px;
      margin: 0 auto;
      color: #333;
      font: normal 12px Verdana, Helvetica, sans-serif;
    }
    	
    /************************************************
    *	Hyperlinks MOVE THIS DECLARATION ELSEWHERE									*
    ************************************************/
    /************************************************
    *	Header  									*
    ************************************************/
    	
    #header {
      width: 820px;
      padding: 20px 0px 10px 0px;
      overflow: hidden;
    	}
    
    h1 {
      width: 400px;
      float: left;
    }
    
    h1 a {
      color: #000;
      font: bold 20px/22px Verdana, Helvetica, sans-serif;
      text-decoration: none;
    }
    		
    h1 a:hover {
      color: #a90000;
    }
    
    h1 p {
      font: bold 12px/14px Verdana, Helvetica, sans-serif;
    } 
    	
    
    ul {
      width: 200px;
      float: right;
      padding: 20px 0 10px 0;
      font: bold 1em/1.2em Verdana, Helvetica, sans-serif;
    }
    	
    ul li {
      display: inline;
      list-style-type: none;
    }
    		
    ul li a, ul li a:visited {
      color: #333;
      padding: 6px 10px 6px 10px;
      text-decoration: none;
    }
    		
    ul li a:hover {
      color: #000;
      text-decoration: underline;
    }
    </style>
    <!-- @import url( http://www.armensblog.com/sandbox/wp-content/themes/dietriffic_theme/style.css ); -->
    </style>
    </head>
    <body>
    
      <div id="wrapper">
        <div id="header">
        <h1><a href="http://www.armensblog.com/sandbox/">A New Design</a>
        <p>Just A WordPress Theme</p></h1>
          <ul>
    	<li><a href="http://www.armensblog.com/sandbox">Home</a></li>
    	<li class="page_item"><a href="http://www.armensblog.com/sandbox/?page_id=2" title="About">About</a></li>
    	<li><a href="http://www.armensblog.com/sandbox/?feed=rss2">RSS</a></li>
          </ul>
        </div>
    
    
    
    
    <!-- begin column -->
    
    </div><!--wrapper-->
    
    </body>
    </html>
    
    Code (markup):
    I re-wrote the header html and noticed there was a lot of "junk DNA" in the CSS... so when I tried using your CSS everything looked different. So I put in my own to make it look like your sandbox currently does.

    Helps? I couldn't test in IE6 because of server issues but the header shouldn't be able to break out of the wrapper (I also noticed there was a #wrap in the CSS but no id="wrap" in the html... maybe you lost that somewhere??)
     
    Stomme poes, Oct 8, 2007 IP