Images don’t display in IE

Hi.

I would suggest that you use img tags with (alt attributes) in your html to display this bit of code. Using empty anchors is a bit strange to say the least… have not really seen this done very much in practice.

If, however, you need a 100% css approcah… you might want to try something like this:

#sidebar ul li.japanese a{
	float:left;
	display:block;
	height: 20px;
	width: 42px;
	padding:0;
	background: url(https://michaeldowney.net/nikki/wp-content/themes/knowing-nothing/images/jp.gif) no-repeat center 2px;
		}

Hope this helps,
-Mike

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…

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.

Tremor,

Hi. I forgot to mention that you will need to clear the floats. If you enter the following code just under the </ul> that contains the flag links, the problem should be fixed:

<div style="clear:both"></div>

And just to reiterate…. I believe that the best possible solution here would be to use inline images ( img tag + alt attribute ). Doing this will allow users who have images disabled to translate the page.

Hope this helps,
-Mike

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!

Glad everything worked.

In my opinion a background image should only be applied to an element if the background image serves only to style the element, you know make it look pretty. In your usage, you are using the flag and rss icons ( as background images ) to deliver visual information to the user… but what would happen if the user cannot see the information? Basically, the information will not be available.

CASE 1: Images are turned off in the browser
Using your method, there would be invisible links on the page that would most likely not ever be seen ( or clicked ) by the user.

Using img tag with alt="Japanese" inside the link, The text “Japanese” would render on the screen and be click-able by the user.

CASE 2: CSS is turned off – or not available
Using your method, no links are visible because the <a> tag is empty.

Using img tag with alt="Japanese" – The image will still appear and will be linked.

Hope this clears up the why. Let me know if you have further questions,

-Mike

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 ^^

Would this simplify things?

<style type="text/css">
	#sidebar #language{
		list-style-type:none;
		margin:0;
		padding:0;
		text-align:center;
		}
	#sidebar #language li{
		display:inline;
		}
	#sidebar #language img{
		padding:4px;
		}

</style>
<ul id="language">
<li><a href="https://michaeldowney.net/category/japanese/" ><img src="https://michaeldowney.net/nikki/wp-content/themes/knowing-nothing/images/jp.gif" title="???" alt="Jp"></a></li>
<li><a href="https://michaeldowney.net/category/english/" ><img src="https://michaeldowney.net/nikki/wp-content/themes/knowing-nothing/images/gb.gif" title="English" alt="Eng"></a></li>
<li><a href="https://michaeldowney.net" ><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="https://michaeldowney.net/feed/" 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>

IE has known bus when it comes to applying floats and margins on elements at the same time, best to avoid if possible. The other reason (that I failed to mention before) for using the img tags, is that you don’t need to float them because they are inline elements already.

Site design looks really good!

Hope this helps,
-Mike

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!

Glad everything is working well on your blog!