Home > Newsletter, Blog, and Other Topics > Topic

IE and CSS problem

Posted by aedwards 
This forum is now read only. You can not log in or make any changes. Please use the new forum linked above.
As of March 14, 2011, this forum has been replaced and is permanently set to read-only mode. This means you can view any existing post but cannot open new posts or reply to existing ones. The new forum is located athttp://www.larryullman.com/forums/If you need to post a message, you'll need to register there. If you have to post in order to follow up on a thread started here, well, that's going to be a bit of a pain. I would recommend just posting the appropriate information, or copying the original text from here, or linking to your thread here. I apologize for the inconvenience but this purge will make for better forums in the long run. Thanks.
Forum List Message List
aedwards
IE and CSS problem
January 22, 2010 01:53PM
Since this is a CSS problem I wasn't sure the appropriate place to put it, so figured this was my best bet.

I'm using Internet Explorer 7 and Firefox 3.52. Both on Windows.

The prorblem has to do with the <div id = "header" part of my page.
In Firefox both the "ABC" and "Aaaaaaaa Bbbbbbbb Cccccccc" show up just fine.
But in IE7 only the "ABC" shows up, not the "Aaaaaaaa Bbbbbbbb Cccccccc".

Here's the code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[www.w3.org];
<html xmlns="[www.w3.org];
<head>
	<title><?php echo $page_title; ?></title>	
	<link rel="stylesheet" type="text/css" href="includes/green-styles.css" media="screen" />
   	<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<!--<link rel="stylesheet" type="text/css" href="red-styles.css" media="screen" />-->
<!--<link rel="stylesheet" type="text/css" href="blue-styles.css" media="screen" />-->
</head>
<body>
<div id="container"> 
	<div id="header">
	  <div id="logo">
	    <h1><i>ABC</i></h1>
        <h2>Aaaaaaaa Bbbbbbbb Cccccccc</h2>
      </div>
	  <div id="headermenu">
        <?php // Create a login/logout link:
	        if (isset($_COOKIE['user_id'])) {
    	        echo "Logged in as {$_COOKIE['first_name']} | <a href='logout.php'>Logout</a>";
        	} else {
            	echo '<a href="login.php">Login</a>';
        	}
        ?>
      </div>
	</div>
	<div id="navlistcontainer">
				<ul id="navlist">
					<li>
                    	<?php // Create a login/logout link:
							if ( isset($_COOKIE['user_id']) ) {
								echo '<a href="index.php">Home</a>';
							} else {
								echo '<a href="login.php">Home</a>';
							}
                        ?>
                 	</li>
					<li><a href="weigh_in.php">Weigh In</a></li>
					<li><a href="stats.php">Stats</a></li>
				</ul>
	</div>
	<div id="secondpagecontents">
		<div id="leftcontainer">

And here's the style sheet I'm using.

/* Styles for the entire body */
body {
	background-color: #666;
}

#container {
  margin: 10px auto;
  width: 950px;
  padding: 10px;
  background-color: #fff;
}

/* Styles for the header including logo */
#header {
    height : 100px;
    width:100%;
    background-color: #5A7945;
}

#header h1 {
	font-size:150%;
	letter-spacing:-2px;
	padding:0px;
	margin-bottom:-20px;
}
#header h2 {
	font-size:75%;
	letter-spacing:-1px;
	padding:0px;
	margin-bottom:-20px;

}

#logo { 
	float:left;
	font-family: "Century Gothic", Arial, verdana, sans-serif;
	font-size: 152%;
	font-weight: bold;
	color: #fff;
	padding-left: 10px;
	height: 90px;
	width:50%; 
	background-color: inherit;
}

#headermenu { 
	float: right;
	text-align: right;
	font-family: Arial, verdana, sans-serif;
	font-size: 77%;
	color: #fff;
	width:37%; 
	padding: 10px 10px 0px 0px; 
	background-color: inherit;
}

#headermenu a {
	text-decoration: none;
	color: #FFFFFF;
	background-color: inherit;
}

#headermenu a:hover {
	text-decoration: underline;
}

/* Styles for the tabbed horizontal menu */
#navlistcontainer {
	clear: both;
	background-color: #5A7945;
	padding-top: 2px;
}

#navlist
{
	padding: 3px 10px;
	margin: 0px;
	border-bottom: 3px solid #FFF;
	font: bold 80% Verdana, sans-serif;
}

#navlist li
{
	list-style: none;
	margin: 0;
	display: inline;
}

#navlist li a
{
	padding: 3px 0.5em;
	margin-left: 3px;
	border: 2px solid #FFF;
	border-bottom: none;
	background: #D9E4D1;
	text-decoration: none;
}

#navlist li a:link { 
	color: #5A7945;
	background : #D9E4D1; 
	border-color: #FFF;

 }

#navlist li a:visited { 
	color: #5A7945;
	background : #D9E4D1; 
	border-color: #FFF;
 }

#navlist li a:hover
{
	color: #FFF;
	background : #5A7945; 
	border-color: #FFF;
}

#navlist li a#current
{
	color: #FFF;
	background : #5A7945; 
}

/* Styles for the infobox */
#infobox {
    border-top: 3px solid #5A7945;
    border-bottom: 3px solid #5A7945;
    clear: both;
    margin: 0px auto;
    height :170px;
    width:100%;
    background-color: #D9E4D1;
}

#nutshell { 
	float: left;;
	height :170px;
	width:49%; 
	border-right: 1px dotted #5A7945;
    	background-color: #D9E4D1;
}

#services { 
	float: right;
	height:170px;
	width:50%; 
	background-color: #D9E4D1;
}

#nutshell h2 { 
	margin: 0px;
	text-align: left;
	font-family: Arial, verdana, sans-serif;
	color: #5A7945;
	font-size: 100%;
	padding:5px 0px 0px 10px; 
	background-color: inherit;
}

#nutshell p { 
	text-align: left;
	padding:0px 10px 0px 10px; 
	font-family: Arial, verdana, sans-serif;
	font-size: 77%;
	font-weight: normal;
	color: #494949;
}

#services h2 { 
	margin: 0px;
	text-align: left;
	font-family: Arial, verdana, sans-serif;
	color: #5A7945;
	font-size: 100%;
	padding:5px 0px 0px 10px; 
	background-color: inherit;
}

#services p { 
	text-align: left;
	padding:0px 10px 0px 10px; 
	font-family: Arial, verdana, sans-serif;
	font-size: 77%;
	font-weight: normal;
	color: #494949;
}

#services ul { 
	margin-top: 5px;
	list-style-type: square;
	text-align: left;
}

#services ul li {
	font-family: Arial, verdana, sans-serif;
	color: #494949;
	font-size: 77%;
}

/* Styles for the main content */
#contents {
    clear: both;
    margin: 5px auto;
    width:100%;
    background-color: #FFF;
}

#secondpagecontents {
    clear: both;
    margin: 0px auto;
    width:100%;
    background-color: #FFF;
    border-top: 3px solid #5A7945;
    padding-top: 5px;
	padding-left: 20px;
}

#leftcontainer { 
	float: left;
	width:70%; 
}

#rightcontainer { 
	float: right;
	width:29%; 
}

.WrapText
{
	float:left;
	margin: 10px;
	padding: 5px;
	border:1px solid #5A7945;
	background:#D9E4D1;
}

/*Styles for the left columm. */
#leftcontainer  h2
{
	margin:0 auto;
	padding:5px 0 5px 10px;
	font-family: Arial, Helvetica, Tahoma, sans-serif;
	text-align: left;
	color:#494949;
	font-size: 100%;
}

#leftcontainer p
{
	margin: 5px;
	padding: 0 0 5px 5px;
	background-color:inherit;
	line-height: 1.5em;
	font-family: Arial, Verdana, Helvetica, Tahoma, sans-serif;
	text-align: justify;
	color: #494949;
	font-size: 77%;
}

#leftcontainer a
{
	background-color:inherit;
	text-decoration: none;
	color: #000066;
}

#leftcontainer a:hover
{
	background-color:inherit;
	text-decoration: underline;
	color: #000066;
}

/*Styles for the right columm. */
.rightcontents
{
	margin: 0px auto 10px auto;
	background-color:#FFF;
	border:1px solid #5A7945;
	line-height:1.1em;
	text-align: left;
}

.rightcontents h2
{
	margin:0 auto;
	padding:5px 0 5px 10px;
	background-color:#D9E4D1;
	font-family: Arial, Helvetica, Tahoma, sans-serif;
	text-align: left;
	color:#5A7945;
	font-size: 100%;
}

.rightcontents p
{
	padding:5px 10px 5px 10px;
	margin: 0 0 15px 0;
	font-family: Arial, Verdana, Helvetica, Tahoma, sans-serif;
	text-align: left;
	background-color:inherit;
	color: #494949;
	font-size: 77%;
}

.rightcontents p a
{
	background-color:inherit;
	text-decoration: none;
	color: #000066;
}

.rightcontents p a:hover
{
	background-color:inherit;
	text-decoration: underline;
	color: #000066;
}

/*Styles for Quick links. */
.rightcontents ul
{
	margin-top: 5px;
	margin-bottom: 5px;
}

.rightcontents ul li
{
	list-style-type: square;
	padding-bottom: 5px;
}

.rightcontents ul li a
{
	font-family: Arial, Verdana, Helvetica, Tahoma, sans-serif;
	text-align: left;
	font-size: 77%;
	background-color:inherit;
	text-decoration: underline;
	color: #000066;
}

.rightcontents ul li a:hover
{
	background-color:inherit;
	color: #5A7945;
}

/*Styles for the footer. */
#footer {
	clear: both;
	margin: 5px 0 0 0;
	width:100%;
}

#footer p {
	padding: 10px;
	background-color: #5A7945;
	font-family: Arial, verdana, sans-serif;
	font-size: 77%;
	color: #fff;
	margin: 0px;
}

#footer2 {
	 margin: 0px auto;
	 width: 950px;
	 background-color: #666;
}

#footer2 p {
	margin: 0px;
	padding: 0px;
	float: right;
	background-color: #666;
	font-family: Arial, verdana, sans-serif;
	font-size: 65%;
	color: #fff;
}

#footer2 p a {
	background-color: #666;
	font-family: Arial, verdana, sans-serif;
	font-size: 100%;
	color: #fff;
	text-decoration: underline;
}

As always thanks for any suggestions.

Adrian
Floydian
Re: IE and CSS problem
January 24, 2010 10:14AM
Do you have this web page online somewhere?

When it comes to CSS issues, being able to inspect the actual live document is invaluable.

Cheers
aedwards
Re: IE and CSS problem
January 24, 2010 06:02PM
it's at www.aedwards92.com/able/index.php

You'll see the top banner on the page is where I'm having the problem.

Thanks.

Adrian
Floydian
Re: IE and CSS problem
January 24, 2010 09:27PM
Hello,

removing margin-bottom:-20px; from the h2 element makes the text visible.

If you need to just target IE7 with a margin-bottom: 0; you can put in a rule like this:

*margin-bottom: 0;

That will target only IE7.

I would recommend getting rid of those negative margins though in all browsers. I can't imagine what it is about the layout of that site that requires css gymnastics such as using negative margins in the 20 pixel range.

Hope that helps.
aedwards
Re: IE and CSS problem
January 25, 2010 09:24AM
Thanks.
I actually got the style sheet off a free site. I know absolutely nothing about CSS. It's next on my list of things to go through.

Adrian.
Floydian
Re: IE and CSS problem
January 25, 2010 10:29PM
Ah alrighty, then I'll post a more thorough solution for ya, just in case.

Take this part of your css sheet and replace it with the css in the second code block.
#header h2 {
	font-size:75%;
	letter-spacing:-1px;
	padding:0px;
	margin-bottom:-20px;

}


#header h2 {
	font-size:75%;
	letter-spacing:-1px;
	padding:0px;
	margin-bottom:-20px;
	*margin-bottom: 0;

}

And with that code in place, IE7 should show that header for ya.

Cheers
Newer Topic Older Topic