CSS Code - Top of Footer Text Being Cut Off

justine1
justine1 used Ask the Experts™
on
Hi, I've noticed on certain browsers that the top of my footer text (on the top line) is cut off.

http://thegirlscene.stunnazine.com

While I've been looking through all my files, I can't seem to find where the problem lies. I am new at wordpress and I am switching my website http://stunnazine.com into wordpress by starting out building the new theme in a sub-domain. So I have no idea where the problem is occurring since everything is now in PHP format. I've played around with the footer.php, index.php, single.php, and page.php with no luck as of yet.

I'm not sure which code to even attach to this question since I dont know where the problem lies. If you have any suggestions please let me know!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
Which browsers specifically don't work? IE6 (and other versions) typically have pretty crappy CSS support for some things. It seems to show up OK for me in Safari and Firefox on a Mac though.

Author

Commented:
It's actually so far just IE6 and IE7, it was also IE8 but somehow that got fixed when I was testing things out.

Also, on Firefox on my Sony Vaio, the login/subscribe/register buttons don't show up as links, but they do on other browsers i've tried - but that's a whole other issue.

But that's good to know IE has crappy CSS support, maybe if I can't find a solution I'll just leave it at that - it's not a big deal or anything, I was just afraid on the majority of browsers it would show up cut-off

Commented:
Those buttons seem OK on Firefox on my Mac.. I'm on version 3.5.3... do you know if you have the latest?
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

David S.Consultant & Challenge Subduer
Top Expert 2009

Commented:
Give ".art-Footer-text" width:100% to make IE's handling of display:inline-block be the same as other browsers'.
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
Justine,

Is this the same problem you had a couple of days ago. The question was answered by telling you that it was down to a margin-top:-10px;

Within your <DIV id="footer">, you have a DIV with a class of footernavBlock. Within this DIV is another DIV which contains your footer links. This DIV has the following definition:

<div style="float: right; width: 65%; margin-top: -10px; text-align: center; line-height: 22px;" class="style5 style2">

The margin-top:-10px is what is cutting off your text. Also the width:65px; is forcing your line of links to break. Instead of getting 2 lines of text links, you are getting 4, which also pushes the text out the bottom of the footer.

I don't know enough about wordpress to tell you where to find these files, but you do need to edit whichever file (or files) are used to create the <DIV id="footer">


Consultant & Challenge Subduer
Top Expert 2009
Commented:
Oh. I checked it in IE7, but not in IE6.  Thanks, Chris.

Justine, giving "position:relative" to the element with the negative top margin will fix this IE6 issue.

Author

Commented:
Kravimir, you're a genius! Thanks a million, it worked!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial