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 9 of 9
  1. #1
    New Coder
    Join Date
    Apr 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Look ma! no tables (just a little FF problem)

    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.

    http://www.ukoffermedia.com

    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:

    Code:
    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 {
    	position:relative;
    	width:124px;
    	height:16px;
    	z-index:1;
    	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:

    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">
    <head>
    <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";}
    //--></script>
    <style type="text/css">
    <!--
    .style7 {
    	color: #B30100;
    	font-weight: bold;
    }
    
    -->
    </style></head>
    <body>
    
    <div id="main">
      <div id="middle"><?php 
    include("header2.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>
      <div class="footer"><?php 
    include("footer.php");
    ?></div>
    </div>
      </div>
    </div>
    <div id="bottom"><img src="images/bshadow.png" align="middle" /></div>
    </body>
    </html>
    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??

    Cheers!

    Dan

  • #2
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Validate you XHTML. Currently you have 19 errors. And also, 1 error in the CSS.

  • #3
    New Coder
    Join Date
    Apr 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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..

  • #4
    Regular Coder
    Join Date
    Dec 2006
    Posts
    177
    Thanks
    7
    Thanked 0 Times in 0 Posts
    add this:
    Code:
    #bottom{margin-top:-3px;}
    firefox isn't perfect.
    Last edited by nolvorite; 06-29-2007 at 02:52 PM.

  • #5
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Quote Originally Posted by gjindancer View Post
    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.

  • #6
    New Coder
    Join Date
    Apr 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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".

    ditto.

    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!

  • #7
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    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.

    bazz

  • #8
    New Coder
    Join Date
    May 2007
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just so you know, onmouseover does need to be in lower case.
    If your ever in doubt just check out the xhtml DTD

  • #9
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by gjindancer View Post
    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:
    Code:
    .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.


  •  

    Posting Permissions

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