Silverfish Template - zc137 - Bluish/Silver Professional

I'm going cross-eyed :wacko: looking for the answer to this.

Please look at my logo (header). Click Here

There is a space to the right of the logo that I think might be a rogue div or table element, or something, but can't for the life of me, figure what it is, or how to get rid of it.

It's very prominant in some browsers, not so much in others, but it's there, and annoying just the same in either case.

Please, someone help me :frusty:

Thanks

It doesn't look like any rogue elements to me.
You have your mainWrapper div set at 99% but your header logo does not stretch to this depending on the screen size of the browser.
I'd suggest you add a background color of #1d5685 (same as used in your search & nav backgrounds) to the div with the logo - #headerWrapper rather than #eee as currently set. You may have to play around with that color but it should work,
Hope this helps, Ant.

anthonyd:

It doesn't look like any rogue elements to me.
You have your mainWrapper div set at 99% but your header logo does not stretch to this depending on the screen size of the browser.
I'd suggest you add a background color of #1d5685 (same as used in your search & nav backgrounds) to the div with the logo - #headerWrapper rather than #eee as currently set. You may have to play around with that color but it should work,
Hope this helps, Ant.

Looks a little better, but it's still a problem. Isn't there some way to center the logo so that it's absolutely centered no matter what size screen somone is using, or browser, resolution, etc.?

try adding a 100% width to the table you have the flash logo in, then text align centre the td.

wtashby:

Looks a little better, but it's still a problem. Isn't there some way to center the logo so that it's absolutely centered no matter what size screen somone is using, or browser, resolution, etc.?

This is what my css for that area looks like now:

#headerLogo{width:760px;height:132px;}

#headerWrapper{display:block;background:#fff height:1%;background-color:#1d5685 ;}



#headerBackground{width:100%;height:75%;}

#logo{float:middle;text-align:center;margin:0;}

Anything I can change to make a difference?

You have the header logo in a table without any class:
change it to

Then in your CSS, change

#headerLogo{width:100%;height:132px;text-align:center}

or just remove that table all together & place the logo in a div with 100% width & text-align center.

[QUOTE=anthonyd;566757]You have the header logo in a table without any class:
change it to

Then in your CSS, change

#headerLogo{width:100%;height:132px;text-align:center}
QUOTE]

I did all that, and it looks MUCH better. What do you think?

Thanks a million, by the way!!:cheers:

Very nice. Glad you got it worked out! Thx Anthony

Yes, It looks a lot better.
However, It would look better again if you could take a slice off the flash logo, the first pixel would do and then use that as the background for that table cell.
Ant.

anthonyd:

Yes, It looks a lot better.
However, It would look better again if you could take a slice off the flash logo, the first pixel would do and then use that as the background for that table cell.
Ant.

Huh? Could you elaborate on that please?

wtashby:

Huh? Could you elaborate on that please?

Not sure how it will look, but try uploading the attached gif to your template images folder and change the headerLogo in your stylesheet to

#headerLogo{width:100%;height:132px;text-align:center; background-image: url(../images/headerlogobg.gif);background-repeat: repeat-x;}

anthonyd,
Take a look. That looks Way better! Great advice. The only problem is that the logo itself has a definitive edge to it on the right, but it isn't too noticeable, and aside from completely redoing it, there isn't anything more that can be done.

I think it looks really good now. Much better thanks to your help!:bigups::cheers:

Thought that might happen but it does look way better now.
You could right align the logo but that would probably leave too much space on the left.
Either way, it looks well now.

wtashby:

anthonyd,
Take a look. That looks Way better! Great advice. The only problem is that the logo itself has a definitive edge to it on the right, but it isn't too noticeable, and aside from completely redoing it, there isn't anything more that can be done.

I think it looks really good now. Much better thanks to your help!:bigups::cheers:

I've looked through this thread and I don't think anyone has asked this yet... if so, please point me toward the answer - I am stuck!

I am having a difficult time customizing the Product name on the Product Information pages. Some of my names are longer than one line so I have increased the height but I am not able to get any of the titles (single or double-lined) to vertically align to the middle so it is "centered" in the colored bar.

In my CSS I have the following:

.productListing-rowheading, .productListing-rowheading, #productName { color: #ffffff; background-color: #1d5685; background-image: url("../images/bg_box_header.gif"); text-align: center; margin: 0; padding: 0.2em; height: 2.9em; vertical-align: middle }

It still looks like this:

What am I missing?

^^
Check the last 4 posts on page 23 of this thread for solutions

Thanks for replying.

That didn't help... I don't want to move the image... Moving the image to make the bar longer doesn't help because some of the titles will still be two lines. I just want the product name to center vertically in the blue bar when it is only one line.

Anyway to do that?

By the way... LOVE the template!

rwhporg:

Thanks for replying.

That didn't help... I don't want to move the image... Moving the image to make the bar longer doesn't help because some of the titles will still be two lines. I just want the product name to center vertically in the blue bar when it is only one line.

Anyway to do that?

By the way... LOVE the template!

Well the first step is fixing the overlap.. once that is done, you can center it with text-align: center. See more here: http://www.w3schools.com/CSS/tryit.asp?filename=trycss_text-align

Thanks...

I figured out a fix around. In the stylesheet I duplicated line 667 (h2.centerBoxHeading) and renamed it #productName, increased the size to 1.5em and added vertical-align: middle then removed "#productName" from line 668 (.productListing-rowheading, .productListing-rowheading,..)

That did it! Now, if the title is two-lines it expands and centers and if it is one-line it contracts back and centers.

Thanks for your help!
:clap:

i am also pretty new to all of this. i am unable to figure out how to get either the logo centered or completely removed? there are many threads on this subject and it looks like before the table was used it might have been easier.

so now im stuck with that red x image and i cant get it right.

secondly, if i can remove the logo spot, how to i get the background image i replaced to fit the whole header area?

thanks

:censored:

anthonyd:

You have the header logo in a table without any class:
change it to

<table width="100%" cellpadding="0" cellspacing="0">

Then in your CSS, change

#headerLogo{width:100%;height:132px;text-align:center}

or just remove that table all together & place the logo in a div with 100% width & text-align center.

ok. i finally got the logo removed after pulling my hair out for over a week:frusty:

now im trying to center the background.

someone please help :cry: