display:inline on a <table> browser compatibility.

[iPixel]

Long story short i dynamically create small tables with info that looks very "label" like.

And i want to show 2 per row then break 2 per row break etc.... till end of query.

 

the code is simple

<table cell... cell.. border...  width... style="display:inline;>

 

now the issue,

 

display:inline works on IE/FF but not Safari/Chrome

 

display:inline-block works on Safari/Chrome/FF but not IE

 

display:inline-table works on Safari/Chrome/FF but not IE

 

I need this to work on Best case scenario all 4 browsers Worst case Scenario IE/Safari.

 

Thanks!

[Omirion]

Why don't you get the Navigator type with JS and modify the CSS properties accordingly?

 

I realize that getting the the Navigator agent isn't "Good practice" but in your case it's just what you need.

[iPixel]

Im not familiar with Navigator... can you link it please.

[Omirion]

Im not familiar with Navigator... can you link it please.

 

By navigator i mean the Browser that you're using.

Here is a link to the navigator object properties

http://www.comptechdoc.org/independent/web/cgi/javamanual/javanavigator.html

 

 

In general your JS function can look something like this.

 

function navInit(){
var nav = navigator.appName

switch (nav){
case "Microsoft Internet Explorer":
Make CSS adjustments
break;
case "Netscape Navigator":
Make other CSS ajustmets
break;
   }
}

 

If you need further help please post.

[lostprophetpunk]

<table cell... cell.. border...  width... style="display:inline;>

In that code you are missing the ", like so...

<table cell... cell.. border...  width... style="display:inline;">

 

Could it possibly be some conflicting css code at all?