Bottom of text cut off in IE but not Firefox

  • Author
    Posts
  • #126293

    flashkube
    Member

    I have heavily modified the ChaoticSoul theme with custom CSS. While happy with the results, there is one anomaly. If you visit my blog, flashkube.wordpress.com, using IE7 the lower part of the subtitle is cut off. I’m referring to the text “my photographic journey.” In Firefox the text looks fine. Does anyone know why this would be happening? Thanks in advance for any help. The CSS is below:

    body {
    background-color:#000000;
    color:#999;
    font:62.5%/125% ‘Trebuchet MS’, Tahoma, Arial, Helvetica, sans-serif;
    margin:0;
    padding:0;
    }

    .hr {
    background-color:#000000;
    border:0 solid #363430;
    height:10px;
    width:758px;
    margin:10px 0;
    }

    a:link,a:visited,a:active {
    color:#d8d7d3;
    text-decoration:none;
    }

    a:hover {
    color:#fff;
    text-decoration:none;
    }

    a img {
    border:0;
    }

    ul {
    list-style:none;
    }

    input,textarea {
    color:#9c9890;
    font-size:11px;
    text-decoration:none;
    background-color:#000000;
    border:1px solid #363430;
    padding:5px;
    }

    blockquote {
    background:#000000;
    border-bottom:1px solid #35302a;
    padding:1px 15px 5px;
    }

    table {
    width:100%;
    border-collapse:collapse;
    }

    th {
    border-bottom:1px solid #35302a;
    text-align:left;
    }

    pre {
    border-top:1px dotted #35302a;
    border-bottom:1px dotted #35302a;
    padding:5px 0;
    }

    #page {
    width:760px;
    margin:50px auto 25px;
    padding:0;
    }

    #header {
    text-align:left;
    border:1px solid #363430;
    height:75px;
    }

    #wrapper,#headerimg {
    width:760px;
    position:relative;
    }

    #wrapper {
    background:url(‘images/content_bkg.gif’) repeat-y top left;
    }

    #header-overlay {
    background:url(‘images/header_overlay.gif’) no-repeat top left;
    width:760px;
    height:151px;
    z-index:5;
    position:absolute;
    top:0;
    left:0;
    }

    #footer {
    font-family:Georgia, ‘Times New Roman’, serif;
    color:#000000;
    }

    #content,#sidebar {
    border-left:0 solid #363430;
    border-right:0 solid #363430;
    border-top:1px solid #363430;
    overflow:hidden;
    margin:0;
    padding:0 9px;
    }

    #content {
    float:right;
    font-size:1.1em;
    width:593px;
    border-right:1px solid #363430;
    border-left:1px solid #363430;
    }

    #content h2 {
    margin:0 0 10px;
    }

    #content p {
    line-height:1.5em;
    }

    #sidebar {
    border-left:1px solid #363430;
    border-bottom:1px solid #363430;
    float:right;
    width:125px;
    }

    #sidebar h3 {
    color:#bd934f;
    font-variant:small-caps;
    font-size:12px;
    margin:15px 0 5px;
    }

    #sidebar h3 a {
    color:#bd934f;
    }

    #sidebar ul,#akismetwrap {
    border-top:1px solid #363430;
    border-bottom:0 solid #363430;
    margin:0 0 10px;
    padding:0;
    }

    #sidebar li,#akismetwrap {
    display:block;
    background:#000000;
    margin:1px 0;
    padding:4px 10px;
    }

    #sidebar li:hover {
    background:#363430;
    }

    #sidebar ul ul {
    border:0;
    list-style:disc;
    margin:0;
    }

    #sidebar ul ul li:before {
    content:”\2022 20″;
    }

    #sidebar ul ul li {
    margin:0 -10px;
    }

    #searchform {
    background:#000000;
    text-align:center;
    padding:10px;
    }

    #s {
    width:160px;
    }

    .goleft {
    float:left;
    }

    .goright {
    float:right;
    }

    ul.navigation {
    border-top:1px solid #363430;
    border-bottom:1px solid #363430;
    }

    ul.navigation li {
    display:block;
    background:#000000;
    margin:1px 0;
    padding:4px 10px;
    }

    ul.navigation li:hover {
    background:#363430;
    }

    .post {
    padding:10px 0 0;
    }

    .widecolumn .post {
    margin:0;
    padding:0;
    }

    .top {
    background:#000000;
    margin-bottom:15px;
    border-bottom:1px solid #35302a;
    padding:15px 10px 0;
    }

    .lastfive {
    padding-left:10px;
    padding-right:10px;
    border-bottom:1px solid #35302a;
    }

    .postmetadata {
    margin:3px 0;
    padding:0;
    }

    .postmetadata a {
    font-weight:bold;
    }

    #sidebar .postmetadata {
    line-height:1.5em;
    }

    .continue {
    font-weight:bold;
    font-size:1.3em;
    }

    .top .entry {
    font-size:1.1em;
    margin-top:15px;
    }

    .entrytext {
    line-height:2em;
    font-size:1.1em;
    padding:0 10px;
    }

    .entrytext h2 {
    border-bottom:1px solid #bd934f;
    display:block;
    }

    .entry ul,.entrytext ul {
    list-style-type:square;
    }

    .comments {
    margin-top:15px;
    background:#000000;
    border-top:1px solid #35302a;
    position:relative;
    padding:10px;
    }

    #commentform p {
    float:left;
    margin:0 10px 10px 0;
    }

    .commentlist {
    background:#000000;
    list-style:none;
    margin:0;
    padding:0;
    }

    .commentlist li {
    background:#000000;
    margin-top:10px;
    padding:5px 0 0;
    }

    .commentlist li p {
    margin:0;
    padding:5px 10px 0;
    }

    .commentlist li p.commentmetadata {
    border-bottom:1px solid #35302a;
    background:#000000;
    margin-top:10px;
    padding:5px 10px;
    }

    ul.archive {
    list-style:none;
    font-size:1.3em;
    margin:0 10px 25px;
    padding:0;
    }

    ul.archive li {
    display:inline;
    }

    h1,h2,h3,h4,h5,h6 {
    font-family:Georgia, ‘Times New Roman’, serif;
    font-weight:normal;
    }

    h1 {
    text-transform:lowercase;
    color:#fff;
    font-size:3em;
    padding-top:18px;
    padding-left:20px;
    margin:0 0 8px;
    }

    h1:before,h1:after {
    content:””;
    color:#444;
    }

    h1 span {
    color:#bd934f;
    }

    h2 {
    color:#bd934f;
    font-size:1.25em;
    display:inline;
    border-bottom:1px solid #35302a;
    margin:0;
    padding:1px 0;
    }

    .post h2 a {
    color:#bd934f;
    }

    .post h2.first {
    font-size:1.75em;
    }

    .widecolumn h2.title {
    display:block;
    background:#000000;
    border-bottom:1px solid #35302a;
    font-size:1.75em;
    margin:0 0 15px;
    padding:13px 10px;
    }

    .description {
    color:#bd934f;
    font-weight:normal;
    font-size:15px;
    padding-top:5px;
    padding-left:20px;
    }

    .comments h3 {
    color:#bd934f;
    margin:0 0 10px;
    }

    .clearfix:after {
    content:”.”;
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    }

    .clearfix {
    display:block;
    }

    * html .clearfix {
    height:1%;
    }

    #sidebar li.linkcat {
    background-color:#000000;
    list-style:none;
    margin:0;
    padding:0;
    }

    .avatar {
    border:1px solid #35302a;
    float:right;
    margin:-26px 0 0;
    padding:2px;
    }

    .navigation {
    margin-top:10px;
    border-top:1px solid #35302a;
    padding:10px;
    }

    .navigation .left {
    float:left;
    }

    .navigation .right {
    float:right;
    }

    .authormeta {
    border-top:1px solid #35302a;
    font-size:10px;
    padding-top:10px;
    color:#fff;
    font-weight:bold;
    }

    #126394

    atthe404
    Member

    I can not tell you how frustrating it is when people clutter up the forum with their CSS. It is useless. The same people then frequently fail to post a link to the BIQ. :)

    #126395

    raincoaster
    Member

    He didn’t post a link, but he did give the URL:

    http://flashkube.wordpress.com

    #126396

    flashkube
    Member

    that is a very useful response atthe404, thank you. no one could call your reply clutter.

    how can people help if they don’t know what CSS i’m working with?

    #126397

    atthe404
    Member

    Any helper with half a brain in his head can locate your CSS in seconds.

    #126400

    devblog
    Member

    flashkube,

    I’d suggest the following change to your .description class definition:

    .description {
        color:#bd934f;
        font-weight:normal;
        font-size:11pt;
        margin: 10px 0 0 20px;
        padding-bottom: 5px;
    }

    Also, I’d also recommend you not to use pixel units for fonts. Is not good practice. For fonts use em or pt units. Again, this is just a recommendation.

    Try the above code. Hope that’ll help fix your problem.

    #126402

    flashkube
    Member

    thanks devblog. i’ll make sure that i use point sizes for fonts from now on. i replaced my .description snippet with yours and am still having the same problem. i’ve heard that microsoft is notorious for ignoring web standards in IE. i wonder why firefox renders the page perfectly?

    #126405

    devblog
    Member

    hmm, that’s weird. I saved your front page and modified the definition like that and it worked. I’m at home right now and here don’t have IE7. If you don’t mind, tomorrow when I get a chance, I’ll look at your CSS again.

    And yes, IE doesn’t follow standards that well.

    #126438

    atthe404
    Member

    @flashkube. I am sorry you do not like my response but here are some of the issues. Most helpers want to see the problem live. They do not want to rely on someones description of the problem. Nor to see a jpeg of it. They need to see the problem and how it responds in different circumstances. Secondly they are busy people. Hence the best tool to provide them with is a working link.

    Next the CSS. Anyone can access the CSS on any site. So why publish here? Furthermore by publishing it here a whole range of potential errors creep in. Is the OP copying from the site with the problem? Or another maybe local install? Is it a real copy? etc.

    More significantly by using the firepower in Firefox web developers toolkit the helper can test the solution before offering it.

    The fact is that someone who posts their CSS is demonstrating that they haven’t got the first clue how web development works. It is not surprising that they are struggling. :)

    #126449

    devblog
    Member

    More significantly by using the firepower in Firefox web developers toolkit the helper can test the solution before offering it.

    Well, yeah, but the problem here is that it works in Firefox, not in IE7 so, doing something like I did (saving the CSS locally) is the best way to try to fix a problem, and offer a solution; otherwise, and I’m sure you know this, you won’t be able to see how certain elements behave in IE7, like what’s happening to him.

    #126457

    atthe404
    Member

    Well I will. Because I would use the IE tools available. The CSS needs to be altered in something first. That solution is best tested dynamically. Maybe it didn’t sound right. But if the Ops follow the idea they should get better and more timely assistance.

    #126476

    devblog
    Member

    flashkube,

    I looked at your CSS and you’re still using the ‘old’ definition for the .description class. Would you please save the one I gave you? I’d like to see how it looks.

    Thanks.

    #126481

    flashkube
    Member

    it worked devblog. thank you for your help on this! for those of us with less than “half a brain,” kind folks like you are a big help. ; )

    #126482

    devblog
    Member

    Never mind. I must have seen a cached version of the file. The changes are there and it looks good in my IE7….

    EDIT: shoot. You beat me to it. I’m glad to see that it worked! ;)

The topic ‘Bottom of text cut off in IE but not Firefox’ is closed to new replies.