<div>
Here's the link: 
 
<a href="http://www2.humnet.ucla.edu/philosophy/" rel="ugc">http://www2.humnet.ucla.edu/philosophy/</a> 
 
The top menu with the links &quot;Home&quot; &quot;People&quot; &quot;How to FInd Us&quot; looks right in firefox. &nbsp;The text and the background buttons are perfectly aigned. 
 
But in IE the background buttons are too low. 
 
Thanks 
 
Rowby &nbsp;
</div>

<div>
Correction: 
 
But in IE the background buttons are too HIGH. 
 
Thanks 
 
owby, I mean Rowby
</div>

<div>
There are many ways to tame this beast. One is to use conditional comments to include only a certain CSS file into a certain version of IE. Conditional comments only work in IE. 

</div>

<div>
A separate CSS file for IE that would take care of that the button graphic issue?
</div>

<div>
Another method is using constructs that work only in one browser and not in the other. Using &quot;* html&quot; will work with IE6 and lower, using &quot;html &gt;&quot;&nbsp;will work with IE7 and higher, FF, OP and virtually all more CSS compliant browsers. See this code snippet that treats the padding different in IE5 and IE6, but does it conformant in other browsers. 
 
The good thing about this is: it is conformant and it works with intellisense in about all CSS editors around and you keep your layout bits together, which is often easier to maintain then the conditional comments. 
 

<pre><code class="code-10 nolinks" id="code-121703">/* IE6 FIX */
* html .CustomTabStyle {
 height : 100%;
 padding:8px 0 0 0px;
}
 
/* CSS-COMPAT browsers */
html &gt; body .CustomTabStyle {
 height : 100%;
 padding:8px 0 0 4px;
}
</code></pre>
</div>

<div>
&gt; A separate CSS file for IE that would take care of that the button graphic issue? 
 
Yes. But only has those rules that are different. If you take that path, it looks like this (you can add conditionals for the version of IE if needed): 
 

<pre><code class="code-1 nolinks" id="code-121704">&lt;!--[if IE]&gt;
&lt;link rel=&quot;stylesheet&quot; 
 type=&quot;text/css&quot; 
 media=&quot;screen, projection&quot; 
 href=&quot;mystyles_ie.css&quot; /&gt;
&lt;![endif]--&gt;
</code></pre>
</div>

<div>
Hmmmmm.... 
 
In this case I only need to be compatible &quot;with IE7 and higher, FF, OP and virtually all more CSS compliant browsers.&quot; &nbsp; 
 
So in that case..... &nbsp; your suggestion is.... &nbsp;:)
</div>

<div>
Sorry, what is your question again? You said in your question &quot;how to do one thing in firefox and another in IE&quot;. Which is what I showed you how to. 
 
If margins are a problem (and margins are always twice as high in IE5/6 then in other browsers, an ancient bug) you can use the trick above with half margins for IE5/6. You may also try _margin as property, which is also only understood by IE5/6 and is perhaps a little more readable. Make sure it is the last item in your CSS. 

</div>

<div>
Hi 
 
I guess I should have been more specific in my question. 
 
The button graphics are perfect in Firefox 2.0.0. 
 
BUt the button graphics are too high in IE version 7. &nbsp; For this site I don't care (much) about earlier versions of IE. 
 
Thanks 
 
Rowby
</div>

<div>
I apologize for misunderstanding. I can help you but unfort. i am off now. I'll be back in a few hours and post a solution for you (unless, of course, someone else has done so already). Sorry for the non-relevant clutter (you can still use the include method with conditional comments, and there are other ways to do it through CSS itself) 

</div>

<div>
No problem. &nbsp; The info you gave is useful for the future, etc. 
 
I will also be gone for an hour or so, so lets see how it all plays out in the meantime. 
 
Rowby
</div>

<div>
 Hi rowby: Default margin and padding values are differs browser by browser , in this case setting 
 
&nbsp; body {margin:0px;padding:0px} 
 
&nbsp; &nbsp; &nbsp; Should solve your issue ,that you are having with FF and IE... 
 
&nbsp; &nbsp; And the keyword !important can be used to declare different value for the browsers above ie6.If you wonder the logic of it ,can be explained like ; if you declare a property twice inside the class all browsers will use the latest one , for ex ; 
 
&nbsp; .box{width:200px;height:400px;background-color:#333;width:300px;} 
 
&nbsp; &nbsp;As you can see above ,the width property is declared twice in box class with different values , in this case 300px (latter) will be valid. 
 
&nbsp; !important key word is only known by browsers above ie6 , and its used for implying the value that you want to use for the properties that are declared twice inside the class. 
 
&nbsp; &nbsp;.box{width:200px !important;height:400px;background-color:#333;width:300px;} 
 
&nbsp; So in the example above , ie6 will use 300px as the width of the box because it doesnt recognize !important , and all modern browsers will use 200px as the width of the box because its implied with !important. 
&nbsp; 
&nbsp; And 
</div>

<div>
I agree to your post, Ali, however, using the &quot;!important - hack&quot; is considered a bad design because the !important switch is designed to overrule the settings someone has in his browser and / or to render differently when the text is spoken. 
 
Also, it is used (most often) to give a certain rule more priority. In cases where this matters (in tables, sometimes it is a necessity), you cannot use this feature anymore because !important is already used. 
 
Result (often months later) is that you find yourself overruling the !important by using the higher precedence of the style-attribute. Which will make your code messier and harder to maintain. 
 
Hence I usually like the &quot;milder&quot; and compliant hacks which I explained above. Of course, to some extend, this all is also a matter of taste and personal preference. 

</div>

<div>
Thanks ali_kayahan and abel, 
 
I added &nbsp; body {margin:0px;padding:0px} &nbsp;to the beginning of the external css: 
 
body { 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-family: Helvetica,Arial,sans-serif; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;line-height: 1.3em; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin: 0px 0px 0px 0px; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size: 12px; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: #333; 
&nbsp; &nbsp; &nbsp; &nbsp; padding: 0px; 
} 
 
and also to the very end of the external css, just to make sure nothing was overriding it. 
 
body { 
margin:0px; 
padding:0px 
} 
 
But I am still having the problem with the background images behind the button being &quot;too high&quot; in IE 7. 
 
As an example, the name of the left portion of the &quot;pill menu&quot; is called mw_menu_cap_l.png 
 
How can I get &nbsp;mw_menu_cap_l.png lower in IE. &nbsp; Perhaps I have added some css during my attempts to lower it that is causing it to stay where it is. &nbsp; It appears that the overall control for the &quot;pill menu&quot; is controlled by table.pill. 
 
Below is a snippet from the current relevant css &nbsp;(and as I said, 
 
 
 
/* horizontal pill menu */ 
table.pill { 
&nbsp; margin-left: auto; 
&nbsp; margin-right: auto; 
&nbsp; padding: 0; 
&nbsp; margin-top: -3px !important; margin-top: 10px; 
&nbsp; padding-top: 20px !important; padding-top: 30px; 
} 
 
td.pill_l { 
&nbsp; background: url(../images/mw_menu_cap_l.png) no-repeat; 
&nbsp; width: &nbsp;20px; 
&nbsp; height: 32px; 
&nbsp; padding-top: 22px; 
 
 
 
} 
 
td.pill_m { 
&nbsp; background: url(../images/mw_menu_normal_bg.png) repeat-x; 
&nbsp; padding: 0; 
&nbsp; margin: 0; 
&nbsp; width: auto; 
 
 
} 
 
td.pill_r { 
&nbsp; background: url(../images/mw_menu_cap_r.png) no-repeat; 
&nbsp; width: &nbsp;19px; 
&nbsp; height: 32px; 
 
&nbsp; 
} 
 
#pillmenu { 
&nbsp; white-space: nowrap; 
&nbsp; height: 32px; 
&nbsp; float: left; 
&nbsp; 
} 
 
#pillmenu ul { 
&nbsp; margin: 0; 
&nbsp; padding: 0; 
&nbsp; list-style:none; 
&nbsp; 
} 
 
#pillmenu li { 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float: left; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background: url(../images/mw_menu_separator.png) top right no-repeat; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin: 0; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding: 0; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
} 
 
#pillmenu a { 
&nbsp; font-family: Arial, Helvetica, sans-serif; 
&nbsp; font-size: 12px; 
&nbsp; font-weight: bold; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float:left; 
&nbsp; display:block; 
&nbsp; height: 24px; 
&nbsp; line-height: 24px; 
&nbsp; padding: 0 20px; 
&nbsp; color: #000; 
&nbsp; text-decoration: none; 
 
} 
 
#pillmenu a#active_menu-nav { 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin-top:2px; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 21px; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;line-height: 21px; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-position: 0 0; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
} 

</div>

<div>
Ok, here's the trick: 
 

<ol type="1">
<li>Tell IE to put the background 10px lower</li>
<li>Remove your margin on TD elements (has no effect, TD elements have no margin)</li>
<li>Set the padding on your TD elements to 0</li>
<li>Set the margin-top of your TABLE element to 20px, remove the other margins and paddings. Set padding to 0.</li>
<li>View this style in IE. It should be good now. To compare the correct / incorrect versions, set pill_m background position to 0 and the pill_r background position to 10px. That way you can view in both browsers whether one of the two positions is good.</li>
</ol>
Now that you know how to fix the layout problem, we move on to the next step, which is, making sure that FF gets one and IE gets the other style. But that's the subject of our next lesson (free after Rowan Atkinson) ;-) 

</div>

<div>
Hi abel, 
 
I put in your code and I assume we're getting closer. &nbsp; &nbsp;I'm not seeing the pill background images at all now. &nbsp;I assume there there somewhere, and just a little more of a fix is needed. &nbsp; 
 
See attached code of the entire relevant stylesheet. &nbsp;(There is another stylesheet called blue.css but I doubt that's affecting this issue. &nbsp;I'll upload it if you want. 
 
I already have firebug but will download IE development toolbar/ 
 
THanks 
 
Rowby 
<a href="https://filedb.experts-exchange.com/incoming/2008/07_w30/42906/rowbycss-for-ie.txt" target="_blank" class="file-inline" title="template.css file (14 KB)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M67.508 468.467c-58.005-58.013-58.016-151.92 0-209.943l225.011-225.04c44.643-44.645 117.279-44.645 161.92 0 44.743 44.749 44.753 117.186 0 161.944l-189.465 189.49c-31.41 31.413-82.518 31.412-113.926.001-31.479-31.482-31.49-82.453 0-113.944L311.51 110.491c4.687-4.687 12.286-4.687 16.972 0l16.967 16.971c4.685 4.686 4.685 12.283 0 16.969L184.983 304.917c-12.724 12.724-12.73 33.328 0 46.058 12.696 12.697 33.356 12.699 46.054-.001l189.465-189.489c25.987-25.989 25.994-68.06.001-94.056-25.931-25.934-68.119-25.932-94.049 0l-225.01 225.039c-39.249 39.252-39.258 102.795-.001 142.057 39.285 39.29 102.885 39.287 142.162-.028A739446.174 739446.174 0 0 1 439.497 238.49c4.686-4.687 12.282-4.684 16.969.004l16.967 16.971c4.685 4.686 4.689 12.279.004 16.965a755654.128 755654.128 0 0 0-195.881 195.996c-58.034 58.092-152.004 58.093-210.048.041z"/></svg>rowbycss-for-ie.txt</a>
</div>

rowbycss-for-ie.txt

<div>
Hi Rowby, 
 
I had a downloaded copy of your page, which altered the paths to the images. You should fix them back to what they were, like: 
 

<div class="indent">
url(mw_menu_cap_l.png) 

</div>
should become 
 

<div class="indent">
url(../images/mw_menu_cap_l.png) 
 

</div>
HTH, 
Cheers, 
-- Abel -- 
 
 
 

</div>

<div>
Oh, and I fixed this all in the file template.css. If you have other references also, you may want to ignore those. I took a snapshot of your site about 20 minutes ago, so that was my starting point. 

</div>

<div>
Ah it's all fixed in IE and Firefox. 
 
I'm awarding you the points. 
 
Then I want to review your notes and see where I went astray. 
 
Thanks for staying with this. &nbsp; 
 
Add any additional comments you want ;) 
 
Rowby
</div>

<div>
Glad it worked out well and thanks for the points. If you still have questions regarding my comments, feel free to fire :) 
 
Regards, 
-- Abel -- 

</div>

<div>
For now I'll just go back to sleep! 
 
And will come back here later today to see what was done! 
 
Rowby
</div>

<div>
<div class="content wysiwyg-content">
In my next comment I will include a link to a website, work in progress. 
 
I have a menu item that looks &quot;perfect&quot; in firefox, but doesn't have the right margins/padding in IE. 
 
I've read about !Important but not sure how or if it works the best in dealing with IE. 
 
Any clarification and help will be appreciated. 
 
Thanks 
 
Rowby 

</div>
</div>

In my next comment I will include a link to a website, work in progress.

I have a menu item that looks "perfect" in firefox, but doesn't have the right margins/padding in IE.

I've read about !Important but not sure how or if it works the best in dealing with IE.

Any clarification and help will be appreciated.

Thanks

Rowby


How do I tell IE to do one thing and Firefox to do another (with margins;/padding....

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.