...

View Full Version : A big gap in the page when viewed through Firefox - any suggestions



antonp
05-13-2007, 12:11 PM
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
http://www.antsplan.com/temp/ie.jpg

How it Looks in Firefox
http://www.antsplan.com/temp/firefox.jpg

_Aerospace_Eng_
05-13-2007, 05:45 PM
Get rid of clear:both; on #content #latest. Don't use something if you don't know what it does.

antonp
05-13-2007, 10:48 PM
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.

antonp
05-13-2007, 10:56 PM
mmmm, it didnt work, in fact it made it look real bad.

Any other suggestions guys ?

_Aerospace_Eng_
05-13-2007, 11:00 PM
Nope not unless you give us a link to your site. Its not like we have the images available to us.

antonp
05-14-2007, 09:55 AM
apologies, completely forgot about that - is there a doh! smiley ?

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

thanks for your help.

_Aerospace_Eng_
05-14-2007, 06:46 PM
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.


<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

.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

antonp
05-14-2007, 10:11 PM
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>

_Aerospace_Eng_
05-14-2007, 10:33 PM
Try this

<!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.

antonp
05-14-2007, 10:47 PM
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 !



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum