SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot bazzablue's Avatar
    Join Date
    Mar 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Margin issue in Firefox

    I am presently converting a site I originally did in tables a few years back to XHTML/CSS but have encountered a problem. I know the rule is to code for Firefox and then debug for IE but I am seeing my design correctly in IE and not in Firefox.

    The site so far can be viewed here:http://demo.elucid8web.com/trentham/ Please ignore the colours of the 3 columns - they are there for positioning.

    The problem is with the telephone number. As you will see in Firefox it touches the bottom of the green even though it has a 12px margin on the top. IE shows the correct placement of the telephone number. Even if I expand the margin it doesn't move oin Firefox.

    Also you will notice that in Firefox the company title appears below the logo evn though I have used the text-indent: -9999px to move this.

    Can anyone help?

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) Firefox is handling that correctly. I know it's confusing. The clear property on #footer is being used so #footer's top margin is being extended to push its top border edge below the bottom edge of the floats. #telephone's top margin is collapsing with it. One solution is to give a little top padding to #footer.

    2) What happens if a visitor has images disabled in their browser? I use and recommend the Gilder/Levin Method of CSS Image Replacement which uses an empty span element, because it's the method that's still usable with the images disabled and CSS enabled scenario, which to me is more important than the empty span elements.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Zealot bazzablue's Avatar
    Join Date
    Mar 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply Kravvitz. I will look into the Gilder/Levin Method of CSS Image Replacement - as you say this is better than nothing appearing.

  4. #4
    SitePoint Zealot bazzablue's Avatar
    Join Date
    Mar 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Kravvitz (or anyone else) do you know why in Firefox the company title appears below the logo even though I have used the text-indent: -9999px to move this.
    Barry

    Snap Designs
    Creating good impressions online and in print

  5. #5
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think it's because the <a> is before the text. Try moving it after the text.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  6. #6
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yes, it's the empty <a...> </a>tag, I moved the offending text into the tag and it displayed okay in FF.
    <h1><a href="default.htm">Trentham Invest text moved here</a></h1>

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Another thing (I may catch some flak for this), do not code for Firefox then hack for IE. Test in each browser as you go along, and try to avoid hacks as much as possible. Think differently about what you're trying to do, and then use the bare minimum of code necessary to get the job done.

    Coding for a browser just locks you into the current version of that browser, and will most likely break when the next upgrade to that browser comes out (how many of us scrambled to fix our sites when FF 2 came out, and then did the same when IE 7 came out later on? I know I didn't, because I checked my work in IE, Firefox, and Opera as I went along, and used a minimalist, nearly hack-free, coding approach..

    Just a thought.


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
  •