Forums

KingZeph

I've been following the video for making rounded corners and I've been using the 'Box-two' method with four .png files for the corners.

As usual everything works in Firefox, but not in IE (at least not in IE6)

I know the issue has to do with padding, and I think I did things right by creating the 'inside' class and applying the padding to that (I'm in wordpress, so I created the class 'inside' within the class 'post').

Here's the problem:
IE6
http://www.unitedsound.us/pics/IECorners.png

Firefox 3
http://www.unitedsound.us/pics/FFoxCorners.png

If I remove the 20px padding then IE will put the left hand corners in the right position, but the text moves over as well and the corner and text show up on top of each other.

But, there is also the problem with the bottom corners. Even with the padding removed, they show up below the bottom of the post (and if you look at the top of the IE pic you can see that the above post has no bottom corners. I think they are covered up by the next post down)

here is the css:

/*  
Theme Name: Starkers
Theme URI: http://elliotjaystocks.com
Description: The totally nude Wordpress theme. Phwoar!
Version: 1.0
Author: Elliot Jay Stocks
Author URI: http://elliotjaystocks.com



Colors:
	light blue - #c2d3e1
*/

/* ************************************************************************************************************************************************************

Obviously feel free to change the info above once you've added your own styling

************************************************************************************************************************************************************ */

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

And now it's over to you...

************************************************************************************************************************************************************ */
body{
	margin:0 auto;
	font-family:Arial,Helvetica,Georgia,Sans-serif;
	background:url(images/body-bg.png) repeat-x top #000000;
	color:#ffffff;
	}

ul {
	list-style: none;
	}
p, li {
	font-size: 10pt;
	line-height: 20px;
	margin-bottom: 10px
}

h2, a {
	font-size: 14pt;
	margin-bottom: 10px;
	color: #c2d3e1;
}

a {
   outline: none;
}

.clear { clear: both;}

.post {
	background: #334351;
	position: relative;
	margin: 10px 0;	
}
.post .tl {
	position: absolute;
	width: 14px;
	height: 14px;
	background: url(images/tl.png) no-repeat;
	top: 0px;
	left: 0px;
}
.post .tr {
	position: absolute;
	width: 14px;
	height: 14px;
	background: url(images/tr.png) no-repeat;
	top: 0px;
	right: 0px;
}
.post .bl {
	position: absolute;
	width: 14px;
	height: 14px;
	background: url(images/bl.png) no-repeat;
	bottom: 0px;
	left: 0px;
}
.post .br {
	position: absolute;
	width: 14px;
	height: 14px;
	background: url(images/br.png) no-repeat;
	bottom: 0px;
	right: 0px;
}
.post .inside {
	padding: 20px;
}
div#wrapper{
	width:800px;
	margin: 0 auto;
	text-align:left;
}
div#slide {
	height: 173px;
	width: 350px;
	padding-left: 300px;
	padding-top: -50px;
	color: #c2d3e1;
}

ul#nav {
	height: 215px;
	background: url(images/header-bg.jpg) no-repeat;
	list-style: none;
	padding-left:125px;
	}
	
ul#nav li {
	display: inline; /* Prevents \"stepdown\" */
}

ul#nav li a {
	display: block;
	width: 100px;
	float: left;
	margin-top: 9px;
	color: #c2d3e1;
	font-size: 14pt;
	text-decoration: none;
	}

ul#nav li a:hover, ul#nav li a:active, ul#nav li:focus{
	color: white;
}

div#main-content{
	padding-bottom: 50px;
	padding-left: 50px;
	padding-top: 50px;
}

div#main-content div#left-column {
	float: left;
	width: 450px;
	text-decoration: none;
}
div#main-content div#left-column a {
	text-decoration: none;
}
div#main-content div#sidebar {
	float: right;
	width: 250px;
	
}
div#main-content div#sidebar li{
	font-size: 12px;
}

div#main-content div#sidebar li a{
	font-size: 12px;
}

div#sidebar p,div#sidebar li {
	font-size: 12pt;
	line-height: 14px;
	margin-bottom: 10px
}

div#footer {
	color: #c2d3e1;
	padding: 10px 0 10px 0;
	text-transform: uppercase;
	border-top: 2px solid #c2d3e1;
	text-align: center;
}

and the php

	<div id=\"left-column\">
		
			<?php if (have_posts()) : ?>
				<?php while (have_posts()) : the_post(); ?>
					<div class=\"post\" id=\"post-<?php the_ID(); ?>\">
						<div class=\"inside\">
							<h2><a href=\"<?php the_permalink() ?>\" rel=\"bookmark\" title=\"Permanent Link to <?php the_title_attribute(); ?>\"><?php the_title(); ?></a></h2>
							<p><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></p>
							<?php the_content('Read the rest of this entry &raquo;'); ?>
							<p class=\"postmetadata\"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
							<div class=\"tl\"></div>
							<div class=\"tr\"></div>
							<div class=\"bl\"></div>
							<div class=\"br\"></div>
						</div>
					</div>
				<?php endwhile; ?>
				<div class=\"navigation\">
					<div><?php next_posts_link('&laquo; Older Entries') ?></div>
					<div><?php previous_posts_link('Newer Entries &raquo;') ?></div>
				</div>
		
			<?php else : ?>
				<h2>Not Found</h2>
				<p>Sorry, but you are looking for something that isn't here.</p>
				<?php include (TEMPLATEPATH . \"/searchform.php\"); ?>
			<?php endif; ?>
	</div> <!-- end left-column-->

KingZeph

I've found that it works fine in IE7, but not in IE6.

treehouse : what would you like to learn today?

Forums

Another IE rounded corners problem