WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Firefox Sliced off my header! Help! (19 posts)

  1. oseary
    Member
    Posted 8 years ago #

    I recently added a cool (in my opinion) looking theme to my site: http://www.pesosforpenguins.com, the DFire theme.

    Now, I uploaded it and activated it, and all that goodness... but when I look at it, at 1024x768 res, or any res for that matter--whilst in Firefox--it slices my header, and blanks out my Blog title.

    It doesn't happen in IE.

    Can someone please help? I am a coding n00b, and just need to know how to fix this... Thanks!!

    EDIT: The theme can be downloaded from HERE:

    http://themes.wordpress.net/download.php?theme=511

    to view the files used. I have not modified anything, except for the footer--and that was after seeing the sliced header.

  2. yosemite
    Member
    Posted 8 years ago #

    Not absolute positioning so I don't think you'll get zorder to work, but you could try moving your title/btitle div's to after the menu/tree ones?

    And get rid of one of these background:(s):
    #menu ul li a:hover {
    background: #000;
    -moz-opacity: 0.7;
    color: #FFF;
    border-bottom: #99280A 5px solid;
    text-decoration: none;
    background:
    }

  3. clevohost
    Member
    Posted 8 years ago #

    I would really like to make a post but dont see anywhere on this site to create a new thread, please help.

  4. oseary
    Member
    Posted 8 years ago #

    "I would really like to make a post but dont see anywhere on this site to create a new thread, please help."

    You have to be a registered user to post... You can leave a comment on anything you'd like though, just click on any post that says, "no comments."

  5. oseary
    Member
    Posted 8 years ago #

    "Not absolute positioning so I don't think you'll get zorder to work, but you could try moving your title/btitle div's to after the menu/tree ones?

    And get rid of one of these background:(s):
    #menu ul li a:hover {
    background: #000;
    -moz-opacity: 0.7;
    color: #FFF;
    border-bottom: #99280A 5px solid;
    text-decoration: none;
    background:
    } "

    I understand the second part (removal of the bg's) but not the first. I am a coding n00b :-( I appreciate all your help (ahead of time thanks)!

  6. oseary
    Member
    Posted 8 years ago #

    Removal of this:

    "#menu ul li a:hover {
    background: #000;
    -moz-opacity: 0.7;
    color: #FFF;
    border-bottom: #99280A 5px solid;
    text-decoration: none;
    background:
    }
    "

    Did not work.

    I love this theme, and don't want to ditch it b/c it doesn't work in FF!

  7. oseary
    Member
    Posted 8 years ago #

    Moving of the titles didn't work either.

    EEk!

  8. yosemite
    Member
    Posted 8 years ago #

    In header.php your theme does this (default, after <head></head> stuff):
    <div id="title">
    <div class="btitle"><a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a></div>
    <div class="stitle"><?php bloginfo('description'); ?></div>
    </div>
    <div id="menu">
    <ul>
    <li><a href="<?php echo get_settings('home'); ?>">Home</a></li>
    <?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
    </ul>
    </div>
    <div id="tree"></div>
    <div id="content">

    Note the order these are placed/defined on the page. You can try changing the order, but this may play havoc with positioning (which would then have to be corrected by making adjustments to your style.css).

    The other issue did not require removing the whole menu ul li a:hover, just the last, undefined background: .

  9. oseary
    Member
    Posted 8 years ago #

    Yosemite, thank you for your help... I have yet to get it taken care of, but I will try what you just suggested. What it seems like, is that the image is loading or is "formatted" to be placed in front of my text.

    You can still see the text in the background behind the picture. So, I will try & move a few things around.

    Is that what it looks like to you?

    On a lighter note, my fiance & I were at Yosemite just two weeks ago. :-)

  10. yosemite
    Member
    Posted 8 years ago #

    Yes, that's what is happening...

    On a lighter note, my fiance & I were at Yosemite just two weeks ago. :-)

    Arrrr! Lucky I didn't see you! I woulda held ya up fer all yewr lewt!

  11. clevohost
    Member
    Posted 8 years ago #

    I am registered and a member.

    How can I kill the upgrade of wp on my site? I cant stand it and it is also killing the memory of my server!

  12. yosemite
    Member
    Posted 8 years ago #

    clevohost, to start a new thread, go to main page, pick a topic/forum at the bottom, then enter new post at bottom.

    Guide here: Guide to using the WordPress Support Forums

  13. oseary
    Member
    Posted 8 years ago #

    I was able to "remove" the "tree.jpg" line from "loading" in the CSS--like mentioned above with it "floating" above the words. Once I removed that line, the words appeared as normal, but there was no tree. So, the tree is floating above the text, along with the menu.jpg.

    Now here's the hitch. When I "remove" menu.jpg it causes some (most) of my text to go "blue" like the font size & color has changed.

    Arggh!

  14. oseary
    Member
    Posted 8 years ago #

    I found out what it was!!!

    My TITLE: Gardner Cole's Slapdash Jottings of a Virtuoso...

    was too long for the header to support... OR since the text is aligned right, it was causing the image to "collide" or whatever with the text.

    I shortened my title down to "Slapdash Jottings..." and it fixed it. I found another site on the net (in FF) using my same theme, and he didn't have my issue... but he had a very short title.

    NOW, how do I get my text to align left, so I can have a longer title? lol.

  15. oseary
    Member
    Posted 8 years ago #

    OKAY;

    I have narrowed down exactly what is causing it. It's within the "title" section of the css, related to the height and width of the background image.

    I guess it doesn't allow the text to just show on top of it, I guess it's aligned WITH the text or something.

    I don't know, but I narrowed it to that.

    If anyone can tell me how to fix it, i'd be much obliged, but for now I changed the title of my blog to something to allow it to fit in the restricted area.

    Help?

  16. yosemite
    Member
    Posted 8 years ago #

    What about changing the #title width:?

  17. oseary
    Member
    Posted 8 years ago #

    It "slices" off the top half of the "tree." I upped it from 426 to 600, just to test, and the tree moves from inline right (with the bottom of the tree) to a little over to the left.

  18. oseary
    Member
    Posted 8 years ago #

    What it "really" needs to be I guess, is just one big header graphic, and not three different graphics with pixel limitations. Because that is what is going on. And when upped in pixel allotment, it will leave a "blank" area, but when told in the css to "repeat," it looks crappy.

    I don't think there is really any way "around" it...?

  19. yosemite
    Member
    Posted 8 years ago #

    There is, but requires re-design... The original author had no intention/expectation a long title would be used? So it would have to be approached differently (which you're doing now ;').

Topic Closed

This topic has been closed to new replies.

About this Topic