WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [DESPERATION] Huge white space on IE7 (5 posts)

  1. TioBOB
    Member
    Posted 5 years ago #

    Something EXTREMELY ANNOYING and quite weird is happening on my comic-strip website! Everything looks great on Firefox and Chrome, but on IE7 the posts that has text looks distorted by a HUGE WHITE SPACE between the first line and the title of the topic. Sometimes, some of the posts that has only images also happen do be distorted by this white space (but only rarely and it seems random), the problem reside mostly on text-oriented posts.

    I'm aware that older versions of IE had problems doubling the margin of float elements, and that's why I use the "display: inline" trick in every float element in my layout. I think the problem here seems to be SOMEWHAT similar, because whenever I "un-float" the elements above the post body, the white gap almost vanishes (though it still remains a little bigger on IE).

    Pages with some text-oriented posts:
    http://www.nacascadoovo.com.br/page/4/
    http://www.nacascadoovo.com.br/page/2/

    * See the unexplainable huge white gap?

    I hope someone can help me... I've been trying to work this out by myself for 13h straight!

  2. TioBOB
    Member
    Posted 5 years ago #

    No one?

  3. darrinb
    Member
    Posted 5 years ago #

    The paragraphs (<p>) inside your <div class="entry"> don't have implicit margins set, so the browsers are setting default margins. Whereas your posts that have comic strips in them, these comic strips aren't wrapped in <p> tags, so, no margins.

    You could try something like this in your CSS file. (style.css):

    .entry p {
      margin-top: 0;
    }
  4. TioBOB
    Member
    Posted 5 years ago #

    WOW. It worked like a charm.

    Thank's a lot.

  5. tampaempire
    Member
    Posted 4 years ago #

    I am not sure where to put this in the style.css. Below is a copy of my css. Please help! Thank you in advance.

    /*
    Theme Name: I-Blues
    Description: Designed by Web Top
    Author: Web Top
    � 2008, Web Top. All rights reserved.
    */

    /*
    * Default HTML tags
    */
    a {
    color: #181818;
    }

    a:visited {
    color: #181818;
    text-decoration: underline;
    }

    a:hover {
    color: #181818;
    }

    acronym, abbr {
    cursor: help;
    }

    blockquote {
    margin-left: 10px;
    padding-left: 10px;
    border-left: 5px solid #01bcf3;
    }

    body {
    background: #02b9f1 url("images/body-bg.jpg") repeat-x top;
    color: #282828;
    font-size: 60.5%;
    font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
    margin: 0px auto;
    padding: 0px;
    text-align: center;
    }

    cite {
    font-size: 90%;
    font-style: normal;
    }

    h2 {
    font-size: 12px;
    margin: 15px 0 3px 0;
    font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
    font-weight: bold;
    color: #181818;
    }

    h2 a,
    h2 a:visited,
    h2 a:hover,
    h2 a:visited:hover {
    text-decoration: none;
    color: #181818;
    padding: 5px 13px 5px 3px;
    }
    h3 {
    font-size: 12px;
    margin: 28px 0 5px 0;
    padding: 4px 0 4px 0;
    font-weight: bold;
    color: #181818;
    background: #e8f6fd;
    text-align: center;
    border-top: 1px solid #b6e4fb;
    border-bottom: 1px solid #b6e4fb;
    }

    h4 {
    font-size: 12px;
    margin: 10px 0 10px 0;
    font-weight: bold;
    color: #181818;
    background: url("images/leftmenu-top.jpg");
    height: 20px;
    text-align: center;
    }

    h4 a,
    h4 a:visited,
    h4 a:hover,
    h4 a:visited:hover {
    text-decoration: none;
    color: #181818;
    }

    h5 {
    font-size: 12px;
    margin: 10px 0 10px 0;
    padding: 6px 0 8px 0;
    font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
    font-weight: bold;
    color: #181818;
    background: url("images/menu-right-title-bg.png");
    width: 301px;
    text-align: center;
    }

    h5 a,
    h5 a:visited,
    h5 a:hover,
    h5 a:visited:hover {
    text-decoration: none;
    color: #181818;
    }

    #content img {
    padding: 3px;
    border: #b6e4fb 1px solid;
    background: #fefefe;
    margin-right: 5px;
    margin-left: 3px;
    }

    #content img.alignleft {
    float: left;
    margin: 3px 3px 3px 0px;
    }

    #content img.alignright {
    float: right;
    margin: 3px 0px 3px 3px;
    }

    li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }

    ol#comments li p {
    font-size: 100%;
    }

    ul {
    margin: 0;
    padding: 0;
    }

    /* Link to the comments */
    .feedback {
    color: #181818;
    font-weight: bold;
    font-size: 11px;
    background: #d3edfa;
    text-align: right;
    padding: 4px 10px 6px 0px;
    clear: both;
    text-transform: lowercase;
    border-bottom: 1px solid #b6e4fb;
    border-left: 1px solid #b6e4fb;
    border-right: 1px solid #b6e4fb;
    }

    .feedback a, .feedback a:visited { color: #008ed0;
    text-decoration: none;
    }
    .feedback a:hover, .feedback a:visited:hover { color: #181818;
    text-decoration: none;
    }

    /* The post informations */
    .meta {
    font-size: 11px;

    }

    .meta li,
    ul.post-meta li {
    display: inline;
    }

    .meta ul {
    display: inline;
    list-style: none;
    margin: 0;
    padding: 0;
    }

    .meta a {
    color: #181818;
    text-transform: lowercase;
    text-decoration: none;

    }
    .meta a:hover {

    text-decoration: underline;
    }
    .meta {
    color: #181818;
    background: #d3edfa;
    padding: 5px 5px 5px 5px;
    font-weight: normal;
    letter-spacing: 0;
    border-top: 1px solid #b6e4fb;
    border-left: 1px solid #b6e4fb;
    border-right: 1px solid #b6e4fb;
    }

    .storycontent {
    font-size: 115%;
    background: #f4fbfe;
    padding: 10px;
    border: 1px solid #b6e4fb;
    }

    /* Comment form design */
    #commentform #author,
    #commentform #email,
    #commentform #url,
    #commentform textarea {
    background: #ffffff;
    border: 1px solid #b6e4fb;
    color: #282828;
    }

    #commentform textarea {
    width: 95%;
    }

    #commentlist li ul {
    border-left: 1px solid #830000;
    font-size: 110%;
    }

    ol#commentlist li {
    list-style: decimal;
    }
    #content {
    float: left;
    width: 651px;
    margin: 0px 10px 0px 10px;
    text-align: left;
    display: inline;
    }

    #content ol li {
    list-style: decimal;
    }

    #content ul {
    margin-top: 10px;
    margin-left: 35px;
    }

    #content ul li {
    list-style-image: none;
    }

    #content-big {
    float: left;
    width: 651px;
    margin: 0px 10px 0px 10px;
    text-align: justify;
    display: inline;
    }

    .spacer { padding: 0px;
    text-align: right;
    clear: both;
    text-transform: lowercase;
    padding-top: 5px;
    }

    #header {
    font-size: 32px;
    font-weight: bold;
    text-decoration:none;
    font-family: Verdana;
    margin: 0px auto;
    height: 284px;
    width: 1000px;
    padding: 0;
    background: url("images/header.jpg") no-repeat;
    }

    .header-title {
    font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
    color:#ffffff;
    font-size:26px;
    font-weight:bold;
    padding: 90px 0 0 198px;
    text-align:left;
    }
    .header-title a{
    color:#ffffff;
    text-decoration:none;
    border-bottom:none;
    }
    .header-title a:hover{
    color:#ffffff;
    text-decoration:none;
    border-bottom:none;
    }
    .header-description {
    font-size: 11px;
    font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
    font-weight: normal;
    color:#ffffff;
    padding: 1px 0 0 199px;
    text-align:left;
    }

    Top part CSS
    */
    #top {
    width: 1000px;
    height: 34px;
    margin: 0px auto;
    }

    #topleft {
    float: left;
    height: 34px;
    padding-left: 0px;
    }

    #topright {
    float: right;
    height: 34px;
    padding-right: 10px;
    }

    Page navigation CSS
    */
    #menu {
    float: left;
    height: 32px;
    padding-top: 1px;
    padding-bottom: 1px;
    border-left: 1px solid #b6e4fb;
    z-index: 20;
    }

    #menu li {
    float: left;
    display: block;
    height: 32px;
    border-right: 1px solid #b6e4fb;
    }

    #menu li ul li {
    height: 24px;
    border-right: 0;
    border-bottom: 1px solid #b6e4fb;
    width: 100%;
    }

    #menu li a {
    display: block;
    padding-left: 15px;
    padding-right: 15px;
    line-height: 32px;
    font-size: 11px;
    font-weight: bold;
    color: #008ed0;
    text-decoration: none;
    font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
    }

    #menu li a:hover {
    background: url(images/menuhover.gif) repeat-x;
    color: #01bcf3;
    }

    #menu li.current_page_item a {
    background: #FFF;
    color: #01bcf3;

    }

    #menu li.current_page_item a:hover {
    background: #FFF;
    color: #01bcf3;
    }

    #menu ul {
    display: none;
    z-index: 99;
    position: absolute;
    }

    #menu ul li a {
    display: block;
    background: #FFF;
    }

    #menu li ul a:hover {
    display: block;
    background: #FFF;
    }

    #menu ul a {
    display: block;
    }

    #menu ul ul {
    margin-top: -27px;
    display: none;
    margin-left: 198px;
    position: absolute;
    border-left: 1px solid #b6e4fb;
    border-right: 1px solid #b6e4fb;
    }

    #menu li:hover ul ul {
    display: none;
    }
    #menu li:hover ul {
    display: block;
    }
    #menu ul li:hover ul {
    display: block;
    }
    #menu li ul li {
    display: block;
    width: 100%;
    }

    #menu li.page_item ul {
    border-top: 2px solid #b6e4fb;
    width: 200px;
    }

    #menu li.page_item a {
    display: block;
    }

    #menu li.page_item a:hover {
    display: block;
    }

    #menu li.page_item ul li a {
    display: block;
    text-align: left;
    height: 24px;
    line-height: 24px;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
    background: #fff;
    padding-left: 15px;
    padding-right: 15px;
    text-transform: uppercase;
    font-size: 0.7em;
    font-weight: bold;
    color: #333;
    text-decoration: none;
    }

    #menu li.page_item ul li a:hover {
    display: block;
    text-align: left;
    height: 24px;
    line-height: 24px;
    border-right: 1px solid #b6e4fb;
    border-left: 1px solid #b6e4fb;
    background: #FFF;
    padding-left: 15px;
    padding-right: 15px;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: bold;
    color: #333;
    }

    /*
    Search form CSS
    */
    .searchform {
    display: inline;
    }

    .searchform fieldset {
    display: inline;
    margin-top: 1px;
    padding-top: 4px;
    border: #34c3f3 0px solid;
    }

    .searchform label {
    vertical-align: middle;
    display: inline;
    margin-right: 5px;
    font-size: 11px;
    color: #01bcf3;
    font-weight: bold;
    }

    .searchform input {
    vertical-align: middle;
    display: inline;
    font-size: 11px;
    }

    .searchinput {
    background: #FFF;
    border: 1px solid #b6e4fb;
    width: 184px;
    padding-top: 3px;
    padding-bottom: 3px;
    color: #282828;
    }

    .searchbutton {
    background: url(images/searchbutton.gif) no-repeat;
    width: 16px;
    height: 16px;
    margin-bottom: 2px;
    text-transform: uppercase;
    cursor: pointer;
    color: #FFF;
    font-weight: bold;
    border: 0px solid #b6e4fb;
    }

    /*
    Main Category Menu CSS
    */
    #category {
    width: 1000px;
    height: 30px;
    background: url(images/categoryright.gif) repeat-x;
    border-top: 1px solid #b6e4fb;
    border-bottom: 1px solid #b6e4fb;
    }

    #categoryx {
    float: left;
    width: 965px;
    height: 30px;
    padding-left: 10px;
    }

    #categoryy {
    float: right;
    width: 5px;
    height: 30px;
    }

    #dcategory {
    float: left;
    height: 30px;
    border-left: 1px solid #b6e4fb;
    z-index: 20;
    }

    #dcategory li {
    float: left;
    display: block;
    height: 30px;
    border-right: 1px solid #b6e4fb;
    }

    #dcategory li ul li {
    height: 24px;
    border-right: 0;
    border-bottom: 1px solid #b6e4fb;
    width: 100%;
    }

    #dcategory li a {
    display: block;
    line-height: 30px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 11px;
    color: #008ed0;
    font-weight: bold;
    text-decoration: none;
    font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
    }

    #dcategory li a:hover {
    background: url(images/categoryhover.gif) repeat-x;
    color: #01bcf3;
    }

    #dcategory ul {
    display: none;
    z-index: 99;
    position: absolute;
    }

    #dcategory ul li a {
    display: block;
    background: #FFF;
    }

    #dcategory li ul a:hover {
    display: block;
    background: #FFF;
    }

    #dcategory ul a {
    display: block;
    }

    #dcategory ul ul {
    margin-top: -26px;
    display: none;
    margin-left: 200px;
    position: absolute;
    border-left: 1px solid #b6e4fb;
    border-right: 1px solid #b6e4fb;
    }

    #dcategory li:hover ul ul {
    display: none;
    }

    #dcategory li:hover ul {
    display: block;
    }

    #dcategory ul li:hover ul {
    display: block;
    }

    #dcategory li ul li {
    display: block;
    width:100%;
    }

    #dcategory li.cat-item ul {
    width: 260px;
    }

    #dcategory li.cat-item a {
    display: block;
    }

    #dcategory li.cat-item a:hover {
    display: block;
    }

    #dcategory li.cat-item ul li a {
    display: block;
    margin-left: -1px;
    text-align: left;
    font-size: 11px;
    height: 24px;
    line-height: 24px;
    padding-left: 15px;
    padding-right: 15px;
    color: #008ed0;
    font-weight: bold;
    border: 1px solid #b6e4fb;
    font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
    background: url(images/categoryhover.gif) repeat-x;
    }

    #dcategory li.cat-item ul li a:hover {
    display: block;
    text-align: left;
    font-size: 11px;
    height: 24px;
    line-height: 24px;
    padding-left: 15px;
    padding-right: 15px;
    color: #282828;
    font-weight: bold;
    background: #b6e4fb;
    border: 1px solid #b6e4fb;
    background: url(images/categoryright.gif) repeat-x;
    }
    /*

    /* The credits at the bottom of the site */
    #credit {

    width: 1000px;
    height: 32px;
    background: url("images/credit.jpg");
    text-align: center;
    font-size: 11px;
    font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    clear: both;
    }

    #credit a, #credit a:visited {
    color: #282828;
    text-decoration: none;
    }
    #credit a:hover, #credit a:visited:hover {
    color: #282828;
    text-decoration: none;
    }

    #credit p {
    color: #282828;
    text-align: center;
    padding-top: 10px;
    font-weight: bold;
    }
    /*
    Subscribe RSS Form
    */
    .subscribe {
    width: 294px;
    }

    .subscribe fieldset {
    display: inline;
    margin-bottom: 10px;
    border: 1px dotted #f4fbfe;
    width: 270px;
    }

    .subscribe input {
    display: inline;
    vertical-align: middle;
    }

    .feedinput {
    border: 1px solid #b6e4fb;
    width: 184px;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
    color: #282828;
    font-size: 11px;
    }

    .feedinput:focus {
    background: #ffffff;
    border: 1px dotted #b6e4fb;
    }

    .feedsubmit {
    background: url(images/feedsubmit.gif) no-repeat;
    font-size: 11px;
    font-weight: bold;
    width: 44px;
    height: 21px;
    color: #fff;
    cursor: pointer;
    border: 0px dotted #b6e4fb;
    }

    .feedlink {
    background: url(images/rss.gif) no-repeat left;
    padding-bottom: 2px;
    padding-left: 20px;
    font-weight: bold;
    font-size: 11px;
    margin-right: 10px;
    }

    /*
    * right sidebar
    */
    #menu-right {
    float: right;
    display: inline;
    width: 301px;
    margin: 10px 10px 10px 0px;
    font-size: 11px;
    padding: 0px 8px 18px 8px;
    border: 1px solid #b6e4fb;
    background: #fefefe;
    }

    #menu-right h2 {
    font-size: 18px;
    margin: 8px 0 2px 0;
    font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
    font-weight: bold;
    color: #01bcf3;
    }

    #menu-right a,
    #menu-right a:visited {
    text-transform: lowercase;
    text-decoration: none;
    color: #181818;
    }

    #menu-right a:hover,
    #menu-right a:visited:hover {
    text-transform: lowercase;
    text-decoration: underline;
    color: #181818;
    }

    #menu-right ul ul {
    margin-left: 12px;
    }

    #menu-right ul ul li {
    list-style-image: url("images/menu-right-icon.png");
    margin-left: 8px;
    }

    .box {
    background: #f4fbfe;
    padding: 10px;
    border: 1px solid #b6e4fb;
    }

    .box p {
    font-size: 1.0em;
    line-height: 1.3em;
    color: #282828;
    margin: 0px 0px 7px 0px;
    }

    .postbox {
    margin-bottom: 10px;
    background: #FFF;
    padding: 10px;
    border: 1px solid #b6e4fb;
    }

    .postbox p {
    font-size: 1.0em;
    line-height: 1.3em;
    text-align: justify;
    margin: 0;
    color: #666;
    }

    #adcontainer {
    padding: 0px 0 0 0;
    margin:0;
    width: 300px;
    }

    #adboxes{
    padding: 13px 0 14px 0px;
    width:300px;
    background: #1b8adc url(images/adcontainer_bg.jpg) top repeat-x;
    float:left;
    position: relative;
    }
    #adboxes ul {
    margin: 0;
    padding: 0;
    list-style: none;
    padding-left: 15px;
    }
    #adboxes ul li {
    display:block;
    margin: 2px 4px 0px 0px !important;
    padding: 0px !important;
    float:left;
    list-style: none;
    }

    .clear {
    clear: both;
    margin: 0;
    padding: 0;
    }

    #menu-right img {
    padding: 3px;
    border: #b6e4fb 1px solid;
    background: #ffffff;
    }

    #menu-right img.alignleft {
    float: left;
    margin: 3px 3px 3px 0;
    }

    #menu-right img.alignright {
    float: right;
    margin: 0 3px 3px 3px;
    }

    /* End of right sidebar */

    #rap {
    width: 1000px;
    margin: 0px auto;
    background: url("images/rap-bg.jpg") repeat-y;
    text-align: left;
    padding: 0px;
    border-left: 1px solid #02b9f1;
    border-right: 1px solid #02b9f1;
    }

    .submit_button {
    float: left;
    padding:0; margin:0;
    border:0;
    height:23px;
    width:130px;
    background: url(images/submit-button.jpg) no-repeat;
    }

    input#s {
    width: 200px;
    border: 1px solid #830000;
    color: #282828;
    margin-top: 5px;

    }

Topic Closed

This topic has been closed to new replies.

About this Topic