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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy A big gap in the page when viewed through Firefox - any suggestions

    Ladies/Gents

    Please take pity and help me out !

    Any help would be greatly appreciated.

    I'm an amateur photographer, not a clue about websites or CSS. An acquaintance of mine has very kindly helped me out to code a website to display my photographs. This came after I tried to do this myself using photoshop to build the website and using tables etc.

    Anyway, I have my page up and running and in my browser IE, it displays as it should However I keep receiving emails to tell me that it has big gaps when viewed through other browsers, namely Firefox.

    I've really tried to get my head round the code by looking at various support forums to understand why this is happening but unfortunately to no avail.

    Is there any possibility that one of the geniuses here could perhaps help to resolved this ?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-AU">

    <head>
    <title>Antsplan.com - My Photography Work</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Steve Fitzpatrick" />
    <link rel="stylesheet" type="text/css" href="cs/style.css" media="screen, tv, projection" />

    <style>

    #wrapper{
    width: 790px;
    text-align: left;
    margin: 1em auto 10em auto;
    color: #ccc;
    }

    /* Main */

    #main{}

    /* Header */

    #header{
    float: right;
    width: 189px;
    }
    #header img.logo{
    margin-top: 118px;
    }
    #header #nav ul{
    list-style-type: none;
    margin: 1em 0 0 30px;
    }
    #header #nav ul li{
    line-height: 1.5em;
    }
    #header #nav ul li a{
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    }
    #header #nav ul li a:hover{
    text-decoration: underline;
    }

    /* Content */

    #content{
    margin-left: 0;
    width: 580px;
    }
    #content h1{
    border-bottom: 2px solid #ccc;
    padding-bottom: 0.3em;
    margin-bottom: 1em;
    font-style: italic;
    }
    #content img.picture{
    float: left;
    }
    #content .section h2{
    border-bottom: 1px solid #ccc;
    padding: 0 0 0.3em 0;
    margin: 0 0 0.5em 0;
    text-align: right;
    }
    #content #intro{
    float: right;
    font-size: 70%;
    padding-top: 1em;
    width: 275px;
    }
    #content #intro p{
    margin-top: 0.1em;
    }
    #content #latest{
    clear: both;
    height: 200px;
    }
    #content #latest .images{
    display: block;
    text-align: center;
    }
    #content #latest .images img{
    border: 1px solid #fff;
    vertical-align: top;
    }
    #content #gallery img{
    padding: 0; margin: 0;
    }


    .style1 {
    font-size: 70%;
    font-weight: bold;
    }
    a:link {
    color: #ccc;
    text-decoration: none;
    }
    a:visited {
    text-decoration: none;
    color: #ccc;
    }
    a:hover {
    text-decoration: none;
    color: #ccc;
    }
    a:active {
    text-decoration: none;
    color: #ccc;
    }
    </style>

    </head>

    <body>

    <div id="wrapper">

    <div id="main">

    <div id="header">
    <img src="im/logo.gif" title="Antsplan.com Logo" class="logo" width="190" height="267" />

    <div id="nav">
    <ul>
    <li><a href="#">home</a></li>
    <li><a href="frameset.html" target="_parent">latest</a></li>
    <li><a href="galleries_frameset.html" target="_parent">galleries</a></li>
    <li><a href="about frameset.html" target="_parent">about</a></li>
    <li><a href="contact_frameset.html" target="_parent">contact</a></li>
    <li><a href="links frameset.html" target="_self">links</a></li>
    </ul>
    </div>
    </div> <!-- header -->

    <div id="content">
    <img src="im/sp.jpg" title="Me, Antsplan" class="picture" width="241" height="213" />
    <div id="intro">
    <p>welcome to antsplan.com, a site designed to display my photography work.</p>
    <p>below, in the latest work section, are the shots from my day with professional landscape and wildlife photographer neil mcintyre, at cairngorm national park, scotland.</p>
    <p>&nbsp;</p>
    <p><u>The People, Nature, Abstract and Glasgow gallery are now online, More galleries soon !</u></p>
    <p>&nbsp;</p>
    <p class="style1">THIS SITE IS BEST VIEWED USING INTERNET EXPLORER &amp; ALSO REQUIRES FLASH TO VIEW THE GALLERIES </p>
    </div>

    <div id="latest" class="section">
    <h2>latest work</h2>
    <div class="images">
    <a href="frameset.html" target="_parent">
    <img src="im/squirrel.jpg" title="Squirrel" width="211" height="140" /></a>
    <a href="frameset.html" target="_parent">
    <img src="im/waterfall.jpg" title="Waterfall" width="112" height="168" /></a>
    <a href="frameset.html" target="_parent">
    <img src="im/tree.jpg" title="Tree" width="211" height="140" /></a> </div>
    </div>

    <div id="gallery" class="section">
    <h2>galleries</h2>
    <div class="images">
    <a href="images/people/simpleviewer/people_frameset.html" target="_parent">
    <img src="im/index_38.jpg" border="0" title="People" width="111" height="100" /></a>
    <a href="places_frameset.html" target="_parent">
    <img src="im/index_40.jpg" border="0" lowsrc="places" title="Places" width="111" height="100" /></a>
    <a href="images/abstract/simpleviewer/abstract_frameset.html" target="_parent">
    <img src="im/index_42.jpg" border="0" title="Abstract" width="111" height="100" /></a>
    <img src="im/index_44.jpg" title="Sport" width="111" height="100" /><a href="images/nature/simpleviewer/nature_frameset.html" target="_parent"><img src="im/index_46.jpg" border="0" title="Nature" width="111" height="100" /></a></div>
    </div>

    </div>

    </div> <!-- main -->

    </div> <!-- wrapper -->

    </body>
    </html>
    How it looks in IE


    How it Looks in Firefox

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Get rid of clear:both; on #content #latest. Don't use something if you don't know what it does.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    May 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for the reply, ill give that a go, very much appreciated.

    As I said in the op, it was a mate who wrote this for me and myself personally I have no clue what any of it means.

    Thanks again, I'll let you know how I get on.

  • #4
    New to the CF scene
    Join Date
    May 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    mmmm, it didnt work, in fact it made it look real bad.

    Any other suggestions guys ?

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Nope not unless you give us a link to your site. Its not like we have the images available to us.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    New to the CF scene
    Join Date
    May 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    apologies, completely forgot about that - is there a doh! smiley ?

    here you go http://www.antsplan.com

    thanks for your help.

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Okay get rid of clear:both; on #latest and then you need to clear your img.picture and #intro so add the parts in bold.
    Code:
    				
    <div id="top" class="clearfix">
    <img src="im/sp.jpg" title="Me, Antsplan" class="picture" />
    				<div id="intro">
    
    				  <p>welcome to antsplan.com, a site designed to display my photography work.</p>
    					<p>below, in the latest work section, are the shots from my day with professional landscape and wildlife photographer neil mcintyre, at cairngorm national park, scotland.</p>
    					<p>&nbsp;</p>
    					<p><u>The People, Nature, Abstract  and Glasgow gallery are now online,  More galleries soon !</u></p>
    					<p>&nbsp;</p>
    					<p class="style1">THIS SITE IS BEST VIEWED USING INTERNET EXPLORER &amp; ALSO REQUIRES FLASH TO VIEW THE GALLERIES </p>
    
    			  </div>
    </div>
    				<div id="latest" class="section">
    Then add this to your CSS
    Code:
    .clearfix:after {
        content: "."; 
        display: block; 
        height: 0; 
        clear: both; 
        visibility: hidden;
    }
    
    /* Hides from IE-mac \*/
    * html .clearfix {height: 1%;}
    /* End hide from IE-mac */
    For more info on the method I used to clear floats refer to http://www.positioniseverything.net/easyclearing.html
    Last edited by _Aerospace_Eng_; 05-14-2007 at 06:51 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    New to the CF scene
    Join Date
    May 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh boy, I'm struggling with this........really sorry. I do sincerely appreciate your help on this though.

    I think I have followed exactly what you said, I got rid of the clear:both; statement. I then added the div in the place you said and closed it also. I then added the .clearfix code to my css and nothing, i'm afraid, it doesn't appear to have made any difference at all. I have read through the url and I think I do understand the concept behind what you have given me, but still can't make it work.

    I know its got to be the way I'm going about it:

    can I check that I'm placing the .clearfix code in the correct place in the css ?

    /*
    Name: Antsplan.com CSS
    Version: 0.1
    Author: Steve Fitzpatrick
    */

    /* Generic tags */

    body, html, *, table{
    font-size: 100%;
    font-family: lucida, verdana, sans-serif;
    margin: 0; padding: 0;
    }

    body{
    text-align: center;
    background: #181818;
    }

    .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

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

    /* Wrapper */
    Also here is my now updated html:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-AU">

    <head>
    <title>Antsplan.com - My Photography Work</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Steve Fitzpatrick" />
    <link rel="stylesheet" type="text/css" href="cs/stylegap.css" media="screen, tv, projection" />

    <style>

    #wrapper{
    width: 790px;
    text-align: left;
    margin: 1em auto 10em auto;
    color: #ccc;
    }

    /* Main */

    #main{}

    /* Header */

    #header{
    float: right;
    width: 189px;
    }
    #header img.logo{
    margin-top: 118px;
    }
    #header #nav ul{
    list-style-type: none;
    margin: 1em 0 0 30px;
    }
    #header #nav ul li{
    line-height: 1.5em;
    }
    #header #nav ul li a{
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    }
    #header #nav ul li a:hover{
    text-decoration: underline;
    }

    /* Content */
    #content{
    margin-left: 0;
    width: 580px;
    }
    #content h1{
    border-bottom: 2px solid #ccc;
    padding-bottom: 0.3em;
    margin-bottom: 1em;
    font-style: italic;
    }
    #content img.picture{
    float: left;
    }
    #content .section h2{
    border-bottom: 1px solid #ccc;
    padding: 0 0 0.3em 0;
    margin: 0 0 0.5em 0;
    text-align: right;
    }
    #content #intro{
    float: right;
    font-size: 70%;
    padding-top: 1em;
    width: 275px;
    }
    #content #intro p{
    margin-top: 0.1em;
    }
    #content #latest{
    height: 200px;
    }
    #content #latest .images{
    display: block;
    text-align: center;
    }
    #content #latest .images img{
    border: 1px solid #fff;
    vertical-align: top;
    }
    #content #gallery img{
    padding: 0; margin: 0;
    }


    .style1 {
    font-size: 70%;
    font-weight: bold;
    }
    a:link {
    color: #ccc;
    text-decoration: none;
    }
    a:visited {
    text-decoration: none;
    color: #ccc;
    }
    a:hover {
    text-decoration: none;
    color: #ccc;
    }
    a:active {
    text-decoration: none;
    color: #ccc;
    }
    </style>

    </head>

    <body>

    <div id="wrapper">

    <div id="main">

    <div id="header">
    <img src="im/logo.gif" title="Antsplan.com Logo" class="logo" />

    <div id="nav">
    <ul>
    <li><a href="#">home</a></li>
    <li><a href="frameset.html" target="_parent">latest</a></li>
    <li><a href="galleries_frameset.html" target="_parent">galleries</a></li>
    <li><a href="about frameset.html" target="_parent">about</a></li>
    <li><a href="contact_frameset.html" target="_parent">contact</a></li>
    <li><a href="links frameset.html" target="_self">links</a></li>
    </ul>
    </div>
    </div> <!-- header -->

    <div id="content">
    <div id="top" class="clearfix">
    <img src="im/sp.jpg" title="Me, Antsplan" class="picture" />
    <div id="intro">
    <p>welcome to antsplan.com, a site designed to display my photography work.</p>
    <p>below, in the latest work section, are the shots from my day with professional landscape and wildlife photographer neil mcintyre, at cairngorm national park, scotland.</p>
    <p>&nbsp;</p>
    <p><u>The People, Nature, Abstract and Glasgow gallery are now online, More galleries soon !</u></p>
    <p>&nbsp;</p>
    <p class="style1">THIS SITE IS BEST VIEWED USING INTERNET EXPLORER &amp; ALSO REQUIRES FLASH TO VIEW THE GALLERIES </p>
    </div>
    </div>
    <div id="latest" class="section">
    <h2>latest work</h2>
    <div class="images">
    <a href="frameset.html" target="_parent"><img src="im/squirrel.jpg" title="Squirrel" /></a>
    <a href="frameset.html" target="_parent"><img src="im/waterfall.jpg" title="Waterfall" /></a>
    <a href="frameset.html" target="_parent"><img src="im/tree.jpg" title="Tree" /></a> </div>
    </div>

    <div id="gallery" class="section">
    <h2>galleries</h2>
    <div class="images">
    <a href="images/people/simpleviewer/people_frameset.html" target="_parent"><img src="im/index_38.jpg" border="0" title="People" /></a>
    <a href="places_frameset.html" target="_parent"><img src="im/index_40.jpg" border="0" lowsrc="places" title="Places" /></a>
    <a href="images/abstract/simpleviewer/abstract_frameset.html" target="_parent"><img src="im/index_42.jpg" border="0" title="Abstract" /></a>
    <img src="im/index_44.jpg" title="Sport" /><a href="images/nature/simpleviewer/nature_frameset.html" target="_parent"><img src="im/index_46.jpg" border="0" title="Nature" /></a></div>
    </div>

    </div>

    </div> <!-- main -->

    </div> <!-- wrapper -->

    </body>
    </html>
    Last edited by antonp; 05-14-2007 at 10:16 PM.

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try this
    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" xml:lang="en" lang="en-AU">
    <head>
    <title>Antsplan.com - My Photography Work</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Steve Fitzpatrick" />
    <base href="http://www.antsplan.com/" />
    <link rel="stylesheet" type="text/css" href="cs/style.css" media="screen, tv, projection" />
    <style type="text/css">
    #wrapper {
    width:790px;
    text-align:left;
    margin:0 auto 10em;
    color:#ccc;
    }
    
    /*	Header	*/
    #header {
    float:left;
    width:189px;
    }
    
    #header img.logo {
    margin-top:118px;
    }
    
    #header #nav ul {
    list-style-type:none;
    margin:1em 0 0 30px;
    }
    
    #header #nav ul li {
    line-height:1.5em;
    }
    
    #header #nav ul li a {
    color:#fff;
    font-weight:700;
    text-decoration:none;
    }
    
    #header #nav ul li a:hover {
    text-decoration:underline;
    }
    
    /*	Content	*/
    #content {
    margin-left:0;
    width:580px;
    float:left;
    }
    
    #content h1 {
    border-bottom:2px solid #ccc;
    padding-bottom:.3em;
    margin-bottom:1em;
    font-style:italic;
    }
    
    #content img.picture {
    float:left;
    }
    
    #content .section h2 {
    border-bottom:1px solid #ccc;
    padding:0 0 .3em;
    margin:0 0 .5em;
    text-align:right;
    }
    
    #content #intro {
    float:right;
    font-size:70%;
    width:275px;
    }
    
    #content #intro p {
    padding:0 0 1em;
    }
    
    #content #latest .images {
    text-align:center;
    }
    
    #content #latest .images img {
    border:1px solid #fff;
    vertical-align:top;
    }
    
    #content #gallery img {
    padding:0;
    margin:0;
    }
    
    .smalltext {
    font-size:70%;
    font-weight:700;
    }
    
    .underline {
    text-decoration:underline;
    }
    
    a:link {
    color:#ccc;
    text-decoration:none;
    }
    
    a:visited {
    text-decoration:none;
    color:#ccc;
    }
    
    a:hover {
    text-decoration:none;
    color:#ccc;
    }
    
    a:active {
    text-decoration:none;
    color:#ccc;
    }
    
    .clearfix:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    }
    
    /* Hides from IE-mac \*/
    * html .clearfix {
    height:1%;
    }
    /* End hide from IE-mac */
    </style>
    </head>
    <body>
    <div id="wrapper" class="clearfix">
    	<div id="content">
    		<div id="top" class="clearfix"> <img alt="" src="im/sp.jpg" title="Me, Antsplan" class="picture" />
    			<div id="intro">
    				<p>Welcome to antsplan.com, a site designed to display my photography work.</p>
    				<p>Below, in the latest work section, are the shots from my day with professional landscape and wildlife photographer neil mcintyre, at cairngorm national park, scotland.</p>
    				<p class="underline">The People, Nature, Abstract  and Glasgow gallery are now online,  More galleries soon !</p>
    				<p class="smalltext">THIS SITE IS BEST VIEWED USING INTERNET EXPLORER &amp; ALSO REQUIRES FLASH TO VIEW THE GALLERIES </p>
    			</div>
    		</div>
    		<div id="latest" class="section">
    			<h2>latest work</h2>
    			<div class="images"> <a href="frameset.html" target="_blank"><img alt="" src="im/squirrel.jpg" title="Squirrel" /></a> <a href="frameset.html"><img alt="" src="im/waterfall.jpg" title="Waterfall" /></a> <a href="frameset.html"><img alt="" src="im/tree.jpg" title="Tree" /></a> </div>
    		</div>
    		<div id="gallery" class="section">
    			<h2>galleries</h2>
    			<div class="images"> <a href="images/people/simpleviewer/people_frameset.html" target="_blank"><img alt="" src="im/index_38.jpg" border="0" title="People" /></a> <a href="places_frameset.html"><img alt="" src="im/index_40.jpg" border="0" title="Places" /></a> <a href="images/abstract/simpleviewer/abstract_frameset.html"><img alt="" src="im/index_42.jpg" border="0" title="Abstract" /></a> <img alt="" src="im/index_44.jpg" title="Sport" /><a href="images/nature/simpleviewer/nature_frameset.html"><img alt="" src="im/index_46.jpg" border="0" title="Nature" /></a></div>
    		</div>
    	</div>
    	<!-- content -->
    	<div id="header"> <img alt="" src="im/logo.gif" title="Antsplan.com Logo" class="logo" />
    		<div id="nav">
    			<ul>
    				<li><a href="#">home</a></li>
    				<li><a href="frameset.html" target="_blank">latest</a></li>
    				<li><a href="galleries_frameset.html" target="_blank">galleries</a></li>
    				<li><a href="about%20frameset.html" target="_blank">about</a></li>
    				<li><a href="contact_frameset.html" target="_blank">contact</a></li>
    				<li><a href="links%20frameset.html">links</a></li>
    			</ul>
    		</div>
    	</div>
    	<!-- header -->
    </div>
    <!-- wrapper -->
    </body>
    </html>
    I moved the content before the header. Float both content and header to the left and I used the clearfix on the #top div and the #wrap div. Things should look good now. I changed the doctype because you want to use the target attribute. The target attribute is no longer valid when using a strict doctype. If you must make a link open in a different target then you will need to use javascript to set the target.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #10
    New to the CF scene
    Join Date
    May 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Aerospace_Eng_

    It's now working in IE and FF - yesssssssssssss!!!!!!

    You are a star ! I really cannot thank you enough.

    If its ok with you I will credit you on my about page ? Would you like me to link to any url for the credit ?

    Thanks sincerely !


  •  

    Posting Permissions

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