vulgarbulgar 10

Template breaking under these layouts (possibly others):

http://zpryme.com/SGI/page/2/ (Navigation) http://zpryme.com/SGI/?s=electric (Search) http://zpryme.com/SGI/tag/zpryme/ (Tag) http://zpryme.com/SGI/category/smart-grid/ (Category)

I believe this may be related to the fact that I increased the logo div height to 300px from 70px, thus causing the breaks. Any pointers would be GREATLY appreciated!

:)

Thanks for looking!

5 answers

vulgarbulgar 10
0
points
This was chosen as the best answer

although working in FF, it breaks in IE8... any way to improve so that IE also reads fine? thanks! willing to buy someone a beer/ pepsi./ coffee via PP :)

i have only tested the solution involving removing the margins on the zli elements.

Answered about 2 years ago by vulgarbulgar
  • In the future, its good practice to give points to solutions that helped you arrive to this, instead of posting your own solution. This will help bring those to the top so that others can solve similar problems easier. — Ktash about 2 years ago
Artistic Abode 684
1
point

These pages have some elements with really large margins. The margins are pushing the boxes up into the nav. Remove the margins on #zli_cont2 and #zli_cont3.

Answered about 2 years ago by Artistic Abode
vulgarbulgar 10
0
points

didn't work, i had played with that.. thanks.

Answered about 2 years ago by vulgarbulgar
  • To comment on someone else's answer, its more proper to click on the `Add a comment` link below each answer. This site borrows its format from sites like stackoverflow which are question answer as opposed to forum like responses. — Ktash about 2 years ago
Ktash 1851
0
points

I have what seems to be a fix, but I'm not sure why it works, and I've only tested it in Firefox. #li_container1 ul, the first element in #li_container1, which is floated and has a width of 305px needs a height. Specifically, it needs a height equal to the negative margin on the right two columns (734px). Secondly, #zli_cont2 needs a height equal to the negative margin plus 1 (735px). This aligns things as I understand they need to be aligned.

Again, only tested if FF 3.6.14. This solution would need to be tested elsewhere. I'll keep playing around with things, and if I come up with a cleaner solution or a reason, I'll update my answer.

Update

It should also be noted that I was able to get the results with removing both top and left negative margins on the #zli_cont elements, as Artistic Adobe suggested.

Answered about 2 years ago by Ktash
vulgarbulgar 10
0
points

Solved. The issue was caused by updating to WordPress 3.1, from 3.0.4. Reverting resolved the conflict.

Thanks for your input guys.

Answered about 2 years ago by vulgarbulgar