Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Looks good everywhere but FF

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #31448
    drumz
    Member

    Test location

    This is an old site I inherited that I’m doing SEO work on – it is full of nested tables and will eventually be rebuilt but foir now I have to get it looking good. I had to add some text to make it more compliant and it looks great in IE and Chrome but terrible in FF. Can anyone advise what I need to do to get it right in FF? It seems like it should work and not sure what’s causing the overlapping.
    Thanks in advance for your assistance!

    #63220
    clokey2k
    Participant

    It appears that the new ‘div’ extends the boundary of the table it is in, and because it isn’t part of the ‘flow’ – ‘position: absolute;’.

    The ‘absolute’ is probably the quickest way to have it span 2 table columns, in a set of nested columns of someone elses design – but you need to make the bounding tables taller.

    I would get to work on the redesign ASAP :-). Another reason to avoid tables!

    (FYI – I have recently seen a friend of a friends website that has been redesigned – View -> Source; TABLES!!! I almost died… :-( )

    #63205
    clokey2k
    Participant

    On a more constructive note:

    Within ‘table5’ create a new table which would contain ‘table7’, and ‘table 8’ in the first row (‘tr’), and your ‘div’ (without pos: absolute) in a second row;

    Structure a little like:
















    I have tried my best to simplify it to save me a few tags, and I may have missed some closing tags – I can’t tell in tables!

    #63164
    hugogmg
    Member

    Hello clokey2k.

    When I saw the site in Chrome and then in FF there is a difference in the line-height that is used by default in both browsers. Chrome uses a line-height bigger than FF. So Chrome and others pulls the “News” column down more than FF. And then the paragraph below in Chrome is ok but in FF not.

    So try adding “line-height: 16px;” to the line 55 of vgk.css. This will ensure the line-height is the same for all browsers. Finally you should have:


    .lefttab {
    color:#003194;
    font-familiy: "Book Antigua";
    font-size: 10px;
    line-height: 16px;
    }

    Bests,
    Hugo

    #63174
    clokey2k
    Participant

    I seem to get the overlap in all browsers, but I do see the line height issue as well.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.