Compatibilità Ie e altri browser con codice css

**biggiebi** · 18-01-2011, 15:45

Ciao Ragazzi. Ho un problema con il css del mio blog.
L'ho stilizzato utilizzando safari. Quando poi sono andato a visualiuzzarlo con Ie alcune proporzinoni erano completamente diverse.
In particolare alla fine di ogni post c'è una riga grigia e sotto di essa dello spazio bianco prima di cominciare il nuovo post.
Mentre safari me la visualizza correttamente Explorer mi aggiunge del extra spazio e non so perchè.
Cosi l'ho ristilizzato ma mentre ora si vede bene con explorer con safari e firefox no. Invece di esserci dello spazio non c'è nulla, il post sucessivo è attaccato alla riga divisioria.

Qualcuno sa darmi una mano?

Questo è il link

blog.andreaskoniaris.com

**ResianTaxidrive** · 18-01-2011, 16:05

dai un valore margin-top a quei div dove hai messo svariati stili inline

**biggiebi** · 18-01-2011, 17:03

Originariamente lo avevo messo il margine in alto ma su Explorer mi mette un margine di default che non capisco cosa sia.
Non so con che browser lo visualizzi ma con safari se metto il margin top al div del post me lo visualizza bene, su Explorer mi mette un extra margine e non mi sembra di averlo messo dentro io.
Oppure mi stai dicendo di fare un altra cosa?

**ResianTaxidrive** · 18-01-2011, 17:16

prova a metterlo così posso guardarlo con tutti i browser

**biggiebi** · 18-01-2011, 17:33

Fatto. Ho messo margin top sopra al div del articolo.
Se serve posso postare il codice.

**biggiebi** · 18-01-2011, 17:44

Ora ho rimesso i parametri originari. Come vedi in explorer mi mette del extra spazio che non so da dove venga. Al inizio del css ho anche impostato i margin e paddin a 0.

**ResianTaxidrive** · 18-01-2011, 17:58

non so perchè ma ho la sensazione che quei commenti che hai messo in giro facciano qualcosa di strano. Puo provare a toglierli? quelli tipo post-table eccetera

**biggiebi** · 18-01-2011, 19:52

Ah dici? in effetti gia un altra volta mi avevano creato noie... ora ci provo..

**biggiebi** · 18-01-2011, 19:57

Ecco fatto ma non mi pare sia cambiato qualcosa...che palle explorer...

**biggiebi** · 19-01-2011, 14:49

codice:

<!DOCTYPE html>

<html>
<head>

        <link rel="shortcut icon" href="{Favicon}">
        <link rel="alternate" type="application/rss+xml" href="{RSS}">
        {block:Description}
            <meta name="description" content="{MetaDescription}" />
        {/block:Description}
        
        


<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  // You may specify partial version numbers, such as "1" or "1.3",
  //  with the same result. Doing so will automatically load the 
  //  latest version matching that partial revision pattern 
  //  (e.g. 1.3 would load 1.3.2 today and 1 would load 1.4.1).

 google.load("jquery", "1.4.1");
   google.load("jqueryui", "1.7.2");
  google.setOnLoadCallback(function() {
	
  });
</script>





<style>

body 
{
background:#FFF;
margin:0 auto; 
color:#333; 
font-size: 13px;
line-height: 20px;
font-family:"Helvetica Neue", Helvetica, sans-serif;
-webkit-font-smoothing: antialiased; 
background-image:URL(http://img684.imageshack.us/img684/8170/topbgw.png);
background-repeat:repeat-x;
}

*
{
margin:0;
padding:0;
}

a
{
color:#146E90;
text-decoration:none;
}

a:hover 
{
color:#04394D;
text-decoration:none;
}

a img 
{
border:none;
}

a:link img 
{
border:none;
}

a:hover img 
{
border:none;
}

a.menu
{
    color:#146E90;
    text-decoration:none;
    font-weight: normal;
    margin:0px 3px 0px 6px;
    border-bottom:none;
}

a.menu:hover
{
    text-decoration:none;
    border-bottom:1px dotted;
    color:#E63B17;
}

#menu {
    text-align:right;
    height:57px;
    margin:0 auto;
    width:901px;
    margin-top:20px;
    padding-top:19px;
    padding-left:35px;
    padding-right:35px;
    font-size:14px;
    background-image:url(http://img832.imageshack.us/img832/5682/headerse.gif);
    background-position:bottom center;
    background-repeat:no-repeat;
}

a.about
{
color: #146E90;
border-bottom:1px dotted;
padding:0;
}

a.about:hover
{
color:#04394D;
}

a.title:link
{
border:none;
}

.no-border
{
border:none;
}


#space
{
width:100%;
height:9px;
border-bottom:1px solid #DDD;
margin-bottom:10px;
padding-bottom:20px;
}


#divider
{
    height:2px;
    width:971px;
    margin:0 auto;
    background-image:url(http://img593.imageshack.us/img593/8568/dividery.png);
    background-repeat:no-repeat;
    background-position:top center;
    background-color:#FFF;
}

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

p
{
line-height:20px;
}

h1, h2, h3, h4, h5, h6 
{
font-weight:normal;
padding:0; 
margin:0;
}

h1
{
font-size:36px;
line-height:40px;
margin-bottom:20px;
}

h2 
{ 
font-weight:bold;
font-size:24px;
line-height:40px;
margin-bottom:20px;
}

h3 
{
color:#E63B17; 
font-size:20px;
line-height:20px;
margin-bottom:20px;
font-weight:500;
}

.clear 
{
clear:both;
}

.breach 
{
clear: both;
display: block; 
border:0px; 
margin:0; 
padding:0;
width: 0;
height: 0;
}

.left {float:left;}
.right {float:right;}


#container 
{
width:901px; 
padding-left:35px; 
padding-right:35px; 
margin:0 auto; 
position:relative;
background-color:#FFF;
}

#contentwrapper  
{
float:left; 
width:582px; 
}

.content
{
}


article .post a 
{
text-decoration:none;
-webkit-transition: all .2s ease; 

}

article .post a:hover {}

article a img 
{
border: none;
}

article a:hover img 
{
border: none;
}

article 
{
font-size:13px; 
padding-bottom:20px;
margin-top:20px;
display:block; 
border-bottom:none;
}

article img 
{
max-width:100%; 
text-align:center;
}

article h2 a 
{
text-decoration:none;  
-webkit-transition: all .2s ease;
border-bottom:none;
}

.source 
{
margin-top:20px;
font-family:Georgia, serif;
}

.copy 
{
margin:0 0 20px 0;
font-family: Georgia, serif;  
}

blockquote 
{
opacity:.9;
}

.post 
{
clear:both;
border-bottom:#ccc;
}
    
.thequote 
{
color:#E63B17; 
font-size:36px;
line-height:40px;
padding:0px; 
margin:0px;
-webkit-text-stroke-color: transparent;
-webkit-text-stroke-width: 1px; 
display:inline;
}
    
.chat ul.chat 
{
margin-left:0; 
padding-left:0;
}

ul.chat div 
{
padding:2px 0;
}

ul.chat .even .label 
{
background-color:#FFF;
font-weight: 500;
}

ul.chat .odd  .label 
{
color:#CCC; 
font-weight: 500;
}
    
date 
{
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
padding:0px; margin:3px 0; 
font-size:12px;  
text-align:left;
}

date a 
{
color:inherit;text-decoration:none; 
-webkit-transition: all .2s ease; 
}

date a:hover {}


#twitter 
{ 
font-size:12px; 
display:none; 
}

#twitter strong 
{
color:#000;
}

#twitter strong a 
{
color:#000;
display:block;
}

#twitter strong a:hover 
{
color:#000;
}

.tweets
{
}

#twitter #tweets 
{
color:#146E90;
}

#twitter #tweets a 
{
color:#146E90;
}

#twitter #tweets a:hover 
{
color:#E63B17;
}

.page-navigation 
{
height:20px;
padding-bottom:20px;
}

.page-navigation a {}


#footer 
{ 
display:block; 
width:258px; 
float:right; 
background-color:#f2f2eb;
margin:20px 0 0 18px;
padding:19px 18px 20px 18px;
}

footer a:hover {}

footer .info {}

#authorcall 
{
text-transform:uppercase; 
font-weight:bold;
}

#site_footer {
    border-top: 2px solid #DDD;
    clear: both;
    font-size:12px;
    padding-top:12px;
    margin-top:7px;
    margin-bottom:20px;
    width: 901px;
    color:#999;
}



</style>


<title>{Title}</title>



<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-17597039-2']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>



</head>

<body>


<div id="menu">
    Web
    Design
    Identity
    Branding
    Photography
    

    Work
    Blog
    Ask
    Contact
</div>


<div id="divider">
</div>

<div id="container">


<header id="header">

<footer id="footer">

<h3>Who am I?</h3>


Hi, my name is Andreas Koniaris Poluzzi, and I'm:

  Web & Graphic designer, 
  Photographer, Basketball Coach & Player, Student in Law & Economics at Alma Mater Studiorum in Bologna, 
  Twitter, Fashion addicted, in love with a 
  beautiful girl, Greek, Italian and most of all a volcano of Creativity & Ideas.</p>


<div id="space">
</div>


{block:Description}<p class="info">{Description}</p>{/block:Description}
{block:Twitter}
<h3>Tweet, Tweet!</h3>
    <div id="twitter">
        <div id="tweets"></div>        
    </div>
    
    <script type="text/javascript">
        function recent_tweets(data) {
            for (i=0; i<data.length; i++) {
                document.getElementById("tweets").innerHTML = 
                    document.getElementById("tweets").innerHTML + 
                    '<a href="http://twitter.com/{andreaskoniaris}/status/' + 
                    data[i].id + '"><div class="tweets">&ldquo; ' + data[i].text + 
                    '</div></a>';
            }
            $('#twitter').fadeIn();
        }
    </script>
{/block:Twitter}

<div id="space">
</div>

 {block:HasPages}{block:Pages}

{Label}</p>{/block:Pages}{/block:HasPages}
  

RSS / Archive </p> 
  

{text:Copyright Information}</p>


</footer>
</header>
 

<div id="contentwrapper">


	
{block:Posts}

<table border="0" cellpadding="0" cellspacing="0" style="border-bottom:1px solid #EEE;">
  <tr>
    <td valign="top">
    
    
    {block:Date}
                 
                 
    <div style="float:left; width:121px; margin-top:16px; "><date class="left"><span style="color:#000;">{ShortMonth} {DayOfMonth}, {Year}</span>

    
    Permalink  {block:IfShowPostAuthors}by {PostAuthorName}  {/block:IfShowPostAuthors}
    
    
    

    {block:RebloggedFrom}<p style="color:#000;">Reblogged from</p>{ReblogParentTitle} {/block:RebloggedFrom}
    
    </date>{/block:Date}

       
        </div>
</td>
<td valign="top"><div style="float:right; width:425px; margin-left:35px;">
<article id="{PostID}" class="{TagsAsClasses}">
{block:Text}{block:Title}
<h2>{Title}</h2>
{/block:Title}
<div class="post text">
<div class="copy">{Body}</div>
</div>
{/block:Text}
{block:Photo}
{LinkOpenTag} [img]{PhotoURL-400}[/img]{LinkCloseTag}
<div class="post photo">
{block:Caption}
<div class="copy">{Caption}</div>
{/block:Caption}
</div>
{/block:Photo}
{block:Photoset}
{Photoset-400}
<div class="post photoset">
{block:Caption}
<div class="copy">{Caption}</div>
{/block:Caption}
</div>
{/block:Photoset}
{block:Quote}
<div class="post quote">
<div class="thequote">"{Quote}"</div>
{block:Source}
<div class="source">&mdash; {Source}</div>
{/block:Source}
</div>
{/block:Quote}
{block:Link}
<h2 class="title">{Name}</h2>
<div class="post link">
{block:Description}
<div class="copy" style="margin-bottom:20px;">{Description}</div>
{/block:Description}
</div>
{/block:Link}
{block:Chat}
{block:Title}
<h2 class="title">{Title}</h2>
{/block:Title}
<div class="post chat">
<ul class="chat">
{block:Lines}
<div class="{Alt} user_{UserNumber}">
{block:Label}
<span class="copy">{Label}</span>
{/block:Label}
{Line}
</div>
{/block:Lines}[/list]
</div>
{/block:Chat}
{block:Video}
<div class="post video" style="border:0px; margin:0px; padding:0px;">
{Video-400}
{block:Caption}
<div class="copy">{Caption}</div>
{/block:Caption}
</div>
{/block:Video}
{block:Audio}
<div class="post audio">
{block:IfShowAlbumArtOnAudioPosts}
{block:AlbumArt}
<div class="album_art">
[img]{AlbumArtURL}[/img]
</div>
{/block:AlbumArt}
{/block:IfShowAlbumArtOnAudioPosts}
{AudioPlayerBlack}
<div class="">{block:TrackName}{TrackName}{/block:TrackName} {block:Artist} - {Artist}{/block:Artist} {block:Album}from {Album}{/block:Album}</div>
{block:Caption}<div class="">{Caption}</div>{/block:Caption}
</div>
{/block:Audio}
</div>
</td>
</tr>
</table>
</article>
{/block:Posts}
<div style="width:582px; padding-right:332px; margin:0 auto;">
{block:Pagination} 
<div class="page-navigation">
{block:PreviousPage}
<div class="left">  &larr; Previous</div>
{/block:PreviousPage}
{block:NextPage}
<div class="right">  Next &rarr;</div>
{/block:NextPage}
</div>
</div>
</div>
<div id="site_footer">All material is copyright &copy; 2010 Andreas Koniaris</div>
<hr class="breach" />
	{/block:Pagination}
</div>


{block:Twitter}
<script type="text/javascript" src="/tweets.js"></script>
{/block:Twitter}
</body>
</html>

Discussione: Compatibilità Ie e altri browser con codice css

Strumenti discussione

Ricerca discussione

Visualizza

Compatibilità Ie e altri browser con codice css

Permessi di invio