15 replies [Last post]
kieranmobrien
Offline
Regular
Last seen: 17 years 43 weeks ago
Joined: 2005-04-05
Posts: 16
Points: 0

Hi all,

I am close to finishing the site I have been redesigning to be all CSS based. However, I have a few final bugs in IE and Mozilla/Firefox.

http://www.geocities.com/nectartest/test.html

IE seems to be doing something strange with the body section of the page where it pushes it down.

In Mozilla and Firefox I can get the containing box to match the height of the content.

Any help would be greatly appreciated and if you notice any other bugs I haven't yet noticed.

Regards,
Kieran.

antibland
antibland's picture
Offline
Leader
Pittsburgh
Last seen: 14 years 3 weeks ago
Pittsburgh
Joined: 2005-01-17
Posts: 603
Points: 0

Few final bugs

Kieran,

You're suffering from major validation errors. You need to complete the validation process. If this doesn't clear up your problem(Drunk, come back and we'll take a look at it. Please refer to the 'how to' section for more details on web standards and validation.

your website validation results

Antibland

kieranmobrien
Offline
Regular
Last seen: 17 years 43 weeks ago
Joined: 2005-04-05
Posts: 16
Points: 0

Few final bugs

Antibland,

I think you'll find all those errors are related to Yahoo's code as I'm using their free service to host my temporary page. I unfortunately don't have access to put this onto another server. If you copy and paste the code and save it locally it validates fine.

Regards,
Kieran.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Few final bugs

Yes but does it demonstrate the same problems, trouble is your asking us to look at problems and providing us with a link to a site that is rendering your code in Quirks Mode.
Antibland was quite right to point out the validation errors, we live or die by validation and standards, it effects the quality and effectiveness of any help we may offer.
Often we probably don't have the time to cut and paste the code onto our own boxes to check things out, it can tend to be a bit time consuming and we rely on the live links for troubleshooting.
Hosting is very cheap nowadays and you can easily pick very good hosting for test purposes, that Geocities thing is horrible.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

kieranmobrien
Offline
Regular
Last seen: 17 years 43 weeks ago
Joined: 2005-04-05
Posts: 16
Points: 0

NEW HOSTING: Please check again

Hi all,

I managed to persuade the administrator here to let me publish this test page to our server - which wasn't an easy task!

http://www.loyalty.co.uk/redesign_test_a9_5ko.html

In the interim I have also managed to tweak a few things to get the page to appear more consistently across browsers. The only problem I've yet to fix is getting the height of the left hand navigation div to extend to the bottom of the floating div to the right. I tried putting a height of 100% which didn't work, so I then tried to put a background image in that div which also didn't work.

Another little problem in Firefox is my containing divs' border fails to show up. Any ideas on this one too??

Thanks in advance and sorry for the initial problems using Geocities!

Kieran.

antibland
antibland's picture
Offline
Leader
Pittsburgh
Last seen: 14 years 3 weeks ago
Pittsburgh
Joined: 2005-01-17
Posts: 603
Points: 0

Re: NEW HOSTING: Please check again

kieranmobrien wrote:
The only problem I've yet to fix is getting the height of the left hand navigation div to extend to the bottom of the floating div to the right.

You need the faux column technique like I need a girlfriend (hint: that means really badly).

Antibland

kieranmobrien
Offline
Regular
Last seen: 17 years 43 weeks ago
Joined: 2005-04-05
Posts: 16
Points: 0

Few final bugs

Antibland,

Thanks for that tip!! It has worked!! My problem now is partly because of the design. If you have a look at my page again you will notice that the background extends to after the containing box. Do you know if I can get it to stop by using another container box with a white image or something along those lines?

I also see to be 1px out in IE which I can't figure out why. I've double-checked all my properties and widths etc to make sure they add up correctly and it appears as if they do. Any help here would be much appreciated!!

Thanks again.

Kieran.

antibland
antibland's picture
Offline
Leader
Pittsburgh
Last seen: 14 years 3 weeks ago
Pittsburgh
Joined: 2005-01-17
Posts: 603
Points: 0

Few final bugs

Consider the following example. You should hopefully be able to modify your example to work like this (I've attached the background image). Note that the footer uses clear: both to assure position beneath the floated divs preceding it.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
#container { width: 764px; background: transparent url(bg-body.gif) 0 0 repeat-y; border-left: 1px solid #DFDFDF; border-right: 1px solid #DFDFDF; text-align: left;  }
#footer { background: #3995D2; border-top: 2px solid #246F9A; height: 15px; border-left: 1px solid #3995D2; border-right: 1px solid #3995D2; clear: both; }
#content { margin: 20px 0; padding: 0 25px; }
#content p { font-size: 14px; }
#mainbody { float: left; width: 557px; }
#sidebar { float: right; width: 207px;    margin: 10px 0 25px 0;   padding: 0; color: #888; }
#sidebar h1 {font-size: 16px; color: #FF5F00; font-weight: normal; }
body { font-family: Arial, Helvetica, sans-serif; }
div.red { background: #ff0000; height: 10px; }
</style>
</head>
<body>
<div id="container">
  <div class="red"></div>
  <div id="mainbody">
    <div id="content">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
      <p> Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor *beep* soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </p>
    </div>
  </div>
  <div id="sidebar">
    <h1>right content</h1>
  </div>
  <div id="footer"></div>
</div>
</body>
</html>

Antibland

kieranmobrien
Offline
Regular
Last seen: 17 years 43 weeks ago
Joined: 2005-04-05
Posts: 16
Points: 0

Few final bugs

Antibland,

I've been mucking around with the float property and can't seem to get it to work in my case!! I will persist and try with your example. I couldn't find your attached image though. Am I stupid? or was it not attached?

Regards,
Kieran.

antibland
antibland's picture
Offline
Leader
Pittsburgh
Last seen: 14 years 3 weeks ago
Pittsburgh
Joined: 2005-01-17
Posts: 603
Points: 0

Few final bugs

Kieran,

The attachment is right at the bottom of my post, beneath my name (Antibland). It's a clickable link.

kieranmobrien
Offline
Regular
Last seen: 17 years 43 weeks ago
Joined: 2005-04-05
Posts: 16
Points: 0

Few final bugs

Antibland,

Cheers mate! I swear it wasn't there the first time!!!

I've tweaked your code a bit and it seems to work with mine fine!! It is friday afternoon after all!!

Thanks for all your help!!

Regards,
Kieran.

antibland
antibland's picture
Offline
Leader
Pittsburgh
Last seen: 14 years 3 weeks ago
Pittsburgh
Joined: 2005-01-17
Posts: 603
Points: 0

Few final bugs

kieranmobrien,

I had a feeling you'd get it working. Here's to a great friday. \:D/

Antibland

kieranmobrien
Offline
Regular
Last seen: 17 years 43 weeks ago
Joined: 2005-04-05
Posts: 16
Points: 0

Final check please

Hi all,

I have made my tweaks and I think it is ready to be checked finally!! I haven't seen any bugs or differences between browsers but am checking on the latest versions. Would be interested to see if anyone can see anything wrong in any of their browsers.

http://www.loyalty.co.uk/redesign_test_a9_5ko.html

Regards,
Kieran.

antibland
antibland's picture
Offline
Leader
Pittsburgh
Last seen: 14 years 3 weeks ago
Pittsburgh
Joined: 2005-01-17
Posts: 603
Points: 0

Few final bugs

kieranmobrien,

Looking better but you have a CSS validation error on line 76.

Line: 76 Context : a.topLevelLink:hover
Invalid number : width only 0 can be a length. You must put an unit after your number : 167


You wrote:
width: 167

instead of:
width: 167px;

You should be careful with capitalizing, well, anything really. For example,

A.mainnavlink:link

should really be:

a.mainnavlink:link

As a final piece of advice, once you fix the css error, place all the style into an external file. This will cache the CSS and improve efficiency.

Other than those things, nice work. Your page has come a long way.

Antibland

kieranmobrien
Offline
Regular
Last seen: 17 years 43 weeks ago
Joined: 2005-04-05
Posts: 16
Points: 0

Few final bugs

Antibland,

Oops, yeah I forgot to validate my css! Thanks for that! I also have never heard about the capitalisation problems! I generally always do write it in lower but I borrowed this snippet of code from someone else and didn't bother changing it!

I will put it all in an external stylesheet eventually, I didn't want to do it just yet in case I accidentally screwed around with the existing one!

It has come a long way! Thanks for all your help too! It would have taken me a lot longer to figure out those problems otherwise!

Regards,
Kieran.

kieranmobrien
Offline
Regular
Last seen: 17 years 43 weeks ago
Joined: 2005-04-05
Posts: 16
Points: 0

Mac Issue

I have been made aware that there are a few issues in Mac IE version 5+. As I don't have a copy of it is anyone able to get me a screenshot so I can try to figure out what the problem is! All other browsers appear to be fine on Mac.