Problem with Internet Explorer (css)

  • Resolved galu643

    (@galu643)


    13 years, 9 months ago

    Welcome. One problem solved, but I have another … Namely, my site is displayed in almost every browser correctly. Practically … The problem is with IE … The following CSS style sheet. advice something?

    style.css

    /*
   Theme Name: xxx
   Description: xxx
   Author: xxx
   Author URI: xxx
   Version: xxx
*/

@charset "utf-8";

* { margin: 0px; padding: 0px; }

body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; background: #2897a8; }

.clear { clear: both; }

#page { width: 960px; margin: auto; background: url(img/bg.jpg) repeat-y; }

#gora { width: 960px; height: 81px; margin: auto; margin-top: -20px; background: url(img/tqm_02.gif) no-repeat; }

#header { position: relative; }
#logo { display: block; width: 384px; height: 132px; background: url(img/logo.gif) no-repeat; margin: auto; }

#menu_01 { display: block; width: 134px; height: 45px; background: url(img/menu_01.gif) no-repeat; float: left; }
#menu_02 { display: block; width: 106px; height: 45px; background: url(img/menu_02.gif) no-repeat; float: left; }
#menu_03 { display: block; width: 78px; height: 45px; background: url(img/menu_03.gif) no-repeat; float: left; }
#menu_04 { display: block; width: 108px; height: 45px; background: url(img/menu_04.gif) no-repeat; float: left; }

#navbar { display: block; width: 426px; height: 45px; padding-top: 25px; padding-bottom: 15px; margin: auto; }

#tv { width: 638px; height: 374px; background: url(img/tv_tlo.gif) no-repeat; margin: auto; }

#dol_info { width: 960px; height: 165px; background: url(img/dol_tlo.jpg) no-repeat; padding-left: -110px; margin: auto; }

#mag_01 { display: block; width: 129px; height: 181px; background: url(img/test.jpg) no-repeat; margin: auto; padding-top: 60px; }

#container { width: 638px; margin: auto; background: url(img/bg1.jpg) repeat-y; margin-top: -30px; }
#content { padding: 0px; }

#slider { width: 638px; height: 231px; background: url(img/magazyn_tlo.gif) no-repeat; margin: auto; }

#slider_dol { width: 960px; height: 165px; background: url(img/dol_tlo.gif) no-repeat; margin: auto;  }

#sidebar { width: 493px; height: 273px; margin: auto; }

#linia { width: 642px; height: 7px; background: url(img/tqm_25.gif) no-repeat; margin: auto; margin-top: -14px; }

.img_sr { padding-top: 60px; margin: auto; padding-left: 40%; }

.entry { padding-bottom: 20px; color: #fff; }
.entry h1 { font-size: 14px; font-weight: bold; margin-bottom: 4px; color: #161f56; }

.entry h1 a { color: #161f56; text-decoration: none; }
.entry p.entry-date { font-size: 11px; margin-bottom: 8px; color: #161f56; }

.entry img.entry-thumb { float: left; margin-right: 15px; }
.entry p { line-height: 19px; }

.entry a.more-link { color: #c4f7ff; text-decoration: none; }
.entry a { color: #c4f7ff; text-decoration: none; }

.widget { width: 493px; height: 273px; padding-top: 25px; padding-left: 1px; margin: auto; }
.widget h2 { font-size: 14px; font-weight: bold; margin-bottom: 10px; }

.widget p { line-height: 19px; margin-top: 5px; }

#footer { margin-top: 10px; width: 642px; margin: auto; background: url(img/bg1.jpg) repeat-y; }
#footer p { font-size: 11px; color: #fff; padding-top: 10px; padding-bottom: 10px; }

    I created a specially generated file from a page that had a “charm” and the IE page display correctly … That did not happen .. The following code to it:

    ie.css

    /* IE6 css fixer v0.95: Thu, 21 Jun 2012 20:19:53 +0200 */

/* ============================================= */
/* safe settings                                 */

/* add display:inline to floated elements */
#menu_01,
#menu_02,
#menu_03,
#menu_04,
.entry img.entry-thumb {display:inline;}

/* fix negative margins */
#gora {position:relative; zoom:1;}

/* add zoom:1 to pos:relative elements */
#header {zoom:1;}

/* add overflow:visible to (submit) buttons */
 input, button {overflow:visible;}

    I may be wrong … If the file style.css and ie.css are in the same directory, and reading styles have entered like this:

    <link rel="stylesheet" href="<?php bloginfo( 'template_url' ); ?>/reset.css" type="text/css" />

<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" />

    whether these two styles (ie.css and style.css) work?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Luk Gaming

    (@luk-gaming)

    13 years, 9 months ago

    Firstly you are using an IE 6 css fixer..barely anyone uses IE6 nowadays (thank god) so there isn’t really much need for this. It will help but it won’t necessarily work for IE7+.

    Also it seems to be a hack and I would never suggest turning to hacks as solutions, they tend to bug out.

    If you want IE to read a separate style sheet (I assume this is what you’re asking for?) that is specifically coded for IE browsers then you have to place the following code in your <head></head> tags.

    <!--[if IE]>
<link rel='stylesheet' type='text/css' href='http://complete url link directly to your ie.css' />
<![endif]-->

    This puts the css in a conditional comment that only IE browsers read and forces all IE browsers to use that css instead of style.css

    Make sure that you put the full path to your css code otherwise IE might not pick it up. If you want to use the css for specific versions of IE only I would advice googling IE conditional comments to see the different codes you can use.

    The best way to fix your IE issues is to use the conditional comment I posted above and then tweak your style.css code (within ie.css) so that it displays the site properly in IE.

    Thread Starter galu643

    (@galu643)

    13 years, 9 months ago

    Ok, thanks. Can You help me wrote style.css for IE ? I searching help in google but i didn’t find… I have first time this problem because i earlier code to xhtml+css, no php with css..

    Thanks.

    Luk Gaming

    (@luk-gaming)

    13 years, 9 months ago

    Depends which IEs you want to support, writing code for IE6 is notoriously hard and not worth the effort.

    I’m more then happy to adjust your .css for IE7+ though, if you can link the site then I can get to work and help you out.

    If it’s a simple matter of positioning though you can you just tweak around your position, margin and padding codes.

    Thread Starter galu643

    (@galu643)

    13 years, 9 months ago

    I wanna create .css for IE7+.

    Ofcourse, site is: http://www.axionea.nazwa.pl/tqm/
    Please, help.

    Thank’s.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Problem with Internet Explorer (css)’ is closed to new replies.