Site: http://amalthia.mediawood.net/ebooks/index.php?skin=ebookarchive2
skin name on site: ebookarchive2
Efiction: 3.4.3.
Nature of Problem: I'm modifying blanc and it looks great in Firefox but when I open it in Explorer 7 the sidebar is in it's proper place but the main content window is pushed down so it aligns with the sidebar bottom. I've gone over the css code and I can't figure out what I'm missing or doing wrong. Here are the modifications I've made.
#loginblock .button,BODY {
margin:0
}#loginblock .button,#tabs,BODY {
padding:0
}BODY {
font:14px Verdana;
text-align: left;}
#navigation a:hover, BODY {
color:#00000
}#sortform,#tabs,#sortform,.respond,#pagelinks .jumpmenu,.sectionheader,#alphabet,#pagelinks,#pagetitle,#footer,BODY {
text-align:left
}#container {
width:95%;
margin:auto;
line-height:1.2em
}#tabs span,#container {
font-size:12px
}#header,#mainpage,#container {
text-align:left
}#mainpage {
height:850px;
padding:15px}
html>body #mainpage {
height:auto;
min-height:850px}
.listbox .title a,.sectionheader,#navigation a:link,#navlist a:visited,h1,a {
color:#5c806e
}#alphabet A,#pagelinks A,#navigation a:hover,#navigation a:link,#navlist a:visited,a:hover,a {
text-decoration:none
}.newstitle,#loginblock .button,#profile #sort,.listbox .title,.sectionheader,.adminoptions,.classification,.label,#alphabet #current_letter,#pagelinks #currentpage,#alphabet A,#pagelinks A,#pagetitle,.block .title,a:hover,a {
font-weight:bold
}#tabs A:hover,a:hover {
color:#ccc
}h1 {
font-weight:normal;
font-size:36px;
margin-bottom:30px
}#header {
border-bottom:2px solid #333;
margin-bottom:15px;
margin-top:15px;}
#header p {
margin:-20px 0 5px 20px
}.listbox .title a:hover,#alphabet #current_letter,#pagelinks #currentpage,#pagetitle,#header p {
color:#110000
}#navigation li {
margin-left:0;
padding-left:0;
list-style-type:none
}#prev,#navigation ul {
float:left
}#navigation a,#navigation ul {
width:150px
}#navigation a {
display:block;
padding:5px 0 5px 10px;
border-bottom:1px solid #CCC
}#navigation a:hover {
padding:5px 0 5px 30px
}#next,#sidebar {
float:left
}#menu {
background: #ffffff;
text-align: right;
overflow: auto;
margin-right:20px;
margin-top: 10px;}
#menu a {color: #5c806e;
font-weight: bold;
text-decoration: none;
border-right: 2px solid #336699;
padding-left: 4px;
padding-right: 4px;}
#menu li {display: inline; }
#sidebar {
width:300px;
margin-left:10px;}
.block {
margin-bottom:1.5em;
background:#fff
}.featuredstory {padding-bottom: 12px;}
.recentstory {padding-bottom: 12px;}.block .title {
border-bottom:1px solid #374d42;
padding:2px
}.sectionheader,.block .title {
font-size:14px
}.listbox .title,.block .title {
padding-left:8px
}.block .content {
padding:6px 6px 12px 6px
}#content {
margin-left:480px;
margin-right: 100px;}
#footer {
border-top:2px solid #333;
margin-top:10px;
clear:both;
padding:5px
}.respond,.listbox .content,.tblborder {
padding:6px
}#alphabet A,#pagelinks A,.tblborder {
border-collapse:collapse
}#pagetitle {
font-size:16px;
padding:6px
font-weight:bold;
margin-top:1em;
margin-bottom:1em
}#alphabet,#pagelinks {
word-spacing:.1em
}#sortform,#alphabet,#pagelinks {
margin:1em
}#alphabet A,#pagelinks A {
color:#FFF;
background:#5c806e
}#alphabet #current_letter,#pagelinks #currentpage,#alphabet A,#pagelinks A {
border:1px solid #333;
padding:0 2px
}#alphabet A:hover,#pagelinks A:hover {
background:#ccc
}#tabs #active,.listbox .tail a:hover,#alphabet A:hover,#pagelinks A:hover {
color:#fff
}#alphabet #current_letter,#pagelinks #currentpage {
background:#FFF
}.classification {
color:#79cace
}.adminoptions {
color:#264042
}.sectionheader {
border-bottom:1px solid #264042
}#tabs span,.sectionheader {
padding:3px
}.listbox {
margin:1em 5%;
border:1px solid #000000
}.listbox .title {
border-bottom:1px solid #ccc
}#loginblock,#profile #sort,.listbox .title {
color:#000
}.listbox .tail,.listbox .title {
padding:4px
}.listbox .tail {
border-top:1px solid #ccc
}#titleblock {
margin:0 10%
}#loginblock,#profile #sort,.jumpmenu {
text-align:right
}.jumpmenu {
margin-right:1em
}#output {
padding:10px
}#profile {
margin:1em 10%
}#tabs {
margin:10px
}#tabs #active {
background:#999
}#browse #category_content {
width:95% !important;
margin:1em auto
}#loginblock {
margin:3px 0 0 0
}#loginblock .button {
font-family:"verdana"
}#loginlinks {
display:inline
}.newsbox {
margin-bottom:20px;
border-bottom:1px solid #666
}.newstitle {
font-size:1.1em;
border-bottom:1px dashed #ccc;
margin-bottom:5px
}
I'd appreciate any and all help. I'm not very good with css so I'm at a loss as to what's wrong here with Internet Explorer 7.
If it's any consolation, your page looks perfectly fine in IE8, but I notice if I click the compatibility button in 8 it reverts it to a misaligned mess.
******************************************
Mucking around in eFiction since circa 2001 (ver. 1.0)
Now running v.3
If it's any consolation, your page looks perfectly fine in IE8, but I notice if I click the compatibility button in 8 it reverts it to a misaligned mess.
It is a small consolation but I don't think everyone has upgraded to IE8 yet. 🙁
True, but Microsoft is pushing IE8 down for XP and Vista users. It can't run on Win98 or Win2000 so it's almost a moot point.
******************************************
Mucking around in eFiction since circa 2001 (ver. 1.0)
Now running v.3
True, but Microsoft is pushing IE8 down for XP and Vista users. It can't run on Win98 or Win2000 so it's almost a moot point.
I think what is most frustrating is that I can barely figure out which css applies to different aspects of the page. Right now I'm trying to increase the size of the content on the index page because while on my wide screen it's huge but on my 15 inch screen it's squished together. I get the feeling some codes may be missing all together so I have to add the css myself. But just not sure which ones or where. I'm getting the feeling before I finish with this modification of this skin I'll be asking for more help from the forums.
I hear you... I hate playing in css, especially since Microsoft's browser seldom complies with w3c standards. One usually has to make special notation of IE standards. I have no idea if this will help, but here's what the w3c css validator pulled up for your site.
******************************************
Mucking around in eFiction since circa 2001 (ver. 1.0)
Now running v.3
I hear you... I hate playing in css, especially since Microsoft's browser seldom complies with w3c standards. One usually has to make special notation of IE standards. I have no idea if this will help, but here's what the w3c css validator pulled up for your site.
oh wow this is awesome! I had no clue this tool existed. Will go over the error messages and repair what I can. 🙂 Crosses fingers.
You got lucky. I had the uncompressed file uploaded to my server:
BODY {
margin: 0px;
padding: 0px;
font: 12px Arial;
color: #666;
text-align: center;
}
#container {
width: 95%;
margin: auto;
font-size: 12px;
line-height: 1.2em;
text-align:left;
}
/* Main page surrounds the text between the header and the footer.
For IE, height is set to 650 to force the footer down to the bottom of the page where the content is short.
And the second declaration is for everyone else so that it will scroll if longer but be a minimum of 650px
*/
#mainpage {
height: 650px;
padding: 15px;
text-align: left;
}
html>body #mainpage {
height: auto;
min-height: 650px;
}
a {
color:#5c806e;
text-decoration: none;
font-weight: bold;
}
a:hover {
color:#ccc;
text-decoration: none;
font-weight: bold;
}
h1 {
font-weight: normal;
font-size: 36px;
color: #5c806e;
margin-bottom: 30px;
}
#header {
border-bottom: 2px solid #333;
margin-bottom: 15px;
margin-top: 15px;
text-align:left;
}
#header p {
margin: -20px 0px 5px 20px;
color: #333333;
}
/* left column */
#navigation ul {
margin-left: 0;
padding-left: 0;
list-style-type: none;
float: left;
width: 150px;
}
#navigation a {
display: block;
padding: 5px 0px 5px 10px;
width: 150px;
border-bottom: 1px solid #CCC;
}
#navigation a:link, #navlist a:visited {
color:#5c806e;
text-decoration: none;
}
#navigation a:hover {
color:#666;
text-decoration: none;
padding: 5px 0px 5px 30px;
}
/* right column */
#sidebar {
float: right;
width: 170px;
}
/* The box around the block */
.block {
margin-bottom: 1.5em;
background: #fff;
}
/* The block's title */
.block .title {
border-bottom: 1px solid #374d42;
font-weight: bold;
font-size: 14px;
padding: 2px;
padding-left: 8px;
}
/* The block's content */
.block .content {
padding: 6px 6px 12px 6px;
}
#content {
margin-left: 175px;
margin-right: 185px;
}
#footer {
border-top: 2px solid #333;
margin-top: 10px;
clear: both;
padding: 5px;
text-align:center;
}
/* End universal page setup */
/* this is a carryover from 1.1. Generally it is used around tables and table cells. */
.tblborder {
padding: 6px;
border-collapse: collapse;
}
/* Most pages use pagetitle to format the page's title */
#pagetitle {
text-align: center;
font-size: 16px;
font-weight: bold;
color: #333333;
padding: 6px
font-weight: bold;
margin-top: 1em;
margin-bottom: 1em;
}
/*
Where there's a list of alphabet links #alphabet controls their look.
Just to make things simpler #pagelinks controls the look of the links at the bottom of multi-page results
and will be set here too. Generally, they look alike.
*/
/* the box around the links */
#alphabet, #pagelinks {
text-align: center;
word-spacing: .1em;
margin: 1em;
}
/* each link */
#alphabet A, #pagelinks A {
color: #FFF;
text-decoration: none;
font-weight: bold;
background: #5c806e;
border: 1px solid #333;
border-collapse: collapse;
padding: 0 2px;
}
/* each link when hovered over */
#alphabet A:hover, #pagelinks A:hover {
background: #ccc;
color: #fff;
}
/* the currently selected letter and currently selected page */
#alphabet #current_letter, #pagelinks #currentpage {
background: #FFF;
color: #333;
font-weight: bold;
border: 1px solid #333;
padding: 0 2px;
}
/* End alphabet and page link declarations */
/* labels throughout the site in forms and in other places */
.label{
font-weight: bold;
}
.classification {
font-weight: bold;
color: #79cace;
}
/* Admin options in various places. */
.adminoptions {
color: #264042;
font-weight: bold;
}
/* The listings of stories etc. */
/* .sectionheader styles the headings "Stories" and "Series" */
.sectionheader {
border-bottom: 1px solid #264042;
text-align: center;
font-size: 14px;
font-weight: bold;
padding: 3px;
color: #5c806e;
}
/* The box around each individual story */
.listbox {
margin: 1em 5%;
border: 1px solid #ccc;
}
/* The title bar for each story box. */
.listbox .title {
border-bottom: 1px solid #ccc;
color: #000;
font-weight: bold;
padding: 4px;
padding-left: 8px;
}
.listbox .title a {color:#5c806e;}
.listbox .title a:hover {color:#333;}
/* The content of the box...summary, categories, etc. */
.listbox .content {
padding: 6px;
}
/* The tail info published date etc. on the last line */
.listbox .tail {
padding: 4px;
border-top: 1px solid #ccc;
}
.listbox .tail a:hover {color: #fff}
}
/*End story/series listings */
/* titleblock is used for the title information in series and challenges */
#titleblock {
margin: 0 10%;
}
/* The pulldown jump menus on several pages. */
.jumpmenu {
text-align: right;
margin-right: 1em;
}
/* On the story page, there's a jumpmenu at the bottom. It looks better centered, so this will replace the declaration above for that
drop down list ONLY */
#pagelinks .jumpmenu {
text-align: center;
}
/* This is used on series and challenges and other places where a response is solicited */
.respond {
text-align: center;
padding: 6px;
}
/* The sort menu on the categories page */
#sortform { text-align: center; margin: 1em; }
/* On pages that don't use listings, the content is surrounded by a div labeled output to */
#output {
padding: 10px;
}
/* User Profile stuff */
/* The top list of information */
#profile {
margin: 1em 10%;
}
/* The sort menu in the profile */
#profile #sort {
text-align: right;
font-weight: bold;
color: #000;
}
/* The following declarations control the tabs */
/* The outer tab box */
#tabs {
text-align: center;
margin:10px;
padding: 0;
}
/* The individual tabs. */
#tabs span {
font-size: 12px;
padding: 3px;
}
/* Links in the tabs */
#tabs #active {
background: #999;
color: #fff;
}
#tabs A:hover{color:#ccc;}
/* This controls the look of the blocks on the index page. */
/* The next link at the bottom of a multi-chapter story */
#next { float: right; }
/* The previous link at the bottom of a multi-chapter story */
#prev { float: left; }
#browse #category_content { width: 95% !important; margin: 1em auto; }
#loginblock {
margin: 3px 0 0 0;
text-align: right;
color: #000;
}
#loginblock .textbox, #loginblock .checkbox {
}
#loginblock .button {
padding: 0;
margin: 0;
font-weight: bold;
font-family: "Arial";
}
#loginlinks {
display: inline;
}
#sortform {text-align: center;}
.newsbox {margin-bottom: 20px; border-bottom: 1px solid #666;}
.newstitle {font-weight: bold; font-size: 1.1em; border-bottom: 1px dashed #ccc; margin-bottom: 5px;}
Blanc is not a mod-friendly skin. If you're a true css novice, I do have some tutorialized skin you can try playing around with.
Skins made by Kali are no longer supported!
You got lucky. I had the uncompressed file uploaded to my server:
thanks so much for finding this for me!
No problem. I do admit to not being on the board that much, so if you need a specific question answered it's usually faster to just e-mail me directly.
Skins made by Kali are no longer supported!
