Submit Your Article Forum Rules

Results 1 to 9 of 9

Thread: Another CSS spacing problems in IE and Firefox

  1. #1
    Member
    Join Date
    Nov 2006
    Posts
    79

    Another CSS spacing problems in IE and Firefox

    Hello,

    I have been looking around for a fix for my CSS browser related problems - with no luck.

    Please help!

    the page i am trying to fix is this:

    Atlantis Project - Nasimi Tray | Zaynab Mahmood

    The Page CSS is:

    /* Layout Stylesheet */

    body {

    background:#ffffff;
    color: #333333;
    text-align:center;
    padding:0;
    margin:0;

    }

    #outer {
    text-align:left;
    border:1px solid #fff;
    width:730px;
    margin:auto;
    }

    #hdr {
    height:10px;
    background:#fff;
    color: #fff;
    }

    #bar {
    height:7px;
    background:#ffffff;
    color: #fff;
    border: solid #fff;
    border-bottom-color: #fff;
    border-width:1px 0 1px 0;
    }

    #bodyblock {


    position:absolute;
    left:60px;
    top:60px;
    background: #ffffff;
    color: #333333;
    width:730px;
    padding:0;
    }

    #l-col {
    float:left;
    background:#ffffff;
    color: #333333;
    width:145px;
    }

    #cont {
    width:575px;
    background:#ffffff;
    color: #333333;
    border:solid #fff;
    border-width:0 0 0 1px;
    text-align:left;
    line-height: 120pt;
    }

    .contentbox

    {PADDING-RIGHT: 0px; PADDING-LEFT: 1px; FLOAT: left; PADDING-BOTTOM: 0px;

    MARGIN: 1px 1px 0px 0px; WIDTH: 520px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; font-size:12px;

    font-family: helvetica, impact, sans-serif;}

    .font1

    {

    COLOR: #00aeef;

    TEXT-DECORATION: none;

    padding-top:none;

    font-size:13px;

    }


    .font2

    {

    COLOR: #00aeef;

    TEXT-DECORATION: none;

    padding-top:none;

    font-size:11px;

    font-family: helvetica, impact, sans-serif;

    font-weight: bold;

    }


    .font3 {

    COLOR: #707070;

    font-weight: bold;

    font-size:11px;

    }


    and the HTML/PHP page is this:

    <body>

    <div id="outer">

    <div id="hdr" align="left">


    </div>

    <div id="bar">


    </div>

    <div id="bodyblock" align="right">

    <div id="l-col" align="left">

    <?php include('../mylogo.php');?>


    <?php include('../navigational_links_home.html');?>

    </div>

    <div id="cont">

    <h3 align="left"></h3>

    <div align="left">

    <img src="Client names_homepage.jpg" alt="Client names"/>

    <?php include('../footer.php');?>

    </div>

    <div class="contentbox">

    <b class="font1"> more text here...
    <span class="font2">text goes here</span>

    </div>
    </div>
    </div>
    </body>

  2. #2
    Administrator weegillis's Avatar
    Join Date
    Oct 2003
    Posts
    5,819

    Re: Another CSS spacing problems in IE and Firefox

    Right off the hop, can you set up your pages to serve out with a DOCTYPE? Browsers are forced to revert to their default, whichever that might be.
    Quote Originally Posted by validator.w3.org
    Unable to Determine Parse Mode!

    The validator can process documents either as XML (for document types such as XHTML, SVG, etc.) or SGML (for HTML 4.01 and prior versions). For this document, the information available was not sufficient to determine the parsing mode unambiguously, because:

    * the MIME Media Type (text/html) can be used for XML or SGML document types
    * No known Document Type could be detected
    * No XML declaration (e.g <?xml version="1.0"?>) could be found at the beginning of the document.
    * No XML namespace (e.g <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">) could be found at the root of the document.

    As a default, the validator is falling back to SGML mode.
    Add to this a mssing <html> opening tag.

    ALSO: Missing end tag for "outer" div. yes, it is missing...

    Mixing DTD's
    HTML Code:
    <img src="#" alt="" border="0"/>
    The border attribute is HTML and the ENDTAG '/' is an XHTML spec. The border attribute is deprecated in XHTML, and the '/' needs to be preceded by a empty space, as in ' />'.

  3. #3
    Member
    Join Date
    Nov 2006
    Posts
    79

    Re: Another CSS spacing problems in IE and Firefox

    thaaaaanks.. i made more changes to the code.

    any more feedback regarding the spacing? its driving me mad ;(

  4. #4
    Administrator weegillis's Avatar
    Join Date
    Oct 2003
    Posts
    5,819

    Re: Another CSS spacing problems in IE and Firefox

    This is a quick rehash of your earlier page. Will need to let this one sit for while and see where you go before looking any further. Only the document and the layout css have been altered, not the other two.

    HTML 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" lang="en" xml:lang="en">
    <head>
    <title>Atlantis Project - Nasimi Tray | Zaynab Mahmood</title>
    <meta name="title" content="Atlantis Project - Nasimi Tray | Zaynab Mahmood" />
    <meta name="description" content="Atlantis Project - Nasimi Tray | Zaynab Mahmood" />
    <meta name="keywords" content="Expert logo design for food and beverage luxury brands. Contact freelancer" /> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="Robots" content="NOINDEX" /> 
    <link rel="stylesheet" type="text/css" href="../layout.css" />
    <link rel="stylesheet" type="text/css" href="../2c-hd-ft-fixed-presentation.css" />
    <link rel="stylesheet" type="text/css" href="../navigationalinks.css" /> 
    </head>
    
    <body>
    <div id="outer">
     <div id="hdr"></div>
     <div id="bar"></div>
     <div id="bodyblock">
      <div id="l-col">
       <ul id="nav">
    <li><a href="#"><img src="http://www.webproworld.com/images/ZaynabLogo2.jpg" width="145" height="75" alt="" />Home</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Biography</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Shop</a></li>
       </ul>
      </div>
      <div id="cont">
       <h1>Test Heading</h1>
       <div class="contentbox">
        <b class="font1">&nbsp;<span class="font2">&nbsp;</span>&nbsp;</b>
       </div> 
       <div>
        <img src="http://www.webproworld.com/images/client_names_homepage.jpg" alt="Client names" />
        <div id="ftr">(c) 2009 Zaynab Mahmood</div>
       </div> 
      </div>
     </div>
    </div>
    </body>
    </html>
    I squished all the embedded and inline css into the LAYOUT document:
    Code:
    html, body {
     margin:0;
     padding:0;
     text-align: center;
     font-size: 100%;
     color: #000;
     background: #fff;
    }
    #outer {
     width: 730px;
     margin: auto;
     font-family: Helvetica, Impact, sans-serif;
     color: #333;
     background: #fff;
     border: 1px solid #fff;
     position: relative;
    }
    #hdr {
     height: 10px;
     color: #fff;
     background: #fff;
    }
    #bar {
     height: 7px;
     color: #fff;
     background: #fff;
     border: solid #fff;
     border-bottom-color: #fff;	
     border-width: 1px 0 1px 0;
    }
    #bodyblock {
     width: 100%;
     position: absolute;
    }
    #l-col {
     float: left;
     width: 145px;
     color: #333;
     background: #fff;
    }
    #cont {
     width: 575px;
     border: solid #fff;	
     border-width: 0 0 0 1px;
     text-align: left;
     color: #333;
     background: #fff;
    }
    .contentbox {
     float: left;
     width: 575px;
     margin: 1px 1px 0 0;
     padding: 0 0 0 1px;
     font-size: 80%;
    }
    #ftr {
     float: left;
     width: 575px;
     height: 25px;
     margin: 2px 1px 10px 0;
     padding: 0 0 0 1px;
     font-size: 60%;
     color: #333;
     background: #fff;
     border: solid #fff;
     border-width: 1px 0 0 0;
    }
    #ftr ul,
    #ftr ol,
    .contentbox ul,
    .contentbox ol {
     list-style: none;
    }
    .font1 {
     padding-top: none;
     font-size: 85%;
     color: #00aeef;
     background-color: transparent;
    }
    .font2 {
     padding-top: none;
     font-size: 75%;
     font-weight: bold;
     color: #00aeef;
     background-color: transparent;
    }
    .font3 {
     font-size: 75%;
     font-weight: bold;
     color: #707070;
     background-color: transparent;
    }
    #outer,
    #hdr,
    #l-col,
    #cont {
     text-align: left;
    }
    #bodyblock,
    #ftr {
     text-align: right;
    }
    
    .clear {
     clear: both;
     height: 1px;
     overflow: hidden;
    }
    img,
    a img {
     border: none;
    }
    #nav a img {
     display: block;
     margin: 0 0 1em 0;
    }

  5. #5
    Administrator weegillis's Avatar
    Join Date
    Oct 2003
    Posts
    5,819

    Re: Another CSS spacing problems in IE and Firefox

    Just checked new page, still contains some errors.
    HTML Code:
    style="align=left;" <!-- should read, "text-align: left;" -->
    and,
    HTML Code:
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <!-- should include lang="en" -->
    and,
    HTML Code:
    <meta http-equiv="Content-Type"
    
    content="text/html; charset=iso-8859-1" /> <!-- self closing tags should not contain line breaks for consistent browser support; UTF-8 might be a better international character set to use considering it is well supported -->
    and,
    HTML Code:
    <div id="ftr" align="right"> <!-- the align attribute is deprecated in XHTML; use CSS for this -->
    Will look back a little later.

  6. #6
    Member
    Join Date
    Nov 2006
    Posts
    79

    Re: Another CSS spacing problems in IE and Firefox

    thanks so much for ur help on this - i really appreciate it.

  7. #7
    Member
    Join Date
    Nov 2006
    Posts
    79

    Re: Another CSS spacing problems in IE and Firefox

    probably this is not the ideal solution, but do you think if i use an image with white space that would solve the issue of spacing?

  8. #8
    Member
    Join Date
    Nov 2006
    Posts
    79

    Re: Another CSS spacing problems in IE and Firefox

    Q!

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

    so is this considered wrong?

  9. #9
    Administrator weegillis's Avatar
    Join Date
    Oct 2003
    Posts
    5,819

    Re: Another CSS spacing problems in IE and Firefox

    No, as long as the document conforms to the XHTML 1.0 Transitional specification. If you are not sure, just run the W3C validator and examine the report.

    Often a report will show 18 errors when there is actually one REAL error. Fix the obvious mistakes and re-validate. You may have fixed the minor errors at the same time.

    In addition to the DOCTYPE, XHTML requires a namespace from which to reference the spec. In your page, the namespace is there (in the HTML opentag) along with the xml:lang attribute, but there is no lang attribute. This too is required. It tells the browser what language your html is written in.

    HTML Code:
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    Not to be confused with the meta data, Content-Language, as in,
    HTML Code:
    <meta http-equiv="Content-Language" content="en-GB" />
    or Language, as in,
    HTML Code:
    <meta name="Language" content="en-GB" />
    The former can be set in your server configurations; the latter is required in the html document head to be able to pass Cynthia Says automated testing.

    Full abstract and recommendations: Internationalization Best Practices: Specifying Language in XHTML & HTML Content

    I haven't seen any change since earlier, and can only assume the spacing problem is in your code. The sample version above works as expected. Maybe study it and make some comparisons. You could discover something.

Similar Threads

  1. Problems with css in Firefox
    By simmo in forum Graphics & Design Discussion Forum
    Replies: 10
    Last Post: 02-19-2009, 05:53 PM
  2. Weird Column Spacing in IE (But looks ok in Firefox)
    By killeraces_com in forum Graphics & Design Discussion Forum
    Replies: 2
    Last Post: 07-27-2005, 01:56 PM
  3. Firefox extension DB problems
    By AjiNIMC in forum Web Programming Discussion Forum
    Replies: 0
    Last Post: 06-17-2005, 01:02 PM
  4. CSS FireFox Problems
    By msadmin in forum Web Programming Discussion Forum
    Replies: 17
    Last Post: 04-11-2005, 11:31 AM
  5. CSS Problems between IE/Netscape/FireFox etc
    By baritoneuk in forum Graphics & Design Discussion Forum
    Replies: 3
    Last Post: 08-05-2004, 11:15 AM

Posting Permissions

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