WordPress.com

1. flashkube
   Member
   Jul 18, 2007, 9:51 PM

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

2. atthe404
   Member
   Jul 18, 2007, 10:00 PM

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

3. raincoaster
   Member
   Jul 18, 2007, 10:03 PM

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

   http://flashkube.wordpress.com

4. flashkube
   Member
   Jul 18, 2007, 10:15 PM

   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?

5. atthe404
   Member
   Jul 18, 2007, 10:20 PM

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

6. devblog
   Member
   Jul 18, 2007, 11:04 PM

   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.

7. flashkube
   Member
   Jul 19, 2007, 12:28 AM

   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?

8. devblog
   Member
   Jul 19, 2007, 1:25 AM

   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.

9. atthe404
   Member
   Jul 19, 2007, 7:21 AM

   @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. :)

10. devblog
    Member
    Jul 19, 2007, 8:20 AM

    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.

11. atthe404
    Member
    Jul 19, 2007, 8:42 AM

    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.

12. devblog
    Member
    Jul 19, 2007, 2:45 PM

    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.

13. flashkube
    Member
    Jul 19, 2007, 3:13 PM

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

14. devblog
    Member
    Jul 19, 2007, 3:17 PM

    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! ;)

Topic Closed

This topic has been closed to new replies.