Pixelpost

[WannaBe_80z]

Alright so I am finally setting up my photoblog and only have a few things up. In firefox the site is right aligned but in IE it is centered? I WANT it centered. How do i fix this?

http://s92349618.onlinehome.us/pixel....4.2/index.php

[WannaBe_80z]

I also want to have a "archive" button next to the current and previous and links and have it display thumbnails and stuff...where do I change all this?

[aversion]

Where it says in the CSS

body {
    background: #000000;
    color: #444444;
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 10px;
    margin: 10px;
    padding: 0px;
    text-align: center;
} 

Change margin:10px to margin:10px auto

IE understands the wrong way to do it, text-align shouldn't be used on structural elements.

No idea about adding an archive to pixelpost, I think they have their own help forums though.

[WannaBe_80z]

Yeah their help forums are very poor

But thanks for the code.

[ctranter]

Which template are you using? you should just need to point to:
http://s92349618.onlinehome.us/pixel...x.php?x=browse
but it doesnt seem to work. Do you have a browse template page?

[WannaBe_80z]

I don't think so.

I am getting a new template today to test out. Hopefully thatwill have one.

[ctranter]

works now i see

[WannaBe_80z]

all the colors in the style file are only 3 characters?

[WannaBe_80z]

Aversion I added that and it didn't change anything...

Here is the code for th styles:

/* .............................. */
/* Basic */
/* .............................. */

body {
    text-align: left;
    font-family: Verdana,Arial,sans-serif;
    background:#fff;
    margin:10 auto;
    color:#666;
    padding:0;
    padding-top:30px;
    }

html, body {
     min-height:100.1%;
    }

/* .............................. */
/* Link stylings */
/* .............................. */

a {
    font-style: italic;
    color: #666;
    text-decoration: none;
    }
a:hover {
    text-decoration: underline;
    color: #333;
    }

/* .............................. */
/* Headings */
/* .............................. */

h1    { 
    font-family: Verdana,Arial,sans-serif;
    font-size:large; 
    font-weight:bold;
    color: #666; 
    border-bottom:1px solid #999;
    margin-top:20px;
    margin-right:15px;
    position: normal;
    margin-left:10px;
    }

h2    {   
    text-align:left;
    font-family:Verdana, Georgia, Arial, sans-serif;
    font-size:large; 
    color: #666; 
    border-bottom:1px dotted #ccc;
    margin-top:10px;
    position: relative;
    }
h3    { 
    font-family: Verdana,Arial,sans-serif;
    font-size:medium; 
    font-weight:bold;
    color: #666; 
    margin-top:10px;
    position: relative;
    }

/* .............................. */
/* Navigation */
/* .............................. */

#navigation {
    font-family:Trebuchet ms, Tahoma, Verdana, Georgia, Arial, sans-serif;
    color:#666;
    font-size:11px;
    width: 630px;
    margin:0px auto;
    background-color: #fff;
    border-bottom:none;
    border-right:1px solid #ccc;
    border-left:1px solid #ccc;
    border-top: 1px solid #ccc;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    padding-bottom:10px;
    }
.navigation a{
    color:#555;
    font-weight:normal;
    text-decoration:none;
    border:0px;
    font-style:normal;    
    }
.navigation a:active,
.navigation a:hover {
    text-decoration:underline;    
    }
.navigationleft {
    color:#555;
    float:left;
    position:relative;
    padding:4px 4px 4px 8px;
    text-align:left;
    }
.navigationleft a {
    color:#333;
    }
.navigationright {
    font-weight:bold;        
    color:#666;
    letter-spacing:5px;
    padding:4px 8px 4px 4px;
    text-align:right;
    }
.navigationright a {
    font-weight:bold;
    color:#ccc;
    letter-spacing:5px;
    padding:4px 8px 4px 4px;
    text-align:right;
    }
.navigationright a:hover {
    text-decoration:none;
    color:#333;
    }
.navigationpost {
    float: right;
    text-align: right;
    color:#aaa;
    padding-bottom:2px;
    padding-right:3px;
    padding-left:3px;
    border-bottom:1px solid #eee;
    line-height:16px;        
    font-size: 9px; 
    margin:0;
    letter-spacing: 1px;    
    }
.navigationpost a {
    color: #666;
    font-style:normal;    
    }
.navigationpost a:hover {
    color: #333;
    text-decoration:underline;    
    }
.addcommenttab {
    float: left;
    text-align: left;
    padding-bottom:2px;
    padding-right:3px;
    padding-left:3px;
    border-bottom:1px solid #eee;
    line-height:16px;        
    font-size: 9px; 
    margin:0;
    letter-spacing: 1px;    
    }
.addcommenttab a {
    color: #666;
    font-style:normal;
    text-decoration:none;    
    }
.permalink {
    font-size:9px;
    text-decoration:none;
    font-style:normal;
    }
.date {
    font-size:10px;
    font-weight:normal;
    letter-spacing:1px;
    }

/* .............................. */
/* Menu */
/* .............................. */    

    #menu {
    width: 630px;
    font-size: 11px;
    margin: 0 auto;
    padding: 0;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    }
    #menu ul {
    margin:0;
    padding: 0;
    list-style-type: none;
    }
    #menu li {
    background: #fff;
    margin:0;
    line-height: 1.5em;
    width: 20%;
    text-align: center;
    padding:0;
    float: left;
    border-bottom:1px solid #ddd;
    border-top:1px solid #ddd;
    }
    #menu a {
    display: block;
    width: 100%;
    color:#666;
    padding:0;
    margin:0;
    text-decoration: none;
    font-style: normal;
    }
    #menu a:hover  {
    color:#000;
    }    
    
/* .............................. */
/* Content */
/* .............................. */

#photo {
    text-align:center;    
    width:630px;    
    background-color: #fff;
    border: 1px solid #ccc;
    border-bottom:none;
    margin:0 auto;
    font-size: 12px;
    padding:0;
    }        
#image {
    padding:10px;
    background:#fff;
    border:none;
    }
#page {
    font-size: 12px;    
    width:600px;    
    background-color: #fff;
    border: 1px solid #ccc;
    border-bottom:none;
    margin:0 auto;
    padding:15px;
    }
#browse    {
    font-size: 12px;    
    width:600px;    
    background-color: #fff;
    border: 1px solid #ccc;
    border-bottom:none;
    margin:0 auto;
    padding:15px;
    }
        
/* .............................. */
/* Thumbnails */
/* .............................. */        
        
#thumbrow {
    text-align:center;
    width:630px;
    margin:0 auto;
    background:#fff;
    border-right:1px solid #ccc;
    border-left:1px solid #ccc;
    border-top:none;
    }
#thumbrow .current_thumbnail {
    filter: alpha(opacity=99);
    opacity: 0.99;
    padding:5px;
    margin:3px;
    border:1px solid #ccc;
    }
#thumbrow a img {
    filter: alpha(opacity=70);
    opacity: 0.70;
    margin:3px;
    padding:5px;
    border:1px solid #fff;
    }
#thumbrow a:hover img, #thumbs a:focus img {
    filter: alpha(opacity=99);
    opacity: 0.99;
    padding:5px;
    border:1px solid #ddd;
    }
#browse .thumbnails {
    filter: alpha(opacity=70);
    opacity: 0.70;
    margin:3px;
    padding:5px;
    border:1px solid #fff;
    }
#browse a:hover img{
    filter: alpha(opacity=99);
    opacity: 0.99;
    padding:5px;
    border:1px solid #ddd;
    }
.thumb {
    float:right;
    border:1px solid #ccc;
    padding:0;
    margin-left:20px;
    margin-right:0px;
    margin-bottom:5px;
    margin-top:15px;
    }       

/* .............................. */
/* Footer */
/* .............................. */

#footer    {
    text-align:center;
    font-size: 9px;
    color: #bbb;
    line-height: 2em;    
    width:630px;    
    background-color: #fff;
    border: 1px solid #ccc;
    border-top:none;
    margin:0 auto;
    margin-bottom:20px;
    padding:0px;
    padding-top:5px;
    padding-bottom:5px;
    clear: both;
    -moz-border-radius-bottomleft: 10px;
    -moz-border-radius-bottomright: 10px;
    }
#footer a {
    color: #bbb;
    text-decoration:none;
    font-style: normal;
    }
#footer a:hover {
    text-decoration:underline;
    color:#333;
    font-style: normal;
    }


/* .............................. */
/* Comments */
/* .............................. */
    

#commentnavigation {
    font-family:Trebuchet ms, Tahoma, Verdana, Georgia, Arial, sans-serif;
    color:#aaa;
    font-size:11px;
    width: 100%;
    margin:0 auto;
    background-color: #fff;
    border-bottom:1px solid #ccc;
    }
#imageinfo {
    font-size:12px;
    height:auto;
    width:420px;
    padding:10px;
    border-bottom: 1px solid #999;
    margin-top: 25px;
    margin-left: 15px;
    margin-right: 10px;
    }    
#comments {
    border:0px solid #444;
    font-size: 10px;
    margin: 0 auto;
    margin-left:20px;
    width:410px;
    }
#comments ul {
    padding:0px;
    display:block;
    margin:0;
    margin-top:10px;
    list-style:none;
    }
#comments li {
    width:100%;
    padding-bottom:10px;
    padding-top:10px;
    padding-left:5px;
    padding-right:5px;
    margin:0;
    border-top:0px;
    border-left:0px;
    border-right:0px;
    border-bottom:1px dotted #444;
    background:#fff;
    }
#comments li:hover {
    background:#eee;
    }
#comments li a {
    text-decoration:none;
    color:#444;
    }

#addcomment {
    margin-left: 15px;
    margin-right: 15px;
    border:1px solid #aaa;
    font-size: 12px;
    background:#fff;
    padding:10px;
    margin-top:20px;
    margin-bottom:20px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomleft: 10px;
    -moz-border-radius-bottomright: 10px;
    }

.input {
    width:40%;
    font-size:10px;
    padding:3px;
    border:1px solid #aaa;
    background: #eee;
    color:#666;
    }
.text {
    width:95%;
    font-size:11px;
    padding:3px;
    border:1px solid #aaa;
    background: #eee;
    color:#666;
    }
.commentbutton {
    background:#eee;
    border:1px solid #aaa;
    color:#666;
    border-bottom:2px solid #aaa;
    border-right:2px solid #aaa;
    } 

[ctranter]

they will be abbreviated.

e.g.

#444 is same as #444444
#fff is same as #ffffff

[WannaBe_80z]

I figured that is how it worked, Thanks.

Any idea on the aligning?

[ctranter]

body {
text-align: left;
font-family: Verdana,Arial,sans-serif;
background:#fff;
margin:10 auto;
color:#666;
padding:0;
padding-top:30px;
}

html, body {
min-height:100.1%;
}

/*

maybe should be center?

[ctranter]

Also what part of your site isnt centering? The new template you have all seems to be centerd to me. In ff and ie.

[WannaBe_80z]

really? weird. what is wrong with my FF....it works in IE

and in my FF i can't use any of the button functions in advanced reply mode. I click on like say insert image and it just scrolls me to the top of the page...

[WannaBe_80z]

everything is centered but when you actually look at thr large photos it is screwed up.

[ctranter]

ah right I got you now, i was just looking to see if it worked in ie.

Don't rob and Nords use this template? If so have you checked whether theirs does this?

[ctranter]

Alternatively you could get in touch with Jspurling who I think made the template. Hes a nice guy whom im sure could help you out if all else fails.

[EVPohovich]

First off all of the widths are set to 630px and your Images are larger than that. As you have a line down the left side of the page and margins set to place that line EVERYTHING will reference from there. If your photo is smaller than 630px it will centered, but if it is larger it will rest on the margin (+line and border.....whatever) and will continue on out toward the right.

You should set a size for your photos and stick with it. then build your site around your photosize.

Good luck!

[aversion]

Aversion I added that and it didn't change anything...

As mentioned above, it's centering (that 10 needs px added after it btw) but your images are wider than your content area, which is set to 630 pixels. I've never dealt with a template but I would have thought that it would come with a recommendation for image sizes that would fit within it, including any padding and borders. At 630 pixels wide your images might still 'break' the layout.

You can make the layout wider by changing those widths if you want bigger pictures. On my site the content area is 720 wide with padding and borders and the widest images I can post before it does the same as yours is doing now is 690.

[admedia]

You have a mac Wannabe?
I always thought you were a PC dude