View Full Version : Look ma! no tables (just a little FF problem)

06-28-2007, 05:21 PM
I have coded this site in CSS entirely with no tables - everything seems to be working apart from on tiny element - I have added a transparent shadow to a div attached to the bottom of my site - outside the main div container.


This works fine in Internet Explorer, but a mysterious space occurs in Firefox - I've searched on the web to fine the answer and apparently it may be about collapsing margins - but I have found no solution so far:

Here is the CSS:

body {
background-color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px;
padding: 0px;
background-image: url(../images/bg.jpg);
background-repeat: repeat-x;
text-align: center;
.style1 {
font-size: 16px;
font-weight: bold;
color: #B30100;

.style4 {font-size: 14}
.style5 {font-size: 16px}
#Layer1 {
left: 600px;
top: -17px;
.style6 {
color: #B20000;
font-weight: bold;
a:link {
color: #B20000;
a:visited {
color: #6633FF;
a:hover {
color: #ff7f00;

#main { width: 766px; background:url(images/sideshadows.png) repeat-y; margin: 0em auto; padding: 0; text-align: center; position:relative; height:auto; border: 1px hidden #000;}

#middle { float:none; background:#FFFFFF; width: 750px; margin: 0em auto; padding: 0; text-align: center; position:relative; height:auto; border: 1px hidden #000;}

.head { height:134px; background-image:url(images/toplogo.gif); margin-left:5px; margin-right:5px; background-repeat:no-repeat; position:relative; }

.topmenu { position:relative; bottom:5px; left:15px; width: 50px; }

.nav { position:absolute; bottom: 0px; left:1px; width: 750px }

.photo {width:200px; height:171px}

.content { margin: 8px; background-color:#FFFFFF }
.testimonials { margin: 15px; background-color:#FFFFFF }

.welcome {border:1px solid #CCCCCC; background:#dbdbdb; padding:8px; margin-right:3px;}

.quotation {background:#ffffff; padding:10px; margin-right:3px;}

.copyright { font-family: Arial, Helvetica, sans-serif; font-size: 10px; margin-top:10px; border: 1px hidden #000;}

#bottom { width: 766px; height:8px; margin: 0em auto; margin-top:0; padding: 0; text-align: center; position:relative; line-height: 0; border: 1px hidden #000;}

Here is the XHTML:

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>UK Offer Media</title>
<meta name="description" content="UK Offer Media - corporate website for UKOffer.com">
<LINK REL=stylesheet HREF="style1.css" TYPE="text/css">
<script language="javascript" type="script"><!--
if (document.images) {var menu=new Image(); menu.src="images/hover/home.gif";}
if (document.images) {var menu1=new Image(); menu1.src="images/hover/about.gif";}
if (document.images) {var menu4=new Image(); menu4.src="menu/hover/testimonials.jpg";}
if (document.images) {var menu2=new Image(); menu2.src="images/hover/blog.gif";}
if (document.images) {var menu5=new Image(); menu5.src="images/hover/contact.gif";}
<style type="text/css">
.style7 {
color: #B30100;
font-weight: bold;


<div id="main">
<div id="middle"><?php
?><div class="content">
<div align="left" class="testimonials"><font class="style1"> About Us </font> <br />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc molestie. Aenean viverra lectus id dolor euismod facilisis. Phasellus sit amet dui vel arcu aliquet molestie. Vestibulum fringilla. Curabitur consequat mauris eu sem. Etiam in tellus. Aenean mollis urna id purus. In in dui non lorem rhoncus scelerisque. Proin vitae urna. Duis nec sem nec nisl pharetra porttitor. Maecenas eleifend lectus ac turpis. In nonummy, nisl vitae tincidunt posuere, metus sapien ultrices purus, eu ultrices neque enim vestibulum dui. Nulla eu sapien et purus vestibulum nonummy. Aliquam congue purus id nisl. Maecenas et erat eget pede dapibus mattis. Maecenas arcu dui, aliquet nec, elementum nec, nonummy ac, libero. Nulla pharetra urna nec dolor laoreet scelerisque. Suspendisse nibh enim, ultricies a, cursus in, scelerisque at, urna. Integer lobortis purus sed enim. </p>
<p>Fusce cursus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin mauris. Vestibulum eget erat ut nisi aliquam ultrices. Quisque tortor nisi, vulputate eget, iaculis vel, gravida a, tellus. Donec rhoncus enim in lacus. Mauris congue, erat vel porttitor cursus, urna orci placerat velit, a scelerisque ipsum eros a pede. Cras id lorem at odio porttitor venenatis. Pellentesque ut pede ut nunc pellentesque placerat. Suspendisse eget nunc. Ut nec tellus ut diam gravida posuere. Praesent sapien velit, egestas a, pulvinar adipiscing, hendrerit tincidunt, dolor. </p>
<p>In eu dolor. Nulla fermentum aliquet risus. Sed ac est eget metus pharetra bibendum. Mauris luctus venenatis dui. Nam lorem. Curabitur blandit erat at lorem. Cras aliquam quam nec urna. Quisque ultricies eros in metus. Quisque ornare commodo urna. Pellentesque sodales fermentum urna. Phasellus elit nulla, consequat ut, gravida vel, bibendum et, neque. Nullam et mi ac justo dignissim sollicitudin. </p>
<div class="footer"><?php
<div id="bottom"><img src="images/bshadow.png" align="middle" /></div>

Also I have noticed the testimonials page in firefox jumps slightly to the right compared to the other pages when it loads up - this is odd as most of the code is identical - I only changed header elements to allow the top navigation to work properly. Can anyone see what is happening here??



06-28-2007, 08:39 PM
Validate you XHTML. Currently you have 19 errors. And also, 1 error in the CSS.

06-29-2007, 01:57 PM
How easy it is to stick someones website in the validator and find how many times they have dared to ignore WC3 standards. How smug must one have to be to spend energy writing a reply to my question that has little use and smacks of "holier than thou" piety.

Looking through the errors - yes I have missed a few closing tags, the validator doesn't like my javascript, and I have deliberately chosen not to use alt tags on images which are merely decorative such as borders.

There are near 2000 errors in Amazon.com alone - but their site looks fine and makes plenty of money.

If you know of my CSS error - then it would be in the spirit of the forum - to let me know.

Otherwise - if you cant say something constructive - dont say anything at all..

06-29-2007, 02:05 PM
add this:


firefox isn't perfect.

06-29-2007, 02:48 PM
There are near 2000 errors in Amazon.com alone - but their site looks fine and makes plenty of money.

If you know of my CSS error - then it would be in the spirit of the forum - to let me know.

Otherwise - if you cant say something constructive - dont say anything at all..

I'm not even going to argue with you, but do you think that because Amazon.com doesn't validate makes it OK for your site not to validate? Not trying to sound holy but two wrongs don't make one right, and whether one want it or not, it is true.

Your CSS error is very simple. You need to add a unit after the number.

On a final note, you will find many who will not even try to help you if the page in question do not validate.

06-29-2007, 04:02 PM
What I was saying was that perhaps the validation is a little too picky and too hard on todays real life coding requirements - if Amazon.com and a zillion other websites have errors, then I'm not too concerned that my sites have - as long as they work on as many browsers as possible..

But also - its not far from the people in forums who join a thread by criticising everyones grammar.

I finally build a site using no tables, and noone even appreciates my efforts to at least try to update my skills to web2.0. The only thing I am learning here is that if no one will help on this site without my validation being clean as a whistle - then these people are a tad anal and selfish.

As it happens I have 5 remaining "errors", my problems still occur and none of the errors are causing my problems...

the javascript one - i do not understand, the code works fine and I've seen code like that in many other places.

Below are the results of checking this document for XML well-formedness and validity.

Error Line 24 column 106: required attribute "alt" not specified.

-- This is a decorative line and needs no "alt" text appearing.

Error Line 24 column 141: there is no attribute "onMouseOver".

This is standard javascript - do I need to have it all in lowercase for validation???

Error Line 24 column 223: there is no attribute "onMouseOut".


Error Line 34 column 406: required attribute "alt" not specified.

This is a quotation mark as a graphic, i suppose I could alt them "quote" "unquote"

Error Line 48 column 63: required attribute "alt" not specified.

This is a bottom shadow!! - now I understand web accessibility, but I dont want every little graphic detail on my site popping up with alt text - its annoying and unneccessary!

I do not wish to label every spec of gif or jpeg on my site, lest it be covered with popup boxes saying "border" "space" "shadow" etc....

The browser world is full of bugs, "features" and hacks - I'm not happy that there is no one standard we can all follow because different browsers read code differently, so I really do look up to folks who are hardcore followers of webstandards - and I would like to learn as much as possible.

But I'm paid to get a job done, I have to keep the academics to my spare time and if a site works cross browser, it works.

My issue has never been anything but an issue of browser compatibility - and my mistake has been relying on IE for too long - for what is worth, the space above the shadow means very little to my employers as they only use IE!

06-29-2007, 07:44 PM
If you put alt tags in like this, they will not be showing as errors. the title tag has its uses for accessibility tooo.:

<img src="/images/image.jpg" title="whatever the image is" alt="" />

As for validation or not; my view is that if your have a problem cross-browser, it can make fixing it so much simpler, if your code validates because bby making it valid, you remove the possibility that the rror is caused by coding. Then validate the css - it can help find typos that otherwise may be overlooked and so make it clear that the difficulty is not due to a mistake.

Also, with regard to amazon etc, most of the big sites still use tables. But where a site is designed with xhtml and CSS then the correctness of the codes seems, to me, to be more important.


06-29-2007, 10:50 PM
Just so you know, onmouseover does need to be in lower case.
If your ever in doubt just check out the xhtml DTD (http://www.w3.org/TR/xhtml1/dtds.html)

06-30-2007, 06:24 PM
but a mysterious space occurs in Firefox - I've searched on the web to fine the answer and apparently it may be about collapsing margins - but I have found no solution so far:

You are right that it has to do with margin collapsing. You have this:

.content { margin: 8px; background-color:#FFFFFF }
It is the 8px bottom margin that is causing the gap. Your solution is to simply remove that bottom margin.

As for your shadow-border images: They are presentational which means that they should really be implemented using CSS as background images instead of using the img element. This ensures that they don't show up when styles are disabled as one would expect.