#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2008
    Posts
    2
    Rep Power
    0

    Format problems, fine in FF, but problems in IE7, Opera


    I am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container.

    Anyone know why there is a shift, and what I can do about it?



    Style sheet code pasted below:

    Code:
    body {
    width:800px;
    font:0.83em/1.4em Tahoma, Geneva, sans-serif;
    color:#CBD4E3; 
    background:#000 url(images/body_bg.gif) repeat-y top center;
    letter-spacing:1px;
    margin:0 auto;
    }
    
    h1,h2,h3,h4,h5,h6 {
    font-family:"Times New Roman", Times, serif;
    font-style:italic;
    font-weight:bold;
    color:#e9df55;
    background-color:#000;
    }
    
    h2 {
    font-size:2em;
    }
    
    h3 {
    font-size:1.5em;
    }
    
    h4 {
    font-size:1.25em;
    }
    
    
    
    
    
    a:link {
    color:#8090AC;
    text-decoration:none;
    }
    
    a:visited {
    color:#B17F6C;
    text-decoration:none;
    }
    
    a:hover {
    color:#E9DF55;
    text-decoration:underline;
    }
    
    a:active {
    color:#E9DF55;
    text-decoration:none;
    }
    #container {
    width:760px;
    margin:0 auto;
    }
    
    #header {
    height:200px;
    width:760px;
    margin:0;
    padding:0;
    }
    
    #banner {
    height:100%;
    width:100%;
    color:#cbd4e3;
    background:#000 url(images/header_bg.jpg) no-repeat top left;
    margin:0 auto;
    padding:0;
    }
    #banner h1 {
    font-size:400%;
    color:#CBD4E3;
    background-color:transparent;
    float:left;
    display:inline;
    margin:0;
    padding:70px 0 70px 280px;
    }
    #banner h2 {
    	font-size: 12pt;
    	color: #e9df55;
    	background-color:transparent;
    	text-indent: 200pt;
    	vertical-align: text-bottom;
    }
    navigate{
    	color : #105BAC;
    	background-color : transparent;
    	height : 20px;
    	font-size: 100%;
    	border-top : 1px solid #999999;
    }
    
    #navigate ul {
    	list-style-type: none;
    	margin-top: 0px;
    	margin-bottom: 0px;
    	margin-left: 150px;
    	margin-right: 0px;
    	padding: 2px 0 0 0;
    }
    #navigate ul li {
    	display: inline;
    }
    td {
    	font-family: Arial, Helvetica, sans-serif;
    }
    
    th {
    	font-family: Arial, Helvetica, sans-serif;
    }
    p {
    	font-size: 14px;
    	color: #FFFFFF;
    	left: 50px;
    	right: 50px;
    }
    
    
    
    #main {
    	width: 660px;
    	padding-right: 50px;
    	padding-left: 50px;
    }
    #footer {
    	font-family: "Times New Roman", Times, serif;
    	font-size: 9px;
    	color: #666666;
    	height: 100px;
    	width: 760px;
    	vertical-align: text-bottom;
    	text-align: center;
    	
    }
    
    #SplashImage {
    	float: left;
    }
    .image-left {
    	clear: none;
    	margin-bottom: 10px;
    	float: left;
    	margin-right: 20px;
    	margin-left: 10px;
    }
    .image-right {
    	clear: none;
    	margin-bottom: 10px;
    	margin-left: 10px;
    	float: right;
    }
    Last edited by Kravvitz; February 6th, 2008 at 11:32 PM. Reason: added [code] tags
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4310
    Welcome to DevShed Forums, pitbull.

    1) IE doesn't like it when you give body a width.

    2) Give "#banner h2" clear:left.

    3) The align attribute of <h2>s is deprecated (basically meaning that you shouldn't use it) in favor of CSS. Use text-align:center instead.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2008
    Posts
    2
    Rep Power
    0

    Thanks


    Kravvitz,

    Thank you. You fixed my problem--i've been working on solving this for a week to no avail. Should have come here first.

    Could you explain your point 3 a bit more...I'm not sure I am following what you are saying there.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2008
    Posts
    24
    Rep Power
    0
    I think he means the html ALIGN attribute is obsolete, and you should align elements with CSS.

    Comments on this post

    • Kravvitz agrees
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4310
    You're welcome

    I'm saying don't use the align attribute.

    Four ways to Center Elements with CSS (in IE5+/Win and modern browsers)
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo