SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Member leelo's Avatar
    Join Date
    Apr 2005
    Location
    UK
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Annoying CSS bug in Internet Explorer. Please help its driving me insane.

    OK the conversion of the open source internet music template to Drupal has gone pretty well so far and with some help with fluid css boxes from another post i'm making some steady progress. However i'm really starting to hate CSS I know i know its the way of the future but boy can it be a ***** for cross browser theming.

    Anyway everything works lovely in Firefox and Opera (much to my surprise) but IE on my forum refuses to play ball.

    Heres how it should look (and does in both firefox and opera)


    And heres how it looks in Internet Explorer



    I apologise for this posting being so long but i'm really hoping someone can spot something minor that is sending all this out of wack.

    Code:
    /* project: internet music template
          author: luka cvrk (www.solucija.com) */
       
          
       /* default styles
          -------------- */
         
       body { 
       	padding: 0; 
       	margin: 0; 
       	font: 0.74em Arial, Helvetica, sans-serif;
       	background: #fff; 
       	color: #454545; 
       }
       
       a {
       	color: #4A8EBC; 
       	background: inherit;
       }
       
       a:hover {
       	color: #C3593C;
       	background: inherit;	
       }
       
       a.title {
       	color: #FE6700;
       	background: #FFF;
       }
       
       h1 {
       	font: bold 2em "Trebuchet MS", Arial, Helvetica, sans-serif;
       	letter-spacing: -1px; 
       	padding: 2px 0 0 0px;
       	margin: 0;
       	color: #464548;
       	background: inherit;
       }
       
       h1 a, h2 a {
       	text-decoration: none;
       	color: #464548;
       	background: inherit;
       }
       
       h1 a:hover, h2 a:hover {
       	color: #C3593C;
       	background: #FFF;
       }
       
       h1 .red{
       	color: #C3593C;
       	background: inherit;
       }
       
       
       h2 { 
       	margin: 0 0 5px 0; 
       	padding: 0; 
       	font: bold 1.5em Arial, Helvetica, sans-serif;
       	letter-spacing: -1px;
       	color: #000; 
       	background: inherit;
       }
       
       h2 .yellow{
       	color: #FFFCD1;
       	background: inherit;
       }
       
       p {	margin: 0 0 5px 0; }
       
       ul { 
       	margin: 0; 
       	padding : 0; 
       	list-style : none; 
       }
       
       form { 
       	margin: 0; 
       }
       
       input.search { 
       	width: 145px; 
       	height: 22px;
       	border: none;
       	background: #fff url(images/input.gif) no-repeat; 
       	padding: 5px 10px 0 25px;
       	color: #808080;
       }
       
       input.button {
       	border: 0;
       	height: 27px;
       	width: 76px;
       	background: #ABC43C url(images/button.gif) no-repeat;
       	color: #FFF;
       	font: bold 1.1em Arial, Helvetica, Sans-Serif;
       }
       
       input.login { 
       	width: 150px;
       	border: none; 
       	background: url(images/logininput.gif); 
       	padding: 4px; 
       }
       
       /* layout
          ------ */
       
       .content { 
       	margin: 10px auto;
       	width: 760px; 
       }
       
       .logo {
       	float: left;
       	width: 200px;
       	padding: 10px 0 11px 10px;
       }
       
       .header_right {
       	float: right;
       	width: 550px;
       	height: 72px;
       }
       
       .logo p {
       	font-size: 0.9em;
       	color: #808080;
       	padding: 0 0 0 7px;
       	background: inherit;
       }
       
       
       .top_info {
       	width: 540px;
       	margin: 12px 0 5px 0;
       	padding: 0 5px 5px 0;
       	text-align: right;
       	background: #FFF url(images/dot.gif) repeat-x bottom;
       	color: #444;
       }
       	
       
       .slogan {
       	text-align: right;
       	width: 160px;
       }
       
       
       .bar { 
       	text-align: right;
       	font-size: 1.1em;
       	height: 30px; 
       }
       
       	.bar li { 
       		
       		padding: 0px 10px 8px 10px;
       		color: #808080;
       		background: #FFF;
       		display: inline;
       	}
       	
       	.bar li.active { 
       		background: #FFF url(images/bar.gif) no-repeat center bottom; 
       		color: #C3593C;
       		font-weight: bold; 
       		padding-bottom: 8px; 
       	}
       
       	.bar a { 
       		font-weight: bold;
       		color: #4A8EBC; 
       		background: inherit;	
       	} 
       
       .search_field { 
       	text-align: right;
       	float: right;
       	width: 540px;
       	height: 38px;
       	background: #464548 url(images/searchbg.gif) no-repeat top right; 
       	color: #000;
       	clear: both;
       	padding: 10px 10px 0 0;
       }
       
       .grey {
       	font-size: 1.2em;
       	font-weight: bold;
       	color: #ccc;
       	background: inherit;
       	
       }
       
       .search {
       	font-size: 1.2em;
       	font-weight: bold;
       	color: #FFF;
       	background: inherit;	
       }
       
       .newsletter {
       	float: left;
       	height: 33px;
       	padding: 15px 0 0 15px;
       	width: 192px;
       	background: #6E6E6E url(images/newsletterbg.gif) no-repeat;
       	color: #FFF;
       	margin: 0 0 3px 0;
       }
       
       .subheader {
       	clear: both;
       	margin: 3px 0 10px 0;
       	padding: 8px;
       	background: #f4f4f4;
       	color: #808080;
       	border-bottom: 1px solid #ccc;
       }
       
       /* left side
          --------- */
       
       .left-narrow {
       	float: left;
         width: 490px;
       	margin: 0 0 10px 0;
       }
       
       .left-wide {
       width: 760px;
       margin: 0 0 10px 0;
       }	
       
       .left_articles {
       		margin: 0 0 15px 0;
       		padding: 0 0 0 10px;
       	}
       
       	.lt {
       		height: 10px;
       		background: #6E6E6E url(images/lt.gif) no-repeat;
       		color: #FFF;
       	}
       	
       	.sticky {
       		color: #eee;
       		padding: 3px 12px;
       		margin: 0 0 15px 0;
       		background: #6E6E6E url(images/lb.gif) no-repeat bottom left;
       	}
       	
       	
       	
       	.sticky a {
       		color: #FFFCD1;
       		background: inherit;
       	}
       	
       	.sticky h2 {
       		color: #FFF;
       		background: #6E6E6E;
       	}
       	
       	
       .thumb {
       	float: left;
       	width: 150px;
       	border: 1px solid #d4d4d4;
       	color: #fff;
       	background: #6e6e6e;
       	margin: 0 15px 15px 0;
       	padding: 5px;
       }
       
       .thumb p { margin: 0; padding: 3px; color: #FFF; background: #6e6e6e; }
       	
       /* right side
          ---------- */
       		
       .right {
       	float: right;
       	width: 245px;
       	margin: 0 0 10px 0;
       }
       
       .right a {
       	color: #FFFCD1;
       	background: inherit;
       }
       
       		
       	.rt {
       		background: #C85E35 url(images/rt.gif) no-repeat;
       		color: #FFF;
       		height: 7px;
       	}
       		
       	.right_articles {
       		font-size: 0.9em;
       		background: #C85E35 url(images/rb.gif) no-repeat bottom;
       		color: #FEE1D5;
       		padding: 4px 8px;	
       		margin: 0 0 10px 0;
       	}
       	
       	.right_articles h2 {
       	text-decoration: none;
       	color: #fff;
       	background: inherit;
       }
       	
       			
       .image {
       	float: left;
       	margin: 0 9px 3px 0;
       }
       
       /* footer
          ------ */
       
       .footer { 
       	clear: both; 
       	text-align: center;
       	line-height: 1.8em;
       	color: #808080;
       	background: #FFF url(images/dot.gif) repeat-x;
       	padding: 8px 0;
       }
       
       .footer a {
       	color: #C3593C;
       	background: inherit;
       }
       
       
       
       .node .content, .comment .content {
         margin: .5em 0 .5em 0;
       }
       .node .taxonomy {
         color: #999;
         font-size: 0.8em;
         padding: 1.5em;
       }
       .node .picture {
         border: 0px solid #ddd;
         float: right;
         margin: 0.5em;
       }
       .comment {
         border: 1px solid #abc;
         padding: .5em;
         margin-bottom: 1em;
       }
       .comment .title a {
         font-size: 1.1em;
         font-weight: normal;
       }
       .comment .new {
         text-align: right;
         font-weight: bold;
         font-size: 0.8em;
         float: right;
         color: red;
       }
       .comment .picture {
         border: 0px solid #abc;
         float: right;
         margin: 0.5em;
       }
       
       /*
       ** Module specific styles
       */
       #aggregator .feed-source {
         background-color: #eee;
         border: 1px solid #ccc;
         padding: 1em;
         margin: 1em 0 1em 0;
       }
       #aggregator .news-item .categories, #aggregator .source, #aggregator .age {
         color: #999;
         font-style: italic;
         font-size: 0.9em;
       }
       #aggregator .title {
         margin-bottom: 0.5em;
         font-size: 1em;
       }
       #aggregator h3 {
         margin-top: 1em;
       }
       #forum table {
       	width: 100%;
       }
       #forum td {
         padding: 0.5em 0.5em 0.5em 0.5em;
       }
       #forum td.forum, #forum td.posts {
         background-color: #eee;
       }
       #forum td.topics, #forum td.last-reply {
         background-color: #ddd;
       }
       #forum td.container {
       	background-color: #6E6E6E;
       	color: #ffffff;
       }
       #forum td.container a {
         color: #ffffff;
       }
       #forum td.statistics, #forum td.settings, #forum td.pager {
         height: 1.5em;
         border: 1px solid #bbb;
       }
       #forum td .name {
         color: #96c;
       }
       #forum td .links {
         padding-top: 0.7em;
         font-size: 0.9em;
       }
       #profile .profile {
         clear: both;
         border: 1px solid #abc;
         padding: .5em;
         margin: 1em 0em 1em 0em;
       }
       #profile .profile .name {
         padding-bottom: 0.5em;
       }
       .block-forum h3 {
         margin-bottom: .5em;
       }
       .calendar a {
         text-decoration: none;
       }
       .calendar td, .calendar th {
         padding: 0.4em 0;
         border-color: #888;
       }
       .calendar .day-today {
         background-color: #69c;
       }
       .calendar .day-today a {
         color: #fff;
       }
       .calendar .day-selected {
         background-color: #369;
         color: #fff;
       }
       .calendar .header-week {
         background-color: #ccc;
       }
       .calendar .day-blank {
         background-color: #ccc;
       }
       .calendar .row-week td a:hover {
         background-color: #fff; color: #000;
       }
       .node img {
         border: 1px solid #abc;
         padding: 0.75em;
         margin-right: 10px;
         margin-left: 10px;
         margin-bottom: 6px;
       }
       
       .comment img {
         border: 1px solid #abc;
         padding: 0.75em;
         margin-right: 10px;
         margin-left: 10px;
         margin-bottom: 6px;
       }
       
       #welcome {
       	border: dashed;
       	border-width: thin;
         background-color: #FFDBA1;
         padding: 0.5em 1em;
         color: #4E3000;
       }
       
       #welcome a, #welcome a:visited {
         color: #B63300;
         font-weight: bold;
       }
       
       img.emoticon{
         border: 0px;
         padding: 0;
         margin-right: 0px;
         margin-left: 0px;
         margin-bottom: 0px;
       }
       
       /* Flatforum structure */
       .forum-comment {
       
       }
       
       .comment-left {
         padding: 5px;
         
       }
       
       .comment-right {
         padding: 5px;
         width: 735px;
       
       }
       
       .comment-left .author-name {
         font-weight: bold;
         background-color: #EEEEEE;
         font-size: 1em;
       
       }
       
       .comment .comment-left .picture {
       }
       
       .comment-right .title {
         font-weight: bold;
         font-size: 1.2em;
       }
       
       .comment-right .content {
         background-color: #fff;
         padding: 5px;
             width: 725px;
       
       
       }
       
       .comment-right .content .links {
        float: right;
       }
       
       /* Flatforum style */
       .comment-left, .comment-right {
          background-color: #fff;
       }
       
       .comment-right, .comment-left {
          background-color: #EEEEEE;
       }
       
       .comment-even {
       }
       
       .comment-odd {
       }
    Heres the forum template that seems to be causing all the issues

    PHP Code:
    <?php
        
    if (!_is_forum()) {
          include(
    'node.tpl.php');
          return;
        }
        
    $curr_user user_load(array('uid' => $userid));
        
    $sig $curr_user->signature;
      
    ?>
      <div class="comment forum-comment comment-<?php print $row_class; print $comment->new ' comment-new forum-comment-new' ''?>">
          
        <div class="comment-left">
            <?php print $picture ?>
          <div class="author-name"><?php print $name ' ' $submitted ?></div>
          <?php if (module_exist('flatforum')): ?>
            <span class="author-posts">
              <?php print t('Posts:') . ' ' $posts?><br />
            </span>
            <span class="author-regdate">
              <?php print t('Joined:') . ' ' $joined?><br />
            </span>
          <?php endif ?>
            </div>
            
      <?php
      profile_load_profile
    ($node->uid);
      
    ?>
      <?php
      
    print $node->profile_lastname;
      
    ?>
      
        <div class="comment-right">
                <?php if ($comment->new) : ?>
            <a id="new"></a>
            <span class="new"><?php print $new ?></span>
          <?php endif ?>
          <div class="title"><?php print check_plain($comment->subject?></div>
      
          <div class="content">
            <?php print $content ?>      
            <?php if ($sig): ?>
              <div class="author-signature">--<br /><?php print check_markup($sig); ?></div>        
            <?php endif ?>
            <div class="links"><?php print $links ?></div>
            <br class="clear" />      
          </div>
        </div>
      
      </div>
      <br class="clear" />
    If anyone can offer any help and advice as to what the potential problem is i would really appreciate it.
    Attached Images Attached Images
    http://www.onebigbite.com
    _________________________
    The Free Flash Arcade Games Site where Scores matter.
    Challange, compete and dominate and win weekly prizes.

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This topic is already under discussion at another forum.

  3. #3
    SitePoint Member leelo's Avatar
    Join Date
    Apr 2005
    Location
    UK
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by all4nerds
    Hello

    I some times wonder why there is no response to some of the SP treads answers, when you do a Google search by the username you find that the same question is asked in 5 or even more forums
    Mmmm well i had no response here so posted to other forums. I wasn't aware any of them were connected.
    http://www.onebigbite.com
    _________________________
    The Free Flash Arcade Games Site where Scores matter.
    Challange, compete and dominate and win weekly prizes.

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,290
    Mentioned
    198 Post(s)
    Tagged
    3 Thread(s)

    css bug - "double" threads

    Quote Originally Posted by leelo
    posted to other forums.
    As long as the other forums are at other sites, I wouldn't worry about it too much. Some Sitepoint members may also belong to other forums, but as long as you don't post the same thread to more than 1 Sitepoint forum any "redundant/conflicting" help you get should be minimized. It is frustrating to offer a suggestion while you're trying to follow the progress of a thread in one forum, only to find that someone else is doing the same on another. The "key" is to be able to keep everyone on the "same page". eg. post the problem - get a suggestion - implement it and post your changes and the resulting effect - another suggestion - etc. until the problem is resolved. This is difficult when there is more than 1 thread.
    As to the problem at hand. The bug seems to involve the "tiger" image and the text block being "pushed" below it in IE. Where exactly in the HTML is this image? I don't see an img tag in the mark-up you posted.

  5. #5
    SitePoint Member leelo's Avatar
    Join Date
    Apr 2005
    Location
    UK
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I posted to the other forum after finding it in google and if i had found a solution there would have posted my findings here to close the discussion.

    However although they have helped immensly, we have yet to reach a conclusion on the issue.

    When i posted there i had had no reples here.

    The tiger image is an avatar and uses the picture div. Its 100x100 pixels, floated to the left and has a border and padding.

    Code:
         .comment .picture {
              border: 0px solid #abc;
              float: right;
              margin: 0.5em;
            }
        
           .node .picture {
             border: 0px solid #abc;
             float: right;
             margin: 0.5em;
           }
    The node css would be used for the first post and then the comment class for any comments thereafter.

    It is called in the php markup by <?php print $picture ?>

    Its something im 100% unsure of as it seems, as you say, to be pushing the content block out of sync and i have no idea why.

    This code is actually running happily on my live site at http://www.porttalbotchat.co.uk (look under the forums) and works well in both IE, Opera and Firefox. However that theme is fluid and uses tables for some of its layout.

    My test site at http://82.16.165.102 is pure css and this is a fixed theme. This is where its breaking down i believe but i have no idea why.

    Any help would be greatly appreciated as i'm close to just recoding the entire thing using tables (its driving me insane).
    http://www.onebigbite.com
    _________________________
    The Free Flash Arcade Games Site where Scores matter.
    Challange, compete and dominate and win weekly prizes.

  6. #6
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,290
    Mentioned
    198 Post(s)
    Tagged
    3 Thread(s)

    css problems

    The pages those links point to are not what is in the screen shots.
    Actually, the 2 pages look essentially identical in both Firefox and IE, when the text-size is set to "medium" in IE.
    Part of the problem may have to do with the template parsing.
    I recently installed phpBB on my site. It uses tables for layout. Although I do not like using tables for layout, I am not inclined to rewrite the app, so I have compromised my idealogy and live with it.
    If you are trying to modify a templating app so that it's pure CSS when it was designed to use tables, it will more than likely be a long frustrating process.
    IMHO you should use CSS for the pages that you write, but if you're not happy with the templating app you're using maybe try finding a different one.

  7. #7
    SitePoint Member leelo's Avatar
    Join Date
    Apr 2005
    Location
    UK
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mittineague
    The pages those links point to are not what is in the screen shots.
    Actually, the 2 pages look essentially identical in both Firefox and IE, when the text-size is set to "medium" in IE.
    Part of the problem may have to do with the template parsing.
    I recently installed phpBB on my site. It uses tables for layout. Although I do not like using tables for layout, I am not inclined to rewrite the app, so I have compromised my idealogy and live with it.
    If you are trying to modify a templating app so that it's pure CSS when it was designed to use tables, it will more than likely be a long frustrating process.
    IMHO you should use CSS for the pages that you write, but if you're not happy with the templating app you're using maybe try finding a different one.
    Sorry the links i gave you was to the main sites. The forum bodies are where the problems lay.

    http://82.16.165.102/?q=forum/websit...rt-talbot-chat

    This will display different in internet explorer than firefox.

    As regards the theme this one was pure css from the get go but obviously i'm introducing elements from my old theme.
    http://www.onebigbite.com
    _________________________
    The Free Flash Arcade Games Site where Scores matter.
    Challange, compete and dominate and win weekly prizes.

  8. #8
    SitePoint Member leelo's Avatar
    Join Date
    Apr 2005
    Location
    UK
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by all4nerds
    Hello

    To many width's set on containers that wrap, you can't re-use class content as wrapping container because of that


    </body>
    </html>
    [/code]
    Mmmm this is likely the cuase but i couldn't seem to get the widths without setting the properties.

    I see the example you posted worked but when i posted the css into my working test site it didn't Was there anything else you applied apart from the css ?
    http://www.onebigbite.com
    _________________________
    The Free Flash Arcade Games Site where Scores matter.
    Challange, compete and dominate and win weekly prizes.

  9. #9
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,290
    Mentioned
    198 Post(s)
    Tagged
    3 Thread(s)

    Css

    With the page using 8 CSS files, I am only guessing.
    Code:
    <div class="content">
    		<p>
    			<p>
    Code:
    .comment-right .content .links {
     float: right;
    }
    Either the class "content" shouldn't be floating right, Or maybe IE doesn't like the nested p tags.
    Try temporarily taking ".content" out of the float right and see if that helps. If not, try temporarily removing the outer p tags in
    HTML Code:
    <p> /* this one */
    	<p>Private messages between members (PM's) has now been enabled by default for every member. This alllows you to speak to others privately whenever the need. The facility has always been there but was a little buggy. We are pleased to say it has now been updated and improved and should now be viable for production usuage. </p>
    	<p>You'll find your Private message box on the left hand side menu under the  <a href="/privatemsg">my inbox (*)</a> link. </p>
    	<p>For members who do not wish this feature you can turn it off in the <em><strong>Private Message Settings</strong></em> situated in <em><strong>My Account -&gt;  Edit</strong></em></p>
    
    	<p><strong>NOTE:</strong> Turning off Private messaging will disallow you to both send and receive private messages. </p>
    	<p><strong>Daily Email of Unread Messages</strong><br />You can also set the system up to send you a once daily email on any private messages you have receieved. Again this option is under Private Message Settings situated in <strong>My <em>Account -&gt;  Edit </em></strong>tick the<strong><em> Receive daily e-mail for unread messages </em></strong>box.</p>
    	<p><strong>Messaging members per article.</strong><br />Each article and comment posted now has a link viewable entitled <em><strong>Write To Author</strong></em>. This is so you can send that author a PM (Private message). </p>
    
    	<p><strong>Note:</strong> You will only see this link if you have private messaging enabled. </p>
    	<br class="clear-both" />
    </p> /* and this one */

  10. #10
    SitePoint Member leelo's Avatar
    Join Date
    Apr 2005
    Location
    UK
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mittineague
    With the page using 8 CSS files, I am only guessing.
    Code:
    <div class="content">
      		<p>
      			<p>
    Code:
    .comment-right .content .links {
       float: right;
      }
    Either the class "content" shouldn't be floating right, Or maybe IE doesn't like the nested p tags.
    Try temporarily taking ".content" out of the float right and see if that helps. If not, try temporarily removing the outer p tags in
    HTML Code:
    <p> /* this one */
      	<p>Private messages between members (PM's) has now been enabled by default for every member. This alllows you to speak to others privately whenever the need. The facility has always been there but was a little buggy. We are pleased to say it has now been updated and improved and should now be viable for production usuage. </p>
      	<p>You'll find your Private message box on the left hand side menu under the  <a href="/privatemsg">my inbox (*)</a> link. </p>
      	<p>For members who do not wish this feature you can turn it off in the <em><strong>Private Message Settings</strong></em> situated in <em><strong>My Account -&gt;  Edit</strong></em></p>
      
      	<p><strong>NOTE:</strong> Turning off Private messaging will disallow you to both send and receive private messages. </p>
      	<p><strong>Daily Email of Unread Messages</strong><br />You can also set the system up to send you a once daily email on any private messages you have receieved. Again this option is under Private Message Settings situated in <strong>My <em>Account -&gt;  Edit </em></strong>tick the<strong><em> Receive daily e-mail for unread messages </em></strong>box.</p>
      	<p><strong>Messaging members per article.</strong><br />Each article and comment posted now has a link viewable entitled <em><strong>Write To Author</strong></em>. This is so you can send that author a PM (Private message). </p>
      
      	<p><strong>Note:</strong> You will only see this link if you have private messaging enabled. </p>
      	<br class="clear-both" />
      </p> /* and this one */
    Thanks for replying and i appreciate you trying to help.

    The div your talking about is for the links at the bottom of each forum message and would float right. I've disabled it before now to see if it helps and it doesnt.

    As regards the <p> tags thats within the body of the content and pretty much can't be altered as its generated when members submit messages. However the same code does work on the partial tabled live website with no ill effects at http://www.porttalbotchat.co.uk/foru...-the-community

    I know CSS is the best method for such things but its cross browser issues always has me questioning it

    Anymore help and advice i would greatly appreciate.
    http://www.onebigbite.com
    _________________________
    The Free Flash Arcade Games Site where Scores matter.
    Challange, compete and dominate and win weekly prizes.

  11. #11
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,290
    Mentioned
    198 Post(s)
    Tagged
    3 Thread(s)

    nested p tags

    It is not the p tags that is causing the problem, but the nested p tags
    Quote Originally Posted by leelo
    As regards the <p> tags thats within the body of the content and pretty much can't be altered as its generated when members submit messages. However the same code does work on the partial tabled live website with no ill effects
    It is NOT the same code:
    "Tabled" version that looks OK
    HTML Code:
        <div class="content">
          <p>Well as i&#39;ve said many times this ....
    "problem" version
    HTML Code:
        <div class="content">
          <p><p>Private messages between members ....
    If you can't find a way of getting rid of the "extra" p tags, I don't think there's much you can do about it. To be honest, I don't understand why something would put several paragraphs inside one paragraph (even the sound of it doesn't make sense) but maybe that's how drupal does it. Have you posted to the drupal forums?

  12. #12
    SitePoint Member leelo's Avatar
    Join Date
    Apr 2005
    Location
    UK
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mittineague
    It is not the p tags that is causing the problem, but the nested p tags
    It is NOT the same code:
    "Tabled" version that looks OK
    HTML Code:
        <div class="content">
           <p>Well as i've said many times this ....
    "problem" version
    HTML Code:
        <div class="content">
           <p><p>Private messages between members ....
    If you can't find a way of getting rid of the "extra" p tags, I don't think there's much you can do about it. To be honest, I don't understand why something would put several paragraphs inside one paragraph (even the sound of it doesn't make sense) but maybe that's how drupal does it. Have you posted to the drupal forums?
    This really has me baffled as i can't seem to find that extra <p> in the code anywhere. I'll keep looking though because, as you say, that isn't right and i've know idea how it crept in.
    http://www.onebigbite.com
    _________________________
    The Free Flash Arcade Games Site where Scores matter.
    Challange, compete and dominate and win weekly prizes.

  13. #13
    SitePoint Member leelo's Avatar
    Join Date
    Apr 2005
    Location
    UK
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by leelo
    This really has me baffled as i can't seem to find that extra <p> in the code anywhere. I'll keep looking though because, as you say, that isn't right and i've know idea how it crept in.
    Well having come up short trying to track this rogue <p> tag it would seem that all of themes on my test system do this (even one from the live system) and that works perfectly well with the css. Maybe its an apache thing ? i'm using xamp on my test system ?
    http://www.onebigbite.com
    _________________________
    The Free Flash Arcade Games Site where Scores matter.
    Challange, compete and dominate and win weekly prizes.

  14. #14
    SitePoint Member leelo's Avatar
    Join Date
    Apr 2005
    Location
    UK
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by leelo
    Well having come up short trying to track this rogue <p> tag it would seem that all of themes on my test system do this (even one from the live system) and that works perfectly well with the css. Maybe its an apache thing ? i'm using xamp on my test system ?
    Ok i'm getting somewhere now.

    I've removed the hardcoded widths from all the content areas and instead put a width: 760px; in the body tag. This has sorted the entire layout out (including the forums) but one small problems remains. How do i now get this to centre in the middle of the browser screen ?
    http://www.onebigbite.com
    _________________________
    The Free Flash Arcade Games Site where Scores matter.
    Challange, compete and dominate and win weekly prizes.

  15. #15
    SitePoint Member leelo's Avatar
    Join Date
    Apr 2005
    Location
    UK
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    AHA, got it, with some cludgin around thats for sure.

    i added

    margin-right: auto;
    margin-left: auto;

    and that has now centralised my theme and everything is working right.

    I still have that nested <p> tag that has me baffled but everything is working as it should.

    Is there any potential problems with this ?
    http://www.onebigbite.com
    _________________________
    The Free Flash Arcade Games Site where Scores matter.
    Challange, compete and dominate and win weekly prizes.

  16. #16
    SitePoint Member leelo's Avatar
    Join Date
    Apr 2005
    Location
    UK
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by all4nerds
    Hello

    remove width from .comment-right { /* width: 735px;*/ in themes/ptc/style.css

    ad
    .comment-right .taxonomy a{
    display:block;
    padding:5px;
    }

    .con,.title{background:#ffffff;padding:.5em;}

    change class content in con in the html
    <div class="title">tittle</div>
    <div class="content">
    Hi all4nerds and thanks for the suggestions but i added to the body tag :-

    width:760px;
    margin-right: auto;
    margin-left: auto;

    I made

    .left-wide {
    width: 100%;
    margin: 0 0 10px 0;
    }

    For my entire screen layout (if no sideblocks are being displayed) and that appears to have sorted it.

    I do have degrading content in the grey box on the frontpage though in Internet Explorer that has me currently stumped. Its a werid bug that when i refresh more of the content disappears and hovering my mouse over the title of the box reveals some.
    http://www.onebigbite.com
    _________________________
    The Free Flash Arcade Games Site where Scores matter.
    Challange, compete and dominate and win weekly prizes.

  17. #17
    SitePoint Member leelo's Avatar
    Join Date
    Apr 2005
    Location
    UK
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK the grey rounded box on the frontpage in IE is still causing me issues. Its degrading both on the bigger links (when i hover over them) and on refresh of the page (loosing half its content). Seems to be the last two patagraphs.

    It appears to be the background of the div as if i remove the .sticky background the problems go away.

    What i'm managed to isoliate so far is that if i put a

    background: inherit; into the

    h1 a:hover, h2 a:hover

    h1 a:hover, h2 a:hover {
    color: #C3593C;
    background: #FFF;
    background: inherit;
    }

    the problems of hovering over the title goes away. But if i refresh or move the scrollbar then hover they come back.

    Anyone any ideas ?
    http://www.onebigbite.com
    _________________________
    The Free Flash Arcade Games Site where Scores matter.
    Challange, compete and dominate and win weekly prizes.

  18. #18
    SitePoint Member leelo's Avatar
    Join Date
    Apr 2005
    Location
    UK
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah it seems to be a known bug.

    I've impplemented the Holy Hack below

    /* Hides from IE5-mac \*/
    * html .sticky {height: 1%;}
    /* End hide from IE5-mac */

    And this seems to have solved the issues.
    http://www.onebigbite.com
    _________________________
    The Free Flash Arcade Games Site where Scores matter.
    Challange, compete and dominate and win weekly prizes.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •