Jump to content
Sign in to follow this  
dwinter

feature box text area font problem

Recommended Posts

dwinter

this will probably be easy for everyone but so far i haven't found a solution. the text box areas of the features at http://2491.ati-1.com/ all look fine in mozilla firefox 4 beta 9-11, internet explorer 9 beta, chrome, chromium and safari. the text areas all look horrible in internet explorer 7-8 and opera. i haven't tested other browsers but i'm sure there will be issues with some of them. if (while in a working browser, above) you click the page, south, mexico, canada buttons - this is exactly how i want it to appear. to accomplish this i used this for the title: <h3 class="fsub">ATI</h3><h1 class="ftitle">South</h1> then the address and other information was in the body. when managing the site it looks horrible, like when i'm trying to reorder the features and even when i'm looking at my list of features --- but i don't care because the most important part is how it looks for everyone else. currently the "pacific" button is set to no title at all, and i have this on the first line inside the body: <h3 class="fsub">ATI</h3><h1 class="ftitle">Headquarters</h1> while it is the same size as the font on the other pages, for some reason it is bumped down the page slightly. another oddity is that it appears to be the correct font size in all of the browsers i've tested. so my dilema is that to get the font to be a consistent size i can't use any text tags in the "title" but if i avoid using anything for the title it is harder to figure out what each feature is in the list and additionally it bumps all of the remaining text down and the "more" button begins to go off the page. is there a simple workaround for other browsers? i'm just afraid that 90% of the people out there will be hitting this with ie. thanks!!!

Share this post


Link to post
Share on other sites
cmunns

I'm checking it out in Opera and I don't see the difference. Can you post screenshots of what it looks like in IE for a quick reference...also did you do a validation of the code for that page?

Share this post


Link to post
Share on other sites
dwinter

this screenshot is from mozilla firefox 4 beta 11 and similar to what was seen in previous betas, ie9 beta, chrome, chromium and safari: http://ati-1.com/files/x1.png this screenshot is from opera 11.01 build 1190 (final) and is also similar to what is seen in ie7 and ie8: http://ati-1.com/files/x2.png i should also mention that only the text in the area mentioned (inside the feature "text" area) is affected. the rest of the site is 100% normal fonts... so it's not a situation where someone might have zoomed in. even the text from the body of the message displays 100% correct on some of the pages where the subject isn't so big that it blocks everything else out. it's just the title that is affected. i checked the site with w3c css validator, just now, it shows 28 errors and 1251 warnings, i don't have much of a clue as to what it's showing me though: http://bit.ly/h8qY56

Share this post


Link to post
Share on other sites
bryan-hadaway

Hi Darren, I think what you'll need to do is change it to fixed pixels: `.fsub{font-size:30px}` Thanks, Bryan

Share this post


Link to post
Share on other sites
dwinter

i tried adding that to style.css but i'm not really seeing a change. is that where it's supposed to go? also, i tried .ftitle{font-size:40px} and didn't see a change either.

Share this post


Link to post
Share on other sites
bryan-hadaway

Try adding this to the Custom Code > Custom CSS area: `body .fsub{font-size:30px}` Thanks, Bryan

Share this post


Link to post
Share on other sites
dwinter

i tried adding body .fsub{font-size:30px} to the custom css area, saved it, didn't see a change, then i moved it from there to the bottom of style.css and saved it, still no change. nothing is really helping. the "pacific" button is the only feature text section without a title, but the text starts too low. all of the other feature pages look flawless in firefox and the other cooperating browsers.

Share this post


Link to post
Share on other sites
dwinter

thanks, that helps a little. so basically what i need to do is find a way to allow me to type in a title (for my own reference only while managing the site) but to completely hide it because the text area is still allowing a "space" at the top where the title would normally be seen. examples: http://ati-1.com/files/z1.png - title is set to: <h3 class="fsub">ATI</h3><h1 class="ftitle">Headquarters</h1> which causes validation to fail. http://ati-1.com/files/z2.png - title is set to nothing (blank) and <h3 class="fsub">ATI</h3><h1 class="ftitle">Headquarters</h1> is moved to the top of the body. validation passes, but all text is bumped down to leave room for the title, which also causes the "more" button to vanish off screen. we want a space under the large heading before the address. if you look at the other locations the space is missing, but we don't want that look really. optionally, i could have changed the features space taller, but i didn't see that setting until after we had generated all of the images. we like the height the way it is currently. any clues on hiding the title area and regaining the missing space? thanks again, i appreciate all of the help!

Share this post


Link to post
Share on other sites
bryan-hadaway

`.fcontent .fheading{display:none}` Add to Custom Code > Custom CSS. Thanks, Bryan

Share this post


Link to post
Share on other sites
dwinter

ok, final question: is there a way to give both of you karna? that worked!!! i have to open a new thread for (hopefully) my final issue.

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×