Jump to content

Pre Firefox 10 displays table differently to IE,Chrome & Safari


pagallery

Recommended Posts

I tested my layout in Firefox 10, IE9, Chrome & Safari in both widescreen and square screen and it worked fine. Somoenoe else looked at it to check spelling and the layout was not the same- turned out they were using an earlier version of Firefox. It revolves around table layout. The attached snapshot is how I want it to look in all browsers. I achieved this by having slightly different layouts for cells depending on whether they consisted of two lines of text or one - here is the code from my CSS file:#mainmenu table {width:100%; background:#e20177; /* Rubine Red */ } #mainmenu td { text-align:center; } #mainmenu a {/* This does the main part of the tab allowing 2 lines of text*/ font-style:normal; text-decoration:none; display:block; padding:0 10px; height:40px; background:#e20177; /* Rubine Red */ float:left; cursor:pointer; color:#ffffff; /* white */ line-height:20px; text-align:center;}#mainmenu a.double { color:#ffffff; /* white */ } #mainmenu a.single {/* This adjust vertical spacing if only 1 line of text*/ padding: 10px; height:20px;} Works fine except for the earlier versions of Firefox where the text doesn't wrap and appears all on one line, so for example, 'Treatments' is nicely centred as per the attached image but 'For Men' is all on one line and at the top of the box. Is there a way I can achieve the look I want in all browsers? Thankspost-8939-0-13550800-1328400327_thumb.png

Link to comment
Share on other sites

Just realised I was looking for a too complicated solution! I've just put a <br/> in the lines I want to show as two lines and it works fine. The rest of the page is still displaying differently in the early versions of Firefox with the <divs>appearing to align differently to the current browser displays but it looks OK and I can live with that.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...