...

View Full Version : Header imagage working in Firefox but shrinks in Internet explorer.



Earz
05-24-2007, 07:40 PM
Good day, to one and all, pardon me if this question was asked 100 times before. But, I am doing a website, for a non-profit organization in my country.I am fairly new to CSS, and HTML (not the basics but the more advanced aspects of it) The site turned out better than I expected. I was testing it all along in Firefox,then,this morning I tested it in IE then I realized that the header image (png file) shrunk. A picture will better explain this.

http://img204.imageshack.us/img204/3431/firefoxbordqe4.th.png (http://img204.imageshack.us/my.php?image=firefoxbordqe4.png)

THIS IS HOW IT DISPLAYS IN FIREFOX.

http://img142.imageshack.us/img142/1483/iebanneruz3.th.png (http://img142.imageshack.us/my.php?image=iebanneruz3.png)

THIS IS HOW IT LOOKS IN IE

Here is the CSS stylesheet.

/***** Golden Hour - $Id: style.css,v 1.11.2.1.2.1 2007/04/10 01:50:16 jwolf Exp $ ******/
*
{
margin:0;
padding:0;
}

body
{
background:#fbfbfb;
font-size:small;
padding:2em 0;
}

h1,h2
{
font-weight:normal;
}

a
{
color:#2763A5;
font-weight:normal;
text-decoration:none;
}

a:hover
{
color:#308CF1;
font-weight:normal;
text-decoration:underline;
}

#wrapper
{
background-color:#fff;
border:solid 6px #fff;
margin:0 auto;
position:relative;
width:73.078em;
}

/*----------header----------*/
#header
{
background:#FFFFFF url(img/header.png) width 10em no-repeat;
clear:both;
height:10em;
padding-top:0.5em;
width:100%;
}

#header h1
{
color:#fff;
font-family:Helvetica, Arial, sans-serif;
font-size:420%;
margin:0.15em 0 0 0.55em;
}

#header h2
{
color:#f3f3f3;
font-family:Helvetica, Arial, sans-serif;
font-size:200%;
font-weight:normal;
margin:0.3em 0 0 1.2em;
}

#header a
{
color:#fff;
font-weight:normal;
}

#header a:hover
{
color:#fff;
text-decoration:none;
}

#logo
{
border:0;
vertical-align:middle;
}

#logo img
{
border:0;
float:left;
margin:0.4em 1.5em 0 1em;
}

/*----------menu bar - primary links----------*/
#menu
{
background:#438f52;
border-top:solid 2px #fff;
float:left;
font-family:Helvetica, Arial, sans-serif;
font-size:120%;
line-height:normal;
padding-bottom:0.05em;
width:100%;
}

#menu ul
{
list-style:none;
margin:0;
padding:0;
}

#menu li
{
display:inline;
margin:0;
padding:0;
}

#menu a
{
background-color:#438f52;
border-left:6px solid #438f52;
color:#fff;
float:left;
height:1.25em;
margin:0;
padding:0.4em 1em 0.3em 0.3em;
text-decoration:none;
}

#menu a:hover
{
background:#6ac381;
border-left:6px solid #ccc;
color:#fff;
}

/*----------content----------*/
#content
{
background-color:#fff;
color:#666;
float:right;
font-family:Verdana, Helvetica, sans-serif;
font-size:100%;
line-height:1.6em;
margin:1em 0;
overflow:hidden;
padding:0 1.5em;
width:72%;
}

#content a:hover
{
color:#308CF1;
font-weight:normal;
text-decoration:none;
}

#content p
{
padding-bottom:0.8em;
}

/*----------sidebar----------*/
#sidebar
{
float:left;
font-family:Verdana, Helvetica, sans-serif;
margin:1em 0;
padding:0.6em;
width:21%;
}

#sidebar p
{
padding-bottom:10px;
}

#sidebar h2
{
border-bottom:1px solid #ddd;
color:#003167;
font-family:Verdana, Helvetica, sans-serif;
font-size:130%;
font-weight:normal;

margin-bottom:0.3em;
}

----------node styles----------*/
.node
{
margin:0;
padding:0;
}

.nodeTitle
{
background-image:url('img/sun2.gif');
background-position:left center;
background-repeat:no-repeat;
border-bottom:solid 1px #ccc;
font-size:150%;
line-height:1.25em;
margin:0;
padding:0 0 0.1em 1.8em;
}

.nodeTitle a
{
color:#003167;
}

.nodeLinks
{
padding-bottom:1.5em;
}

.submitted
{
color:#787878;
float:left;
font-size:80%;
margin:0;
padding:0;
}

.taxonomy
{
background:url('icons/tag_red.png') no-repeat 0 7px;
color:#787878;
float:right;
font-size:80%;
margin:0;
padding:0 0 1em 1.4em;
}

.block
{

margin:0 0 1.5em;
}

----------page styles----------*/
.page
{
margin:0;
padding:0;
}

.pageTitle
{
font-size:200%;
font-weight:normal;
line-height:1.25em;
margin:0 0 0.16em;
}



.nodeContent,.commentContent
{
clear:both;
margin:0;
padding:0.5em 0 0;
}

.mission
{
background-color:#f7f7f7;
border:1px solid #ccc;
margin:0 0 2em 0;
padding:10px;
}

.breadcrumb
{
margin:0 0 1em 0;
padding:0;
}

.comment
{
background-color:#FBFBFB;
border:1px solid #ccc;
margin:1em 0 0;
padding:0.5em;
}

.commentTitle
{
font-size:120%;
}

.messages
{
color:#CB0F0F;
margin:0 0 1em;
}

.help
{
color:#0F0F0F;
font-size:1em;
}

.title
{
font-weight:normal;
}

.search-results .title
{
font-size:120%;
margin:20px 0 0;
}

dt
{
font-size:120%;
margin:1em 0 0;
}

.container-inline
{
margin:0;
padding:0 0 1.4em 0;
}

/*----------TinyMCE editor----------*/
body.mceContentBody
{
background:#fff;
color:#000;
font-size:12px;
}

body.mceContentBody a:link
{
color:red;
}

/*----------image styles----------*/
img
{
padding:3px;
}

.frame
{
border:1px solid #999;
padding:2px;
}

/*----------icons for links----------*/
.comment_comments a
{
background:url('icons/comment.png') no-repeat 0 2px;
padding-left:20px;
}

.node_read_more a
{
background:url('icons/page_white_go.png') no-repeat;
padding-left:20px;
}

.comment_delete a
{
background:url('icons/comment_delete.png') no-repeat;
padding-left:20px;
}

.comment_edit a
{
background:url('icons/comment_edit.png') no-repeat;
padding-left:20px;
}

.comment_add a,.comment_reply a
{
background:url('icons/comment_add.png') no-repeat;
padding-left:20px;
}
/*----------footer---------*/
#footer
{
background:#FFFF;
clear:both;
font-size:90%;
height:3em;
width:100%;
}

#footer p
{
color:#000000;
padding:0.85em;
text-align:center;
}

/*----------table styles----------*/
table
{
margin:1em 0;
width:100%;
}

thead th
{
border-bottom:2px solid #AAA;
color:#494949;
font-weight:bold;
}

td,th
{
padding:0.3em 0 0.5em;
}

tr.even,tr.odd,tbody th
{
border:solid #D5D6D7;
border-width:1px 0;
}

tr.even
{
background-color:#fff;
}

td.region,td.module,td.container
{
background-color:#D5D6D7;
border-bottom:1px solid #AAA;
border-top:1.5em solid #fff;
color:#455067;
font-weight:bold;
}

tr:first-child td.region,tr:first-child td.module,tr:first-child td.container
{
border-top-width:0;
}

td.menu-disabled,td.menu-disabled a
{
background-color:#D5C2C2;
color:#000;
}

.thumbnail,.preview
{
border:1px solid #ccc;
}


I am sorry if it's too long,if it is, tell me and I will edit this post.

Also, the resolution of the header is 951 x 137. I have tried everything, and looked on the net for hours, but I turned up with nothing. As a side note, I am using this style sheet as part of drupal (a CMS) hence, it also came with a php file:


<!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" lang="<?php print $language ?>" xml:lang="<?php print $language ?>">

<head>
<title><?php print $head_title ?></title>
<?php print $head ?>
<?php print $styles ?>
<?php print $scripts ?>
</head>

<body>

<!--Wrapper-->
<div id="wrapper">

<!-- Header -->
<div id="header">

<?php if ($logo) : ?>
<div id="logo">
<a href="<?php print $base_path ?>" title="<?php print t('Home') ?>">
<img src="<?php print $logo ?>" alt="<?php print t('Home') ?>" /></a>
</div>
<?php endif ?>

<?php if ($site_name): ?>
<h1>
<a href="<?php print $base_path ?>" title="<?php print t('Home') ?>">
<?php print $site_name ?>
</a>
</h1>
<?php endif; ?>

<?php if ($site_slogan): ?>
<h2>
<?php print $site_slogan ?>
</h2>
<?php endif; ?>

</div><!--End of Header -->

<!--Menu -->
<div id="menu">
<?php print theme('menu_links', $primary_links) ?>
</div><!-- End of Menu -->

<!--Content-->
<div id="content" style="width: <?php print golden_hour_get_primaryContent_width($sidebar_left) ?>%;">

<?php if ($mission) : ?><div class="mission"><?php print $mission ?></div><?php endif ?>
<?php if ($breadcrumb) : ?><div class="breadcrumb"><?php print $breadcrumb ?></div><?php endif ?>
<?php if ($title != "") : ?><h2 class="pageTitle"><?php print $title ?></h2><?php endif ?>
<?php if ($tabs) : ?><div class="tabs"><?php print $tabs ?></div><?php endif ?>
<?php if ($help) : ?><div class="help"><?php print $help ?></div><?php endif ?>
<?php if ($messages) : ?><div class="messages"><?php print $messages ?></div><?php endif ?>
<?php print $content_top; ?>
<?php print $content; ?>
<?php print $content_bottom; ?>
<?php print $feed_icons; ?>

</div><!-- End of Content -->

<!-- Sidebar -->
<?php if ($sidebar_left) : ?>
<div id="sidebar">
<?php if ($search_box) : ?>
<?php print $search_box ?>
<?php endif; ?>
<?php print $sidebar_left ?>
</div><!-- End of Sidebar -->
<?php endif ?>

<!-- Footer -->
<div id="footer">
<p><?php print $footer_message; ?></p>
</div><!-- End of footer -->

<?php print $closure; ?>

</div><!-- End of wrapper -->

</body>
</html>

Sorry for the scrappy post. I am stuck, if anyone can help me it will be GREATLY appreciated.THanks...

_Aerospace_Eng_
05-24-2007, 09:28 PM
Just post a link to your site please. The stylesheet is useless with all of that php in the code. I mean its not like we know what its in your php files. Also please use code tags, its the little # looking icon.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum