Css help needed - Mambo

noobnuggets · October 15th, 2004, 15:08

Hello, I am trying to adapt YTW's excellent tutorial on how to make vertical hover menus to my own evil ends

. the tutorial is located at: http://ytw.55thinking.com/content/view/13/43/

I am trying to adapt it to a horizontal menu inside of a <div> tag with a background that is the same color as the images. It works nicely in firefox, but not in ie6 (go figure). In ie6, the <div> ends up being way to tall. I have not been able to fix it no matter what I try. I have isolated the css and html into one file in order to figure out how to fix it, but nothing seems to work.
you can see the example of my failed effort here: http://sandbox.quepasamedia.com/menutest.html

and here is the code I am using:

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <style type="text/css">
 /***********CSS Image hover effects test************************************/
 #test1 {
 	background-color: #17ff8a; /**different from the image color for troubleshooting**/
 }
 a.mainlevel-test
 { 
   display:inline;
   width:10px;
   margin: .1em -.2em;
   padding:.85em 1em .85em 2.25em;
   font: 11px sans-serif;
   color:#fff;
   background-color: #transparent;
   background-image: url("menuhover.gif");
   background-position: 0 4px;
   background-repeat: no-repeat;
   text-decoration: none;
   height: 18px;
 }
 
 a:hover.mainlevel-test
 {
   background-position: -190px 4px;
   color: #fff;
 }
 
 a:active.mainlevel-test
 { 
  background-position: -380px 4px;
  color: #fff;
 } 
 
 a#active_menu-test
 { 
  background-position: -380px 4px;
  color: #fff;
 }
 
 a#active_menu-test:hover
 {
  background-position: -380px 4px;
  text-decoration: underline;
 } 
 </style>
 </head>
 <body>
 <div id="test1" align="center">
 	<table cellpadding="0" cellspacing="0" class="moduletable-test">
 		<tr>
 			<td>
 			<table width="100%" border="0" cellpadding="0" cellspacing="1">
 					<tr>
 		 		<td nowrap="nowrap">
 		 			<span class="mainlevel-test">
 	 		 		<a href="#" class="mainlevel-test" >Inicio
 		 			<span class="mainlevel-test"> 
 		 			<a href="#" class="mainlevel-test" >Quiénes Somos
 		 			<span class="mainlevel-test"> 
 		 			<a href="#" class="mainlevel-test" id="active_menu-test">Anúnciese Con Nosotros
 		 			<span class="mainlevel-test"> 
 		 			<a href="#" class="mainlevel-test" >Periódico
 		 			<span class="mainlevel-test"> 
 		 			<a href="#" class="mainlevel-test" >Radio
 		 			<span class="mainlevel-test"> 
 		 			<a href="#" class="mainlevel-test" >Contacto
 		 			<span class="mainlevel-test"> 
 						</td>
 					</tr>
 				</table>
 			</td>
 		</tr>
 	</table>
 </div>
 <div align="center">
 
 
 </body>
 </html>

Albon · October 15th, 2004, 15:58

This is a tricky thing. Width/heights in css when it comes to boxes are a pain to get right. IE/Opera and Mozilla Firefox and the other browsers out there seem to have a problem understanding that 13px is actualy 13px. You'll need to put in a hack in the css code to get it right.

#content {
height: 502px; /* for IE5/Win */
voice-family: "\"}\"";
voice-family: inherit;
height: 462px;
}

html>body #content { /* be nice to Opera */
height: 462px;
}

Read more about this here: http://tantek.com/CSS/Examples/boxmodelhack.html

Hope this helps. Happy coding

jifor · October 15th, 2004, 16:29

^ The above hack is really tricky to have throughout a page. ^

I see a couple of easy options:

1. Look in the template for something like this:

<?xml version="1.0" encoding="iso-8859-1"?>

This xml declaration forces IE6 into quirks mode and thus causes IE to exit "standards" mode.

2. Don't specify a height. It sound silly, but sometime it isn't necessary as the content will determine the height.

Let us know how you make out.

David

camos · October 16th, 2004, 08:21

Try using px instead of em. I set up some font sizes using em. They looked fine in IE but were tiny in Firefox. I guess the two browsers disagreed on how big an em was.

Cheers

jifor · October 16th, 2004, 08:24

Quote:

Originally Posted by camos

Try using px instead of em. I set up some font sizes using em. They looked fine in IE but were tiny in Firefox. I guess the two browsers disagreed on how big an em was.

Cheers

That goes for percentages, too. I'm sure it was my mistake but i thought percentages would be good until the text became microscopic in FF.

:-)

Cheers,

David

noobnuggets · October 18th, 2004, 08:28

Thanks for the help guys.

After removing the xml declaration, things started to work mostly ok.

Thankyou!

Albon · October 18th, 2004, 13:22

Good to hear you got it working.
A litle recomandation to everyone working with CSS is this book:
Web Standards Solutions
It has become a bible to me when working with CSS websites. I have it with me wherever i work now

noobnuggets · October 18th, 2004, 13:41

I spoke too soon. I got the size of the div to decrease in ie, but I was never able to get it to fully function. I do not know what I was missing. I am trying some other design options for now.

CSS + firefox = easy webdesign

CSS + ie = voodoo

YTW · October 18th, 2004, 15:31

Well actually IE alone = voodoo

The problem you have encountered about the xml tag is specific to IE. It makes this browser goes in quirk mode...which is exactly what is does..quirk rendering.

As a general rule, especially for 100% css based designs, I would advice to remove the xml tag, which anyway is optional.

We will prepare a special tutorial for horizontal menus with background images too. Thanks for raising that question

noobnuggets · October 18th, 2004, 16:57

Correction: ie alone = sh!t

Thanks for the help YTW! I have been digging around and have found some other tutorials as well, and I am going to keep trying to make my horzontal menu, but I am gonna start from scratch.

YTW · October 19th, 2004, 01:39

Good, there is no better way to learn than doing the things by yourself !!!

We will publish by the end of the day a new demo with an horizontal box-type menu (no images). We will also add an insert of how to have background images in it. A little help might serve too

October 15th, 2004, 16:29	#3
jifor Join Date: Apr 2004 Posts: 710	^ The above hack is really tricky to have throughout a page. ^ I see a couple of easy options: 1. Look in the template for something like this: <?xml version="1.0" encoding="iso-8859-1"?> This xml declaration forces IE6 into quirks mode and thus causes IE to exit "standards" mode. 2. Don't specify a height. It sound silly, but sometime it isn't necessary as the content will determine the height. Let us know how you make out. David __________________ http://www.sunspotinteractive.com

October 18th, 2004, 15:31	#9
YTW Join Date: Oct 2003 Location: Madrid Spain Posts: 356	Well actually IE alone = voodoo The problem you have encountered about the xml tag is specific to IE. It makes this browser goes in quirk mode...which is exactly what is does..quirk rendering. As a general rule, especially for 100% css based designs, I would advice to remove the xml tag, which anyway is optional. We will prepare a special tutorial for horizontal menus with background images too. Thanks for raising that question __________________ 55 Thinking - Strategy Design Technology Good looking, Fast and Usable web solutions http://www.55thinking.com/

October 19th, 2004, 01:39	#11
YTW Join Date: Oct 2003 Location: Madrid Spain Posts: 356	Good, there is no better way to learn than doing the things by yourself !!! We will publish by the end of the day a new demo with an horizontal box-type menu (no images). We will also add an insert of how to have background images in it. A little help might serve too __________________ 55 Thinking - Strategy Design Technology Good looking, Fast and Usable web solutions http://www.55thinking.com/

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

October 15th, 2004, 15:58	#2
Albon Join Date: Oct 2004 Posts: 3	This is a tricky thing. Width/heights in css when it comes to boxes are a pain to get right. IE/Opera and Mozilla Firefox and the other browsers out there seem to have a problem understanding that 13px is actualy 13px. You'll need to put in a hack in the css code to get it right. #content { height: 502px; /* for IE5/Win / voice-family: "\"}\""; voice-family: inherit; height: 462px; } html>body #content { / be nice to Opera */ height: 462px; } Read more about this here: http://tantek.com/CSS/Examples/boxmodelhack.html Hope this helps. Happy coding

October 16th, 2004, 08:21	#4
camos Join Date: Jan 2004 Posts: 1,367	Try using px instead of em. I set up some font sizes using em. They looked fine in IE but were tiny in Firefox. I guess the two browsers disagreed on how big an em was. Cheers

October 18th, 2004, 08:28	#6
noobnuggets Join Date: Dec 2003 Posts: 244	Thanks for the help guys. After removing the xml declaration, things started to work mostly ok. Thankyou!

October 18th, 2004, 13:22	#7
Albon Join Date: Oct 2004 Posts: 3	Good to hear you got it working. A litle recomandation to everyone working with CSS is this book: Web Standards Solutions It has become a bible to me when working with CSS websites. I have it with me wherever i work now

October 18th, 2004, 13:41	#8
noobnuggets Join Date: Dec 2003 Posts: 244	I spoke too soon. I got the size of the div to decrease in ie, but I was never able to get it to fully function. I do not know what I was missing. I am trying some other design options for now. CSS + firefox = easy webdesign CSS + ie = voodoo

October 18th, 2004, 16:57	#10
noobnuggets Join Date: Dec 2003 Posts: 244	Correction: ie alone = sh!t Thanks for the help YTW! I have been digging around and have found some other tutorials as well, and I am going to keep trying to make my horzontal menu, but I am gonna start from scratch.