- This topic is empty.
-
AuthorPosts
-
January 31, 2011 at 3:55 pm #31448drumzMember
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!February 1, 2011 at 2:43 am #63220clokey2kParticipantIt 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… :-( )
February 1, 2011 at 2:56 am #63205clokey2kParticipantOn 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!
February 1, 2011 at 6:01 pm #63164hugogmgMemberHello 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,
HugoFebruary 2, 2011 at 3:08 am #63174clokey2kParticipantI seem to get the overlap in all browsers, but I do see the line height issue as well.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.