- This topic is empty.
March 28, 2012 at 10:49 pm #37391
Hello, everyone. This should be very simple for the majority of everyone here. I just can’t figure it out for the life of me though. I believe I have some incorrect markup in conjunction with some CSS.
If you go to this page: http://www.nintendonerds.com/games
And then click the last drop-down (platform), choose “Wii” then click on “Go!”, you should have all the filtered records for the Wii platform. Now, what I’m wanting to show specifically, is the 5th record down, called “Dragon Quest Swords: The Masked Queen…”
Take notice that it’s not vertically centered within its TD. That is what I’m trying to figure out.
Am I overlooking something completely simple here, or is my markup incorrect to begin with?March 28, 2012 at 11:05 pm #100154cizmicParticipant
What browser and platform are you using? It looks normal on Safari.March 28, 2012 at 11:31 pm #100155
I’m looking at it using Firefox, and Chrome. The problem lies when the text breaks to the next line, like this:
If the title stays on the one line, without breaking to the next line, it stays centered but only if it doesn’t break.March 29, 2012 at 5:55 am #100165SenffParticipant
This is because you gave it a relative position and a top of 22px — which means that it will always be 22 pixels away from the top, no matter how many lines.
You might want to separate the image and the title and put them both in individual table cells, so that they will both be centered vertically in their own cells (just don’t use
top:22px;for the title).March 29, 2012 at 5:03 pm #100219
Thanks very much for the information, Senff!
I have done this and it looks MUCH better. I personally don’t like tables though so now I am deciding whether to convert to divs. Your thoughts?March 29, 2012 at 5:27 pm #100223
Thanks very much, Andy. I suppose it does :)
Thanks for everyone’s awesome response times and assistance. This is where I come when I know I can get the answers I need with the best possible service.
- The forum ‘CSS’ is closed to new topics and replies.