Menu Bar spacing won't change. Help!

  • I’m working hard at integrating a wordpress blog into a custom website, which means including a sidebar using images for the rollovers (I know, I know, but I’m committed to using a specific font). After tons of trial and error, I have finally gotten the sidebar to appear, but it has spacing I don’t want (and doesn’t exist on any other pages), and no changes I make to the css stylesheet seem to make any difference.

    Help! Please!

    Here is the blog page as it looks now…

    https://janelear.com/wordpress

    I need it to look like it does on the other pages (https://janelear.com/about.php).

    Thank you, thank you, thank you in advance.

Viewing 5 replies - 1 through 5 (of 5 total)

  • I found the source of your problem. On your blog page the top-banner.jpg image is wrapped in a <p> tag, which, as you may know, introduces what visually looks like a double space break (actually, not the image itself, but the entire <a…> tag).

    I got rid of it using FireBug to see what it would look like in the browser, and the problem was solved

    That being said, if you’re going for a uniform look, you might want to address another issue you may have missed. Apparently, unlike the other pages on your site (which have 8px margin all around the body), your blog page has 1 px padding.

    That visibly pushes your content from the top (by 7 pixels less on your blog than anywhere else on your site)

    What theme are you using?

    Thread Starter kebre

    (@kebre)

    Thanks so much for your reply!

    I’m using wooden mannequin as my theme.

    I changed the blog page to 1 px padding because that seems to fix the menu spacing in Safari, but not FF. But I would definitely prefer it to match the rest of the site. The trouble I’m having is changing that padding on the page is also changing the padding on the menu bar, which I uploaded as a nested template. And I feel like I’m banging my head against the wall. I don’t know how to preclude it from the 8 px padding in the body?

    And about the <p>. I’m not seeing it in Firebug. And I’m unsure how a paragraph tag around the header effect my spacing on the right menu?

    Thanks again!

    OK, here is the scoop in a more visual fashion. You’re having multiple problems, and they should be addressed in the following order.

    I’m placing a link to an image to show you what I’m talking about (click with a scroll wheel to open in a separate tab).

    I took several screen captures with a firebug highlighting the offending areas. On the left you can see that the banner has 8px of padding applied to its parent <td> tag, and on the right there is only 1px applied to its parent <p> tag (purple stuff)

    First order of business would be to place the banner inside the same container across the entire site. There is no reason why you should have the banner sitting inside <td> on one page, and floating freely on the other (probably the reason for the <p> tag in a first place)

    This will either get rid of the extra space (yellow stuff) that is inherent to the <p> tag, or get rid of the extra padding that seems to be applied to <td> (depending on whether you decide to nest the banner inside the table cell or not)

    All of your padding and margins are applied through CSS. So if you’re having different results on different pages, it because elements aren’t sitting in common wrapping tags

    Now, the orange thing at the top is the other thing that is of concern. On the left, you’re seeing a margin of 8px applied to the <body> tag, but on the right it seems that the padding of 1px is applied to the entire <html> tag. I never formatted html tag with css, but I see no reason why it wouldn’t work, so I guess it’s possible that’s what’s going on. You’ll be able to see what’s going on once you take a look at your css.

    One thing I can tell is that if you’re indeed having the entire <html> tag formatted with css, it looks like you have separate stylesheets for blog and for the rest of the site (or else you’d see the same thing across the entire site)

    Not sure how much work you put into getting this look set up, but if it’s not too late, I’d say check out the Atahualpa theme. It’s a free theme with customization capabilities you won’t find even in most premium themes, and the guys that made it even have a very active forum built around this theme (it’s the only theme I use).

    That theme will solve all of the problems as far as the formatting goes across multiple pages

    The only thing is that you’ll have a bit of learning curve to go through as this theme easily have 200+ options. But on the upside, I haven’t found a look that couldn’t be created with it

    If not, you’ll just have to find a manual way to fix the issues above.

    At least now you know where to look

    Oh, and one more thing. It looks like that the theme appended a ../ set of symbols to the source URLs every time you did an edit, which resulted in ../../../../index.html string.

    That may not cause problems to your readers, but it’s not a clean code, and you might want to fix that while you’re at it

    Hope this was at least of some help

    Thread Starter kebre

    (@kebre)

    Thank you so much for your help! I see what you’re saying, but my issue was with the right menu bar. And if I change the padding to 8 px for the whole table, it is also effecting the padding on the menu bar.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Menu Bar spacing won't change. Help!’ is closed to new replies.