SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    Greenville, SC
    Posts
    388
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    why doesn't firefox like this?

    hello,

    I'm having issues with this page on both firefox and ie:
    http://www.z1p.net/test_ashheadlines.php

    In IE the center content displays fine, but the footer image gets chopped off,

    and in firefox the rest of the middle content just drops after the first block.

    Code:
      body {
      	margin:10px;
      	padding:10px;
      	background-color: #1D2227;
      	color:#000;
      	font-size:12px;
      	text-align:center;/*centre for ie5 */
      }
      #container {
      	width:620px;
     	background-image:url(../skins/bevel_me_one/images/bg_full_J.gif);/*this colour will be left column colour */
      	margin:auto;/* centre for compliant browsers*/
      	text-align:left;
      	border:1px solid #000;
      	position: relative;
      }
      
      #header {
      	height:151px;
      	border-bottom:0px solid red;
      	background-image:url(../skins/bevel_me_one/images/header.gif);
      	text-align:center;
      }
      #navbox {
      	margin-right:-169px;/*must be 1 pixel less than width */
      	float:right;
      	width:170px;/* this width is the same as the margin on #middle */
      	position:relative;
      }
      
      #navbox p {padding-left:15px;}
      * html #navbox p {padding: 5px;}
      #middle {
      	border-left:0px solid red;
      	border-right:0px solid red;
      	/* background colour of right column */
      	margin-right:170px;/*this is the space for the left column */
      	margin-left: 20px;
      	padding-right: 10px;
      }
      
      
      * html #middle {height:1%}/* combat ie's 3 pixel jog */
      #footer {
      	clear:both;
      	border-top:0px solid red;
      	border-bottom:0px solid red;
      	height:46px;
      	background-image:url(../skins/bevel_me_one/images/footer.gif);
      	text-align:center;
      }
      h1,h3,p {margin-top:0}
      
      /**********************skins menu**********************/
      .skins_menu {
      	width: 184px;
      	height: 75px;
      	position: absolute;
      	left: 422px;
      	top: 45px;
      	border:0px solid red;
      }	
      	
      #skins_menu a i{ visibility: hidden; }
      
      a#bevel_me_one 
      {
      	position:absolute;
      	left: 0px;
      	height: 25px;
      	width: 25px;
      	border:0px solid green;
      	background-image: url(../skins/skin_buttons/bevel_me_one.gif) ;
      }
      a#old_scroll { 
      	position: absolute;
      	height: 25px;
      	width: 25px;
      	left: 29px;
      	border:0px solid red;
      	background-image: url(../skins/skin_buttons/old_scroll.gif) ;
      }
      	
      	
      	
      /**********************************Horizontal navigation*******************************/
      #main_menu_container {position: absolute; top: 130px; left: 8px;}	
      #main_menu {
      	padding: 0px; 
      	width: 596px; 
      	height: 16px;
      	font-size: 8px; 
      }
      #main_menu li {
      	width: 90px; 
      	height: 17px; 
      	position: absolute; 
      	top: 0px; 
      	background: url(../skins/bevel_me_one/images/horizontal_navigation.gif) 0 0 no-repeat;
      	display: block;
      	list-style: none;}
      #main_menu a {
      	width: 90px; 
      	height: 16px; 
      	display: block; 
      	border: solid 0px #fff;
      }
      #main_menu a:hover {border: solid 0px #000;}
      #main_menu #button1 {left: 0px; background-position: 1px 1px;}
      #main_menu #button2 {left: 102px; background-position: -102px 1px;}
      #main_menu #button3 {left: 204px; background-position: -203px 1px;}
      #main_menu #button4 {left: 306px; background-position: -304px 1px;}
      #main_menu #button5 {left: 408px; background-position: -405px 1px;}
      #main_menu #button6 {left: 510px; background-position: -506px 1px;}
      
      #main_menu #button1 a:hover {background: url(../skins/bevel_me_one/images/horizontal_navigation.gif) 1px -16px 
      
      no-repeat;}
      #main_menu #button2 a:hover {background: url(../skins/bevel_me_one/images/horizontal_navigation.gif) -102px -16px 
      
      no-repeat;}
      #main_menu #button3 a:hover {background: url(../skins/bevel_me_one/images/horizontal_navigation.gif) -204px -16px 
      
      no-repeat;}
      #main_menu #button4 a:hover {background: url(../skins/bevel_me_one/images/horizontal_navigation.gif) -304px -16px 
      
      no-repeat;}	
      #main_menu #button5 a:hover {background: url(../skins/bevel_me_one/images/horizontal_navigation.gif) -405px -16px 
      
      no-repeat;}
      #main_menu #button6 a:hover {background: url(../skins/bevel_me_one/images/horizontal_navigation.gif) -506px -16px 
      
      no-repeat;}	
      		
      
      /* titles */
      
      #titles {position: relative; } 
      #titles h5 {
      	height: 30px;
      	width: 400px;
      	margin-top: 10px;
      	margin-left: 5px;
      	voice-family: "\"}\""; 
      	height: 30px;	
      	
      }
      #titles p {
      	margin-left:7px;
      	margin-right:15px;	
      	border: 0px solid black;
      	width: 390px;
      }
      
      
      /***** home page *****/
      #titles h5.welcome {
      	background: url(../skins/bevel_me_one/images/header_welcome.gif) no-repeat;
      }
      #titles h5.welcome SPAN {
      	display: none
      }
      #titles h5.news {
      	background: url(../skins/bevel_me_one/images/header_news.gif) no-repeat;
      }
      #titles h5.news SPAN {
      	display: none
      }
      #titles a, a:link, a:visited, a:active {
      display: inline;
      }
      #titles a:hover {
      text-decoration: underline;
      display: inline;
      }
      /**** tutorials ******/
      #titles h5.tutorials {
      	background: url(../skins/bevel_me_one/images/header_tutorials.gif) no-repeat;
      }
      #titles h5.tutorials SPAN {
      	display: none
      }
      #titles h5.photoshopmini {
      	background: url(../skins/bevel_me_one/images/header_photoshopmini.gif) no-repeat;
      }	
      #titles h5.photoshopmini SPAN {
      	display: none
      }
      #titles h5.phpmini {
      	background: url(../skins/bevel_me_one/images/header_phpmini.gif) no-repeat;
      }		
      #titles H5.phpmini SPAN {
      	display: none
      }
      #titles h5.cssmini {
      	background: url(../skins/bevel_me_one/images/header_cssmini.gif) no-repeat;
      }	
      #titles h5.csspmini SPAN {
      	display: none
      }
      #titles h5.flashmini {
      	background: url(../skins/bevel_me_one/images/header_flashmini.gif) no-repeat;
      }		
      #titles H5.flashmini SPAN {
      	display: none
      }		
      
      
      /* navbox */
      
      #navbox H5 {
      	height: 30px;
      	width: 144px;
      	margin-top: 3px;
      	margin-left:17px;
      	margin-bottom:5px;
      	voice-family: "\"}\""; 
      	height: 25px;
      }
      * html #navbox h5 { margin-left:7px; margin-top:13px;}
      
      /***** home page *****/	
      #navbox h5.about {
      	background: url(../skins/bevel_me_one/images/titles_about.gif) no-repeat;
      }
      #navbox h5.about SPAN {
      	display: none
      }	
      #navbox h5.currentprojects {
      	background: url(../skins/bevel_me_one/images/titles_currentprojects.gif) no-repeat;
      }
      #navbox h5.currentprojects SPAN {
      	display: none
      }
      #navbox h5.sistersites {
      	background: url(../skins/bevel_me_one/images/titles_sistersites.gif) no-repeat;
      }
      #navbox h5.sistersites SPAN {
      	display: none
      }
      #navbox h5.linkexchange {
      	background: url(../skins/bevel_me_one/images/titles_linkexchange.gif) no-repeat;
      }
      #navbox h5.linkexchange SPAN {
      	display: none
      }
      /***** tutorials *****/	
      #navbox h5.photoshop {
      	background: url(../skins/bevel_me_one/images/titles_photoshop.gif) no-repeat;
      }
      #navbox h5.photoshop SPAN {
      	display: none
      }	
      #navbox h5.php {
      	background: url(../skins/bevel_me_one/images/titles_php.gif) no-repeat;
      }
      #navbox h5.php SPAN {
      	display: none
      }
      #navbox h5.css {
      	background: url(../skins/bevel_me_one/images/titles_css.gif) no-repeat;
      }
      #navbox h5.css SPAN {
      	display: none
      }
      #navbox h5.flash {
      	background: url(../skins/bevel_me_one/images/titles_flash.gif) no-repeat;
      }
      #navbox h5.flash SPAN {
      	display: none
      }
      	
      /* navbox menu links */
      			
      ul.navbox_menu {
      	   list-style-type:none;
      	margin-left: 17px;
      	margin-top: 0px;
      	margin-bottom:6px;
      	width:143px;
      	padding: 0px;
      	border: 0px solid red;	 
      }
      * html ul.navbox_menu { margin-left: 7px; margin-bottom:-7px; }
      .navbox_menu {
        
      	margin-left: 10px;
      	color: #115D9A;
      	width:100px;
      	margin-top:-10px;
      	padding:0px;
      }
      .navbox_menu a, a:link, a:visited, a:active {
       
      	display: block;
      	color: #88C9E7; 
      	font: bold 9px/15px Verdana, Arial, Helvetica, sans-serif;
      	height: 15px;
      	text-decoration:none;
      	padding-left:2px;
      }
      .navbox_menu a:hover {
        
      	display: block;
      	background-color: #34404a;
      	color: #ffffff;
      	font: bold 9px/15px Verdana, Arial, Helvetica, sans-serif;
      	height: 15px;
      	text-decoration: none;
      	padding-left:2px;
      }
      #navbox div.center {
      	text-align: center; 
      	width: 165px; 
      	height:105px; 
      	margin:0px 0px 7px 0px; 
      	padding:0px; 
      }
      #navbox div.imagebox { 
      	background: url(../skins/bevel_me_one/images/sidebar_photobg.gif) no-repeat;
      	background-position: 50% 50%; 
      	width:133px;
      	height:91px;
      	text-align: center;
      	margin-left:20px;
      	border: 0px solid red;
      }
      
      * html #navbox div.imagebox { margin-left:-7px; padding:0px; }   
      
      #navbox img.imagebox {
      	position:relative;
      	top:13px; 
      	border:1px solid black;
      }
      /***** news box *****/
      
      .newsbox {
      	
      	border:0px solid white;
      	width: 400px; 
      	position: relative;
      	margin-bottom: 10px;
      	
      }
      .date {
      	margin-left:7px; 
      	display:inline;
      	font-weight: bold;
      	
      }
      .news_titletext {
      	position: absolute;
      	top: 0px;
      	left:88px; 
      	display: inline; 
      	margin-left: 5px;
      	font-weight:bold;
      	
      	
      }
      
      div.newsbar {
      	height: 4px;
      	width:397px;
      	background: url(../skins/bevel_me_one/images/newsbar.gif) no-repeat scroll center;
      	margin: 0px 5px 10px 5px;
      	border:1px solid black;
      }
      div.newsbar hr {
      	display: none;
      }
      
      .newssig_name {
      	margin-left:50px;
      	display:inline
      } 
      .newssig_comments {
      	position: absolute;
      	left: 200px; 
      	display: inline;
      	border: 0px solid white;
      	
      }
      .count_views {
      	position: absolute; 
      	left: 270px;
      	display: inline;
      }
      
      /******tutorial box css ******/
       .clear{
         clear:both;
       /*** these next attributes are designed to keep the div
       height to 1 pixel high, critical for Safari and Netscape 7 ***/
         height:1px;
         overflow:hidden;
         line-height:1%;
         font-size:0px;
       }
      
      /* \*/* html .clear{height:auto} /*** a fix for IE Win ***/
      .col1, .col2 { 
      position:relative; 
      float:left; 
      }
      .twocolcontainer { 
      width: 250px; 
      position: relative;
      }
      .twocolcontainerborder {
      border:1px solid black;
      }
      .col1 {
      text-align: left;
      margin-left:10px;
      width: 40px;
      height:40px;
      }
      /* \*/* html .col1 {margin-right:-0px}/* */
      .col2 {
      margin-left:5px;
      text-align:left;
      width:203px 
    Does anybody have an Idea what I'm doing wrong?

  2. #2
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The first thing to do is validate your code as there are some issues. Once this is cleared up it will be easier for you to resolve your other issue.

    You can validate your HTML/XHTML at:
    http://validator.w3.org/check?verbos...hheadlines.php

    and you can validate your CSS at:
    http://jigsaw.w3.org/css-validator/v...hheadlines.php

    The CSS validator will only work if you have valid HTML/XHTML. You will find the "Web Developer" extension for Firefox is a very valuable tool when developing a website.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    In IE the center content displays fine, but the footer image gets chopped off,

    and in firefox the rest of the middle content just drops after the first block.
    Couldn't see either of those problems! What exactly are we looking for ?

    Paul

  4. #4
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    Greenville, SC
    Posts
    388
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    KLB: Thanks for your resonse. I am aware that there are validation issues within my code and I will clean that up. The backend that I use is not xhtml code and I will have to modify it in due time. I have fixed it to where it is now at least working in IE:

    http://www.z1p.net/test_ashheadlines.php

    However in firefox I'm having a issue where the content drops after the first nested div code block. I believe it has more to do with this part of the code:

    stylesheet:
    Code:
       /******tutorial box css ******/
       
       
       
       .clear{
         clear:both;
       /*** these next attributes are designed to keep the div
       
       height to 1 pixel high, critical for Safari and Netscape 7 ***/
         height:1px;
         overflow:hidden;
         line-height:1%;
         font-size:0px;
       }
       /* \*/* html .clear{height:auto} /*** a fix for IE Win ***/
       .col1, .col2 { 
       position:relative; 
       border: 0px; 
       float:left; 
       }
       .twocolcontainer { 
       width: 250px; 
       position: relative;
       margin-left: 10px;
       }
       .twocolcontainerborder {
       border:1px solid blue;
       }
       .col1 {
       text-align: left;
       margin:0px;
       width: 40px;
       height: 40px;
       }
       /* \*/* html .col1 {margin-right:-5px}/* */
       .col2 {
       margin-left:5px;
       text-align:left;
       width:203px; 
       }
    html:

    Code:
       <div class="twocolcontainer">
       <div class="twocolcontainerborder">
       
       <div class="col1"> 
       <img src="$attachlink" />
       </div> 
       
       <div class="col2"> 
       $title 
       </div>
       
       <div class="clear"></div>
       
       </div>
       </div>
       
       <br>
    I think it has more to do with the margins.. but I can't see it.

  5. #5
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    Greenville, SC
    Posts
    388
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey Paul! Guess we must of posted at the same time. My issue is in firefox as explained above.

  6. #6
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    Greenville, SC
    Posts
    388
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, the code validates now for both xhtml and css, but the issue still remains. I'm not having the problem in NN6 or 7 or IE 5.5 and 6 .... But Firefox (the most important ) Doesn't seem to be liking it...

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I still can't see the problem. It looks much the same as IE as in my Firefox 0.9.

    Hmmmm I wonder... Are you using the new Firefox 1.0?

    Someone the other day posted about a problem in firefox1.0 and the clearing of elements.

    I've just looked in OPera7.5 and it seems your content is being dragged below the right columns length due to the clear property clearing all floats in the document and not those just in the same context.

    The usual solution is to include the elements in a float themselves and then the clearing is restricted inside that float.

    Code:
    #centrecontent {float:left;width:100%;margin-right:-1px}
    Now wrap the centre content in that id above.
    html:
    Code:
    		<li><a href="#">Version Archives</a></li>
    	  </ul>
    	  <br />
    	</div>
        <div id="centrecontent">
     <div id="titles"> 
    	  <h5 class="welcome"><span>Welcome</span></h5>
    	  <p> Welcome to the new revised Zero-one site. Within' this shell lies a 
    		beauty of code. The site now complies with W3c webstandards. </p>
    	  <h5 class="news"><span>news</span></h5>
    	  <script type="text/javascript">
    function popupcomment(id) {
     winpops=window.open('ashnews.php?page=showcomments&popup=1&id='+id,'','toolbar=0,location=0,directories=0,menuBar=0,resizable=0,scrollbars=yes,width=360,height=375,left=75,top=60') }
    </script>
    	  <div class="twocolcontainer"> 
    		<div class="twocolcontainerborder"> 
    		  <div class="col1"> <img src="http://www.z1p.net/" alt="" /> </div>
    		  <div class="col2"> Moving along </div>
    		  <div class="clear"></div>
    		</div>
    	  </div>
    	  <br />
    	  <div class="twocolcontainer"> 
    		<div class="twocolcontainerborder"> 
    		  <div class="col1"> <img src="http://www.z1p.net/" alt="" /> </div>
    		  <div class="col2"> skinnin' and tilin' </div>
    		  <div class="clear"></div>
    		</div>
    	  </div>
    	  <br />
    	  <div class="twocolcontainer"> 
    		<div class="twocolcontainerborder"> 
    		  <div class="col1"> <img src="http://www.z1p.net/" alt="" /> </div>
    		  <div class="col2"> ice, ice baby! </div>
    		  <div class="clear"></div>
    		</div>
    	  </div>
    	  <br />
    	  <div class="twocolcontainer"> 
    		<div class="twocolcontainerborder"> 
    		  <div class="col1"> <img src="http://www.z1p.net/" alt="" /> </div>
    		  <div class="col2"> school, games and all that. </div>
    		  <div class="clear"></div>
    		</div>
    	  </div>
    	  <br />
    	  <div class="twocolcontainer"> 
    		<div class="twocolcontainerborder"> 
    		  <div class="col1"> <img src="http://www.z1p.net/" alt="" /> </div>
    		  <div class="col2"> Zero One Productions prelaunch. </div>
    		  <div class="clear"></div>
    		</div>
    	  </div>
    	  <br />
    	  <p align="center"><a href="/test_ashheadlines.php?page=archives">Archives</a></p>
    	  <table width="100%" border="0" cellspacing="0" cellpadding="3">
    		<tr> 
    		  <td align="center" class="text"> <form action='/test_ashheadlines.php' method='post'>
    			  Search 
    			  <input type='text' name='keyword' />
    			  <input type='hidden' name='showsearch' value='1' />
    			  <input type='submit' name='submit' value='Submit' />
    			</form></td>
    		</tr>
    	  </table>
    	</div>
        </div>
     <br style="clear:both" />
    This cures it for opera 7.5 so hopefully it will cure it for you. Let me know what browser you are using because if this is a change in firefox 1.0 then a lot of sites are going to break .

    Paul

  8. #8
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    Greenville, SC
    Posts
    388
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep, I'm using Firefox 1.0... I hope this doesn't mean trouble. I suppose no one will know a workaround for it..

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Try the code I posted and let me know if it works.

    Otherwise I'll download the new firefox tomorrow and have a look

    Paul

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Just downloaded firefox 1.0 and now I can see the problem you stated.

    However my solution above is correct and if you use the code I posted it will work fine (Hows that for fixing things in advance )

    paul

  11. #11
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    Greenville, SC
    Posts
    388
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul! Works like a charm.


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
  •