MikeFloutier Posted November 10, 2006 Share Posted November 10, 2006 Hi,I'm finding that if the browser doesn't have the preferred font for my banner's title text then the background image's height tends to vary according to which font IS selected as an alternate.In this case I want it to use "comic sams MS" but if that's not available then "verdana" is next on the list and this, being shorter in height (presumably), leaves a gap between the bottom of the background image and the banner's border.My present method of making the background image fill the gap (top & bottom) between the text and the banner's borders is to use padding.THis is the CSS: #main-title {margin-left: 250px;margin-right: 250px;padding-left: 11px;padding-right: 10px;font-weight: 300;font-size: 4.0em;text-align: center;font-family: "comic sans MS", verdana, arial, helvetica, sans-serif;background-image: url(Images/centre-image.jpg);border-left: 1px #b90970 solid;border-right: 1px #b90970 solid;padding-top: 10px;padding-bottom: 10px;} And this is a link:http://www.exhortations.co.uk/I could just drop the "comic sans MS" but I much prefer it so I dont want to.I could also convert the banner to an image but I dont think that would work with it's width re-sizing capabilities.Any ideas as to how I can get a fixed height on the background image so any text can go on top without mucking things up would be much appreciated.ThanksMike Link to comment Share on other sites More sharing options...
BiteMe Posted November 10, 2006 Share Posted November 10, 2006 BWHAHAHAHAHAHAHComic Sans. Dont use comic sans if you want to be taken seriously. Simply.As.That.Comic sans Link to comment Share on other sites More sharing options...
MikeFloutier Posted November 11, 2006 Author Share Posted November 11, 2006 BWHAHAHAHAHAHAHComic Sans. Dont use comic sans if you want to be taken seriously. Simply.As.That.Comic sans Hahaha!Thanks BiteMeOk, you can see what a newbie I am; I had no idea what I was doing. I just liked the font.So,1. Any suggestions for a similar font, and2. Any ideas about my original questionThanksMike Link to comment Share on other sites More sharing options...
jlhaslip Posted November 11, 2006 Share Posted November 11, 2006 #main-title {margin: 0 auto;text-align:center;font-weight: 300;font-size: 4.0em; ==> set to a specific px height ???text-align: center;font-family:"comic sans MS", verdana, arial, helvetica, sans-serif;background-image: url(Images/centre-image.jpg);border-left: 1px #b90970 solid;border-right: 1px #b90970 solid;padding: 10px;} I might suggest trying to set a specific height for the text. I understand the reasons for the usage of em's but if the substitute font is smaller, this may solve the problem. Also, have you played with the margins and padding to see if these are affecting the results? Link to comment Share on other sites More sharing options...
MikeFloutier Posted November 11, 2006 Author Share Posted November 11, 2006 Thanks,I really thought you had it there with the px instead of em thing; "surely that will control the height of the font" I thought.For some reason comis sans MS seems to add some of it's own padding around the font (at least that's how it seems to me). Also I've tried messing with margin and padding but they either introduce a new problem or exaggerate the existing one.I think I'll have to bite the bullet (haha BiteMe) and ditch the offending font.Mike Link to comment Share on other sites More sharing options...
jlhaslip Posted November 11, 2006 Share Posted November 11, 2006 Perhaps that is why BiteMe doesn't like it? Glad to have had the opportunity to attempt to help. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now