Need help? Check out our Support site, then


MistyLook--Problem applying center rule in Firefox

  1. 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"

  2. 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.

  3. 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.

  4. 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;
    }

  5. you could try a float left in the content selector.

  6. Everything is already floating left. :D

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

  7. 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.

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

  9. adding this: margin:0 0 0 213px; to "body" seemed to fix it in Firefox Mozilla--still checking other browsers.

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

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

  12. That fixed it Vivian...THANK YOU!

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

  13. 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?

  14. 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.

  15. So...I'm trying to figure out might "position:center" might not be working for Firefox for the body or container elements?

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

  17. 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

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

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

  20. 5purposedriven
    Member

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic