Results 1 to 9 of 9

Thread: Firefox and IE table problems

  1. #1
    Join Date
    Dec 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Firefox and IE table problems

    I have made my site with tables and css, but when I positioned the menu and the other texts with padding-top and padding-left, the actual text gets positioned differently between the IE and FF browsers.

    I have uploaded an example at my site @ http://www.tutor4u.nl/artwork/test/

    The site looks perfect in IE, but FF screws up the positioning.
    I am trying for hours now and I'm getting really frustrated with this problem.
    Please tell me what to do or else tell me how to rewrite the site so it works both in IE and FF.
    Thanks in advance.

    PS. the css file is located @ http://www.tutor4u.nl/artwork/test/opmaak.css

  2. #2
    Join Date
    Dec 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    *bump*
    Anyone knows what I should do ?
    I really don't have a clue...
    Please help me out here.

    Mezrius.

  3. #3
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Mezrius
    "Could not find host www.tutor4u.nl".

    The site looks perfect in IE, but FF screws up the positioning.
    You are most likely pandering to bugs in IE, and Fx is rendering the document correctly. Without being able to see the document in question, I'll just have to suggest that you start by validating both your markup and your style sheet.

    Mike

  4. #4
    Join Date
    Dec 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    The site works on my computer, it takes a little while to load but should popup eventually.

    Mezrius

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Code:
    body {
    background-image: url(Layout.jpg);
    background-repeat: no-repeat;
    background-position: center 10px;
    font-family: serif;
    }
    
    .head {
    font-family: sans-serif;
    font-size: 12pt;
    }
    
    a {
    text-decoration: none;
    color: #E9932F;
    }
    
    a:hover {
    text-decoration: none;
    color: black;
    }
    
    a img {
    border: none;
    }
    
    .inactive {
    text-decoration: none;
    color: black;
    }
    
    .menu {
    padding-top: 25px!important;
    padding-top: 20px;
    margin-top: 0px;
    }
    
    .inhoud {
    padding-top: 17px!important;
    padding-top: 10px;
    padding-left: 26px;
    margin-top: 0px;
    margin-left: 0px;
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Dec 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I'm astoundished, it actually worked.
    I owe you bigtime !
    Just one more question, can you tell me what you did and why it works now ?
    That way I can fix it myself in the future.

    Mezrius

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Well, if you look at the css carefully, you will notice that the biggest change is cosmetic. I rewrote it using more lines, in a way that makes it clearer to the human eye what each property/value pair is. And sets each selector clearly apart from the others. This is simply how I've become accustomed to doing it over time, it helps avoid errors but, is no guarantee. Now, if you look back over my last post, near the bottom are the only material changes and each addition and/or change is highlighted red. That shows you what I've done only on one level, the actual values. On another level, I've taken advantage of the fairly well known !important hack. The way this hack goes, if a property/value pair is followed by !important; and then restated without it, FF and almost all other browsers will follow the first rule while IE will follow the second. This can oftentimes result in poor layout in a third browser like, say Opera (which sometimes renders things similarly to IE). But, it can be relied upon for straightening things out between IE and most Mozilla based browsers.

    One added tidbit of info is that I was able to readily see what needed to be done partly because of experience but, also because I use the FF developer's extension (Web Developer 0.9.4 to be specific) that allows one to (among a great many other tools and techniques) temporarily rewrite the css on the fly, to see what it would look like.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Dec 2005
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    just so he understands why you have padding-top twice but one listed with !important is because ie will us the one that says !important, and the FF browser will use the other one. just wasnt sure if you understood that.

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by jstgermain
    ie will us(e) the one that says !important, and the FF browser will use the other one.
    Actually, it is the other way around. Also, if there is no 'second one', ie will use the !important one as well. To be even clearer:

    Code:
    selector {
    property:value!important;
    property:value;
    }

    In the above, FF will use the red one, IE the green one, assuming they are both the same property. However, here:

    Code:
    selector {
    property:value!important;
    }
    Both IE and FF will follow the !important property/value pair.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •