I've tried several things but none of them are working, so I'm coming to you all on bended knee. π
Here's a screenshot from our beta site:
How do I center things like the storyform and tables? Every page with tables (submissions, favorites, etc) is also aligned to the left.
Do I need to do some of this in .tpl files, or can it be done from the stylesheet and I'm just missing something?
Edit to add that it's all centered in Firefox but not IE7.
URL to your eFiction: http://www.mickiclark.com/efiction33
Version of eFiction: 3.3.1
Have you bridged eFiction, if so with what?: SMF
Version of PHP:
Version of MySQL: MySQL 4.1.14
What code did you add to get it centered in Firefox? What version of IE are you testing in?
We need a url to view the actual page before we can tell you how to fix it in IE.
If you view the add story page, for example, in Firefox it's centered but in IE not. Same with all the admin stuff and the account info items. I didn't make changes to these things in the modification of the skin.
As far as the version, do you mean a specific version of IE7? It's something like IE 7.0.5730.11, I think.
URL to your eFiction: http://www.mickiclark.com/efiction33
Version of eFiction: 3.3.1
Have you bridged eFiction, if so with what?: SMF
Version of PHP:
Version of MySQL: MySQL 4.1.14
I meant did you test in IE 6 or IE 7. They are drastically different browsers...
Just IE 7. I don't have IE 6 installed.
URL to your eFiction: http://www.mickiclark.com/efiction33
Version of eFiction: 3.3.1
Have you bridged eFiction, if so with what?: SMF
Version of PHP:
Version of MySQL: MySQL 4.1.14
What skin is that in your screenshot? It doesn't seem to be your default. Also, do you have a test user...I really need to see things so I can check out things. I can't do anything with a screenshot.
tester, password is test. The skins that I am having a problem with (same skin, just diff. colors) are Eragon, Eldest, and Brisingr.
And by the way--thanks. I appreciate any help.
Edit to add: I tried centering the #middleindex, but of course that centers EVERYTHING (including the text) and that's not what I want. The stylesheet is below.
/*The following declarations set the colors, text-alignment, and borders for various elements.
The width, height, padding, etc. follows in separate declarations. Most likey you will only want
to change things in this first section and leave the second section alone . */
BODY {
background: #191970;
}
HR {
color: #369;
background: #369;
}
A:link { color: #00008B; }
A:visited { color: #191970; }
A:active { color: #191970; }
LABEL, .label, #infoleft, #newestmember { color: #000;}
#banner { background: url('images/Bluedragonbanner1.jpg') no-repeat center #000; color: #FFF; border-bottom: 3px solid #000;}
#container1 { background: #191970; }
#middleindex { background: #FFF; border-left: 1px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000;}
#footer { background: #191970; color: #FFF; }
.tblborder { border: 1px solid #000;}
.tblborder TH { background: #369; color: #FFF; }
#menu, #menu2, #tabs { border: 1px solid #000; border-bottom: 0; }
#menu A, #menu2 A, #tabs A { border-bottom: 1px solid #000; background: #FFF; }
#menu A:visited, #menu2 A:visited, #tabs A:visited { color: #369;}
#menu A:hover, #menu2 A:hover, #tabs A:hover{ background: #369; color: #FFF; }
#menu A:active, #menu2 A:active, #tabs A:active { background: #FFF; color: #369; }
#menu #current, #tabs #active A{ background: #7BA8D2; color: #FFF;}
#menu_title { color: #FFF; border: 1px solid #000; border-bottom: 0; background: #000; }
#pagelinks a, #alphabet a, #next a, #prev a {
background: #191970;
border: 1px solid #000;
color: #FFF;
}
#pagelinks a:hover, #alphabet a:hover, #next a:hover, #prev a:hover{
background: #CCC;
color: #369;
}
#pagelinks #currentpage, #alphabet #currentletter {
background: #369;
font-weight: bold;
}
#pagelinks #currentpage:hover, #alphabet #currentletter:hover {
background: #CCC;
color: #369;
}
.block, .listbox {
border: 1px solid #000;
}
.block .title, .listbox .title {
border-left: 14px solid #369;
background: #7BA8D2;
color: #FFF;
}
.listbox .title A, .listbox .band A{ color: #00008b; }
.listbox .band {
border-right: 14px solid #369;
background: #7BA8D2;
color: #FFF;
text-align: right;
}
.listbox .band .label { color: #FFF; }
.block .content {
border-top: 1px solid #000;
}
.listbox .content {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
.listbox .content IMG { float: left; }
#viewstory .listbox .content {
border: 0;
}
#recenttitle, #newstitle {
font-size: 16pt;
border-bottom: 3px solid #369;
color: #369;
}
.new { color: #C00; }
#pagetitle { color: #369; }
#bottom-nav { background: #000; color: #FFF; border-bottom: 1px solid #CCC; }
#bottom-nav A { color: #7BA8D2; }
#top-nav { background: #000; color: #FFF; border-bottom: 1px solid #CCC; }
#top-nav A { color: #7BA8D2; }
#footer A { color: #7BA8D2; }
/* Stuff for the index page only */
#welcome { color: #369; font-size: 14pt; }
/* The following declarations set all elements BUT color. You're strongly encouraged not to edit anything below this point. */
BODY { margin: 0; padding: 0;}
/* Make labels in forms stand out. */
LABEL, .label { font-weight: bold; }
/* Make the text in select boxes smaller. */
SELECT { font-size: 10px; }
HR {
width: 70%;
margin: 1ex auto;
height: 4px;
}
A {
font-weight: bold;
text-decoration: none;
}
A:hover { text-decoration: underline; }
A:active { text-decoration: underline; }
#banner { height: 150px; text-align: right; }
#sitename { font-size: 80px; padding: 20px 1em 0;}
#welcome { margin: 1em 10%; }
#container1 { width: 100%;}
#container2 { width: 100%;}
/* The columns */
#leftindex { margin-left:auto; margin-right: auto; width: 165px; float: left; padding: 0 0 0 5px;}
#rightindex { margin-left:auto; margin-right: auto; width: 165px; float: right; padding: 0 5px 0 0px; }
#middleindex { margin-left:auto; margin-right: auto; padding: 5px 20px; height: 450px; margin-bottom: -2px; padding-bottom: 1em;}
html>body #middleindex { height: auto; min-height: 450px; margin: 0 185px -2px;}
/* The inner 2 columns on the index page */
#innerleftindex {
width: 250px;
float: left;
padding: 0px;
}
#innerrightindex {
margin: 0;
margin-left: 250px;
padding: 0;
padding-top: 1ex;
}
/* Bottom navigation */
#bottom-nav { text-align: center; clear: both; padding: 5px;}
#top-nav { text-align: center; clear: both; padding: 5px;}
#footer { margin: 1em 0; clear: both; padding: 5px 1em;}
.tblborder { border-collapse: collapse; padding: 5px;}
/* Center the skinchange and rss in the left hand column. Also give the skin a 1ex top and bottom margin */
#skin { margin: 1ex auto; text-align: center; }
#rss { text-align: center; margin: 1ex 0;}
#menu, #menu2 { margin: 0 1ex; }
#menu A, #menu2 A { display: block; padding: 0 4px;}
#menu A:visited, #menu2 A:visited { display: block; }
#menu A:hover, #menu2 A:hover, #tabs A { text-decoration: none; }
#menu A:active, #menu2 A:active { display: block; }
#menu_title { margin: 1em 3ex 0; padding: 2px 5px; font-weight: bold; text-align: center; border-bottom: 0;}
#tabs {
float: right;
width: 200px;
margin: 0;
padding: 0;
}
#tabs A { display: block; padding: 0 4px; }
/* The login block form has an ID of loginblock so you can style it as you wish. */
#loginblock { padding: 5px; margin: 5px 1em;}
#loginblock LABEL { font-weight: bold; font-size: 14px; color: #ffc;}
#loginblock .button, #loginblock .textbox { font-size: 10px; }
#loginblock #rememberme { display: block; }
#loginblock a {color:#FFF; text-decoration: underline;}
.block {
margin: 0 1.5em 1em 0;
background: #FFF;
color: #000;
width: 160px;
}
.block .title, .listbox .title {
font-size: 14pt;
padding: 5px;
}
.listbox .band {
padding: 5px;
}
#viewstory .listbox .band { display: none; }
.listbox .band .adminoptions, .listbox .band .respond {
display: inline;
}
.block .content {
padding: 5px;
width: 155px;
}
.listbox .content {
padding: 5px;
}
.listbox {
margin: 1em 0;
}
.listbox .contenteven, .listbox .contentodd { padding: 7px; }
#viewstory .listbox .adminoptions {
display: block;
margin: 0 7px 7px;
}
#info_left, #newestmember { font-weight: bold; }
#info_right { text-align: right !important; }
#newestmember BR { display: none; }
#recenttitle {
font-size: 16pt;
text-align: right;
margin-left: 25%;
padding: 0 10px;
margin-bottom: 1em;
}
#recentcontainer {
margin: 0 1em;
}
#newstitle {
font-size: 16pt;
text-align: left;
margin-right: 25%;
padding: 0 10px;
margin-bottom: 1em;
}
.newstitle {
font-size: 14pt;
}
.newstitle A, .newsdate {
font-size: 10pt;
}
.newstory {
margin: 1ex 2em;
}
.newssig {
text-align: right;
margin: 0 4em;
}
.newscomments {
text-align: right;
margin: 1ex 4em;
}
/* On the news page we want the news comments and the HR to disappear */
#news .newscomments,#news HR {
display: none;
}
#newsarchive {
text-align: center;
margin: 1em;
}
.commentodd, .commenteven {
margin: 1em;
}
.commentodd .adminoptions, .commenteven .adminoptions {
text-align: right;
}
.commentsig {
margin-left: 4em;
}
/* Used in a couple places to clear floated elements */
.cleaner {
clear: both;
height: 1px;
font-size: 1px;
border: medium none;
margin: 0;
padding: 0;
background: transparent;
}
#pagelinks, #alphabet {
text-align: center;
margin: 1em 0;
line-height: 25px; /* Keeps the links separate if they need to scroll to more than one line */
}
#pagelinks a, #alphabet a {
padding: 2px 6px;
margin: 0;
margin-left: -1ex;
text-decoration: none;
}
/* The "Stories" and "Series" labels used in listings */
.sectionheader { text-align: center; font-size: 14pt; color: #369; margin: 1ex 20%; border-bottom: 3px solid #369;}
/* The page title */
#pagetitle { font-size: 18pt; text-align: center; margin: 1ex;}
/* The profile portion of the viewuser page */
#profile { padding: 10px; }
/* tabs control the 3 links for stories, favorite stories/series, and favorite authors. Generally, they're below the user profile. In 1.1 you had no options in this.
With 2.0, you can put those links whereever you want. */
/* Some things on viewstory */
.jumpmenu { text-align: right; margin: 1ex;}
.jumpmenu2 { text-align: center; }
#viewstory .respond { text-align: center; margin: 1em; }
#next { float: right;}
#prev { float: left; }
#next A, #prev A { padding: 3px; }
#vusort {
margin: 0 1em;
text-align: right;
}
#profile .adminoptions { display: inline; }
.new {
font-style: italic;
font-weight: bold;
}
.infolinks {
display: block;
text-align: right;
}
.poll { border: 1px solid #000; }
.ellipses { padding-right: 1ex; }
URL to your eFiction: http://www.mickiclark.com/efiction33
Version of eFiction: 3.3.1
Have you bridged eFiction, if so with what?: SMF
Version of PHP:
Version of MySQL: MySQL 4.1.14
You'll need to add a width to .tblborder and add margin: auto; to fix it.
π That didn't work. I tried several different widths. It stays centered on Firefox but not in IE7.
Edit to say that I think I will just go into the script itself and center the things I want centered--it'll be easier that way since we know we want it centered on all of our skins. Thanks for taking a look though.
URL to your eFiction: http://www.mickiclark.com/efiction33
Version of eFiction: 3.3.1
Have you bridged eFiction, if so with what?: SMF
Version of PHP:
Version of MySQL: MySQL 4.1.14
