Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Website not working in Chrome

    Hi,

    I'm new here, but have a problem I just can't seem to solve and it seems like a great forum for help.

    I recently updated my website (mostly the design), but have problems making it work in google chrome (it was displayed nicely until version 7) and IE 8. Also firefox 4 stopped showing it the way it used to look (previous version no problem).

    The problem is that some of the content is missing (no twitter box, no background in the "container" and no links in the bottom of the page).

    I didn't change anything and really can't get my head around this problem.

    The website is www.kiholm.com

    Hope to hear from some of you.

    Thank you in advance

    (And here is the rough code)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Kiholm | Official website of the Danish DJ/Producer Mads Kiholm</title>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1257">
    <meta name="Keywords" content="Kiholm, Mads, Mads Kiholm, www.kiholm.com, kiholm.com, trance, enhanced, asot, tatw" />
    <meta name="description" content="Kiholm - Trance producer from Denmark." />
    <style type="text/css">
    
    body {
    	margin: 0;
    	padding: 0;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	line-height: 1.4;
    	font-size: 10pt;
    	background-image: url(images/blocks.png);
    	background-repeat: repeat;
    }
    
    
    ul, ol, dl { 
    	padding: 0;
    	margin: 0;
    }
    h1, h2, h3, h4, h5, h6, p {
    	margin-top: 0;
    	padding-left: 0px;
    }
    a img { 
    	border: none;
    }
    
    a:link {
    	color: #CCC;
    	text-decoration: none;
    }
    a:visited {
    	color: #CCC;
    	text-decoration: none;
    }
    a:hover, a:active, a:focus {
    	text-decoration: none;
    	color: #CCC;
    }
    
    .container {
    	width: 688px;
    	margin-top: 0;
    	margin-right: auto;
    	margin-bottom: 0;
    	margin-left: auto;
    	background-image: url(images/back.png);
    	background-repeat: repeat;
    }
    
    
    .header {
    	background-image: url(../HTML/Top_logo.png);
    	height: 226px;
    	width: 688px;
    	text-align: center;
    	color: #9C0;
    }
    
    
    .sidebar1 {
    	float: left;
    	width: 180px;
    	background: #EADCAE;
    	padding-bottom: 10px;
    }
    .content {
    	width: 496px;
    	float: left;
    	padding-top: 0;
    	padding-right: 0;
    	padding-bottom: 5px;
    	padding-left: 0;
    }
    .sidebar2 {
    	float: right;
    	width: 190px;
    	/* [disabled]background-color: #FFF; */
    	padding-top: 2px;
    	padding-right: 0px;
    	padding-bottom: 5px;
    	padding-left: 2px;
    }
    
    
    .content ul, .content ol { 
    	padding: 0 15px 15px 40px; 
    }
    
    ul.nav {
    	list-style: none; 
    	border-top: 1px solid #666; 
    	margin-bottom: 15px; 
    }
    ul.nav li {
    	border-bottom: 1px solid #666; 
    }
    ul.nav a, ul.nav a:visited { 
    	padding: 5px 5px 5px 15px;
    	display: block; 
    	width: 160px; 
    	text-decoration: none;
    	background: #C6D580;
    }
    ul.nav a:hover, ul.nav a:active, ul.nav a:focus { 
    	background: #ADB96E;
    	color: #FFF;
    }
    
    .footer {
    	position: relative;
    	clear: both;
    	padding-top: 0px;
    	padding-right: 0px;
    	padding-bottom: 0px;
    	padding-left: 0px;
    	border-top-style: solid;
    	border-right-style: none;
    	border-bottom-style: none;
    	border-left-style: none;
    	border-top-width: thin;
    	border-right-width: thin;
    	border-bottom-width: thin;
    	border-left-width: thin;
    	border-top-color: #000;
    	border-right-color: #000;
    	border-bottom-color: #000;
    	border-left-color: #000;
    	font-size: 9pt;
    }
    
    .fltrt {  
    	float: right;
    	margin-left: 8px;
    }
    .fltlft { 
    	float: left;
    	margin-right: 8px;
    }
    .clearfloat { 
    	clear:both;
    	height:0;
    	font-size: 1px;
    	line-height: 0px;
    }
    
    .container .footer table tr td {
    	font-size: 8pt;
    }
    .container .content table tr td {
    	font-size: 9pt;
    	text-align: justify;
    }
    #apDiv1 {
    	position:absolute;
    	left:166px;
    	top:187px;
    	width:670px;
    	height:34px;
    	z-index:888;
    	color: #FFF;
    	text-align: center;
    	font-size: 16px;
    	overflow: auto;
    }
    .container .header table tr td {
    	font-size: 12pt;
    	color: #FFF;
    }
    a:hover {
    	text-decoration: none;
    	color: #FFF;
    }
    a:active {
    	text-decoration: none;
    }
    </style>
    <script type="text/javascript">
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    </script>
    </head>
    
    <body onload="MM_preloadImages('../HTML/twitter2.png','../HTML/facebook-icon2.png','../HTML/soundcloud2.png','../HTML/myspace_logo2.png','../HTML/youtube_logo2.png','images/button1hoover.png','images/button2hoover.png','images/button3hoover.png','images/button5hoover.png','images/button6hoover.png','images/button7hoover.png','images/button4hoover.png')">
    <div class="container">
      <p><img src="images/logo.png" alt="" name="logo" width="687" height="200" id="logo" /><a href="news.html" target="iframe1" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('menu1','','images/button1hoover.png',1)"><img src="images/button1.png" name="menu1" width="98" height="42" border="0" id="menu1" /></a><a href="biography.html" target="iframe1" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('menu2','','images/button2hoover.png',1)"><img src="images/button2.png" name="menu2" width="98" height="42" border="0" id="menu2" /></a><a href="disco.html" target="iframe1" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('menu3','','images/button3hoover.png',1)"><img src="images/button3.png" name="menu3" width="98" height="42" border="0" id="menu3" /></a><a href="media.html" target="iframe1" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('menu4','','images/button4hoover.png',1)"><img src="images/button4.png" name="menu4" width="98" height="42" border="0" id="menu4" /></a><a href="photo.html" target="iframe1" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('menu5','','images/button5hoover.png',1)"><img src="images/button5.png" name="menu5" width="98" height="42" border="0" id="menu5" /></a><a href="press.html" target="iframe1" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('menu6','','images/button6hoover.png',1)"><img src="images/button6.png" name="menu6" width="98" height="42" border="0" id="menu6" /></a><a href="contact.html" target="iframe1" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('menu7','','images/button7hoover.png',1)"><img src="images/button7.png" name="menu7" width="98" height="42" border="0" id="menu7" />
      </a><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="400" height="15" align="middle" class="clearfloat" id="xspf_player">
    <param name="allowScriptAccess" value="sameDomain">
    <param name="movie" value="http://kiholm.com/xspf_player_slim.swf?playlist_url=http://kiholm.com/songs.xspf&repeat_playlist=true&player_title=Press play to listen to the sound of Kiholm">
    <param name="quality" value="high">
    <param name="bgcolor" value="#e6e6e6">
    <embed src="http://kiholm.com/xspf_player_slim.swf?playlist_url=http://kiholm.com/songs.xspf&repeat_playlist=true&player_title=Press play to listen to the sound of Kiholm" quality="high" bgcolor="#e6e6e6" name="xspf_player" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="center" height="15" width="687">
    </object></p>
    <div class="content">
      <div id="frameholder">
    <tr><td>
           <iframe name="iframe1" src="news.html" width="490" height="435" frameborder="NO"  align="left"</iframe>
       </td></tr>
    </div>
    </div>
      <div class="sidebar2"> 
        
        <script src="http://widgets.twimg.com/j/2/widget.js"></script>
    <script>
    new TWTR.Widget({
      version: 2,
      type: 'profile',
      rpp: 4,
      interval: 6000,
      width: 188,
      height: 300,
      theme: {
        shell: {
          background: '#7d2424',
          color: '#ffffff'
        },
        tweets: {
          background: '#e8dfdf',
          color: '#000000',
          links: '#871d1d'
        }
      },
      features: {
        scrollbar: false,
        loop: false,
        live: false,
        hashtags: true,
        timestamp: true,
        avatars: false,
        behavior: 'all'
      }
    }).render().setUser('mKiholm').start();
    </script>
      
    </div>
      <div class="footer">
        <table width="694" border="0" align="center">
          <tr>
            <td align="center">All rights reserved &copy; 2010 www.kiholm.com - Website by Mads Kiholm | Follow Kiholm on :</td>
          </tr>
        </table>
        <table width="313" border="0" align="center">
          <tr>
            <td width="281"><a href="http://twitter.com/mkiholm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('twitter','','images/twitter2.png',1)"><img src="images/twitter.png" name="twitter" width="50" height="50" border="0" id="twitter" /></a><a href="http://www.facebook.com/kiholm2"> </a><a href="http://www.facebook.com/kiholm2" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('fb','','images/facebook-icon2.png',1)"><img src="images/facebook-icon.png" name="fb" width="50" height="50" border="0" id="fb" /></a><a href="http://soundcloud.com/kiholm"> </a><a href="http://www.soundcloud.com/kiholm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('soundcloud','','images/soundcloud2.png',1)"><img src="images/soundcloud.png" name="soundcloud" width="80" height="58" border="0" id="soundcloud" /></a> <a href="http://www.myspace.com/kiholm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('myspace','','images/myspace_logo2.png',1)"><img src="images/myspace_logo.png" name="myspace" width="50" height="50" border="0" id="myspace" /></a> <a href="http://www.youtube.com/user/mkiholm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('youtube','','images/youtube_logo2.png',1)"><img src="images/youtube_logo.png" name="youtube" width="50" height="50" border="0" id="youtube" /></a></td>
          </tr>
        </table>
    </div>
    </div>
    <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
    </script>
    <script type="text/javascript">
    _uacct = "UA-1659322-1";
    urchinTracker();
    </script>
    </body>
    </html>
    Last edited by kiholm; 12-23-2010 at 08:39 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello kiholm,
    Does clearing the float help?
    Try adding this bit in red -
    Code:
    .container {
    	width: 688px;
    	margin-top: 0;
    	margin-right: auto;
    	margin-bottom: 0;
    	margin-left: auto;
    	background-image: url(images/back.png);
    	background-repeat: repeat;
    overflow: auto;
    }
    See how overflow: auto; can clear floats for you.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow thank you very much Excavator! The background for the container is now working as it should! Still have a problem with the Twitter-box on the right side and the "footer"-part is not even there. I'll read a bit more into the overflow, but if anybody has any pointers how to fix it I would be a very happy man

    Thanks for your help so far!

  • #4
    Banned
    Join Date
    Dec 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    welcome dear

  • #5
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The sidebar (next to the iframe) is still not showing its content and the footer section is gone in Chrome.

    I have tried to fix it like a madman, but can't get my head around it. Any one who can help?

  • #6
    Regular Coder oVTech's Avatar
    Join Date
    Nov 2010
    Location
    USA
    Posts
    296
    Thanks
    4
    Thanked 54 Times in 52 Posts

    always validate your code...

    You are missing a closing bracket in the opening tag of this iframe:

    Code:
    <iframe name="iframe1" src="news.html" width="490" height="435" frameborder="NO"  align="left"> </iframe>
    This iframe is included in this DIV: <div id="frameholder">

    I hope this helps...
    Last edited by oVTech; 12-26-2010 at 08:20 PM.

  • #7
    New Coder
    Join Date
    Dec 2010
    Posts
    33
    Thanks
    0
    Thanked 1 Time in 1 Post
    Always remember the "overflow" property.

    visible: The overflow is not clipped. It renders outside the element's box. This is default

    hidden: The overflow is clipped, and the rest of the content will be invisible
    scroll The overflow is clipped, but a scroll-bar is added to see the rest of the content

    auto: If overflow is clipped, a scroll-bar should be added to see the rest of the content

    inherit: Specifies that the value of the overflow property should be inherited from the parent element


  •  

    Posting Permissions

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