Hi, I'm having one CSS issues with MSIE 6,7,8... it is simple and I've searched all over internet but can't find a solution. Please help!

 

Attaching screenshots from IE and a standard browser like FF, Opera etc. I'm using H4 and H2 tags to highlight the text.

Please post a preview for us to look at.

Remember different browsers can have different 'default' values for a number of CSS attributes so make sure you always define anything that can cause differences in a situation like this. Here it looks like the text size is different, and I would also define margin and padding too if you haven't done a rest at the top of your CSS code. The following is usually sifficient:

 

* { margin:0; padding:0; }

It's not a great idea to use * { margin:0; padding:0; }

 

Instead you should use Eric Meyer's CSS Reset or use the Yahoo! User Interface Reset

Thanks a lot for your replies!

 

I have already defined margin and padding... strangely does not helps.

 

Global resetting does not helps because it sends my entire page into chaos.

Can you post your code?

Yes sure... people may be surprised

 

#mainhead {background: #000000; border: 0.1em solid #0066CC; color: #DBEDF9; font-size: 16px;  overflow: hidden; padding: 0.5em;}
#mainhead a {color: #0066CC;text-decoration: none;}
#mainhead a:hover {background: #DBEDF9; color: #3D3C3C;}
/* controls all blue headings */
#mainhead span.cat, #foot h3 {color: #23A2D7; font-size: 20px; font-weight: bold; letter-spacing: 1px;}
#mainhead h5 {font-size: 16px;}
#mainhead ul li ul {margin-left: 3px;}
#mainhead ul.sidebar_list {padding: 0.5em 3px 3px 3px;}
#mainhead li.widget .widget_box {background: none; border: 3px;margin:0; padding:0;}
#mainhead .textwidget p {line-height: 22px; margin-bottom: 3px;}
#mainhead .textwidget .avatar {margin-top: 3px;margin:0; padding:0;}
#mainhead .col {float: left; list-style: none; width: 31.3%;padding-left:1em;}

Yes sure... people may be surprised

 

#mainhead {background: #000000; border: 0.1em solid #0066CC; color: #DBEDF9; font-size: 16px;  overflow: hidden; padding: 0.5em;}
#mainhead a {color: #0066CC;text-decoration: none;}
#mainhead a:hover {background: #DBEDF9; color: #3D3C3C;}
/* controls all blue headings */
#mainhead span.cat, #foot h3 {color: #23A2D7; font-size: 20px; font-weight: bold; letter-spacing: 1px;}
#mainhead h5 {font-size: 16px;}
#mainhead ul li ul {margin-left: 3px;}
#mainhead ul.sidebar_list {padding: 0.5em 3px 3px 3px;}
#mainhead li.widget .widget_box {background: none; border: 3px;margin:0; padding:0;}
#mainhead .textwidget p {line-height: 22px; margin-bottom: 3px;}
#mainhead .textwidget .avatar {margin-top: 3px;margin:0; padding:0;}
#mainhead .col {float: left; list-style: none; width: 31.3%;padding-left:1em;}

 

Surprised??

 

Your html?

this is my site: (deleted)

You're defining a list with one list item which has lots of h4 tags in it... it's not the way I'd do it.

 

This is a section of your code from the area you're having problems with:

 

<ul class="sidebar_list"> 
				<li id="text-7" class="widget widget_text">			<div class="textwidget"><h2><strong>Education</strong></h2> 
<h4><a href="http://blog.thetradersforum.net/list-of-financial-education-providers-in-india" target="_blank">List of financial education providers</a></h4> 
<h4><a href="http://blog.thetradersforum.net/certifications-and-courses-fesible-in-india" target="_blank">Trading related courses feasible in
India</a></h4> 
<h4><a href="http://blog.thetradersforum.net/all-about-forex-trading-in-india" target="_blank">All About Forex Trading</a></h4> 
<h4><a href="http://blog.thetradersforum.net/category/education" target="_blank">[read all articles in this category]</a></h4></div> 
	</li> 
			</ul> 

 

Each <h4> should be an <li>. If you try that and then define a line height it might work better.

thnx minkie for giving your time... I'm attaching a screenshot how it looks on MSIE without h4 tags. The text appears just too smalll. It apppears normal on (almost) every other browser.

Have you actually defined a font-size and line-height for your list?

 

Can you repost your amended code?

fontsize, background color... everything I defined as given in previous code... but nothing appears.

 

BTW should have mentioned this earlier... it is a wordpress thesis theme website.

I am a total noob on css... can you please give a example...

Ok - to test you're changing the right area of CSS - change the text to a bright colour and see what happens. That's the first thing to identify, as it sounds as if you're not changing the right area of css.

 

I meant re-post your amended html.

As I posted the code, even the background color(black) does not appear. After global resetting everything appears right but the overall page goes into chaos.

For the code posted first, some changes are reflected and some not. I guess the problem is because of Thesis widget structure. I'll try checking code of the 'text' widget and get back.