Blog Title is cropped on IE6 and IE7

[renet]

Hi. Hopefully this is a simple fix.

I have tried several things already to no avail.

On IE6 and IE7 the blog title is cropped slightly at the top and bottom of the fonts. When I refer to blog title that is the text which appears in the "header".

So, I will offer the code below:

CSS:

body { margin:1px; font-size:1.0em; line-height:20px; background-color:#000000; font-family: "Trebuchet MS", "Myriad Pro", Arial;}
a { color:#ffffff;}
a:hover { text-decoration:none;}
#container {}
#header { background: url(images/header.jpg) #000000;background-repeat:no-repeat;
margin: 20px 0 0 0;}

#logo { padding:20px 50px 45px 1px; text-align:left; }
#logo a{ color:#FFFFFF; text-decoration:none; font-weight:bold; height:45px; font-size:30px; text-transform:uppercase;float:right; outline-style:none;}
#logo a:hover { }

HEADER CODE:

<!-- header -->

<div id="header">
<div id="logo"><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></div>

<center><div id="menu">
<ul>
<li><a href="example.net/">Welcome</a>
<li><a href="example.net/about-us/">About Us</a>

</ul>
</div></center>
</div>
<!--end header -->

HTML Source Code

<div id="header">

<div id="logo"><a href="example.net/">TEXT</a></div>

<center><div id="menu">
<ul>

[netdude78]

just a suggestion, but have you tried

#logo a{ color:#FFFFFF; text-decoration:none; font-weight:bold; height:60px; font-size:30px; text-transform:uppercase;float:right; outline-style:none;}

to increase the height of the text area

or

#logo { padding:10px 50px 35px 1px; text-align:left; }

to remove some of the top and bottom padding?

[alt131]

Hi. Hopefully this is a simple fix.On IE6 and IE7 the blog title is cropped slightly at the top and bottom of the fonts.

renet, this looks like the same issue and code again :(
If so, then are you still wanting the "logo" text to be right aligned, with some "spacing" around it? If so, the fix remains basically the same.

I can't see the cropping you report, but guessing, the line-height inherited by #logo is smaller than the font-size on a#logo, so unless #logo gets a "height" of some sort, the contents of a#logo will be cropped.

There are several fixes, but this remains a simple one:

a, a:hover { text-decoration:none; outline-style: none;
} /* removes for all a */

#logo {
/* padding: 20px 50px 45px 1px; */
line-height:65px; /* easier than height and padding */
font-size: 30px; /*moved from logo a */
text-align:right; /* rather than left, then float on logo a*/
}

#logo a {
color: #FFFFFF;
text-transform: uppercase;
font-weight: bold;
outline-style: none;
margin-right:50px;
/*text-decoration: none; moved to generic a */
/*height: 45px; move to line-height on logo*/
/*font-size: 30px; moved to logo*/
/*float: right; moved to text-align on #logo*/
}

However, if text-align:left on div#logo, and the float:right on a#logo is to accomodate the image in div#header you've mentioned before, then post code that includes the image (and dimensions for the image) so the solution can be adjusted to accomodate it.