3 replies [Last post]
JakeThePeg
Offline
Regular
Last seen: 16 years 17 weeks ago
Joined: 2005-08-04
Posts: 13
Points: 0

Hi

I have just released phase 1 of my online design website... The Peg. Currently I am focussing on my portfolio section.

You can view my portfolio pages at thepeg.com.au/portfolio.htm

My main problem is browser compatability with firefox. Click on any of the links from the Portfolio page (called the Peg Basket) and It works fine in IE (as far as I know, I haven't tested all versions), but in Firefox the washing line (the left side bar) which connects to the footer (the green grassy thing) on the left of the screen doesn't go all the way to the end of the page content. Instead, in Firefox it decides to place the footer at the end of the first viewable section of content. Arrghh. Make sense? Try it... here's an example.... http://www.thepeg.com.au/print.htm
Any ideas would be greatly appreciated. Cheers peoples!!

Here is the css...

body { background : #00CCFF;  margin-left: -6px; margin-right: -10px; margin-top: -20px; margin-bottom: 0px; font : 10px Verdana, sans-serif; color:#111111;}

.boxleft { height:85%; float:left; clear:both; width: 100%; background: url('../Images/clothesline3.jpg') no-repeat; } 
.footer { float:left; clear:both;  width: 100%; height:15%; background: url('../Images/footer.gif') no-repeat; } 
h1 {margin-left: 1.5cm}
p.marginleft {margin-left:2.2cm;}
table {margin-left:3.0cm;clear:both; font : 12px Verdana, sans-serif; color:#111111;}
table a {text-decoration:none;}
p {margin-left: 3.0cm}

ANd here is some sample html for the "Print" page...

<body>
<div class="boxleft">
<h1>the peg <img src="Images/smallpeg.jpg"> basket  </h1>
<p class = "marginleft">Print Design</p>
<p class = "marginleft"><a href="portfolio.htm">Back to the peg basket index page</a></p>
<table width="80%" border="0" cellpadding="25">
 
  <tr >
      <td align="center"><a href="Images/portfolio/print/large/invite.jpg" target="_blank"><img src="Images/portfolio/print/invite.jpg"></a></td>
      <td>21 today, 21 today. Invitation to a music enthusiast's 21st b'day party. Rock on!</td>
  </tr>
 
  <tr >
      <td align="center"><a href="Images/portfolio/print/large/cardinvite2.jpg" target="_blank"><img src="Images/portfolio/print/cardinvite2.jpg"></a>
	  <a href="Images/portfolio/print/large/cardinvite.jpg" target="_blank"><img src="Images/portfolio/print/cardinvite.jpg"></a></td>
      <td>Another 21st birthday invite - aren't you popular today. Good ol' Vegas Vacation theme this time...</td>
  </tr>
  
  <tr >
    <td align="center"><a href="Images/portfolio/print/large/amunc.gif" target="_blank"><img src="Images/portfolio/print/amunc.gif"></a></td>
    <td>Stationery for the Uni of Qld AMUNC (Asia-Pacific Model United Nations Conference) proposal.</td>
  </tr>
 
  <tr >
    <td align="center"><a href="Images/portfolio/print/large/qbsbrochure.pdf" target="_blank"><img src="Images/portfolio/print/qbsbrochure.jpg"></a></td>
    <td>A Qantas Business Services (QBS) internal newsletter. Click on the image to read the full pdf version.</td>
  </tr>
  
  <tr >
    <td align="center"><a href="Images/portfolio/print/large/qbsposter.pdf" target="_blank"><img src="Images/portfolio/print/qbsposter.jpg"></a></td>
    <td>Poster designed for a major QBS seminar, which was printed in A1 and A2. Click on the thumbnail image to view the pdf.</td>
  </tr> 
  
  <tr >
    <td align="center"><a href="Images/portfolio/print/large/qbswhiteboard.pdf" target="_blank"><img src="Images/portfolio/print/qbswhiteboard.jpg"></a></td>
    <td>For the same use as the previous poster, this design was printed onto A1 and A2 "whiteboard" stock, for repeated use as a themed whiteboard during QBS events.</td>
  </tr> 
  
  
  
</table>

</div>

<div class="footer"></div>
</body>

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 day 11 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

The Peg Online Design - site released, but flawed &amp;need

Unfortunately, you've got a lot of learning and coding to do before this site will work.

Read up on some basic CSS tutorials.

The links should be a list, not separate paragraphs.

The doctype is incomplete, throwing IE into quirks mode.

You're using a lot of negative margins which seems silly for a simple layout.

Verschwindende wrote:
  • CSS doesn't make pies

JakeThePeg
Offline
Regular
Last seen: 16 years 17 weeks ago
Joined: 2005-08-04
Posts: 13
Points: 0

The Peg Online Design - site released, but flawed &amp;need

Righteo...thanks for the tips. I need some more info.

Admittedly, I have done some more respectable CSS attempts than this in the past. This has been whacked together in a matter of hours (as the portfolio is URGENT!!) so I probly haven't thought it out well enough. Enough of the excuses.. I need help!!

K, I deleted the negative margins as you suggested, no problems there.

What do you mean by the Doctype being incomplete? And more importantly, how would I fix that?

And why should the links be in a list format? Which links are you referring to by the way?

Apologies for the inquisitiveness, but questions are the best way to learn - especially in a hurry! Any help (or quick fixes) whatsoever will be greatly appreciated.

Cheers

BuRn__
Offline
newbie
phoenix, az, usa
Last seen: 16 years 18 weeks ago
phoenix, az, usa
Joined: 2005-07-29
Posts: 1
Points: 0

The Peg Online Design - site released, but flawed &amp;need

JakeThePeg wrote:

What do you mean by the Doctype being incomplete? And more importantly, how would I fix that?

http://www.w3.org/QA/2002/04/valid-dtd-list.html

in your case, you're missing the link segment. here's the complete one you should be using.

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

JakeThePeg wrote:
And why should the links be in a list format? Which links are you referring to by the way?

its just good practice to arrange links within a list format instead of sperate paragraph tags. (the link section on http://www.thepeg.com.au/portfolio.htm )