Tremor

Awesome. Problem 1 resolved! I had to play around with the code a bit, but I changed the link pointing to the blank.gif file to a more absolute address:

if (typeof blankImg == 'undefined') var blankImg = 'nikki/wp-content/themes/knowing-nothing-v2/blank.gif';

I also edited the code I’d pasted into my CSS to point to the correct location:

img, div, a, li, span, input, textarea, { behavior: url(nikki/wp-content/themes/knowing-nothing-v2/iepngfix.htc) }

Now no nasty grey borders!

Just one more to go. Please help! I’ve tried so many things about this blasted sidebar…

Oh, also, please tell me of any problems in IE5.5 or 6 browsers. I have a feeling the sidebar will be in the wrong place and the PNG images not displaying transparency (though I have attempted to fix it with a hack).

Finally sorted out. I wrote about it here:

https://michaeldowney.net/japanese-csv-database/

Anybody?

Any ideas..?

Hi again. Thanks, the code is a lot cleaner and it functions correctly in both IE and Firefox now! I hope readers actually use the buttons now they are functioning correctly!

I changed a couple of things from the code you gave me. I’m not entirely sure on the difference between classes and ids, but I changed the language tag to a class in my code. I also added a small margin to improve spacing. Otherwise, it worked perfectly! Thank you again!

#sidebar .language{
		list-style-type: none;
		margin: 10px 0 0 0;
		padding: 0;
		text-align: center;
		}

#sidebar .language li{
		display: inline;
		}

#sidebar .language img{
		padding: 4px;
		}

<ul class="language">
<li><a href="<?php echo get_category_link(7);?>" ><img src="https://michaeldowney.net/nikki/wp-content/themes/knowing-nothing/images/jp.gif" title="日本語" alt="Jp"></a></li>
<li><a href="<?php echo get_category_link(12);?>" ><img src="https://michaeldowney.net/nikki/wp-content/themes/knowing-nothing/images/gb.gif" title="English" alt="Eng"></a></li>
<li><a href="<?php echo get_settings('home');?>" ><img src="https://michaeldowney.net/nikki/wp-content/themes/knowing-nothing/images/gbjp.gif" title="English and Japanese" alt="Main"></a></li>
<li><a href="<?php bloginfo('rss2_url'); ?>" class="feed"><img src="https://michaeldowney.net/nikki/wp-content/themes/knowing-nothing/images/feed.gif" title="Subscribe to this site via RSS" alt="Feed"></a></li>
</ul>

Thanks again!

Hi again. I decided to follow your advice and change them to html with alt tags. Below is the code for reference. There was only one quirk. When I entered a margin of 10 pixels for the Japanese button (the flag buttons begin with the Japanese flag), IE showed the space as twice that of Firefox… This resulted in the rest of the buttons not fitting into the space properly. I have no idea why and in the end just settled for a slightly off-centre alignment in firefox so it aligns properly in IE. Any ideas why this happened?

<div id="sidebar">
<ul>

<li><div class="sidebar_header"><?php _e('Knowing Nothing'); ?></div>
		<ul>
			<li>Sentiments with a breath of Philosophy</li>
</ul>

<ul class="language">
<li class="japanese"><a href="<?php echo get_category_link(7);?>" title="日本語"><img src="https://michaeldowney.net/nikki/wp-content/themes/knowing-nothing/images/jp.gif" alt="Jp"></a></li>
<li class="english"><a href="<?php echo get_category_link(12);?>" title="English"><img src="https://michaeldowney.net/nikki/wp-content/themes/knowing-nothing/images/gb.gif" alt="Eng"></a></li>
<li class="normal"><a href="<?php echo get_settings('home');?>" title="English and Japanese"><img src="https://michaeldowney.net/nikki/wp-content/themes/knowing-nothing/images/gbjp.gif" alt="Main"></a></li>
<li class="syndicate"><a href="<?php bloginfo('rss2_url'); ?>" title="Subscribe to this site via RSS" class="feed"><img src="https://michaeldowney.net/nikki/wp-content/themes/knowing-nothing/images/feed.gif" alt="Feed"></a></li>
</ul>
<div style="clear:both"></div>
</li>

Code from Stylesheet. You will see under the ‘Japanese’ part, I have had to put 5px for the left margin instead of my preferred 10px…

#sidebar ul.language li {
display: inline;

}

#sidebar ul li.japanese a{
	float:left;
	display:block;
	height: 21px;
	width: 30px;
	margin: 10px 5px 0 5px;

}

#sidebar ul li.english a{
	float:left;
	display:block;
	height: 21px;
	width: 30px;
	margin: 10px 5px 0 5px;

}

#sidebar ul li.normal a{
	float:left;
	display:block;
	height: 21px;
	width: 30px;
	margin: 10px 5px 0 5px;

}

#sidebar ul li.syndicate a{
	float:left;
	display:block;
	height: 21px;
	width: 21px;
	margin: 10px 0 0 5px;

}

Also, since you seem to be an artist yourself, any comments on my site design? It’s the first real attempt I’ve made at making a semi-decent website.

Thanks again ^^

It worked! Thank you for your help so much!

Is there any way to add alt tags in CSS? Is there any particular reason to use image and alt tags over CSS, or is it just for showing alternatives to images in some browsers?

I think I should learn a little more code from scratch, as I’ve mainly just edited code. It might help to understand the nature of floats and stuff. But thank you again for taking the time to solve my problem!

I figured out, it’s the float: left command that is causing the searchbox below to be pushed out of the frame. I don’t know why or how to fix it yet.

Hi there! Thanks for your help, the problem is nearly solved!

I used the CSS you provided and fiddled with the widths and heights. It seems defining those solved the problem in IE, But now I have a problem in firefox…

The search box immediately below the flag buttons is being pushed out to the right of the page now. I tried removing the search bar code, but the same thing happened to the calender below it. So it seems the styles I’ve applied to the flag buttons are affecting the search box.

Here is the code in my sidebar:

<div id="sidebar">
<ul>

<li><div class="sidebar_header"><?php _e('Knowing Nothing'); ?></div>
		<ul>
			<li>Sentiments with a breath of Philosophy</li>
</ul>

<ul class="language">
<li class="japanese"><a href="<?php echo get_category_link(7);?>" title="日本語"></a></li>
<li class="english"><a href="<?php echo get_category_link(12);?>" title="English" ></a></li>
<li class="normal"><a href="<?php echo get_settings('home');?>" title="English and Japanese"></a></li>
<li class="syndicate"><a href="<?php bloginfo('rss2_url'); ?>" title="<?php _e('Subscribe to this site using RSS'); ?>" class="feed"></a></li>
</ul>

</li>

<li><div class="sidebar_header"><?php _e('Search'); ?></div>
		<ul>
			<li><?php include (TEMPLATEPATH . '/searchform.php'); ?></li>
		</ul>
	</li>

And here is the code in my stylesheet:

#sidebar ul.language li {
display: inline;
}

#sidebar ul li.japanese a{
	float:left;
	display:block;
	height: 30px;
	width: 42px;
	padding:0;
	background: url(images/jp.gif) no-repeat center 2px;
		}

#sidebar ul li.english a{
	float:left;
	display:block;
	height: 30px;
	width: 42px;
	padding:0;
	background: url(images/gb.gif) no-repeat center 2px;
		}

#sidebar ul li.normal a{
	float:left;
	display:block;
	height: 30px;
	width: 42px;
	padding:0;
	background: url(images/gbjp.gif) no-repeat center 2px;
		}

#sidebar ul li.syndicate a{
	float:left;
	display:block;
	height: 30px;
	width: 33px;
	padding:0;
	background: url(images/feed.gif) no-repeat center 2px;
		}

#sidebar ul li .sidebar_header{
	border-bottom: 1px solid #293624;
	padding: 0 0 7px 0;
	font-size: 1.3em;
	color:  #514129;
}

Any ideas how to stop the search box being pushed outside the frame? Everything works fine in IE6 now…

Thanks. I’ll post it elsewhere. I tried the cookies though, but it didn’t work. I checked other computers too

Any ideas? I upgraded to WordPress 2.5 but still no success…

Problem two: Resolved!

Okay, so this was just idiocy on my part, but I’ll document it here for anyone in the future just in case they are experiencing the same problem.

I tested my blog commenting system by pasting a line of text in the box like so:

hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh

As you can see, it makes the box expand and breaks the design. What I hadn’t thought was that when a ‘normal’ comment is made (i.e one with spaces), the comment box correctly wraps the text around. So, the only time the blog should break is when someone posts a comment with an exceptionally long link in it. To solve this, just use the:

overflow : hidden;

command in the comments section of your style sheet. This will prevent the text from scrolling out of the box (but the link will be cut off, although still active).

****

I’m marking this post as resolved now, as I ended up changing my blog design to a fixed layout to keep things simple. I hope my notes help someone in the future!

Problem one: Resolved

I found this code on the following site:

https://www.5starsupport.com/info/ie7.htm

I replaced my existing code with the piece below, specifying the absolute url, which seems to have fixed the problem.

<link rel="shortcut icon" href="https://www.yoursite.com/favicon.ico"/>

I am currently in the process of changing themes, as I don’t think problem three will be resolved so easily, but please, if anyone has some advice, I would much appreciate it. Also, in regard to problem two, I have yet no solution.