CSS Problem with blank space

Message Topic Search Topic Options Post Reply Create New Topic Printable Version Translate Topic

   OK, so I feel like an idiot but have wasted way too much time on something that should be so simple.

On this page: http://www.bestop-powerboard.com/store/pc/viewCategories.asp?idCategory=4

you will see a H1 tag that says Chevrolet PowerBoard.

Notice that there is a white space at the top of the background image and it makes the center heading drop down and be out of alignment with the left and right heading boxes labeled Vehicle applications and Browse by Price.

Can anybody give me a pointer on what is causing that and how to fix it?  It would be very appreciated!

Author	Message Topic Search Topic Options Post Reply Create New Topic Printable Version Translate Topic
ammonihah Members Profile Send Private Message Find Members Posts Add to Buddy List Groupie Joined: 18-April-2008 Location: United States Status: Offline Points: 57	Post Options Post Reply Quote ammonihah Report Post Thanks(0) Quote Reply Topic: CSS Problem with blank space Posted: 01-April-2010 at 2:19pm
	OK, so I feel like an idiot but have wasted way too much time on something that should be so simple. On this page: http://www.bestop-powerboard.com/store/pc/viewCategories.asp?idCategory=4 you will see a H1 tag that says Chevrolet PowerBoard. Notice that there is a white space at the top of the background image and it makes the center heading drop down and be out of alignment with the left and right heading boxes labeled Vehicle applications and Browse by Price. Can anybody give me a pointer on what is causing that and how to fix it? It would be very appreciated!

Guests Members Profile Send Private Message Find Members Posts Add to Buddy List Guest	Post Options Post Reply Quote Guests Thanks(0) Quote Reply Posted: 01-April-2010 at 4:35pm
	ammonihah, Try this: user agents automatically apply some top and bottom margin to heading tags. On .pcMainTable h1, apply a top margin of 0 and then compensate for the placement of the text with a top padding of 10px.

ammonihah Members Profile Send Private Message Find Members Posts Add to Buddy List Groupie Joined: 18-April-2008 Location: United States Status: Offline Points: 57	Post Options Post Reply Quote ammonihah Report Post Thanks(0) Quote Reply Posted: 01-April-2010 at 7:09pm
	OK, well that helped me align the text better but that didn't work with respect to the white space, but it gave me an idea. I used a negative number for the top margin and that worked. But I don't know if negative numbers are considered good code. I'm going to test it on Internet Exploder and Firefox, but it worked with Chrome. Thanks for the help and I would love any other input.

Guests Members Profile Send Private Message Find Members Posts Add to Buddy List Guest	Post Options Post Reply Quote Guests Thanks(0) Quote Reply Posted: 01-April-2010 at 7:25pm
	Negative positioning is fine; it's valid W3C styling. Looks like you've just about got it, but probably a bit less negative margin on the top and ~ 5px less top padding. At least you have a better idea of what to play with here.