2010-06-22 4 views
2

J'ai codé mon site et il semble parfait dans IE 8 mais quand je l'affiche dans Safafi, Chrome et Firefox. Tout est inexplicablement plus petit. Comment rendre la page Web normale comme dans le navigateur Internet Explorer 8?Redimensionnement étrange dans tous les navigateurs sauf IE

Mon site est à: http://www.jjosephs.byethost22.com/visibility/fixed/index_2.htm

J'ai été déconner avec il code pour des jours à essayer maintenant de faire fonctionner dans tous les 4 navigateurs. J'ai collé le code css ci-dessous, peut-être que quelque chose va sauter sur vous css gourous.


/* Eric Myers - CSS Reset v1.0 | 20080212 */ 

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, font, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    vertical-align: baseline; 
    background: transparent; 
} 
body { 

    background-color: rgb(85,105,94); 
    font-family:"Gill Sans MT", "Gill Sans", sans-serif; 
    color:white; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 

/* remember to define focus styles! */ 
:focus { 
    outline: 0; 
} 

/* remember to highlight inserts somehow! */ 
ins { 
    text-decoration: none; 
} 
del { 
    text-decoration: line-through; 
} 

/* tables still need 'cellspacing="0"' in the markup */ 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

/* 
     Created by Keith Donegan of Code-Sucks.com 

     E-Mail: [email protected] 

     You can do whatever you want with these layouts, 
     but it would be greatly appreciated if you gave a link 
     back to http://www.code-sucks.com 

*/ 

* { padding: 0; margin: 0; } 

#wrapper { 
margin: 0 auto; 
width: 922px; 
} 

#leftcolumn { 
margin: 10px 0px 0px 0px; 
padding: 10px; 
height: 500px; 
width: 155px; 
float: left; 
} 
#content { 
float: left; 
margin: 10px 0px 0px 0px; 
padding: 10px; 
height: 500px; 
width: 490px; 
display: inline; 
line-height:110%; 
font-family:"Gill Sans MT", "Gill Sans", sans-serif; 
} 
#rightcolumn { 
margin: 10px 0px 0px 0px; 
padding: 10px; 
height: 500px; 
width: 155px; 
float: left; 
position: relative; 
} 


#background_gradient img{ 
    position:absolute; 
    width:100%; 
    left:0px; 
    top:0px; 
} 

#background_logo img{ 
    position:absolute; 
    left:-271px; 
    top:-134px; 
    z-index:-1; 
    display:inline; 
} 

#coming_soon_img{ 
    position:absolute; 
    top:0px; 
    left:0px; 
} 

#logo_large{ 
    float:right; 
} 

#landing_text{ 
    clear:both; 
} 

#first_paragraph, #company_name, #street_address, .contact_short, #copyright{ 
    color:#ffffff; 
} 

#landing_text{ 
    font-size:15px; 
    line-height:20px; 
} 

.colored_text{ 
    color:#bd9e00; 
} 

#first_paragraph{ 
    font-size:20.5px; 
    font-weight:bold; 
} 

#first_paragraph span{ 
    font-weight:normal; 
    font-style:italic; 
} 

#lower_half{ 
    margin-top:26px; 
} 

#tag_line{ 
    font-size:17px; 
    float:left; 
} 


#call_to_action_button{ 
    float:right; 
} 

#company_name{ 
    font-size:13.5px; 
} 

#horizontal_line{ 
    margin-top:15px; 
} 

#footer_text{ 
    font-size:7.5px; 
    font-family:arial, "Gill Sans MT", sans-serif; 
    font-weight:bold; 
} 

#logo_micro, #address_details{ 
    float:left; 
} 

#address_details{ 
    margin-left:12.5px; 
} 

#contact_details{ 
    display:block; 
    line-height:80%; 
} 

.specific_contact_details, .specific_contact_details a{ 
    color:#bd9e00; 
} 

#copyright{ 
    float:right; 
    font-size:6.5px; 
} 
.other_landing_text{ 
    line-height:121.5%; 
    color:#313031; 
} 
+1

Je suis sûr que d'autres vont entrer, mais en guise de remarque, l'utilisation de 'px' pour les tailles de police n'est pas recommandée. – scunliffe

+0

Vous vous inquiétez trop. Vous contrôlez la disposition et le style de base, pas les polices ou les tailles exactes. Cela dit, je ne vois pas la différence entre FF et IE. –

Répondre

2

Assurez-vous qu'il est pas quelque chose que vous avez dans le IE8 parce font-size:7.5px; est censé être vraiment petit.

+0

Ouais, j'ai été zoomé sur IE: - /. C'est la même impression fine sur les 3 navigateurs, j'ai donc au moins une compatibilité cross-browser. Aller à tout augmenter d'un certain ratio pour voir si je peux une page qui ne aveugle pas mes utilisateurs. – Julian

+2

@Julian: ne pas oublier de marquer cela comme la bonne réponse. –

0

Apparemment bien dans IE7, Chrome, Safari, FF, sauf que les images .png transparentes ne fonctionnent pas dans IE6. Bon travail!

Questions connexes