CODEWITHSUNDEEP
htmlcss
Si8
Si8

Reputation: 9225

CSS displays differently in two separate page

I have the following CSS:

#main2 {
    width: 680px;
    margin: 0 auto;
    padding: 0;
}
#header2 {
    text-align: center;
    margin: 0 auto;
    padding: 0;
    height: 31px;
    line-height: 31px;
}
#contents2 {
    text-align: center;
    margin: 0 auto;
    border: 3px solid #0F446D;
    padding: 0;
    padding-left: 15px;
    height: 365px;
    background: url('theImages/certBG.png') no-repeat bottom;
}
#store {
    background-image: url('theImages/certHeader.png');
    width: 231px;
    height: 31px;
    padding: 0;
    margin: 0 auto;
    color: #FFFFFF;
    font-weight: bold;
    font-family: Verdana, Arial;
    font-size: 14px;
}

But this page: Non Working Page Not Working

shows the header "Your Information" differently than this page: Working Page Working

Can anyone please let me know why? and how to make the first page show the header correctly.

Upvotes: 0

Views: 258

Answers (2)

Ritesh Kumar Gupta
Ritesh Kumar Gupta

Reputation: 5191

You require a different CSS style-sheet for internet explorer(IE):

Refer line 8,9 and 10 of following page source(by clicking ViewSource in IE) .

<!--[if IE]>
<link href="theScriptsStyles/mainStyle-ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

Page Link-1 includes IE Style-Sheet while Page Link-2 do not.

Both page looks identical in other browsers(Chrome, Firefox).Looks different in Internet Explore because of mainStyle-ie.css

IE always has CSS issue. Therefore,you have to target specifically your style-sheet for IE only. You will need to put condition code(like above) on heading section of the page.

Upvotes: 2

Hassaan
Hassaan

Reputation: 326

#store22{ display:block;}

OR

Add display:block; on line 22

and it works excellent as your demands. :)

Upvotes: 1

Related Questions