Archief - Site gecentreerd krijgen in IE

goldsage · 19 jan 2012

Een echte noob vraag, hoe krijg ik mij site gecentreerd in IE.

Code:

/* 
Theme Name: Clear
Theme URI: http://www.diovo.com/links/clear/
Description: <a href="http://www.diovo.com/links/clear/" title="Clear">Clear</a> is a free wordpress theme, released by <a href="http://www.diovo.com" title="Diovo" target="_blank">Diovo</a>. Clear is the perfect theme for great authors. It is clean, clear and beautiful. It is minimalistic one-cloumn theme with the widgets all arranged at the bottom. Clear was designed to make your content stand out and make everything else get out of the way. Check it out and you will fall in love with it.
Version: 1.2.5
Author: Niyaz PK
Author URI: http://www.diovo.com/about/
Tags: white, one-column, fixed-width, light
Last updated: 8:09 PM 4/22/2010

The CSS, XHTML and design is released under GPL: http://www.opensource.org/licenses/gpl-license.php
*/

/* Elements */
* 
{
	margin:0;
	padding:0;
}
body {
	margin: 0;
	padding: 0;
	font-family: Verdana,Tahoma, Arial, Serif;	
	line-height: 1.5em;
	font-size: 10px; /* IE5 Win */
  	voice-family: "\"}\""; 
  	voice-family: inherit;
  	font-size: 10px; /* easy scaling */
  	font-size: 0.76em;
	background-color: #000 ;
	text-align:center;
	
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	font-family:Georgia, Serif, Tahoma, Verdana;
	font-weight:normal;
	color: #777;	
}

p, blockquote, ul, ol {
	margin-top: 0;
	padding-top: 0;
	margin-bottom:0.5em;
}
p 
{
	line-height:1.7em;
	font-family: Tahoma, Verdana, Arial, Serif;
	font-size: 1.1em;
	margin-bottom: 0.9em;
}


pre {
	font-size:1.5em;
}

a:link, a:visited {
	color: #000;
	text-decoration:none;
	border-bottom:#ef0050 1px dotted;
}
a:hover,a:active 
{
	color:#ef0050;
	text-decoration:none;
}
img.left 
{
	float:left;
	margin:0 1em 1em 0;
}
img.right 
{
	float:right;
	margin:0 0 1em 1em;
}
a img 
{
	border:0;
}
blockquote 
{
	margin:1em;
	padding:5px 1em;
	color:#000;
	background:#eee;
}
fieldset 
{
	border:none;
}

dl {
	margin:1em 0px;
}
dt 
{
	font-weight:bold;
}
dd 
{
	margin:0.5em 1em;
	padding:0;
}
code
{
	font-size: 1em;	
}


sup,
sub {
	height: 0;
	line-height: 1;
	vertical-align: baseline;
	_vertical-align: bottom;
	position: relative;
	font-size:0.6em;	
}

sup {
	bottom: 1ex;
}

sub {
	top: .5ex;
}




#header {
	clear: both;
	width: 980px;
	height: 500px;
	margin: 0px auto;
	padding: 0px 0px 0px 0px;
	background: url(images/Header2.png) no-repeat left top;
}


/* Logo */

#logo {
	margin: 0;
	padding: 0px 0px 0px 60px;
	color: #000000;
}

#logo h1, #logo p {
	margin: 0;
	padding: 0;
	
}

#wrapper {
	width: 950px;
	border-left:#FFF solid 15px;
	border-right:15px solid #FFF;
	height: 40px;
	margin: 0 auto;
	padding: 0;
	background: #000000;
}
#logo h1 {
	padding-top: 20px;
	letter-spacing: -1px;
	text-transform: lowercase;
	font-size: 3.8em;
	color:#FFF;
}


#logo p {
	margin: 0;
	padding: 0px 0 0 10px;
	font: normal 14px Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	color: #FFFFFF;
} 

#logo a {
	border: none;
	background: none;
	text-decoration: none;
	color: #FFFFFF;
}



/* Menu */

#menu {
	float: left;
	width: 680px;
	height: 40px;
	padding: 0px;
}

#menu ul {
	margin: 0;
	padding: 0px;
	list-style: none;
	line-height: normal;
}

#menu li {
	float: left;
	border-right: 1px solid #FFF; 
}

#menu a {
	display: block;
	height: 30px;
	padding: 10px 40px 0px 40px;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	font-family:Arial Narrow normal , sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
	border: none;
}

#menu a:hover{
	text-decoration: none;
	color: #000000;
	background-color:#FFF;
	display:block;
	}

#menu .current_page_item a:hover {



}

/* Main */

#main {
	width: 980px;
	margin-left:auto;
	margin-right:auto;
	background:#fff;
text-align:left;
}



	


#main h2 {
	padding: 4px;
	font-size: 2em;		
	line-height:1.2em;
	font-weight: bold;
}

#main h1 {
	padding: 4px;
	font-size: 2em;		
	line-height:1.2em;
	font-weight: bold;
}

#main .post-title {
	font-size: 1.5em;
	font-weight: normal;
}

#main h3 {
	padding: 4px;
	font-size: 1.4em;		
	line-height:1.2em;
	font-weight: bold;
}
#main h2 a 
{
	border:0;
	font-family:Verdana, Geneva, sans-serif;
	font-size:1.1em;
	font-weight:normal;
	color:#333;
}

#main h1 a 
{
	border:0;
	font-family:Verdana, Geneva, sans-serif;
	font-size:1.1em;
	font-weight:normal;
	color:#333;
}

#content ul {
	margin: 0.5em 0;
	padding: 0 0 0 2em;
	list-style-type:none;
}
#content ul li 
{
	margin:0.75em 0;
	padding:0;
	list-style-image:url(img/bullets.gif);
	line-height:130%;
	font-size:16px;	
}
#main ol 
{
	margin:0;
	padding:0 0 0 3px;
}
#main ol li 
{
    margin:0;
    padding:3px;
    padding-bottom:10px;
    font-size:16px;
}
#main .post 
{
	margin-top:1.5em;
	margin-bottom:1.5em;
}
#main .entry 
{
    clear:both;
    padding: 10px 5px;
	padding-bottom: 30px;
    font-family:Arial, Helvetica, sans-serif;
}

#main .entry p
{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
     line-height:140%;
}


.post .date {
	float: right;
	margin:5px 0 0 5px;
	padding:0 10px;
	text-align:center;
	font-size: 0.8em;
	border:#ccc 1px solid;
	font-weight:bold;
	color:#333;
	font-family: "Lucida Sans", "Trebuchet MS", Verdana, Arial, Serif;
}
.post .date span 
{
	display:block;
}
.post .date .day 
{
	font-size:1.6em;
}
.post .meta {
	margin-bottom: 10px;
	padding-left: 5px;
	font-size: 0.9em;
	color:#333;
}
.post .comments 
{
	font-size:1em;
	font-weight:bold;
	background-color:#000;
	display:block;
	color:#FFF;
	margin-left:5px;
	padding-left:20px;
	}
.post .comments a 
{
	border-bottom:0px;
	color:#FFF;
	background-color:#000;
	padding-left:10px;
	display:block;
}
.commentmetadata a{
	border:0;
	color:#FFF;
}
.cmtinfo .avatar {
	vertical-align:middle;
	padding-right:7px;
}

#main .feed 
{
	background:url(img/icon_feed.gif) no-repeat left 3px;
	padding-left:17px; 
}
ul.authorposts
{
	margin:0;
	padding:0 2em;
}
ul.authorposts li
{
	margin:0;
	padding:5px;	
}
ul.authorposts li em 
{
	float:right;
	font-style:normal;
}
/* Content */

#content {

    width: 800px;
	padding:30px;
	padding-top:10px;
	padding-left: 110px;
	padding-bottom:0;
}
/* Column Two */

.footer-sidebar {
	width:800px;
	margin-left:50px;
	border:solid 0px #f5f5f5;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}

#sidebar1 {
	float: left;
	width: 210px;		
	padding: 5px 20px;
	font-size:0.9em;
	margin:5px;
	margin-right:-1px;
	margin-left:200px;
	border-right:#FFF 1px solid;
	
}
/* Column Three */

#sidebar2 {
	float: left;
	width: 210px;		
	padding: 5px 20px;
	font-size:0.9em;		
	margin:5px;
	margin-left:0px;
	border-left:#FFF 1px solid;
}
#sidebar3 {
	float: left;
	width: 210px;		
	padding: 5px 20px;
	font-size:0.9em;		
	margin:5px;
	margin-left:-50px;
	border-left:#FFF 1px solid;
}

#main .sidecol 
{
	padding-left:20px;
}
#main .sidecol ul 
{
	margin:0;
	padding:0;
}
#main .sidecol li
{
	margin:0;
	padding:0;
	list-style:none;
	background:none;
	margin-bottom:2em;
}
#main .sidecol h2
{
	
	font-weight: bold;
	padding: 3px 10px;
	font-size:1em;
	background-color:#f5f5f5;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	
}
#main .sidecol p, #main .sidecol form
{
	padding:10px;
	margin:0;
}
#main .sidecol ul ul
{
	margin:10px 0 0 20px;
	padding:0;
}
#main .sidecol ul ul ul
{
	margin:0px 0 0 10px;
	padding:0;
}
#main .sidecol li li 
{
	
	margin:0.5em 0;
	padding:0;
	
}

#main .sidecol a:link, #main .sidecol a:visited {
	border:0;
}


/* Begin Calendar */
#wp-calendar {
	empty-cells: show;
	margin: 10px auto 0;
	width: 155px;
	}

#wp-calendar #next a {
	padding-right: 10px;
	text-align: right;
	}

#wp-calendar #prev a {
	padding-left: 10px;
	text-align: left;
	}

#wp-calendar a {
	display: block;
	text-decoration:none;
	}
#wp-calendar #today 
{
	border:#999 1px solid;
}

#wp-calendar caption {
	text-align: center;
	width: 100%;
	}

#wp-calendar td {
	padding: 3px 0;
	text-align: center;
	}

#wp-calendar td.pad:hover { /* Doesn't work in IE */
	background-color: #fff; }
/* End Calendar */
/*Search*/
/* Search */

#header-search {
	float: right;
	width: 280px;
}

#header-search form {
	height: 41px;
	margin: 0;
	padding: 17px 0 0 20px;
}

#header-search fieldset {
	margin: 0;
	padding: 0;
	border: none;
}

#header-search-text {
	width: 220px;
	padding: 8px 5px 6px 5px;
	border: none;
	background: #FFFFFF url(images/img02.jpg) no-repeat left top;
	text-transform: lowercase;
	font: normal 11px Arial, Helvetica, sans-serif;
	color: #000000;
}

#header-search-submit {
	width: 62px;
	height: 22px;
	border: none;
	background: none;
	color: #000000;
}

/* Comments */

#btnSearch, #searchsubmit{
	background-color:#ddd; 
	border: 1px solid; 
	border-color: #999; 
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	height:22px;
	font-size:1em;
	padding:0px 3px;
}

#searchsubmit {
	font-size:0.6em;
	visibility:hidden;
}

#submit {
	background-color:#ddd; 
	border: 1px solid; 
	border-color: #999; 
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	height:22px;
	font-size:1em;
	padding:0px 3px;
} 

input.textbox, input#s
{
	border:#ccc 1px solid;
	background:#f9f9f9;
	font:1em Georgia, Serif;
	padding:5px;
	width:135px;
	height:10px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
}

input#s{
	width:160px;
}


textarea{
	width: 95%;
	padding:5px;
	height: 15em;
	border: 1px solid #ccc;	
	background:#f9f9f9;
	font:1em Georgia, Serif;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
}
input.textbox:focus, textarea:focus
{
	background:#fff;
	border:#999 1px solid;
}
#commentform 
{
	margin:0;
	padding:10px;
	background:#fff;
}
#main .commentlist {
	margin: 0;
	padding: 0;
}
#main .commentlist li 
{
	list-style:none;
	margin: 0;
	padding: 1em;			
	border-bottom:#ddd 1px solid;
	font-size:1em;
}

#main .commentlist li p
{
	font-family: Georgia, Serif;
	font-size:14px;
}

#main .commentlist li .cmtinfo 
{
	padding:5px;
	margin-bottom: 5px;
	position:relative;	
}
#main .commentlist li .cmtinfo em 
{
	margin:0;
	padding:0 1em;
	font-weight:normal;			
	font-style:normal;
float:right;
	font-size:0.7em;
	color:#999;

}
#main .commentlist li cite 
{
	font-style:normal;
	font-weight:bold;
	font-size:1.1em;
}
#main .commentlist li.alt
{
	background:#f9f9f9;	
}
#main .commentlist li.authorcomment
{

	background:#fdffd4;
}
#main .nocomments
{
	font-size:0.9em;
	color:#999;
	text-align:center;
}

/* Footer */

#footer {
	margin: 0 auto 30px auto;
	width:980px;
	border:#eee 0px solid;
	background:#000;
}

#footer p {
	margin:0;
	padding: 20px 100px 0 95px;
	font-size: 0.9em;
	color: #999;	
}
#footer p span 
{
	float:right;
}
#footer a:link, #footer a:visited {
	color: #999;
	border:0;
}
#footer a:hover, #footer a:active,#footer p strong {
	color: #999;
	text-decoration:none;
	border:0;
}
#header, #main, #sidebar, #footer, .widget 
{
	overflow:hidden;
}
.amzshcs
{
	text-align:center;
}
.amzshcs-item
{
	padding:5px;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignleft {
	float: left;
}

.alignright {
	float: right;
}

.wp-caption {
	border: 1px solid #ddd;
	text-align: center;
	background-color: #f3f3f3;
	padding-top: 4px;
	margin: 10px;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

.wp-caption img {
	margin: 0;
	padding: 0;
	border: 0 none;
}

.wp-caption-dd {
	font-size: 11px;
	line-height: 17px;
	padding: 0 4px 5px;
	margin: 0;
}

.tags{
	color:#999;
	font-size:0.8em;
}
.tags a{
	color:#999;
	border:0;
}

PHP:

<?php get_header();?>
<div id="main">
	<div id="content">
	    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	        <div class="post" id="post-<?php the_ID(); ?>">
            <h2 class="title"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
        <div class="meta">
		<p>              
                <?php the_time('M') ?>
                <?php the_time('d') ?>
                <?php the_time('Y') ?>

               <?php edit_post_link(); ?></p>
	</div>
	<div class="entry">
              <?php the_content(__('Continue Reading »')); ?>
              <?php wp_link_pages(); ?>
      	</div>

            <p class="comments" >
              <?php comments_popup_link(__('0 Comments'), __('1 Comment'), __('% Comments')); ?> 

            </p>          
	        </div>
      <?php endwhile; else: ?>
          <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
      <?php endif; ?>
      <p align="center"><?php posts_nav_link(' - ','« Newer','Older »') ?></p>
	</div>
 
  <?php get_footer();
?>

-BVR- · 19 jan 2012

Normaal staat die al gecentreerd. Heb je de site of een test case online staan?

breez · 19 jan 2012

je kunt een div horizontaal centreren met:
margin-left:auto;
margin-right:auto;

silent785 · 21 jan 2012

breez zei:
je kunt een div horizontaal centreren met:
margin-left:auto;
margin-right:auto;

En ook een width geven. Zonder breedte centreert een div niet.

Sonaryr · 21 jan 2012

Bij mij was het altijd dat ik mijn doctype vergat mee te geven, geen probleem in FF maar wel in IE

goldsage · 25 jan 2012

Hier een linkje naar de pagina. Ik heb alles gedaan zoals hier staat, maar nog steeds is de site niet gecentreerd in IE.
Klik

Carrion · 25 jan 2012

Ik denk dat uw probleem verder reikt dan centreren in IE, want heel uw site layout is fucked up in FF

-BVR- · 25 jan 2012

Het is die search die stoort. Als je die niet gebruikt:

#header-search {display:none;}

EDIT: dat fixt ook het probleem in FF

Als je die search wilt behouden:

Code:

#wrapper {position: relative;}

#header-search {
    float: none;
    width: auto;
    position: absolute;
    top: 60px;
    right: 10px;

}

#header-search form {
    height: auto;
    padding: 0;
}

RobinVdB · 25 jan 2012

Het zou handiger zijn moesten we je hele HTML code krijgen.

-BVR- · 25 jan 2012

RobinVdB zei:
Het zou handiger zijn moesten we je hele HTML code krijgen.

Toch niet? Je hebt een test case.

Archief - Site gecentreerd krijgen in IE

goldsage

Legacy Member

-BVR-

Legacy Member

breez

Legacy Member

silent785

Legacy Member

Sonaryr

Legacy Member

goldsage

Legacy Member

Carrion

Legacy Member

-BVR-

Legacy Member

RobinVdB

Legacy Member

-BVR-

Legacy Member