SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    Illinois
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy CSS Positioning and Firefox!

    Hi,

    I was wondering if anyone else has had trouble aligning items with CSS in FireFox. This is my first time trying to design for Firefox. My website looks great in IE everything is in perfect position however in Firefox several items are really off, even though my CSS & HTML completely validates. Any suggestions on how to deal with this problem???

    Thanks
    Jodi

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    FF does it right. IE (often) does it wrong.
    There must be problems with your code. If you have a specific question, people will be happy to answer.

  3. #3
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    Illinois
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great, well, I guess I'll just have to mull over my code I can't think of any questions right off the top of my head. Like I said I ran my code through the W3 CSS validator and everything checked out ok. Grrrrrr. The only thing I can think of is to change the px on my positioning but if I do that then it won't look right in IE.

    Another question when I try to look at my website in Netscape I can't even find it and I know it's there. Any reason why that is?

    Jodi

  4. #4
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you post a link to your page, we might be able to offer something more than...'hmmm' and 'harr'...

  5. #5
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Look at these two sites, although there are many out there, and see if your problems may be related. As BonRouge said, you need to have your site work in FF because then you know you coded it right. IE can fool you sometimes because it does not do a good job of following web standards correctly as evidenced by your problems getting your code to work in FF.

    http://www.positioniseverything.net/explorer.html
    http://www.howtocreate.co.uk/wrongWithIE/

  6. #6
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    Illinois
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is my website,

    http://aroundtownwilmingtonillinois.com/

    Again if you look at this through IE it looks correct, but looking at it through Firefox or Opera the alignment is off of several items.

    See what you think??

    Thanks for the links there I'm looking at them as we speak.

    Jodi

  7. #7
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    Illinois
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I may just design one [age for Internet Explorer and one for Firefox and use a browser sniffer to change between pages. Unless anyone else has any other ideas??

  8. #8
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Holy Smoke , Please reconsider how you make your pages its an all absolute positioned website, itís a nightmare to maintain, use floats and padding and margins

  9. #9
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    Illinois
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I will consider that. I've always loved the position: absolute; just because I could stick anything anywhere I wanted to, instead of having to compromise with the layout.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    I think I may just design one page for Internet Explorer and one for Firefox and use a browser sniffer to change between pages.
    aaaaarrrrrrggggghhhhhh! no no no!

    This is where the web went wrong originally. The mistakes are all yours and not the browsers. You are using incorrect code and incorrect positioning sytems for your layout (as pointed out by all4nerds).

    The differences in positioning are because you have not taken into account the default margins and padding that all elements have. Its your job to set these explicitly as browsers all use different defaults. For example mozilla applies a 1em top and bottom padding to the p element whereas ie only applies a bottom margin of 1em.

    If you set the margins for the p explicitly then all browsers will be the same.
    e.g.
    Code:
    p{margin:0 0 1em 0}
    The same applies to all other elements. (See the faq for more information.)

    Then you have absolutely positioned your table but also added align=center to it which really confuses the browser as it makes no sense.

    To centre the table you should wrap it in an elemnt that has margins to clear the side content and then set margin:auto on the table to centre it and take out the align=center..

    Code:
    .table-wrapper {
    margin-top: 310px;
    margin:0 227px;
     
    }
    table.menutable
    { 
    border-style: solid;
    border-width: 2px;
    margin:auto
    }
    Code:
    <div class="table-wrapper">
    <table class="menutable" cellspacing="5" cellpadding="5">
    	<tr>
    	 <td><a href="Health.htm">Health</a></td>
    	 <td><a href="Legal.htm">Legal</a></td>
    	 <td><a href="Financial.htm">Financial</a></td>
    	 <td><a href="Business.htm">Business</a></td>
    	 <td><a href="Auction.htm">Auction</a></td>
    	 <td><a href="Humor.htm">Humor</a></td>
    	 <td><a href="Home.htm">Home</a></td>
    	 <td><a href="Wedding.htm">Wedding</a></td>
    	</tr>
    	<tr>
    	 <td><a href="Seniors.htm">Seniors</a></td>
    	 <td><a href="Teens.htm">Teens</a></td>
    	 <td><a href="Kids.htm">Kids</a></td>
    	 <td><a href="Baby.htm">Baby</a></td>
    	 <td><a href="Parenting.htm">Parenting</a></td>
    	 <td><a href="Pets.htm">Pets</a></td>
    	 <td><a href="Entertainment.htm">Entertainment</a></td>
    	 <td><a href="Sports.htm">Sports</a></td>
    	</tr>
    </table>
    </div>
    The information above is not really tabular so should be in list form anyway and not in a table.

    In reality you should start again without using absolute positioning and use static elements and floated elements for most of the layout and only resorting to absolute elements where you don't have to worry about the flow of the document.

    You have a basic 3 col layout which can be don at the basic level like this:
    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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    * {margin:0;padding:0;}/* clear all margins and padding*/
    h1,h2,h3,h4,h5,h6,p,ul{margin-bottom:1em;}/* set a few defaults*/
    ul {margin-left:16px;}/* space for bullet*/
    h1{
    background:#f2f2f2;
    border:1px solid #000;
    }
    #col1{
    float:left;
    width:200px;
    background:red;
    }
    #col3{
    width:200px;
    float:right;
    background:yellow;
    }
    #center{
    margin-right:200px;
    margin-left:200px;
    }
    #col2{
    width:100%;/*must be 100% for ie*/
    background:#ffffcc;
    float:left;
    overflow:hidden;
    }
    #col2 img{float:right;}
    #footer{clear:both;background:#f2f2f2;text-align:center;}
    /* 3 pixel jog hide from ie mac \*/
    * html #center{height:1%;margin-right:-197px;margin-left:-197px;}
    * html #col1{margin-right:-3px;}
    * html #col3{margin-left:-3px}
    /* end hide*/
    </style>
    </head>
    <body>
    <h1>Header</h1>
    <div id="col1">
    <p>This is column 1 : This is column 1 : This is column 1 : This is column 1 : This is column 1 : This is column 1 : This is column 1 : This is column 1 : This is column 1 : This is column 1 : This is column 1 : This is column 1 : This is column 1 : This is column 1 : This is column 1 : This is column
    	1 : This is column 1 : </p>
    </div>
    <div id="col3">
    <p>This is column 3 : This is column 3 : This is column 3 : This is column 3 : This is column 3 : This is column 3 : This is column 3 : This is column 3 : This is column 3 : This is column 3 : This is column 3 : This is column 3 : This is column 3 : This is column 3 : This is column 3 : This is column
    	3 : This is column 3 : This is column 3 : This is column 3 : This is column 3 : This is column 3 : This is column 3 : This is column 3 : This is column 3 : This is column 3 : This is column 3 : This is column 3 : This is column 3 : </p>
    </div>
    <div id="center">
    <div id="col2">
    	<p>This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column
    	 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : </p>
    	<p>This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column
    	 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : </p>
    	<p>This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column
    	 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 : This is column 2 :end </p>
    </div>
    </div>
    <div id="footer">Footer</div>
    </body>
    </html>
    Hope that helps.

  11. #11
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    Illinois
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow,

    Paul, Thank-You! Great-advice! I guess I've just had my hand slapped! LOL! Just Kidding! I'm learning! Thank You!

    Jodi


Bookmarks

Posting Permissions

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