IE 7 is showing my site wrongly. Please Advice

[brekke00]

I have no idea what to edit to make the site look normal.

Please use firefox to see my site.
http://www.brekke-media.com

then use IE7.

is there anyone that know where i have messed up in the CSS.


Thankfull for any help or point in the right dirrection.

[fairestcape]

Thousands of people all over the world have asked Bill Gates why MS does not follow industry standards on CSS.

It's often very difficult and sometimes impossible to fix. I have heard of people who write separate stylesheets for each browser. A bit of conditional code in the HTML header governs what stylesheet applies, once it has been determined what browser is being used. This is a lot of work, but guarantees success

[brekke00]

i think i have found the issue. i will do some search in all the filesto determen if i am right. i will post back asap.

IE is reading a font size of 7,45pt for some kind of reason.

will search all files for this font size and change it to see where the problem is.

hopefully i will find the solution for other people also.

i think IE reads info from a different source than FX.
I might be wrong.

I wish people would stopp using IE so we all would save us from the problems it is making with CSS

[brekke00]

here is the answer to this issue.

<h6 class="leftBoxHeading" id="<?php echo str_replace('_', '-', $box_id) . 'Heading'; ?>"><?php echo $title; ?></h6>

solution was to change: <h1 class to <h6 class

no logic what so ever but it works.

here is the path: includes/templates/template_default/common/tpl_box_default_XXX.php

just change the h class and it should work fine.

[TnTwMom]

Thanks for posting your solution, I posted yesterday saying that a site I was working on was basically empty in IE, but worked fine in Fire Fox. I will give this a try, and let you know if it helps me!

[Tech-E]

You should be using the correct unit designations in CSS.

Points are for print media. Points have been the standard for printed output for 100+ years.

Pixels are for screen media. Computer screens contain pixels. Most CSS files use pixels or ems for units.

Browsers typically recognize both, but each is intended to be used for different purposes and each displays differently.

This didn't have anything to do with your problem. It is just an FYI.

[brekke00]

thanks. for the info. but the funny thing is that IE reads some parts from the print CSS for some reason. and by modifying it everything seams to be normal.

[paprbkwrtr]

Yes - here are basic rules for CSS to avoid IE & Firefox conflicts-

1. fonts should be designated in pixels (12px) or em (0.5em) ONLY.
2. colors should be designated by their hexidecimal value (i.e. #000000 for black) or their RBG value (i.e. RGB(0,0,0) for black).

Some good rules for general CSS:
1. Designate <div> widths and heights in pixels. Every monitor and platform renders screen monitor resolution in pixels so its a safe bet your design will render virtually the same in FF, IE and Safari.

2. WATCH YOUR MARGINS ! IE renders margins slightly differently than FF. IE "sees" margins around a <div> slightly differently, so take that into account when adding borders or margin/padding to <div> declarations in your CSS.

3. Comment everything and separate your CSS declarations by categories like <! -- SITE WIDE -->, <!-- IMAGE ATTRIBUTES -->, <!--FORM STYLES--> and put your styles for each category below these comments. It makes finding stuff easier. I also comment in my CSS when I made a change or what the change does

i.e. .cartDisplay { text-align:center;} /*moves text to center */

============

Have a look at my companies online shop test site: http://www.fastoffice.com/takeout/

It renders the same in IE and Firefox because of how I've set up my CSS. I don't have to call a separate stylesheet for IE and FF because I've taken the differences between IE and FF when writing my CSS. There are 1 or 2 IE7 hacks in there but not many.