box page alignment and number of columns with upgrade

[ysdt 0]

Hey everyone, So I upgraded to 1.3.1 and all is fine, except the box pages alignment is all screwed up now. I've been playing with firebug to see if I can find what is wrong, but I can't seem to be able to. I just noticed that my 3 column footer is also off on most pages, which wasn't happening at first. I had this problem with the footer before and I figured out how to change it with CSS but now I'm at a loss. The site is http://ysdt.org The box pages are: http://ysdt.org/company/artists, http://ysdt.org/press/articles, http://ysdt.org/press/newsletters Here is my css: body { background-color: #ffffff; } .font-primary, body, .commentlist, h1, h2, h3, h4, h5, h6 {font-family: "Josefin Sans", sans-serif;} .fpost .post-excerpt, .fpost .entry_content { font-family: "Josefin Sans", sans-serif; font-size: .9em; line-height: 1.4em; } .banner-content {font-family: "Josefin Sans", sans-serif; line-height: 1.4em; font-size: .9em} #footer .content-pad { padding: 0 0 1em; } #branding .content-pad{ padding: 10px 0px 0px; } #site{position:relative;} #carouselwrap{background:#ffffff;min-height:100px !important;position:absolute;width:100%;z-index:3;margin:0px;left:0;text-align:center !important;} .carouselcontainer{text-align:center !important;width:720px;margin:0 auto;background:#ffffff !important;border:0px !important;} .home #contentcontainer{margin-top:123px !important;} #footer{background:#ffffff;} #branding .content-pad { padding:10px 0; } .banner-text-pad{padding:0px !important;} .home#feature, #feature .content, #feature-area, .feature-wrap, #feature_slider .fmedia, #feature_slider .fcontent, #feature_slider .text-bottom .fmedia .dcol-pad, #feature_slider .text-bottom .feature-pad, #feature_slider .text-none .fmedia .dcol-pad { height: 377px; width: 685px; } .home #feature-footer, .feature-footer-pad{width: 685px;} #feature{float:left; padding: 1.1em .9em;} .scolumn-pad { padding: 0.3em 0.6em 0em 0em; } #scolumn-pad .widget-title { padding: 1.1em .5em .3em 0; } div.thecarousel {background-color: #ffffff;} #featurenav a, #feature-footer span.playpause { position: relative; right: 20px; } div.fboxtitle { font-size: 12px; text-align: center; } div.fboxtext { font-size: 11px; text-align: center; } div#dcol_container_3 { float: right; padding: 4em 0 0; width: 990px; } #highlight .content-pad .highlight-area { padding: 5px 5px; } div.gallerycontainer{ position: relative; width: 690px; left: -5px; height: -100px; } .thumbnail img{ border: 1px solid white; margin: 1px 1px 1px 1px; } .thumbnail:hover{ background-color: transparent; } .thumbnail:hover img{ border: 1px solid white; } .thumbnail span{ position: absolute; background-color: lightyellow; padding: 1px; left: -1000px; border: 0px; visibility: hidden; color: black; text-decoration: none; } .thumbnail span img{ border-width: 0; padding: 1px; } .thumbnail:hover span{ visibility: visible; top: 0px; left: 0px; z-index: 50; } I'll keep trying to figure it out, but any help would be appreciated. Thanks so much.

[ysdt 0]

Okay, fixed footer problem. Just changed this div#dcol_container_3 { float: right; padding: 4em 0 0; width: 990px; } to this .dcol_container_3 { float: left; } I'll report back if I figure out the box problem. Thanks, Samar

[ysdt 0]

So, one more question. As I mentioned above, I fixed the morefoot to float left, but I'm trying to get it to span the entire width of my page canvas. So for this .dcol_container_3 { float: left; width: 960px; } but this seems to not help. Any thoughts? Sorry for so many posts today.

[Kate 3]

Hi Samar - You would want to target the "morefoot" ID. For the boxes: did you add any custom HTML? I would try running those pages through a validator to see if you have any missing tags, etc.

[ysdt 0]

Thanks so much Kate. I tried changing it to this: #morefoot{float:left; width: 960px;} and that made the whole website go crazy, alignment of sidebar, morefoot, and content area was off) Then I tried .morefoot with same code and it didn't do anything... I don't think I added any html to the boxes. The boxes are linkable to either a page within the website or to another website. I'm looking at validators now (I've never done this before) and will see if I come up with anything on for the box pages. Thanks so much for your help.

[ysdt 0]

so I ran the pages through W3 validator and I did get an error but it has to do with a link in the morefoot, not with the actual boxes. I did notice that the http://ysdt.org/company/artists that the boxes are fairly aligned (though it doesn't span the width of the page) except the text for two of the boxes isn't being pushed to a second line like it used to. I still don't know about the newsletters and articles page, but will keep searching.

[ysdt 0]

so, it seems that all the issues were from the width of the title and text of box. I added this to custom css div.fboxtitle { font-size: 12px; text-align: center; width: 279px; } div.fboxtext { font-size: 11px; text-align: center; width: 279px;} This is obviously a general rule for box pages. I tried adding a specific page id so I can vary the size and number of boxes per rows on each page, but nothing seemed to work. To make something specific to a page, would you add #page-id-xx div.fboxtitle [rule;} Thanks so much. Problem almost solved.

[cmunns 16]

Yes this would work: `#page-id-xx div.fboxtitle {rule:value;}`

[ysdt 0]

Thanks Adam. That didn't seem to work, but when I used: .page-id-xx #page div.fboxtitle{rule:value;} it did. I saw this on another thread for a background issue. I had to add another rule because the boxes on the pages with 4 columns were floating the boxes to the right for some reason. I don't really understand why this problem occurred when I upgraded, but in any event, this is what I have. (In case anyone else has this problem.) My css for this page http://ysdt.org/press/articles looks like this: .page-id-37 #page div.fboxtitle { font-size: 11px; text-align: center; width:194 px; } .page-id-37 #page div.fboxtext { font-size: 10px; text-align: center; width: 194px; } .page-id-37 #page #boxes .content-pad { float: left; padding: 0.5em 0; } Still having issues with the footer, but maybe I should open a new thread? Thanks so much Kate and Adam for your help. Take care, Samar

[Kate 3]

Hey Samar - If you got an error for a link in the footer, I would check that, fix it, and see if that takes care of the footer problem. A missing end tag (or the like) could mess things up.