Text color and size in Internet explorer.

[Valtlfelipe]

Hi there,
i am from brasil, and i have soe problems with my fathers website.
in his website, on showing the site in he internet explorer, here ar many errors, diferent text color, text is bigger. in other browsers like firefox, there are no errors.
the site is: <snip>
Thanks,
Felipe

[edited by: alt131 at 9:04 pm (utc) on May 17, 2011]
[edit reason] Thread Tidy [/edit]

[webprutser]

Took a look at the website. There is a lot going on in the code. The header states all kind of comment for different Internet Explorer versions. I'm certainly no expert in this field, but know that can be handled simpler.
To get a better picture of your problem you might give an example of some code that works according to your expectations in Firefox, but gives trouble using Internet Explorer. It now feels a bit like "hey, I don't know what's going on here, here you have a lot of stuff and please sort it out for me". As you might have noticed, that doesn't result in a quick response to your question. Just some advise.

[Valtlfelipe]

Thanks! but i does't why this happend just on internet explorer.

[webprutser]

I guess my best answer would be, because Internet Explorer is Internet Explorer. With regard to certain CSS code it has a mind of its own. If you need help, you could post some of your code.

[webprutser]

I had a lot of trouble with by website in Internet Explorer by using the wrong DOC type. My problems were solved the moment I used the strict type. As you are using the transitional type, you might have the same experience. I got this interesting and explaining link at another thread over here:
[webmasterworld.com...]
I'd say, try option 3 given there and see what happens then.

[Valtlfelipe]

Nothing happend; its the same!
Thanks for trying, but the problem isnt solved.

[Valtlfelipe]

my css code:

/*

Theme Name: Gourmet
Theme URI: [templatic.com...]
Description: Developed by Bhavesh Radadiya.
Version: 1.2
Author: Templatic
Author URI: [templatic.com...]

*/

/*
IMPORTANT NOTE!
If you wish to make custom changes to your theme, DO NOT EDIT THIS FILE. Instead, use the custom.css template
to define custom styles. This way, you will still be able to take advantage of future upgrades to the theme
without worrying about overwriting your style changes.
*/

/*=== Setup ===*/

/* Import RESET styling for grid framework*/
@import url('library/css/reset.css');

/* Import TEXT styling for grid framework*/
@import url('library/css/text.css');

/* Import GRID styling for grid framework*/
@import url('skins/1-default.css');

/*--------------------------------------------------
Global Reset - Resets all browser defaults to 0
-------------------------------------------------- */
a { text-decoration:none; }
a:hover { text-decoration:none; }

.fix{ clear: both; height: 1px; margin: -1px 0 0; overflow: hidden }
.fl{ float: left }
.fr{ float: right }
.ac{ text-align: center }
.ar{ text-align: right }

.alignright { float:right; margin:5px 0; }
.alignleft { float:left; margin:5px 5px 0 0; }
.aligncenter { float:center; margin:5px 0 5px 5px; }
img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

hr { margin-bottom:22px; clear:both; }

.post_img { margin-bottom:12px; }

/*--------------------------------------------------
Structure
-------------------------------------------------- */
#header { width:960px; margin:0 auto; padding-bottom:15px; }
.banner { width:920px; margin:0 auto; padding:20px; }
.banner-top { width:960px; margin:0 auto; height:10px; }
* html .banner-top { margin-bottom:-5px; z-index:0px; position:relative; }

#page { width:920px; margin:0 auto; padding:20px; padding-top:30px; }

#content { width:630px; float:left; }
.content_full { width:auto !important; }
.content_right { float:right !important; }

#sidebar { width:290px; float:right; }
.sidebar_left { float:left !important; }

#footer { width:960px; margin:0 auto 20px auto; clear:both; height:100%; overflow:hidden; }
.footer_bottom { padding:20px 20px; }

.page_head { width:920px; margin:0 auto; padding:20px; }

/*--------------------------------------------------
Header
-------------------------------------------------- */
.h_left { width:555px; float:left; position:relative; margin:22px 0 5px 10px; }
.callnow { width:175px; padding:38px 10px 10px 35px; float:right; font:18px Arial, Helvetica, sans-serif; text-align:right; }
.number { font-size:21px; font-weight:normal; }

/*=== Logo Spot ===*/
#header .blog-title{ padding:15px 0 0 0 }
#header .blog-title a{ font:36px Georgia; text-decoration:none; padding:10px 0px }
#header .blog-title a:hover{ text-decoration:none; background:none }
#header .blog-description{ font-size:14px; padding:0px }

#navbg { clear:both; width:940px; margin:0 auto; height:50px; padding:0 10px; }


/*--------------------------------------------------
Banner
-------------------------------------------------- */

.banner_left { width:590px; float:left; }

.banner h1 { margin:0 0 8px 0; font-size:36px; font-style:italic; }
.banner_left p { margin:0 0 12px 0; padding:0; font-size:17px;}

#slideshow { position:relative; width:270px; float:left; margin:0 15px 5px 0; height:265px; }
#slideshow DIV { position:absolute; top:5px; right:5px left:0; z-index:8; opacity:0.0; width:270px; height:265px; }

#slideshow DIV.active { z-index:10; opacity:1.0; }
#slideshow DIV.last-active { z-index:9; }
#slideshow DIV IMG { display: block; margin: 5px 0 0 5px; }

.button a { float:left; display:block; padding:5px; text-decoration:none; font-weight:bold; }

.todays_special { width:300px; float:right; position:relative; margin-top:-10px; z-index:0; }
.todays_special_top { z-index:0; }
.todays_special_bottom { padding:60px 25px 18px 25px; z-index:0; }

.todays_special h3 { margin:0; padding:6px 28px 15px 40px; font-size:20px; position:absolute; left:3px; top:14px; text-transform:capitalize; width:180px; }
.todays_special img { padding:5px; margin-bottom:8px; }

.todays_special p { margin:0 0 8px 0; padding:0; border:none; font-size:14px; }
.todays_special p.title { font-weight:bold; }
.todays_special p.title a { text-decoration:none; }

/*--------------------------------------------------
Home
-------------------------------------------------- */
#content .our_menu { clear:both; position:relative; padding-top:55px; }
#content h3.menu_t { margin:0; padding:6px 28px 15px 45px; font-size:20px; position:absolute; left:-28px; top:0px; text-transform:capitalize; width:180px; }

p { margin:0 0 10px 0; padding:0; line-height:20px; }
h3 { margin:0px 0 10px 0; padding:0; }

.imgcenter { margin-bottom:15px; }
p.alignright { text-align:right; }

ul { margin:0; padding:0; list-style:none; }

#content .latest_menu li { margin:0 40px 15px 0; _margin:0 30px 15px 0; padding:0 0 10px 0; width:270px; float:left; }
#content .latest_menu li img { float:left; margin:5px 15px 0 0; }
#content .latest_menu li p.menu_title { margin:0; font:16px "Palatino Linotype", Georgia, "Times New Roman", Times, serif; font-weight:bold; }

.contactinfo { width:180px; min-height:110px; _height:110px; float:right; padding:10px 15px 0 90px; }
.contactinfo p { font:11px Arial, Helvetica, sans-serif; margin:0 0 5px 0; padding:0; }

.contactinfo h4 { margin-bottom:5px; font:13px Georgia, "Times New Roman", Times, serif; }



#content .location_box { width:593px; float:left }
#content .location_box_bottom { padding:15px; }


.google_map { margin:0 0 10px 10px; float:right; }
#content h3.location_t { margin:0 0 8px 0; padding:8px 0 8px 35px; font-size:18px; }
#content .location p { font-size:12px; }

.widget-spot { padding-bottom:25px; }
#content .widget-spot { padding-bottom:0px; }

p.more { display:block; clear:both; position:relative; top:-16px; width:590px; padding-top:10px; text-align:right; }


/*--------------------------------------------------
inner
-------------------------------------------------- */
h1 { margin-bottom:15px; padding-bottom:8px; font-style:italic; }
.content_spacer { padding-right:40px; }
.content_spacer2 { padding-left:40px; }

blockquote { margin:0; padding:0 0 0 25px; }
p.author { margin:0 0 15px 0; padding-bottom:15px; }


.table td { padding:8px; vertical-align:top; }
.table td.title { font: bold 12px Georgia, "Times New Roman", Times, serif; }
.table td.catetitle { font: bold 12px Georgia, "Times New Roman", Times, serif; }

.table td.row { position:relative; }
.table2 td { padding:0; }

.iteam { height:100%; overflow:hidden; padding-top:10px; }
.iteam img { float:left; margin:0 12px 5px 0; }
.iteam_content { width:225px; float:right; }
p.price { font-weight:bold; padding-right:25px; padding-top:5px; text-align:right; }
p.size { font-weight:bold; text-align:center; padding-top:5px; }
p.iteam_title { margin:-4px 0 0 0; padding:0; font-size:14px; }

.print { font:bold 11px Arial, Helvetica, sans-serif; float:right; margin-bottom:10px; margin-top:10px; }
.print a { background:#340f05 url(images/i_print.png) no-repeat 7px 7px; color:#fff; padding:5px 15px 5px 26px; text-decoration:none; text-transform:uppercase; -moz-border-radius-bottomleft:0.25em; -moz-border-radius-bottomright:0.25em; -moz-border-radius-topleft:0.25em; -moz-border-radius-topright:0.25em; }
.print a:hover { background:#340f05 url(images/i_print.png) no-repeat 7px 7px; color:#ffe692; text-decoration:none; }

/*--------------------------------------------------
content
-------------------------------------------------- */

#content h4 { margin:10px 0 15px 0; padding:0 0 5px 0 ; text-transform:uppercase; }

#content h4 a { text-decoration:none; }
#content h4 a:hover { text-decoration:none; }

#content .posts { margin-bottom:40px; }

.post_top { height:100%; overflow:hidden; }
.calendar { width:60px; float:left; font-size:27px; text-align:center; }
.month { font-size:18px; }


.post_title { float:left; width:510px; }
#content .posts h3 { margin:0; padding:5px 0 3px 0; text-transform:capitalize; }
#content .posts h3 a { text-decoration:none; }
#content .post_top a { text-decoration:none; }
#content .post_content { padding-bottom:10px; }


#content p.post_meta { font-size:11px; }

.page ul { padding:10px 0 20px 0; list-style:square inside !important }
#content .post_bottom { padding:8px 0 11px 0; clear:both; }
#content .post_bottom a { text-decoration:underline; }
#content .post_bottom a:hover { text-decoration:none; }

.arclist{ margin-bottom:30px; padding-bottom:25px; }

.i_comment { width:29px; text-align:center; padding:4px 0 15px 0; margin-top:10px; float:right; font-size:14px; font-weight:bold; }


/*---------PAGE NAVIGATION - pagination --------- */
.pagination { width: 100%; font: 14px Georgia, "Times New Roman", Times, serif; font-weight: bold; padding:0 }
.Navi { float: right; padding: 0 0 20px 0 }
.Navi .on { display: block; float: left; font-size: 12px; padding:11px 15px; margin-left: 4px; }
.Navi a { text-decoration: none !important; display: block; float: left; margin-left: 4px; padding:10px 13px; }

/*---------COMMENTS --------- */
#comments h3{ font-size:18px; padding:0 0 5px 0; margin:0 0 20px 0; }
#comments .commentlist { padding:0; margin:0;}

#comments .commentlist li p { margin:0; padding:0; }
#comments ol{padding:20px 0;}
#content #comments .comment { margin: 10px 0 30px 0; padding:0; width: 100%; background:none; list-style:none }
#comments .comment a{ text-decoration:none; padding:1px 0 }
#content #comments p.authorcomment { margin:3px 0 0 0; padding:0; line-height:normal; font-size:11px; font-weight:bold; }
#comments p.authorcomment a { text-decoration:none; }
#comments p.authorcomment a:hover { text-decoration:none; }

#comments .comment .meta-left { width: 90px; float:left;}
#comments .comment .meta-left p{ padding:0; margin:0; line-height:12px; font-size:11px; }
#comments .comment .meta-left .meta-wrap {width: 90px; overflow: hidden; padding-right: 7px; min-height:70px; }
#comments .comment small {font-size: 11px }
* html #comments .comment .text-right { height:70px }
#comments .comment .text-right { min-height:70px; margin:0; padding: 12px; margin-left:100px; float:none }
#comments .comment .text-right p { line-height: 18px; padding: 0 0 8px 13px; font-size:12px; }
#comments ul.children { margin:10px 0 0 20px; padding:0 }
p.commpadd{ padding:0; margin:0 0 10px 0 }
span.comm-reply{ float:right; padding:5px 0 0 0; font-size:11px; }
span.comm-reply a:hover{ font-size:11px; text-decoration:none; }
.cancel-comment-reply{ padding:0 0 10px 0 }
#respond { padding:10px 0 0 0; margin:0 }
#respond textarea, .commpadd input{ font:13px Arial, Helvetica, sans-serif; }
#respond textarea { margin:0; padding:5px; }
p.commpadd input{ line-height:25px; height:25px; padding:5px 0 0 5px; width:300px }
p.commpadd label{ padding:0 0 0 5px }
input#submit{ font:bold 12px Arial, Helvetica, sans-serif; text-align:center; padding: 5px; margin:0; cursor:pointer; }
* html #commentform label { margin:-8px 0 0 0; position:relative; top:-8px; }
*+html #commentform label { margin:-8px 0 0 0; position:relative; top:-8px; }

.avatar { padding:3px;}


/*---------ARCHIVE PAGE --------- */

.arclist ul{ padding:0; margin:0 }
.arclist ul li{ color:silver; font-size:12px; padding:5px 0; margin:0; }
.arclist ul li ul{ padding:0 0 0 5px }
.arclist ul li ul li{ padding:10px 0 0 5px }
.arclist .archives-time{ float: left;text-transform: uppercase; width:90px; margin:0 15px 0 0 }

#content .arclist li a { text-decoration:none !important; }


/*--------------------------------------------------
Sidebar
-------------------------------------------------- */
#sidebar ul { margin:0 0 25px 0; padding:0; }
#sidebar li { margin:0 0 5px 0; padding:0 0 5px 15px; line-height:18px; }
#sidebar li a { text-decoration:none; }
#sidebar li a:hover { text-decoration:none; }
.date { font-size:12px; }

#sidebar h3 { font-size:18px; margin:0 0 8px 0; padding:8px 5px 8px 10px; }
#sidebar h3.hours { font-size:18px; margin:0 0 8px 0; padding:8px 5px 8px 32px; }

.row1 { padding:5px; font:17px Georgia, "Times New Roman", Times, serif; }
.row2 { font:13px Georgia, "Times New Roman", Times, serif; }
.day { width:155px; float:left; padding:8px; }
.time { width:100px; float:right; padding:8px; text-align:center; }


.testimonials_box_bottom { padding:10px 15px 0px 15px; }
.testimonials { font-size:14px; padding:0 0 15px 20px; margin-bottom:20px; line-height:18px; }
.customer_name { margin:0; padding:0; clear:both; text-align:right; }


#sidebar h3.review { font-size:18px; margin:0 0 8px 0; padding:8px 5px 8px 30px; }
#sidebar .todays_special { width:inherit; float:inherit; }
#sidebar .todays_special_bottom { padding:60px 15px 18px 15px; }

#sidebar .todays_special h3 { margin:0; padding:6px 28px 15px 45px; font-size:20px; text-transform:capitalize; width:180px; }
#sidebar .todays_special img { padding:5px; margin-bottom:8px; }

.advt { margin-bottom:20px; }
/*--------------------------------------------------
footer
-------------------------------------------------- */
.f_left { float:left; width:465px; }
.copyright { font-size:12px; padding-left:10px; margin:0 0 0px 10px; line-height:18px; float:left; }
.copyright a{ text-decoration:none; }
.copyright a:hover{ text-decoration:none; }

.flink { list-style:none; margin:0; padding:0; float:right; overflow:hidden; }
.flink li{ display:block; float:left; padding:0 10px 0 0px; margin:0 -10px 0 10px; line-height:12px; }
.flink li a { text-decoration:none; }
.flink li a:hover { text-decoration:none; }

#footer .designby { padding:5px 8px 0 0; float:left; }
#footer p span.templatic { width:80px; display:block; overflow:hidden; float:left; color:#fff; background:url(images/templatic.png) no-repeat 0; }
#footer p span.templatic a { text-indent:-9009px; padding-left:120px; height:30px; display:block; }

/*
P.I.E. FLOAT CLEARING
See [positioniseverything.net...]
--------------------- */
.clearfix:after { content:"."; clear:both; height:0; visibility:hidden;display:block; }
.clearfix { display: inline-block; /* Fixes IE/Mac */ }

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix {display: block; }
/* End hide from IE-mac */

[webprutser]

I don't know if you have a specific part that causes you troubles, but I took one part of your css-code (row1 and row2), added two different colors to it and tested it in both IE and Firefox. They are exactly the same with regard to color, font-type and font-size. This is the CSS-code for the two classes, that worked:

.row1 {
padding:5px;
font-size:17px;
font-family: Georgia, "Times New Roman", Times, serif;
color: red;
}

.row2 {
font-size:13px;
font-family: Georgia, "Times New Roman", Times, serif;
color: green;
}

and this is the connected html-file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<TITLE>testfile</TITLE>
<META name="keywords" content="testfile">
<LINK rel="styleSheet" type="text/css" href="forum.css">
</HEAD>

<body>

<span class="row1">
A little check to SEE what different browsers do to it.<br>
</span>

<span class="row2">
SOME more text to check things.
</span>

</body>
</html>


If you try that at your computer, see what it does. If you have problems with this little bit of code also, maybe you should check what settings your computer has. See what the website looks like at an other computer.

[g1smd]

Using XHTML type tags with a HTML DOCTYPE is one of the problems: [validator.w3.org...]

Fix the document so that it is valid HTML 4.1 here.

You'll also need to work out which of these CSS errors should be ignored and which need fixing:
[jigsaw.w3.org...]

The site is built with code soup. The good news is most of it can be fixed in a day.

Get rid of ALL of the inline CSS found within the HTML. Get it all into an external stylesheet. Load alternative external stylesheets for different browsers if you must.

[alt131]

Hi Valtlfelipe, and welcome to WebmasterWorld :)

I've had several looks, and think I can see text that isn't the same - but I'm not completely sure. Maybe time for new glasses ;) Can you try to be more exact about where the problem is? ... Is it the text in the form that is "yellow" in ie?

I suspect the problem is caused by inheritance - but I can't trace the cascade. That's because of the invalid code, and part of the trouble will be that the browsers are making different decisions about how to handle the invalidities.

So, can validate your code (and if you have troubles with that, come back and ask)? Then point out the exact parts of the page - for people like me who need glasses - then it should be quite easy to figure out what is causing the problem.

[webprutser]

@g1smd: I feel rather stupid I didn't do what you did: use a validator, but OK. One of my weak points is to use elaborate ways when confronted with problems. Still learning and improving, but it's always good to be reminded of more efficient ways to deal with this kind of errors.

There was one thing that came to my mind in view to the problem at this thread. Obviously there is some CSS stuff to take care of and this will probably safe the fix, but as I recently had trouble with Internet Explorer also it was pointed out to me, that IE's version I used was also of importance. Older version may cause problems, so it may be wise to download the latest version just to make sure.