I'm new to word press. When I upload the logo that sits at the top of each page (under theme options-general tab), the height of whatever logo I put in seems to either push the navigation bar down to far or lifts it up higher than I would like it. (And the navigation bar isn't even at the same height in different browsers: firefox and safari). I'm guessing this has something to do with the top and bottom margins for this image. Is there a way to make the margins zero for this top logo?
The header already has zero margin (Firefox 23). In order to change it, go to Theme Editor > style.css > #logo (you can use negative margin as well).
use google chrome inspect element to find out the css class your logo is using. and then add required css property in style.css
Okay, so I played around with this for awhile to try and figure it out. There may not be a margin to the header, but it appears that there was a margin for that top image. So I changed this: #logo { float: left; margin: 0 30px 20px; } to this (so it would only have a margin left, but none on top or bottom): #logo { float: left; margin: 0px 0px 0px 30px; } Even after making this change, if you go to the site now, it still looks like it is giving it a margin on top (don't know why), but I dealt with that by making a smaller image in order to bring the navigation bar up higher to where I wanted it to be. The one thing I still couldn't figure out is why it's different in different browsers. Right now, if you go to the site, firefox and chrome both have the navigation bar at the same height, but safari looks different, like the navigation bar is pushed down more. After taking a closer look, I realized that safari actually does have the nav bar at the same height. The difference is that safari is for some reason showing shorter blue rectangular areas (at the top left and top right of the page), which makes it appear like the nav bar is lower. I haven't checked IE yet, but why are those blue shaded areas at the top left and top right a different height in safari?
Safari is based on a different rendering engine (Webkit), that's why the elements are displayed differently.
so no way to adjust those blue areas on safari? I can probably live with that, but still don't really get why, is this just a problem in wordpress?
now, for some reason, it looks the same in safari as the others, maybe it just hadn't completely refreshed or something, still would like to check IE......are those blue parts on the top corners just images or part of the background or something?