Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
  1. #1
    Senior Member
    Join Date
    Oct 2007
    Posts
    241
    Member #
    15910
    Hello,
    Some elements of the website I am designing not appearing on their exact correct location if viewed thru firefox but they work fine and at the correct location with IE....what might be the reason and how to fix? These are all absolute positioned elements....Also at one occasion, the spacing between lines is not proper either....Please advise...Is this a general problem?

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Other than the fact that absolutely positioning everything is a bad idea to begin with, this can happen for a variety of reasons. We need to see the site to really be able to help.

  4. #3
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,715
    Member #
    5580
    Liked
    717 times
    Absolute positioning can become a problem when someone resizes their browser.
    Remember that some people have huge 20 inch monitors, other have
    800 pixel browser windows.


  5. #4
    Senior Member
    Join Date
    Oct 2007
    Posts
    241
    Member #
    15910
    Here is the css:

    .heading1a
    {
    width: 350px;
    height: 30px;
    position: absolute;
    top: 300px;
    left:250px;
    font-size:20px;
    font-family: arial;
    color:gray;
    }

    .heading1b
    {
    width: 300px;
    height: 30px;
    position: absolute;
    top: 1130px;
    left:249px;
    font-size:20px;
    font-family: arial;
    color:gray;
    }

    .horizline1
    {
    width:900px;
    height:81px;
    border:1px gray;
    position:absolute;
    left:5px;
    top:206px;
    background-image:url('pictures/hor2d.jpg');

    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;

    }

    .addtofav
    {
    position:absolute;
    left:700px;
    top:300px
    }

    go to website on both IE and firefox, and note the difference of position of "LATEST PRODUCTS" and "add to your favorites" at different locations for two browsers. The website is www.robotdukkani.com

  6. #5
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,715
    Member #
    5580
    Liked
    717 times
    Problems from the start ...

    You have no doctype defined, nor content-type defined.
    Right away, that puts the browser in "quirks" mode.

    You should have something like this:

    <!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>
    <title>This is my web site</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="keywords" content="website, codingforums" />
    <meta name="description" content="My description here." />
    <link rel="stylesheet" href="css.css" id="folio" type="text/css" media="all" />
    </head>


    Next problem ...
    Don't use <table>s for layout of a web page.
    tables are for tabular data (like the data output of a database).


  7. #6
    Senior Member
    Join Date
    Oct 2007
    Posts
    241
    Member #
    15910
    Thanks..Based on your answers few new questions here:
    1) So, what is the significance of declaring document type etc in general? And how do I know what to use?
    2) For instance somebody else told me to use this:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

    What is the difference bwetween these two here, and how do I know what to use when? Plus I saw many different but very similar looking doc type declerations as well. What is the distinction / function?
    3) Only after adding
    <style type="text/css">
    * {margin:0;padding:0;}
    </style>
    to my index page, the divs started displaying at better locations.But what is this exactly? I did not see this syntax in css or style before as I am not an expert...
    4) Please look at the website again, form both IE and FF. There are two pictures displaying under each other correctly with IE, but with Firefox, they display side by side, although there are </br></br> between them. Why and how can I resolve this?
    Thanks

  8. #7
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    The document type declaration essentially describes which version of the HTML standard you will be using. The standard difference you will see is between HTML 4.01 and XHTML. XHTML is stricter, in that it requires closing tags for every element, requires quotes around attributes, requires element names to be lowercase, etc. HTML 4.01 is vanilla HTML, where you can do whatever you want with the capitalization of element and attribute names, leave off quotes if there are no spaces in the attribute values, leave off closing tags in many situations where the browser can determine them itself, etc.

    XHTML is both more recent and considered better, and even when coding in HTML 4.01, it is advised that you use a lot of XHTML rules like always using closing tags, just because it makes it easier to spot errors. In general, though, it is best to always use XHTML.

    Now, mlseim also noted another feature of the doctype declaration. By default, a browser is in what is called `quirks mode' or, more colloquially, `tag soup mode'. This basically means that the browser assumes the page is written 1990s style with little understanding of the standards and enables a bunch of browser-specific interpretations of lacking end tags and such. Quirks mode is assumed to be HTML, not XHTML, and it is assumed to be bad HTML and therefore in need of browser-based heuristics for correcting errors.

    Nowadays, it is advised never to go without a DTD if you are trying to match behavior across browsers.

    Regarding the style rule -- by default, I believe IE adds a small margin and/or padding to certain elements, including the page itself. Firefox also does this, but its margins/paddings differ from IE's on various elements. So, to neutralize these differences, you use the wildcard selector (*) that basically means `for every element on the page' and then you set the margin and padding both to 0. This sets the two browsers on equal footing with respect to these.

    For the last problem -- try changing that to [minicode]<br />[/minicode] instead. [minicode]</br>[/minicode] is a closing tag for a [minicode]<br>[/minicode] tag. The br tag actually can never contain content. The XHTML shorthand for closing a tag that has no content isn't just listing the closing tag, rather it's putting a `/' before the greater-than bracket.

  9. #8
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,715
    Member #
    5580
    Liked
    717 times
    </br> is not a valid tag .. <br /> is valid.


    EDIT:
    Also decide if your page will be fixed width or fluid width.
    You could make things really simple if you made that red
    graphic at the top a background image and put your
    links (like HOME) over the top of it.




    .


  10. #9
    Senior Member
    Join Date
    Oct 2007
    Posts
    241
    Member #
    15910
    thanks a bunch for the answers....and <br/> works now too...


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:26 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com