MistyLook–Problem applying center rule in Firefox

  • Author
    Posts
  • #245042

    doricook
    Member

    I used the CSS upgrade to alter MistyLook. The whole blog is cenetered using Internet Explorer. The blog looks left justified using Firefox. Any thoughts from those who know?

    I can get it fixed by clicking “apply to theme” instead of “use only the new code”. However, then I use some font color over-rides desired. I need another route to centering.

    The blog I’m working with is: “doricook.wordpress.com”

    #245164

    boblets
    Member

    to be honest – it it usually Internet Explorer that is off. It look the same in firefox, opera and safari. I cannot access your stylesheet, so I don’t know what’s going on. How did you get it centered in IE?
    And yes, please leave a complete link next time – it’s easier for people passing by to click a link than having to cut an paste to see your blog.

    #245166

    ellaella
    Member

    I looked at it in IE7 and FF3. In FF, it’s not the entire blog that’s off to the left; your page tabs at the top are still centered. I changed Misty extensively last year and never gave a thought to centering. It just wasn’t an issue.

    I don’t know if that helps you at all — probably not — or whether the fact that your background images are in photobucket, not your wordpress space, has anything to do with it.

    In my experience, it’s not usually IE that’s “off.” IE6 and FF2.x have had problems equally. IE7 and FF3 not so much. But the bottom line is, it looks fine right now in 7 and not in 3. I hope one of the CSS experts comes along. I’d love to know the problem and solution.

    #245167

    doricook
    Member

    1. Sorry, “Boblets”, I’d love to be able to edit my own post after I realized I’d forgotten the www. Firefox doesn’t automatically convert links when the www. is added, so it’s easier to forget in typing.

    Aside and unrelated: Dori is not posting, it’s Maggie (www.5purposedriven.wordpress.com)– working on her account. (Arg. Would love a prompt to remind me when I’m not myself).

    2. I don’t know how I got it centered in IE…if I did, that would help.

    3.

    * {
    margin:0;
    padding:0;
    }

    p {
    line-height:1.6em;
    margin:0.7em 0;
    }

    Fsea
    dl {
    margin:1em 0;
    }

    dt {
    font-weight:bold;
    }

    dd {
    margin:0.5em;
    padding:0;
    }

    .entry img {
    background:url(‘img/shadow.gif’) no-repeat right bottom;
    border:none;
    border-top:#eee 1px solid;
    border-left:#eee 1px solid;
    padding:4px 10px 10px 4px;
    }

    .entry a img {
    border:none;
    background:url(‘img/shadow.gif’) no-repeat right bottom;
    border-top:#eee 1px solid;
    border-left:#eee 1px solid;
    padding:4px 10px 10px 4px;
    }

    .entry .wp-smiley,#wpstats {
    background:none;
    border:0;
    padding:0;
    }

    .clear {
    clear:both;
    height:20px;
    }

    blockquote {
    color:#84794a;
    margin:1em;
    padding:0 0 10px 50px;
    }

    fieldset {
    border:none;
    }

    body {
    background:url(‘http://i200.photobucket.com/albums/aa146/Magnanimity/stripe-2.gif’) repeat;
    font:76%/1.6em verdana, tahoma, arial, sans-serif;
    color:#6c5d35;
    text-align:center;
    margin:0;
    }

    a {
    text-decoration:none;
    font-style:small-caps;
    color:#85794e;
    }

    FF
    a:link,a:visited {
    color:#85794e;
    }

    a:hover,a:active {
    color:#b8b373;
    border-bottom:#514257 1px solid;
    }

    h1,h2,h3,h4,h5,h6 {
    font-family:Georgia, Verdana, Arial, Serif;
    color:#6c5d35;
    }

    #container {
    border:#7b7521 45px solid;
    background:#fff;
    width:780px;
    position:relative;
    text-align:left;
    }

    #navigation {
    background:transparent;
    overflow:hidden;
    width:760px;
    position:relative;
    text-align:left;
    font-family:Trebuchet MS,Tahoma, Verdana, Arial, Serif;
    letter-spacing:1px;
    margin:20px auto 0;
    }

    html #navigation {
    height:1%;
    }

    #navigation ul li {
    float:left;
    list-style-type:none;
    margin:0 5px 0 0;
    }

    #navigation ul li a {
    border:#7b7521 2px solid;
    border-bottom:none;
    display:block;
    font-weight:bold;
    color:#6f5e4d;
    text-decoration:none;
    background:#fffff4;
    padding:2px 10px;
    }

    #navigation ul li a:hover,#navigation ul li a:active,#navigation ul li.current_page_item a {
    background:#transparent;
    color:#7b7521;
    border:#7b7521 2px solid;
    border-bottom:none;
    }

    #navigation ul li.search {
    font-size:0.9em;
    position:relative;
    top:0;
    }

    #navigation ul li.search input#searchsubmit {
    border:#7b7521 2px solid;
    font-size:0.9em;
    background:#ffffff;
    color:#7b7521;
    margin:0 2px;
    padding:2px;
    }

    #header {
    clear:both;
    float:left;
    width:450px;
    margin:10px 5px;
    }

    #header h1 {
    font-size:1.8em;
    font-variant:small-caps;
    letter-spacing:1px;
    color:#85794e;
    margin:10px 0 0 10px;
    }

    #header h1 a {
    text-decoration:none;
    border:none;
    }

    #header h2 {
    font-size:1em;
    font-weight:normal;
    font-family:Tahoma, Verdana, Arial, Serif;
    letter-spacing:1px;
    margin:5px 0 0 10px;
    }

    #feedarea {
    float:right;
    text-align:right;
    color:#85794e;
    padding:10px 10px 0 0;
    }

    html #feedarea {
    padding-top:10px;
    }

    #feedarea dl dt {
    display:inline;
    margin-right:5px;
    height:45px;
    }

    #feedarea dl dd {
    display:inline;
    margin-right:5px;
    height:45px;
    background:url(‘img/icon_feed.gif’) no-repeat left center;
    padding-left:16px;
    color:#85794e;
    }

    #headerimage {
    clear:both;
    background:#fff url(‘http://i200.photobucket.com/albums/aa146/Magnanimity/tulips-brown-2.gif’) no-repeat;
    color:#fff;
    height:200px;
    margin:10px;
    }

    html #headerimage {
    margin-top:0;
    }

    #content {
    margin:10px 10px 10px 30px;
    }

    html #content {
    height:1%;
    }

    #content h3 {
    font-size:1.4em;
    font-weight:normal;
    color:#6c5d35;
    margin:1em 0 0;
    }

    #content h4 {
    font-size:1.1em;
    color:#594b27;
    margin:1em 0 0;
    }

    #content h5 {
    font-size:1em;
    margin:1em 0;
    }

    #content-main ul {
    list-style-image:url(‘img/bullet.png’);
    margin:1em;
    padding:0 1em;
    }

    #content-main ul.asides {
    border-bottom:#ddd 1px dashed;
    margin:0;
    padding:2em;
    }

    #content ol {
    list-style-type:decimal;
    margin:2em;
    padding:0 2em;
    }

    #content-main {
    float:left;
    width:520px;
    margin-right:20px;
    overflow:hidden;
    }

    html #section-index #content-main {
    margin-right:20px;
    }

    #content .post {
    border-bottom:#ddd 1px dashed;
    padding:0 0 2em;
    }

    #content p img.right {
    float:right;
    margin:10px 0 0 10px;
    }

    #content p img.left {
    float:left;
    margin:0 10px 10px 0;
    }

    #content .post h2 {
    font-size:1.4em;
    letter-spacing:1px;
    color:#6c5d35;
    margin:1em 0 0;
    }

    #content .entry {
    padding-right:1em;
    margin:1em 0;
    }

    #content .entry a:link,#content .entry a:visited {
    border-bottom:#963 1px dashed;
    }

    #content .entry a:hover,#content .entry a:active {
    border-bottom:#963 1px solid;
    }

    #content .post-info,#content .postmetadata {
    font-size:0.9em;
    color:#6c5d35;
    margin:0;
    padding:0;
    }

    #content .post-info {
    background:url(‘img/underline1.jpg’) no-repeat left bottom;
    padding-bottom:12px;
    }

    #sidebar {
    float:left;
    width:200px;
    font-size:0.9em;
    overflow:hidden;
    color:#85794e;
    }

    #sidebar ul {
    list-style:bold;
    color:#85794e;
    margin:0;
    padding:0;
    }

    #sidebar ul ul {
    list-style:none;
    color:#85794e;
    margin:0.5em 0 0 1em;
    }

    #sidebar ul ul ul {
    margin:0 0 0 1em;
    }

    li.sidebox {
    background:#ffffff no-repeat left top;
    margin-bottom:10px;
    padding:10px;
    }

    html li.sidebox {
    padding-bottom:10px;
    }

    li.sidebox h2 {
    font-weight:normal;
    font-size:1.6em;
    text-align:left;
    color:#85794e;
    font-variant:small-caps;
    }

    #sidebar li.sidebox p img {
    border:#ccc 1px solid;
    background:none;
    margin:0;
    padding:3px;
    }

    #footer {
    clear:both;
    background:transparent;
    width:760px;
    text-align:left;
    margin:0 auto;
    }

    html #footer {
    height:1%;
    }

    #footer p {
    float:left;
    width:50%;
    line-height:1.2em;
    }

    #footer p.right {
    float:right;
    width:50%;
    text-align:right;
    font-size:0.9em;
    color:#999;
    margin:1em 0;
    }

    #comments,#respond {
    margin:2em 0 10px 5px;
    }

    #commentform {
    background:#f9fcfc;
    border-top:#ddd 1px solid;
    border-bottom:#ddd 1px solid;
    margin:10px 0;
    padding:10px;
    }

    .commentnum {
    font-size:1.5em;
    font-weight:bold;
    margin:0 5px 0 0;
    }

    #container .commentlist {
    border-top:#ddd 1px solid;
    margin:0;
    padding:0;
    }

    .commentlist li {
    list-style:none;
    background:#fff url(‘img/shadow_top.gif’) repeat-x top;
    border-bottom:#ddd 1px solid;
    margin:0;
    padding:0.5em;
    }

    .commentlist li.alt {
    background:#f9f9f9;
    }

    .commentlist li .cmtinfo {
    font-size:1em;
    }

    .commentlist li cite {
    font-style:normal;
    font-weight:bold;
    }

    .commentlist li .cmtinfo em {
    float:right;
    font-style:normal;
    font-size:0.9em;
    color:#999;
    margin:0;
    padding:0;
    }

    #content .commentsfeed {
    background:url(‘img/icon_feed.gif’) no-repeat left center;
    padding-left:16px;
    }

    #content .trackback {
    background:url(‘img/link.gif’) no-repeat left center;
    padding-left:20px;
    }

    input.textbox {
    border:#ccc 1px solid;
    background:#fff url(‘img/shadow_top.gif’) repeat-x top;
    font:1em Verdana, Arial, Serif;
    width:150px;
    padding:2px;
    }

    textarea {
    width:80%;
    line-height:2em;
    height:20em;
    border:1px solid #ccc;
    background:#fff url(‘img/shadow_top.gif’) repeat-x top;
    font:1em Verdana, Arial, Serif;
    padding:10px;
    }

    .textbox:focus,textarea:focus {
    background:#fff url(‘img/shadow_top.gif’) repeat-x top;
    border:#999 1px solid;
    }

    .post h4 {
    font-size:1em;
    font-weight:small-caps;
    font-family:Verdana, Tahoma, Arial, Serif;
    }

    .post h4 em {
    font-style:small-caps;
    float:right;
    font-weight:normal;
    }

    #header,#content,#sidebar,#footer,.widget,.entry {
    overflow:hidden;
    }

    .avatar {
    float:right;
    margin-left:5px;
    }

    .navigation {
    clear:both;
    }

    .alignleft {
    float:left;
    }

    .alignright {
    float:right;
    }

    #245171

    boblets
    Member

    you could try a float left in the content selector.

    #245172

    doricook
    Member

    Everything is already floating left. :D

    I’m wanting the content to center on the striped background, both the header and the page content.

    #245173

    doricook
    Member

    Perhaps more clearly, the issue doesn’t seem to have to do with the content (text)–it’s spaced fine. It’s the entire body and header I want centered.

    #245174

    vivianpaige
    Member

    Have you tried position:center in the #container element?

    #245175

    doricook
    Member

    adding this: margin:0 0 0 213px; to “body” seemed to fix it in Firefox Mozilla–still checking other browsers.

    #245176

    doricook
    Member

    Thanks, VivianPaige. I may need that as well before I’m finished!

    #245177

    doricook
    Member

    Yeah, it’s moving it too far to the right in IE…I’ll give this a try, Vivian.

    #245178

    doricook
    Member

    That fixed it Vivian…THANK YOU!

    –Maggie
    http://www.5purposedriven.wordpress.com
    (sorry to have to use your account, Dori!)

    #245180

    doricook
    Member

    Well, goodness, now it seems the tabs have separated from the top of the header, where they weren’t before. It’s always something, isn’t it?

    #245181

    doricook
    Member

    NO GO.

    Actually, the position: center code DIDN’T seem to work for Firefox after all. I thought it had.

    So, now I have two problems to tackle, DETACHED TABS, AND UNCENTERED CONTAINER IN FIREFOX. If anyone is game for company on it, I’m still chomping on it.

    #245182

    doricook
    Member

    So…I’m trying to figure out might “position:center” might not be working for Firefox for the body or container elements?

    #245184

    boblets
    Member

    you have/had position relative for the content.
    You could try
    margin-left: auto;
    margin-right: auto

    #245187

    boblets
    Member
    Centering a div or any other block-level element horizontally is a special case for CSS layout, even moreso because there is a bug in Internet Explorer’s implementation of the standard way of doing it. The standard way is to set the element’s horizontal margin values to auto, like so:
    
    #wrapper {width: 760px; margin: 0 auto; }

    from here: http://www.yourhtmlsource.com/stylesheets/csslayout.html

    #245188

    vivianpaige
    Member

    Sorry it didn’t work. Maybe one of the CSS gurus will come around here.

    #245189

    vivianpaige
    Member

    I was wondering if it needed to go in the wrapper.

    #245480

    So, am I reading that correctly? Is the above stating that the standard way for CSS to center is to set the margin to “auto”?

    All the other language in CSS seems so clear…

    But, I’ll try anything and report back.

The topic ‘MistyLook–Problem applying center rule in Firefox’ is closed to new replies.