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 10 of 10
  1. #1
    Regular Coder
    Join Date
    Oct 2002
    Location
    USA
    Posts
    255
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Site messed up at Firefox

    The body of my site looks totally messed up when viewed with firefox 1.0.

    Can you please take a look at it and tell me what the problem is.

    Thanks!

    The site is located here.
    Last edited by ssskaya; 02-04-2005 at 05:57 PM.

  • #2
    Regular Coder
    Join Date
    Oct 2004
    Posts
    168
    Thanks
    0
    Thanked 5 Times in 5 Posts
    Firefox follows the standard more strictly than Internet Explorer.

    Best to run your page through the validator at http://validator.w3.org/ - you will find there are several errors you need to address before attempting to get the layout you are after.
    Last edited by Puffin the Erb; 02-04-2005 at 11:35 PM.

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Hi there,

    The image that's in the header has been given an attribute of "align='left'." The table that follows it still has room on the right, so it begins on the right side of the image rather than jumping below.

    The reason why this happens is because the image is inside a link-- the <a> tag, which is inline. Add "display: block;" to the "a" selector in the CSS and it should line up.

    Hope this helps,

  • #4
    Regular Coder
    Join Date
    Oct 2002
    Location
    USA
    Posts
    255
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I modified it as: <a style="display:block"

    But the problem persists...

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    In your stylesheet:

    #header a {display: block;}

    It works. I just tested it.

    Edit: On second thought... it's working because it adds "display: block" to the links on the right as well, pushing the table down below the image. If the image was taller it wouldn't work. I'm an idiot

    I'm still thinking align="left" is the culprit here, maybe you should remove that and position it via css (perhaps float it, then clear the float after the links)
    Last edited by rmedek; 02-04-2005 at 11:00 PM.

  • #6
    Regular Coder
    Join Date
    Oct 2002
    Location
    USA
    Posts
    255
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I have other <a tags in the same <div, and I want them to stay inline.

    Therefore I wanted to make it a

    #header a.main{display:block} (in the CSS)

    and

    <a class="main" (in the HTML)

    But it didn't work.

    Can you please tell me how I can do it?

    Thanks.

  • #7
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    You must be more descriptive.

    What doesn't work?

    What specifically is the problem?

    If it's because the table is appearing to the right of the image, you need to change "align="left"" on the image as I stated earlier, and find another way to position it.

    If that's not the problem you must explain what the problem is.

  • #8
    Regular Coder
    Join Date
    Oct 2002
    Location
    USA
    Posts
    255
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Solved it with:

    <div style="display:block">


    Thanks!

    ------------
    by the way: firefox seems to have a different mentality when it comes to inheritance.

    For example, in your css script, if h1 says color:#000, and h1.class says color:#FFF; even though you have a class attribute in the html script, it goes with #000 - unlike IE.

    Does this have anything to do with W3C standarts?

  • #9
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by ssskaya
    by the way: firefox seems to have a different mentality when it comes to inheritance.

    For example, in your css script, if h1 says color:#000, and h1.class says color:#FFF; even though you have a class attribute in the html script, it goes with #000 - unlike IE.

    Does this have anything to do with W3C standarts?
    That sounds wrong, actually... a header with a class should override a header without one. Are you using a proper doctype, markup, etc? (Maybe validation?)

    Maybe IE's respecting the class attribute because it has no class of its own. Hahahahah ha erh.. I kill myself...

  • #10
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rmedek
    Maybe IE's respecting the class attribute because it has no class of its own. Hahahahah ha erh.. I kill myself...
    ...and the little people of CodingForums lived happily ever after.


  •  

    Posting Permissions

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