CSS Menu Bug in IE

ahamilton9 · 01-22-2007, 07:46 PM

The menu on my site, http://ahamilton9.blogspot.com/ works fine in Firefox, but in Internet Explorer the first button labeled "Home" does not display the rollover effect. Any help would be appreciated, if you need help getting the code I can link you and if you don't mind, please critique my design here: Abstract Portfolio

craig · 02-01-2007, 05:43 PM

Howdo!

I had a quick look at your code and I can't see anything to make it not work, but you code is very out of date.

I will throw together a CSS based menu for you but you should think about loosing the tables and using more CSS.

give me a few mins to throw the menu together.

craig · 02-01-2007, 06:06 PM

Here you go...

Add this to the bottom of your css document

Code:

ul#nav {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul#nav li {
	border-bottom: 3px solid #E7E7E7;
}
ul#nav li a:link, ul#nav li a:visited {
	display: block;
	padding: 2px 10px 2px 10px;
	width: 100px;
	background-color: #b6b6b6;
	color: #e2e2e2;
	text-decoration: none;
	text-align: center;
}

ul#nav li a:hover {
	color: #E2E2E2; 
	background-color: #929292;
}

Then change your menu table from this

Code:

<table summary="" cellpadding="1" cellspacing="1" class="menu">
     <tr><td><a href="http://ahamilton9.blogspot.com/" class="sidebar">home<br /></a></td></tr>
     <tr><td><a href="http://ahamilton9.blogspot.com/2006/09/fractal-flames.html" class="sidebar">fractals<br /></a></td></tr>
     <tr><td><a href="http://ahamilton9.blogspot.com/#" class="sidebar">cad<br /></a></td></tr>

     <tr><td><a href="http://ahamilton9.blogspot.com/2006/09/my-music.html" class="sidebar">music<br /></a></td></tr>
     <tr><td><a href="http://ahamilton9.blogspot.com/#" class="sidebar">alpha<br /></a></td></tr>
     <tr><td><a href="http://ahamilton9.blogspot.com/#" class="sidebar">composition<br /></a></td></tr>
     <tr><td><a href="http://www.freewebs.com/ahamilton9/" class="sidebar">cs:s clan<br /></a></td></tr>
     <tr><td><a href="http://ahamilton9.blogspot.com/#" class="sidebar">links<br /></a></td></tr>
     <tr><td><a href="http://ahamilton9.blogspot.com/#" class="sidebar">about<br /></a></td></tr>

</table>

to this...

Code:

<table cellpadding="1" cellspacing="1" class="menu">
     <tr>
	   <td>
	     <ul id="nav">
		   <li><a href="http://ahamilton9.blogspot.com/">home</a></li>
		   <li><a href="http://ahamilton9.blogspot.com/2006/09/fractal-flames.html">fractals</a></li>
		   <li><a href="http://ahamilton9.blogspot.com/#">cad</a></li>
		   <li><a href="http://ahamilton9.blogspot.com/2006/09/my-music.html">music</a></li>
		   <li><a href="http://ahamilton9.blogspot.com/#">alpha</a></li>
		   <li><a href="http://ahamilton9.blogspot.com/#">composition</a></li>
		   <li><a href="http://www.freewebs.com/ahamilton9/">cs:s clan</a></li>
		   <li><a href="http://ahamilton9.blogspot.com/#">links</a></li>
		   <li><a href="http://ahamilton9.blogspot.com/#">about</a></li>
		 </ul>
	   </td>
	 </tr>
</table>

This menu works fine in IE and firefox. Again I would strongly recomend giving CSS a try.

ahamilton9 · 02-01-2007, 07:14 PM

Thank you very much. I haven't tested it yet, but I already know it'll work fine. The reason I use tables is simple because it's easier. If they would just add cell structure to CSS I'd be set.

(By the way it IS a CSS based menu, I just used the table to keep the links the way they are.)

craig · 02-02-2007, 09:23 AM

I read somewhere that CSS3 will have something like this, but I will have to hunt down the website.

Not sure when CSS3 is released either.

Oen more thing to help you out...

I see in your code you are using valid <br /> tags, to make your code Valid XHTML 1.0 you are reuired to end tags that don't have a closing tag.

for example;

<img src="images/photo.jpg" alt="My Photo" width="200" height="200">

should now become...

<img src="images/photo.jpg" alt="My Photo" width="200" height="200" />

only difference is the "/" at the end of the tag.

Tags like <center> have a closing tag (</center>) so these tags are fine the way they are.

Hope this helps.

EDIT:

One more thing, all images shown on your page require an "alt" tag (alt="whatever") I think this has something to do with accessibility more than anything else.

01-22-2007, 07:46 PM	#1 (permalink)
ahamilton9 Status: Junior Member Join Date: Jan 2007 Location: Rochester, NY Posts: 29 Trader Rating: (0) TD$: 0.00 Donate	CSS Menu Bug in IE The menu on my site, http://ahamilton9.blogspot.com/ works fine in Firefox, but in Internet Explorer the first button labeled "Home" does not display the rollover effect. Any help would be appreciated, if you need help getting the code I can link you and if you don't mind, please critique my design here: Abstract Portfolio __________________ This signature intentionally left blank.

02-01-2007, 05:43 PM	#2 (permalink)
craig Status: Junior Member Join Date: Feb 2007 Posts: 13 Trader Rating: (0) TD$: 0.00 Donate	Re: CSS Menu Bug in IE Howdo! I had a quick look at your code and I can't see anything to make it not work, but you code is very out of date. I will throw together a CSS based menu for you but you should think about loosing the tables and using more CSS. give me a few mins to throw the menu together.

02-01-2007, 07:14 PM	#4 (permalink)
ahamilton9 Status: Junior Member Join Date: Jan 2007 Location: Rochester, NY Posts: 29 Trader Rating: (0) TD$: 0.00 Donate	Re: CSS Menu Bug in IE Thank you very much. I haven't tested it yet, but I already know it'll work fine. The reason I use tables is simple because it's easier. If they would just add cell structure to CSS I'd be set. (By the way it IS a CSS based menu, I just used the table to keep the links the way they are.) __________________ This signature intentionally left blank. Last edited by ahamilton9; 02-01-2007 at 07:21 PM..

02-02-2007, 09:23 AM	#5 (permalink)
craig Status: Junior Member Join Date: Feb 2007 Posts: 13 Trader Rating: (0) TD$: 0.00 Donate	Re: CSS Menu Bug in IE I read somewhere that CSS3 will have something like this, but I will have to hunt down the website. Not sure when CSS3 is released either. Oen more thing to help you out... I see in your code you are using valid <br /> tags, to make your code Valid XHTML 1.0 you are reuired to end tags that don't have a closing tag. for example; <img src="images/photo.jpg" alt="My Photo" width="200" height="200"> should now become... <img src="images/photo.jpg" alt="My Photo" width="200" height="200" /> only difference is the "/" at the end of the tag. Tags like <center> have a closing tag (</center>) so these tags are fine the way they are. Hope this helps. EDIT: One more thing, all images shown on your page require an "alt" tag (alt="whatever") I think this has something to do with accessibility more than anything else. Last edited by craig; 02-02-2007 at 09:25 AM..

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Advanced Wordpress Theme – StudioBlue v2	voidix	Design Offers & Requests	0	10-14-2008 04:11 AM