stylesheet issue on index page w/ WordPress integration

limedragon

I've managed to get most of my ZenPhoto installation to match my WP theme. There is one issue I've tried to fix, but haven't figured out how yet.

http://limedragon.com/pix

On the above page, you can see how the text is too far left and is partially hidden by the left-sidebar. I've tried adjusting the width, margins, and padding with no luck. The text displays just fine on the album and image pages.

This is the first part of the zen.css I'm using, from the default ZP theme. What might I have missed? Thanks!

```html {

/* IE */

overflow-y: scroll;

/* Moz */

height: 100%;

margin-bottom: 0.1em;

}

/* Main Layout

------------------------------ */

body {

/* background: #F5F5F3; */

margin: 0px;

padding: 0px 0px 50px;

}

#main {

text-align: left;

margin: 20px auto;

width: 470px;

background: #f7f7f7;

padding: 20px 30px 70px;

border-top: 1px solid #E6E6DF;

border-right: 1px solid #E6E6DF;

border-bottom: 5px solid #E6E6DF;

border-left: 1px solid #E6E6DF;

}`

limedragon

Did I post this in the right place? I wasn't sure because stylesheet questions were in various parts of the forums. If you need more information/code, I can post that too. Thank you.

Donkikong

Cant see any text formatting errors on Firefox 2.0 or IE7.

On higher resolution (1600x1200) displays your right and left columns are at the edge of the page, when they should be beneath the header, I think. you should put the right and left columns, along with the main content into a containing div and give the containing div the same width as the header/masthead.

darrellm

I'm having a sort of similar problem - except when I add the get_sidebar in the index.php it breaks up my gallery. If I add the get_sidebar below the get_footer the gallery is showing just fine, except the sidebar goes all the way down. Here's my stylesheet: The site is at http://mlownie.com/gallery

/*

Wordpress Integration 1.0

*/

/* Basics
------------------------------ */

#zenphoto {
text-align:left;
margin:20px auto;
width:100%;
}

#zenphoto h2 {
width:100%;
text-align:left;
margin:10px;
}

#zenphoto .album img {
float: left;
margin:0px 15px 0px 10px;
}

#zenphoto #images img { margin:4px;}

#zenphoto .imagethumb { display:inline;}
#zenphoto .album { vertical-align:text-top; margin-top:15px;}
#zenphoto .albumdesc {
float:left;
text-align:left;
vertical-align:text-top;
padding:0px !important;
}
#zenphoto .albumdesc h3{ vertical-align:top; margin:0px; padding:0px;}

#zenphoto #credit {
text-align:center;
}
#zenphoto a#credit {
display:block;
width:900px;
}

#zenphoto img { padding:4px; border: solid 1px grey;}

/* Page Navigation
------------------------------ */
#zenphoto .pagelist { text-align:center; }
#zenphoto ul.pagelist {
clear: both;
padding: 0;
margin: 20px 0 0 0;
list-style-type: none;
}
#zenphoto ul.pagelist li {
display: inline;
}
#zenphoto ul.pagelist li a, #zenphoto ul.pagelist span.disabledlink {
padding: 4px;
}
#zenphoto ul.pagelist li.current a {
font-weight: bold;
text-decoration: none;
cursor: default;
color: #5A5A4B;
}
#zenphoto ul.pagelist li.prev {
margin-right: 20px;
}
#zenphoto ul.pagelist li.next {
margin-left: 10px;
}
#zenphoto .disabledlink {
color: #ddd;
cursor: default;
}
#zenphoto .pagenav {
clear: both;
}

trisweb

In `#zenphoto .album` you should have this:

`#zenphoto .album {

vertical-align:text-top;

margin-top:15px;

float: left;

width: 650px;

}`

That will work for you since your layout is at a fixed 900px wide. Otherwise you'd want a percentage width, like 65% or so.

"float" is often used in CSS layouts when you want two elements sitting side-by side.

There are all sorts of resources to learn about this, just google "css layouts" to see some.

http://www.maxdesign.com.au/presentation/page_layouts/
http://www.code-sucks.com/css layouts/
http://layouts.ironmyers.com/
http://www.tjkdesign.com/articles/one_html_markup_many_css_layouts.asp

Also, I highly recommend using Firebug for Firefox to get a sense for how your changes influence the layout, and to quickly debug issues ( http://www.getfirebug.com/ )

darrellm

Thanks Trisweb! That worked just fine. And thanks for the resources - quite an interesting read.

darrellm

I have one more issue. I've got everything working fine but when I look at the gallery in IE on a PC the whole gallery is all the way down at the bottom. On either Mac or PC in Firefox, it works just fine. I didn't notice it until recently when someone on a PC brought it to my attention.

Why does IE have to be so difficult? Anyway, how can I correct this so that it's compatible on IE as well? Thanks in advance.

Link: http://www.mlownie.com/gallery/

acrylian

I can't really help with it since I am Mac user and don't have any IE, but this is most likely a conflict with the margins and paddings that do not match together. IE does some weird things if there is only a px too much (and it does that by nature...:-))).

darrellm

Anyone know how I can fix the gallery so it's showing properly in IE? Please see post above. Thanks.

acrylian

Which IE do you use? Check the margins and paddings both values add to the width or height you set to an element. So if you have div that is 20px wide and a margin of 10px around and a padding of 5 the element needs the real space of 50px. Probably you have a surrounding element that is smaller thant the element that holds you albums.

And the IE 5 that you hopefully are not using anymore has a serious bug: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug