Can you look at this theme and tell me what you see?

[sunfunbill]

I am having a very weird problem. I uploaded a nice new theme for Ashley's new lesbian blog. It's the same theme I see several others on here using on some blogs.

In my browser it looks fine. But in hers the top title font is different, and there is a faint yellow streak on the post background. I have FF3, she has FF2.

The top font should be white and in a cursive script style. The post background should be plain white.

Anyone have any idea why it's different in her browser? She tried IE and the font is cursive, but still sees a yellow streak!

It is:
femlesbiansex.com
Thanks much!

[Mel-AEBN]

I use IE -- And I see the same thing as she does

The yellow "streak" is actually pretty wide, personally I don't think it looks particularly bad. I would suggest making the script font size larger though -- Looks a bit scrunched.

And yes, "scrunched" is a technical term

[sunfunbill]

Thanks for taking a peek at it. Yes I intend to change the font, just wanted to get this figured out first. It's a popular theme so I don't understand why it's doing this. Must be one damn line or something not quite right.

[razor]

I also see the yellow Bill (FF2) - I actually think its part of the theme.

[Ronzo]

The noticeable difference in its rendering between FF3 and IE is the "scrunched" look to the blog's title in IE. The yellow band that's visible in both browsers does appear to be an intentional design element... the exact color of that yellow (#FFFFEA) isn't readily visible anywhere in your source code.

[odysseus]

I just checked it out in ff2 and ie6, and I don't see any yellow. What I do see is that the h1 tag "Fem Lesbian Sex" is positioned differently in each of the 2 browsers causing the background for that section to repeat a little bit. The reason for that is that each of the browsers has a different default for the margin or padding space around the element. Find the CSS selector for that element, and make sure it's very specific and you should get closer to some cross browser compatibility. Specifically, look for margin-top, margin-bottom, padding-top, and / padding-bottom, and play with those values. In IE, the default space around a h1 tag is greater, so that pushes the area around it down a bit, and causes just a small amount of that background image to repeat vertically.

I hope that made sense. If you have a hard time with it, let me know and I'll try to explain a little better.

[sunfunbill]

Thanks all. This is the code for that:


/******* Blogtitle *************/

#blogtitle
{
width: 980px;
height:100px;
display: block;
background: url(img/header.gif);
color: #066fb0;
text-align: center;
font-family: Corsiva, "Lucida Handwriting", script;
margin: 0 auto 10px auto;
padding: 5px 0 0 0;

}


h1.blogtitle
{
margin: 64px 26px 0 5px;
font-size: 38px;
}


#blogtitle a:link {
color: #ffffff;
text-decoration: none;
border: none;
}

#blogtitle a:visited {
color: #ffffff;
text-decoration: none;
border: none;
font-weight: bold;
padding: 2px 15px;
}

#blogtitle a:hover {
color: #ffffff;
text-decoration: none;
padding: 6px 15px;
margin-left: 0;
}

What gets me is that in her browser the font is some type of block like font, not what the font should be. I'm thinking of taking out the whole title thing, and just using paint shop to write it right on the header image.

[Mr. Lovepants]

No yellow on Mac FF2 or Safari.

My only gripe is with Fing telling me there are hot babes in Central when I know full well that surfers in Asia can't sign up for Fling. But that is another thread grrr

Otherwise it's looking good so far

[Mr. Lovepants]

Originally posted by sunfunbill
..... I'm thinking of taking out the whole title thing, and just using paint shop to write it right on the header image.

You mean deleting the h1 tag? I always believed that google was rather partial to that tag and the removing it was a bad idea.

[odysseus]

Originally posted by Mr. Lovepants
You mean deleting the h1 tag? I always believed that google was rather partial to that tag and the removing it was a bad idea.

Mr. Lovepants brings up a good point here. Sometimes what I do is to make the header graphic the way I want, but I'll still have a keyword rich tagline wrapped in h1 tags in that header area. Then I just position and style it with CSS. I'd leave some sort of h1 in the mix for the SEs.

[odysseus]

Bill, what OS is she using? It's possible that the font isn't installed on her computer. I worked on a website for someone who had a mac and used "Lucida Handwriting". I had to install it on my my PC to see what she was seeing, and ultimately I changed the font to a more common font.

[sunfunbill]

Hmmm, that's a good point, I should change the font style to simply a more common type. She uses windows, so it should be in there, but maybe not.

I'll change the font style and see what happens. It does not look good now anyway, too skinny. Thanks much again!

[odysseus]

Originally posted by sunfunbill
Hmmm, that's a good point, I should change the font style to simply a more common type. She uses windows, so it should be in there, but maybe not.

I'll change the font style and see what happens. It does not look good now anyway, too skinny. Thanks much again!

I'm pretty sure I had to install Lucida Handwriting on my PC. Like I said about the aforementined website that I revised, they had already used Lucida Handwriting, and once I installed it I could see what they were trying to do. But, I could be wrong. I've installed so many fonts that it's tough to keep track.

[Hammer]

I wouldn't worry about giving the title of the blog an H1 attribute. The important thing is that the permalink headers on the individual post pages are H1s.

[Chang]

In IE7 I see small cursive writing. In FF2 I see Large Roman (or similar). In both I see a large yellow band in the middle of the post background (kind of hard on the eyes, at least on my monitor).

Expanding on what odysseus said...

Corsiva and Lucida are not "native" fonts on Windows. You should always avoid using fonts that have to be installed, or at the very least, back them up with something more common like this...

font-family: Corsiva, "Lucida Handwriting", script, Arial, 'Sans-Serif';

Then the browser will try them in the order listed until it finds one installed. Otherwise it will just insert Times New Roman.

Still, this will cause you display problems/differences so as stated, just try to avoid the fancy fonts.

[sunfunbill]

Well I changed it to a more standard font for now. I hope that makes the yellow go away, but I don't see how it would. I don't get that yellow background on mine, just on hers.

[KatieAnn]

I see the yellow in IE7, FF2, and FF3 in both WinXP and Vista. Definitely looks like it's coded in there somewhere, sorry I can't be of any more help though!