SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Sep 2004
    Location
    London
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ie css issues (code inside)

    in the middle of making a site, been using firefox to test it as ive been going along. finally got to a point where im happy with the layout and decided to test it in ie. its all over the place im using xhtml and css, im sure its to do with the css posistioning. anyone have enough coding experience to take a look at my code to see if they can find the problem? here are some pictures..

    firefox

    ie

    here is my site code..

    html
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <link rel="stylesheet" href="css/milanfan.css" type="text/css" media="all" />
    </head>
    <body>
    <div id="wrap">
    	<div id="container">
    		<div id="banner"></div>
    			<div id="nav">
    				<li id="nav_news"><a href="http://" class="active">news</a></li>
    				<li id="nav_articles"><a href="http://">articles</a></li>
    				<li id="nav_team"><a href="http://">team</a></li>
    				<li id="nav_results"><a href="http://">results</a></li>
    				<li id="nav_downloads"><a href="http://">downloads</a></li>
    				<li id="nav_forum"><a href="http://">forum</a></li>
    				<li id="nav_about"><a href="http://">about</a></li>
    		  </div>
    		<div id="sidebar">
    			<div id="sidebar_top">latest result</div>
    			<div id="sidebar_bottom">bologna <span class="style3">0</span>:<span class="style2">2</span> milan<br />match report here</div>
    			
    			<div id="sidebar_top">next fixture</div>
    			<div id="sidebar_bottom">milan vs messina<br />20:30 cet, 22.09.04</div>
    			
    			<div id="sidebar_top">serie a</div>
    			<div id="sidebar_bottom_2"><table width="100%"  border="0" cellspacing="0" cellpadding="0">
    			  <tr>
    				<td width="10"><img src="img/spacer.gif" /></td>
    				<td width="25">pos</td>
    				<td width="65">team</td>
    				<td width="25">pld</td>
    				<td width="25">pts</td>
    			  </tr>
    			  <tr bgcolor="#BBBBBB">
    				<td width="10"><img src="img/spacer.gif" /></td>
    				<td width="25">2</td>
    				<td width="65">udinese</td>
    				<td width="25">2</td>
    				<td width="25">4</td>
    			  </tr>
    			  <tr>
    				<td width="10"><img src="img/spacer.gif" /></td>
    				<td width="25">3</td>
    				<td width="65">lecce</td>
    				<td width="25">2</td>
    				<td width="25">4</td>
    			  </tr>
    			  <tr bgcolor="#BBBBBB">
    				<td width="10"><img src="img/spacer.gif" /></td>
    				<td width="25">4</td>
    				<td width="65"><span class="style5">milan</span></td>
    				<td width="25">2</td>
    				<td width="25">4</td>
    			  </tr>
    			  <tr>
    				<td width="10"><img src="img/spacer.gif" /></td>
    				<td width="25">5</td>
    				<td width="65">chievo</td>
    				<td width="25">2</td>
    				<td width="25">4</td>
    			  </tr>
    			  <tr bgcolor="#BBBBBB">
    				<td width="10"><img src="img/spacer.gif" /></td>
    				<td width="25">6</td>
    				<td width="65">messina</td>
    				<td width="25">2</td>
    				<td width="25">4</td>
    			  </tr>
    			</table></div>
    			
    			<div id="sidebar_top">milanfan jobs</div>
    			<div id="sidebar_bottom">here at milanfan we are always on the lookout for people to join our dedicated team. if you think you've got what it takes, please email us!</div>
    			
    			<div id="sidebar_top">latest results</div>
    			<div id="sidebar_bottom">latest results</div>
    			
    			<div id="sidebar_top">latest results</div>
    			<div id="sidebar_bottom">latest results</div>
    		</div>
    
    		<div id="content">
    			<div id="box1_top">profile: gennaro gattuso</div> 
    			<div id="box2_top">welcome to milanfan!</div>
    			 
    			<div id="box1_bottom"><div class="img-shadow"><img src="img/players/gattuso.jpg"/></div>in a team where looks and fame sometimes seem to take first priority over football, gennaro ‘rino’ gattuso is a shining light.<br /><br /> gattuso, who plays for serie a champions ac milan, is a no-nonsense, combative style defensive midfielder... read more</div>
    			<div id="box2_bottom"><div class="img-shadow"><img src="img/milanfan.gif"/></div>milanfan is a website dedicated to ac milan football club. here, you can find all the latest news, results and team information updated daily. <br /><br /> please register with the (free) milanfan forums and help the community grow!</div>
    
    			<?php
     			$number = "10";
    			$show_dateheaders = true;
     			include("cutenews/show_news.php");
    			?> 
    			
    			<?php 
    			include("cutenews/auto_archive.php"); 
    			?>
    			
    		</div>
    		<div id="footer">&nbsp;</div>
    	</div>
    </div>
    </body>
    </html>
    css
    Code:
    #wrap {
    			position: relative;
    			margin: 0 auto;
    			padding: 0 25px;
    			border: 0px;
    			text-align: left;
    			background: url(../img/col_shadow.gif) repeat-y;
    
    			width: 770px;
    			voice-family: "\"}\""; 
    			voice-family: inherit;
    			width: 720px;
    		}
    		
    		html>body #wrap {
    			width: 720px;
    		}
    		
    		#container {
    			width: 720px;
    			\width: 740px;
    			w\idth: 720px;
    			border-top: 3px solid #BFBFBF;
    			border-bottom: 1px solid #BDBDBD;
    			margin: -8px auto 10px auto;
    		}
    
    		#banner {
    			height: 100px;
    			width: 720px;
    			background: url(../img/banner.gif);
    		}
    		
    		#nav {
    			width: 550px;
    			\width: 570px;
    			w\idth: 550px;
    			margin: 0;
    			padding-bottom: 15px;
    			font-size:10px;
    			list-style: none;
    			height: 18px;
    			font-family: 'Frutiger Linotype', 'Lucida Grande', 'Trebuchet MS', sans-serif;
    		}
    			
    		#nav li {
    			float: left;
    			margin: 0;
    			padding: 0;
    			list-style: none;
    		}
    		
    		#nav a {
    			float: left;
    			padding: 3px 10px 3px 30px;
    			text-decoration: none;
    			color: #555;
    			background: no-repeat 10px 50%;
    		}
    		
    		#nav a.active {
    			color: #485F79;;
    			background-color: #DFDFDF;
    		}
    		
    		#nav_news a {
    			background-image: url(../img/nav_news.gif);
    			border-bottom: 2px solid #fff;
    		}
    		
    		#nav_news a:hover {
    			border-bottom: 2px solid #FF7878;
    		}
    		
    		#nav_articles a {
    			background-image: url(../img/nav_articles.gif);
    		}
    		
    		#nav_articles a:hover {
    			border-bottom: 2px solid #F0BA65;
    		}
    		
    		#nav_team a {
    			background-image: url(../img/nav_team.gif);
    		}
    		
    		#nav_team a:hover {
    			border-bottom: 2px solid #EAE180;
    		}
    		
    		#nav_results a {
    			background-image: url(../img/nav_results.gif);
    		}
    		
    		#nav_results a:hover {
    			border-bottom: 2px solid #A2D07E;
    		}
    		
    		#nav_downloads a {
    			background-image: url(../img/nav_downloads.gif);
    		}
    		
    		#nav_downloads a:hover {
    			border-bottom: 2px solid #7FB1BC;
    		}
    		
    		#nav_forum a {
    			background-image: url(../img/nav_forum.gif);
    		}
    		
    		#nav_forum a:hover {
    			border-bottom: 2px solid #CAA1E6;
    		}
    		
    		#nav_about a {
    			background-image: url(../img/nav_about.gif);
    		}
    		
    		#nav_about a:hover {
    			border-bottom: 2px solid #A46F93;
    		}
    
    		#content {
    			padding: 0 10px 0 10px;
    			margin: 0 160px 10px 0;
    			background-color: #fff;
    			font-family: 'Frutiger Linotype', 'Lucida Grande', 'Trebuchet MS', sans-serif;
    			font-size: 10px;
    		}
    		
    		#box1_top {
    			float: left;
    			width: 255px;
    			\width: 275px;
    			w\idth: 255px;
    			margin: 0 10px 5px 0;
    			padding-left: 10px;
    			background-color: #D02424;
    			color: #FFFFFF;
    		}
    		
    		#box1_bottom {
    			float: left;
    			width: 245px;
    			\width: 265px;
    			w\idth: 245px;
    			margin: 0 10px 10px 0;
    			padding: 10px;
    			background-color: #DFDFDF;
    		}
    		
    		#box2_top {
    			float: left;
    			width: 255px;
    			\width: 275px;
    			w\idth: 255px;
    			margin: 0 0 5px 0;
    			padding-left: 10px;
    			background-color: #D02424;
    			color: #FFFFFF;
    		}
    		
    		#box2_bottom {
    			float: left;
    			width: 245px;
    			\width: 265px;
    			w\idth: 245px;
    			margin: 0 0 10px 0;
    			padding: 10px;
    			background-color: #DFDFDF;
    		}
    
    		#sidebar {
    			float: right;
    			width: 140px;
    			\width: 160px;
    			w\idth: 140px;
    			margin-right: 10px;
    			padding-right: 10px;
    			background-color: #fff;
    			font-family: 'Frutiger Linotype', 'Lucida Grande', 'Trebuchet MS', sans-serif;
    			font-size: 10px;
    		}
    		
    		#sidebar_top {
    			width: 140px;
    			\width: 160px;
    			w\idth: 140px;
    			margin: 0 10px 5px 0;
    			padding-left: 10px;
    			background-color: #D02424;
    			font-family: 'Frutiger Linotype', 'Lucida Grande', 'Trebuchet MS', sans-serif;
    			font-size: 10px;
    			color: #fff;
    		}
    		
    		#sidebar_bottom {
    			width: 130px;
    			\width: 150px;
    			w\idth: 130px;
    			margin: 0 10px 10px 0;
    			padding: 10px;
    			background-color: #DFDFDF;
    			font-family: 'Frutiger Linotype', 'Lucida Grande', 'Trebuchet MS', sans-serif;
    			font-size: 10px;
    		}
    		
    		#sidebar_bottom_2 {
    			width: 150px;
    			\width: 170px;
    			w\idth: 150px;
    			margin: 0 10px 10px 0;
    			background-color: #DFDFDF;
    			font-family: 'Frutiger Linotype', 'Lucida Grande', 'Trebuchet MS', sans-serif;
    			font-size: 10px;
    		}
    
    		#footer {
    			clear: both;
    			padding: 10px;
    			margin-top: 10px;
    			background-color: #DFDFDF;
    		}
    		
    		.img-shadow {
    			float:left;
    			background: url(../img/shadowAlpha.png) no-repeat bottom right !important;
    			background: url(../img/shadow.gif) no-repeat bottom right;
    			margin: 10px 8px 0 10px !important;
    			margin: 10px 0 0 5px;
    		}
    	
    		.img-shadow img {
    			display: block;
    			position: relative;
    			background-color: #fff;
    			border: 1px solid #a9a9a9;
    			margin: -6px 6px 6px -6px;
    			padding: 4px;
    	  	}
    		
    		.img-shadow-right {
    			float:right;
    			background: url(../img/shadowAlpha.png) no-repeat bottom right !important;
    			background: url(../img/shadow.gif) no-repeat bottom right;
    			margin: 10px 8px 0 10px !important;
    			margin: 10px 0 0 5px;
    		}
    	
    		.img-shadow-right img {
    			display: block;
    			position: relative;
    			background-color: #fff;
    			border: 1px solid #a9a9a9;
    			margin: -6px 6px 6px -6px;
    			padding: 4px;
    	  	}
    		
    		
    		
    		h1 {
    			font-weight: bold;
    			font-size: 10px;
    			font-family: 'Frutiger Linotype', 'Lucida Grande', 'Trebuchet MS', sans-serif;
    			padding: 0px;
    			border: 0px;
    			margin: 0px;
    		}
    		
    		h2  {
    			font-weight: bold;
    			font-size: 10px;
    			font-family: 'Frutiger Linotype', 'Lucida Grande', 'Trebuchet MS', sans-serif;
    			padding: 0px;
    			border: 0px;
    			margin: 0px;
    			color: #D02424;
    		}
    		
    		#news_top {
    			float: left;
    			width: 530px;
    			\width: 550px;
    			w\idth: 530px;
    			margin: 0 10px 5px 0;
    			padding-left: 10px;
    			background-color: #D02424;
    			color: #FFFFFF;
    		}
    		
    		#news_bottom {
    			float: left;
    			width: 520px;
    			\width: 540px;
    			w\idth: 520px;
    			margin: 0 10px 10px 0;
    			padding: 10px;
    			background-color: #DFDFDF;
    		}
    		
    		.style2 {
    			color: #0A8F00;
    		}
    		
    		.style3 {
    			color: #A00000;
    		}
    		
    		.style5 {
    			color: #D02424;
    			}
    many thanks

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Its hard to tell without lloking at the actula site but one of the problems is ie's 3 pixels jog. See the FAQ on floats for a full explanation.

    This should fix the middle column for your.
    Code:
     
      #content {
       padding: 0 10px 0 10px;
       margin: 0 160px 10px 0;
       background-color: #fff;
       font-family: 'Frutiger Linotype', 'Lucida Grande', 'Trebuchet MS', sans-serif;
       font-size: 10px;
      }
      * html #content {margin-right:157px}/* ie adds 3 pixels back on*/
    
      #sidebar {
       float: right;
       width: 140px;
       \width: 160px;
       w\idth: 140px;
       margin-right: 10px;
       padding-right: 10px;
       background-color: #fff;
       font-family: 'Frutiger Linotype', 'Lucida Grande', 'Trebuchet MS', sans-serif;
       font-size: 10px;
       display:inline;
      }
      * html #sidebar {margin-right:-3px}
    


    If you has a link to the page It would be easier to see whats going on.

    Paul

  3. #3
    SitePoint Member
    Join Date
    Sep 2004
    Location
    London
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry, here it is http://mig.yoremamma.net/mike_test/

    thanks for your help!

  4. #4
    SitePoint Member
    Join Date
    Sep 2004
    Location
    London
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    played around with the hacks you suggested, looks a lot better than how it did before. nearly there..

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You missed the star (*) off the styles I gave you. The star is the universal selctor and just apsses styles to ie when used in combination with html e.g. * html.

    [code]
    This code looks the same in firefox and ie (except I can't remember all the tweaks I made.)

    Code:
      #wrap {
       position: relative;
       margin: 0 auto;
       padding: 0 25px;
       border: 0px;
       text-align: left;
       background: url(http://mig.yoremamma.net/mike_test/img/col_shadow.gif) repeat-y;
       width: 770px;
       voice-family: "\"}\""; 
       voice-family: inherit;
       width: 720px;
      }
      
      html>body #wrap {
       width: 720px;
      }
      
      #container {
       width: 720px;
       \width: 740px;
       w\idth: 720px;
       border-top: 3px solid #BFBFBF;
       border-bottom: 1px solid #BDBDBD;
       margin: -8px auto 10px auto;
      }
      #banner {
       height: 100px;
       width: 720px;
       background: url(http://mig.yoremamma.net/mike_test/img/banner.gif);
      }
      
      #nav {
       width: 550px;
       \width: 570px;
       w\idth: 550px;
       margin: 0;
       padding-bottom: 15px;
       font-size:10px;
       list-style: none;
       height: 18px;
       font-family: 'Frutiger Linotype', 'Lucida Grande', 'Trebuchet MS', sans-serif;
      }
       
      #nav li {
       float: left;
       margin: 0;
       padding: 0;
       list-style: none;
      }
      
      #nav a {
       float: left;
       padding: 3px 10px 3px 30px;
       text-decoration: none;
       color: #555;
       background: no-repeat 10px 50%;
      }
      
      #nav a.active {
       color: #485F79;;
       background-color: #DFDFDF;
      }
      
      #nav_news a {
       background-image: url(http://mig.yoremamma.net/mike_test/img/nav_news.gif);
       border-bottom: 2px solid #fff;
      }
      
      #nav_news a:hover {
       border-bottom: 2px solid #FF7878;
      }
      
      #nav_articles a {
       background-image: url(http://mig.yoremamma.net/mike_test/img/nav_articles.gif);
      }
      
      #nav_articles a:hover {
       border-bottom: 2px solid #F0BA65;
      }
      
      #nav_team a {
       background-image: url(http://mig.yoremamma.net/mike_test/img/nav_team.gif);
      }
      
      #nav_team a:hover {
       border-bottom: 2px solid #EAE180;
      }
      
      #nav_results a {
       background-image: url(http://mig.yoremamma.net/mike_test/img/nav_results.gif);
      }
      
      #nav_results a:hover {
       border-bottom: 2px solid #A2D07E;
      }
      
      #nav_downloads a {
       background-image: url(http://mig.yoremamma.net/mike_test/i..._downloads.gif);
      }
      
      #nav_downloads a:hover {
       border-bottom: 2px solid #7FB1BC;
      }
      
      #nav_forum a {
       background-image: url(http://mig.yoremamma.net/mike_test/img/nav_forum.gif);
      }
      
      #nav_forum a:hover {
       border-bottom: 2px solid #CAA1E6;
      }
      
      #nav_about a {
       background-image: url(http://mig.yoremamma.net/mike_test/img/nav_about.gif);
      }
      
      #nav_about a:hover {
       border-bottom: 2px solid #A46F93;
      }
      #content {
       padding: 0 10px 0 10px;
       margin: 0 160px 10px 0;
       background-color: #fff;
       font-family: 'Frutiger Linotype', 'Lucida Grande', 'Trebuchet MS', sans-serif;
       font-size: 10px;
      }
      #box1_top {
       float: left;
       width: 255px;
       \width: 275px;
       w\idth: 255px;
       margin: 0 10px 5px 0;
       padding-left: 10px;
       background-color: #D02424;
       color: #FFFFFF;
       display:inline;
      }
      
      #box1_bottom {
       float: left;
       width: 245px;
       \width: 265px;
       w\idth: 245px;
       margin: 0 10px 10px 0;
       padding: 10px;
       background-color: #DFDFDF;
       display:inline;
      }
      
    #box2_top { 
    float: left; 
    width: 255px; 
    margin: 0 0 5px 0; 
    padding-left: 10px; 
    background-color: #D02424; 
    color: #FFFFFF; 
    } 
    html>body #box2_top { 
    width: 255px; 
    } 
    #box2_bottom { 
    float: left; 
    width: 245px; 
    margin: 0 0 10px 0; 
    padding: 10px; 
    background-color: #DFDFDF; 
    } 
    html>body #box2_bottom { 
    width: 245px; 
    } 
    
      #sidebar {
       float: right;
       width: 140px;
       \width: 160px;
       w\idth: 140px;
       margin-right: 20px;
       background-color: #fff;
       font-family: 'Frutiger Linotype', 'Lucida Grande', 'Trebuchet MS', sans-serif;
       font-size: 10px;
       display:inline;
      }
     * html #sidebar {margin-right:0}
      
      #sidebar_top {
       width: 140px;
       \width: 160px;
       w\idth: 140px;
       margin: 0 0px 5px 0;
       padding-left: 10px;
       background-color: #D02424;
       font-family: 'Frutiger Linotype', 'Lucida Grande', 'Trebuchet MS', sans-serif;
       font-size: 10px;
       color: #fff;
      }
      
      #sidebar_bottom {
       width: 130px;
       \width: 150px;
       w\idth: 130px;
       margin: 0 00px 10px 0;
       padding: 10px;
       background-color: #DFDFDF;
       font-family: 'Frutiger Linotype', 'Lucida Grande', 'Trebuchet MS', sans-serif;
       font-size: 10px;
      }
      
      #sidebar_bottom_2 {
       width: 150px;
       \width: 170px;
       w\idth: 150px;
       margin: 0 10px 10px 0;
       background-color: #DFDFDF;
       font-family: 'Frutiger Linotype', 'Lucida Grande', 'Trebuchet MS', sans-serif;
       font-size: 10px;
      }
      #footer {
       clear: both;
       padding: 10px;
       margin-top: 10px;
       background-color: #DFDFDF;
      }
      
      .img-shadow {
       float:left;
       background: url(http://mig.yoremamma.net/mike_test/img/shadowAlpha.png) no-repeat bottom right !important;
       background: url(http://mig.yoremamma.net/mike_test/img/shadow.gif) no-repeat bottom right;
       margin: 10px 8px 0 10px !important;
       margin: 10px 0 0 5px;
      }
     
      .img-shadow img {
       display: block;
       position: relative;
       background-color: #fff;
       border: 1px solid #a9a9a9;
       margin: -6px 6px 6px -6px;
       padding: 4px;
    	}
      
      .img-shadow-right {
       float:right;
       background: url(http://mig.yoremamma.net/mike_test/img/shadowAlpha.png) no-repeat bottom right !important;
       background: url(http://mig.yoremamma.net/mike_test/img/shadow.gif) no-repeat bottom right;
       margin: 10px 8px 0 10px !important;
       margin: 10px 0 0 5px;
      }
     
      .img-shadow-right img {
       display: block;
       position: relative;
       background-color: #fff;
       border: 1px solid #a9a9a9;
       margin: -6px 6px 6px -6px;
       padding: 4px;
    	}
      
      h1 {
       font-weight: bold;
       font-size: 10px;
       font-family: 'Frutiger Linotype', 'Lucida Grande', 'Trebuchet MS', sans-serif;
       padding: 0px;
       border: 0px;
       margin: 0px;
      }
      
      h2  {
       font-weight: bold;
       font-size: 10px;
       font-family: 'Frutiger Linotype', 'Lucida Grande', 'Trebuchet MS', sans-serif;
       padding: 0px;
       border: 0px;
       margin: 0px;
       color: #D02424;
      }
      
      #news_top {
       float: left;
       width: 530px;
       \width: 550px;
       w\idth: 530px;
       margin: 0 0px 5px 0;
       padding-left: 10px;
       background-color: #D02424;
       color: #FFFFFF;
      }
      
      #news_bottom {
       float: left;
       width: 520px;
       \width: 540px;
       w\idth: 520px;
       margin: 0 0px 10px 0;
       padding: 10px;
       background-color: #DFDFDF;
      }
      
      .style2 {
       color: #0A8F00;
      }
      
      .style3 {
       color: #A00000;
      }
      
      .style5 {
       color: #D02424;
       }
    You had some strange paddding and margins that were making the element bigger than the allocated space. Mozilla won't expand but ie does and breaks.

    Also Ie has a double margin bug on floats nearest the windows (or containers) edge. The solution is to declare the float as display-inline which for some strange reason cures the bug without affecting any other browsers at all. Floats are hard coded as display:block and the specs say they cannot be changed. Luckily for us ie does something when it sees the style and fixes its double margin bug.

    Also be careful with the voice family hack because ie5 will in some instances jump the whole next style block. Much safer to use the star selector hack (see FAQ on broken box model).

    Hope that helps.

    Paul

  6. #6
    SitePoint Member
    Join Date
    Sep 2004
    Location
    London
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah thanks very much, that code works great! just one small problem: there seems to be a gap of white space at the top when viewing in ie. ive checked the obvious padding/margin values but cant seem to see anything wrong.

  7. #7
    SitePoint Member
    Join Date
    Sep 2004
    Location
    London
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no prob ive sorted it. sooo many hacks just to get ie to display it correctly :s thanks again for your help paul!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •