How do I get Internet Explorer 7 and Mozilla Firefox 3 to interpret the same CSS code the same way?

Question

IE 7 and Firefox 3 interpret this CSS differently: 

#navbar		{ 	list-style-type: none;	
				color: #CCCCCC;
				margin: 0px 0px 0px -10px;
				padding-left: 0px;
				width: 810px;
				 }
#navbar li  {	width: 135px;
				display: table-cell;
				text-align: center; 
			    font: 17px Arial, Helvetica, sans-serif;}	

The problem is that IE 7 does not understand the DISPLAY attribute and leaves the list as in block form instead of inline form. IE7 and Firefox 3 also measure the margin and padding pixels differently, so the site shows differently in each browser. 

How do I avoid that?

Anonymous · Accepted Answer

You don't, you use conditional comments to write one style for IE and one for web browsers.  http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx

just &quot;JR&quot; · Answer

Not knowing what code is used to display the navbar, it is not possible to answer.
No two browsers renders the code the same way: you have to find a "middle ground".
I have found that you can use a class in CSS, an in-line style and particular tag arguments to solve the problem:
The class is obeyed by a browser, then another obeys to the in-line, and the last one to the tag!
One thing is ONLY consistent with ALL browsers: they discard what they do not understand or are not programmed for, so you can have several tags, arguments and CSS class, groups or whatever that may appears to contradict each other, but in the end gives the same result.
Bring here the code that display the navbar AND its correspondant CSS and we may give you the solution!

Trending News

How do I get Internet Explorer 7 and Mozilla Firefox 3 to interpret the same CSS code the same way?

2 Answers