I dare you....

Hey guys,
I got a little dare for you.

I bet no one here can figure out whats wrong with the CSS on this site www.ndesignz.net/blog when it displays in IE and post the solution. (technically nothign is wrong with CSS, it's just that IE is really annoying) Muwahahaa.

(in simple terms: guys i have been beating my head against the wall until blood came out trying to fix this, but i have no clue why it's like that....so plz, find it in your hearts to help me)

Regards
Hades

 

If you increase the width of your wrapper you'll notice that the sidebar will float properly. Right now it's being pushed down because you have left/right padding on certain elements on the left side which is increasing the width of that container.

Your widths for your left and right containers add up to be exactly 771px. In IE6 the padding/margins of some of your elements increase the width.

Four different approaches..

1. Reduce the width of #container to ~502px
2. Remove padding/margins off container elements, reduce width of #search-box
3. Reduce the width of #sidebar.
4. Retain all current CSS and make a separate CSS file for IE6, use negative margining.

Hope this helps.

 

The perfect plan would be making a separate stylesheet for IE5/6 and then do your thing. But do it when all else fails.

 

You need to careful with conditional CSS... just the other someone on SitePoint forums was struggling with fixing his layout for IE. I had a quick look at the source code and it turned out he was using conditional CSSes for IE 6 & 7 and was trying to troubleshoot the problem in the regular CSS.

 

By conditional CSS do you mean the * html # {} things i was using?

Also, I've figured out what the problem is. It's the little border at the bottom of the blogroll. The one that extends more than normal, but I have no clue where it comes from. And it's in all browsers. Any idea?

 

Odds are that if you need a separate style sheet for IE than you do for other browsers, you are doing something wrong. Not only that, but if your site continues to grow, it is a pain to maintain two style sheets. There are always multiple ways of handling the same layout with CSS. Find a way that works with all of the major browsers.

If I remember right, IE adds padding to all block elements by default. That may be causing your problem. I don't have time to look at it too closely though.

 

I already fixed all the padding problems. It's that little border at the bottom of blog roll. And yeah, I only used 3 hacks, so I don't think a seperate style sheet is needed.

I also used the universal reset or whatever it is

* { margin:0; padding:0; }

Code (markup):

so it's not the default stuff. It's just that one little gray line at the bottom of blogroll.

 

As far as the line below the blogroll, it stems from a larger problem. Your sidebar is structure is really goofy. I would rewrite the entire sidebar. The sidebar right now has nested lists. ULs inside LIs, etc. That is always very confusing, and never necessary.

You also have LIs that are not nested inside a UL. LIs must always be inside a UL or an OL.

Your sidebar should look something like this:

<div id="sidebar">
	<div id="search-bar">
		<form method="get" action="http://www.ndesignz.net/blog">
			<input type="text" value="search" name="s" id="search-bar-input" size="30" />
		</form>
	</div>

	<h3>categories</h3>
	<ul>
			<li class="cat-item cat-item-1"><a href="http://www.ndesignz.net/blog/?cat=1" title="View all posts filed under Uncategorized">Uncategorized</a></li>
	</ul>
		<h2>archives</h2>
		<ul>
				<li><a href='http://www.ndesignz.net/blog/?m=200712' title='December 2007'>December 2007</a></li>
		</ul>
	<ul>
		<h2>Blogroll</h2>
	<ul>
   <li><a href="http://wordpress.org/development/">Development Blog</a></li>
   <li><a href="http://codex.wordpress.org/">Documentation</a></li>
   <li><a href="http://wordpress.org/extend/plugins/">Plugins</a></li>
   <li><a href="http://wordpress.org/extend/ideas/">Suggest Ideas</a></li>
   <li><a href="http://wordpress.org/support/">Support Forum</a></li>
   <li><a href="http://wordpress.org/extend/themes/">Themes</a></li>
   <li><a href="http://planet.wordpress.org/">WordPress Planet</a></li>

   </ul>
</div>

Code (markup):

You won't be able to copy and paste this, but the structure should be very similar.

Also, why is "Categories" an h3 when all of your other sidebar headers are H2s? These should be consistent.

 

Categories is an H3 cause it had to be moved down more to line up the two redlines, and the post title.

The reason the lis and everything else is nested like that is because of how the php does it. This is the actual code i have in sidebar:

<div id="sidebar">
	<div id="search-bar">
		<form method="get" action="<?php bloginfo('home'); ?>">
			<input type="text" value="<?php echo wp_specialchars('search');?>" name="s" id="search-bar-input" size="30" />
		</form>
	</div>
	<h3>categories</h3>
	<ul>
		<?php wp_list_cats('depth=1&title='); ?>
	</ul>
	
	<li id="archives">
		<h2>archives</h2>
		<ul>
			<?php wp_get_archives('type=monthly');?>
		</ul>
	</li>
	
	<ul>
		<?php wp_list_bookmarks('title=');?>
	</ul>
</div>
<div class="clear"></div>

PHP:

Edit; Ok, I got rid of the line by taking out the <ul></ul> tags around the wp_list_bookmarks. I think now i just need to edit somemargins and should fit.

 

It is not how PHP does things. The template is incorrect.

    <li id="archives">
        <h2>archives</h2>
        <ul>
            <?php wp_get_archives('type=monthly');?>
        </ul>
    </li>

Code (markup):

Should be something like this.

    <div id="archives">
        <h2>archives</h2>
        <ul>
            <?php wp_get_archives('type=monthly');?>
        </ul>
    </div>

Code (markup):

And like you said, you do not need the UL around the bookmarks. Wordpress does not natively nest ULs in LIs that must be a problem with your theme. (I'm assuming that you found a theme that you like, and are modifying it to fit your needs).

 

No. I designed and am coding the theme from scratch. i did take the <li>s out already, I think. Now it should just be in the <ul> tags. If you look at the site, it works perfectly now. (except for one minor problem in the header in IE, which im trying to figure out how to fix)

 

If you designed that from scratch, congratulations. It is a very nice, clean design.

 

Thank you, I am glad it turned out well. The black box in the middle I am planning to use for Recent Projects. Like designs i've done or pages i've coded. (like a portfolio). I was thinking of using thickbox for it. It should turn out great once fully finished and all the bugs are taken out. I still need some search buttons for it.

 

I just noticed one more thing. You might want to validate your HTML. I'm showing that there are 4 errors. This could save you some headaches down the road.

 

Oh thanks. I completely forgot to check that when I was splitting up the file. Had to change it like a couple of times.

I can't fix one error because of that stupid blog roll. It's not something I can edit. *cries* No fair lol.

Thanks for your help though