2 replies [Last post]
rickytenzer
Offline
newbie
Canada
Last seen: 12 years 26 weeks ago
Canada
Timezone: GMT-5
Joined: 2009-11-21
Posts: 3
Points: 4

Hi everyone,

I'm fairly new at CSS but I'm getting the hang of it. My problem might actually not be with CSS itself, but it definitely involves it. I've attached two screenshots of my website's toolbar, one from Google Chrome and one from Internet Explorer. Each button in the toolbar has a specifically designated width in pixels. The toolbar fits perfectly in Chrome but for some reason, it falls short in Internet Explorer. This seems extremely puzzling to me because I was under the impression that a pixel is a pixel is a pixel.

This toolbar is a javascript file linked in my page's source that has reference to a CSS sheet that deals with the toolbar's formatting. Essentially, HTML code calls on the java code (which is essentially just a list) which needs CSS sheet to render graphically. I can post the source for both the java and the CSS if required.

It's important to note that I have not DESIGNED this site per se, but I have been heavily involved with it and I'm currently re-writing the code to clean it up because I don't like dealing with other people's mess. That's why the page (in the screenshot) has no content but the general format of each page on the site.

Any help would be greatly appreciated!

Thanks,

Ricky

Chrome:

Internet Explorer:

rickytenzer
Offline
newbie
Canada
Last seen: 12 years 26 weeks ago
Canada
Timezone: GMT-5
Joined: 2009-11-21
Posts: 3
Points: 4

Hmm, I tried changed the

Hmm, I tried changed the DOCTYPE and it seems to have worked but caused other errors like adding a black dot (in both browsers) to the left of the first button and screwed up the alignment of the footer image (section with Home, About Us...) in Internet Explorer.

So this seems as if it is most definitely a compatibility issue. I guess I'll post the CSS and the java:

Java (top part is to get menu popups working in Internet Explorer)

IEMhover = function() {
		var IEMha = document.getElementById("menunava").getElementsByTagName("LI");
	for (var i=0; i<IEMha.length; i++) {
		IEMha[i].onmouseover=function() {
			this.className+=" IEMhover";
		}
		IEMha[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" IEMhover\\b"), "");
		}
	}
	var IEMhb = document.getElementById("menunavb").getElementsByTagName("LI");
	for (var i=0; i<IEMhb.length; i++) {
		IEMhb[i].onmouseover=function() {
			this.className+=" IEMhover";
		}
		IEMhb[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" IEMhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", IEMhover);
 
document.write('<table cellpadding="0" cellspacing="0" border="0" class="menutable"><tr><td>');
document.write('<ul id="menunava">');
document.write('  <li style="width: 130px;"><a href="index.html">DermaMode Laser</a>'); 
document.write('    <ul>');
document.write('      <li><a href="about_us.html">About Us</a></li>');
document.write('      <li><a href="our_team.html">Our Team</a></li>');
document.write('      <li><a href="photos.html">Photos</a></li>');
document.write('    </ul>');
document.write('  </li>');
document.write('  </ul>');
document.write('<ul id="menunavb">');
document.write('  <li style="width: 70px;"><a>Services</a>'); 
document.write('    <ul>');
document.write('      <li><a>Hair Removal</a>');
document.write('      	<ul>');
document.write('      		<li style="width: 70px;"><a href="laser_hair_removal.html">Laser</a></li>');
document.write('      		<li style="width: 70px;"><a href="electrolysis.html">Electrolysis</a></li>');
document.write('      		<li style="width: 70px;"><a href="wax.html">Wax</a></li>');
document.write('      	</ul>');
document.write('      <li><a href="restylane_and_botox.html">Cosmetic Treatments</a></li>');
document.write('      <li><a href="facial_care.html">Facial Care</a></li>');
document.write('      <li><a href="aesthetics.html">Aesthetics</a></li>');
document.write('      <li><a href="LED_teeth_whitening.html">LED Teeth Whitening</a></li>');
document.write('    </ul>');
document.write('  </li>');
document.write('  <li style="width: 155px;"><a href="appointment.html">Online Consultation</a>');
document.write('  </li>');
document.write('  <li style="width: 115px;"><a href="media_and_news.html">Media & News</a>');
document.write('  </li>');
document.write('  <li style="width: 105px;"><a href="promotions.html">Promotions</a>');
document.write('  </li>');
document.write('  <li style="width: 75px;"><a href="reviews.html">Reviews</a>');
document.write('  </li>');
document.write('  <li style="width: 100px;"><a href="contact_us.html">Contact Us</a></li>');
document.write('  </ul>');
document.write('</ul>');
document.write('</td></tr></table>');

CSS

.menutable {
	BORDER-TOP: #ffffff 2px solid;
	WIDTH: 758px;
}
#menunava {
	BORDER-TOP: #ffffff 1px solid;
	PADDING-LEFT: 0px;
	FLOAT: left;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px;
	BORDER-LEFT: #ffffff 1px solid;
	WHITE-SPACE: nowrap;
	font: 12px tahoma;
}
#menunava UL {
	BORDER-RIGHT: #ffffff 1px solid;
	PADDING-RIGHT: 0px;
	BORDER-TOP: #ffffff 1px solid;
	PADDING-LEFT: 0px;
	FLOAT: left;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px;
	BORDER-LEFT: #ffffff 0px solid;
	WIDTH: auto;
	PADDING-TOP: 0px;
	BORDER-BOTTOM: #ffffff 0px solid;
	WHITE-SPACE: nowrap;
	LIST-STYLE-TYPE: none;
	font: 12px tahoma;
}
#menunava A {
	PADDING-RIGHT: 5px;
	DISPLAY: block;
	PADDING-LEFT: 5px;
	PADDING-BOTTOM: 4px;
	FONT: bold 12px tahoma;
	CURSOR: pointer;
	background-image: url(glossyback.png);
	COLOR: #FFFFFF;
	PADDING-TOP: 3px;
	TEXT-ALIGN: center;
	TEXT-DECORATION: none
}
#menunava LI {
	BORDER-RIGHT: #ffffff 1px solid;
	PADDING-RIGHT: 0px;
	BORDER-TOP: #ffffff 0px solid;
	background-image: url(glossyback.png);
	PADDING-LEFT: 0px;
	FLOAT: left;
	PADDING-BOTTOM: 0px;
	BORDER-LEFT: #ffffff 0px solid;
	PADDING-TOP: 0px;
	BORDER-BOTTOM: #ffffff 0px solid;
	font: 12px tahoma;
	width: auto;
}
#menunava LI A:hover {
	CURSOR: pointer;
	COLOR: #0000CC;
	TEXT-DECORATION: none
}
#menunava LI:hover {
	BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #ffffff 0px solid; BORDER-LEFT: #ffffff 0px solid; BORDER-BOTTOM: #ffffff 0px solid; BACKGROUND-COLOR: #b8b9bd
}
#menunava LI.IEMhover {
	BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #ffffff 0px solid; BORDER-LEFT: #ffffff 0px solid; BORDER-BOTTOM: #ffffff 0px solid; BACKGROUND-COLOR: #b8b9bd
}
#menunava LI UL A {
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	PADDING-BOTTOM: 4px;
	FONT: 10px tahoma;
	CURSOR: pointer;
	COLOR: #ffffff;
	PADDING-TOP: 4px;
	TEXT-ALIGN: left;
	background-image: url(glossyback.png);
	width: 62px;
	text-indent: 7px;
}
#menunava LI UL A:hover {
	BACKGROUND-IMAGE: none;
	CURSOR: pointer;
	COLOR: #0000CC;
	TEXT-DECORATION: none;
	background-image: url(glossyback.png);
}
#menunava LI UL {
	BORDER-RIGHT: #FFFFFF 1px solid;
	BORDER-TOP: #FFFFFF 0px solid;
	LEFT: -999em;
	MARGIN: 0px -1px;
	BORDER-LEFT: #FFFFFF 1px solid;
	WIDTH: 62px;
	BORDER-BOTTOM: #FFFFFF 1px solid;
	POSITION: absolute;
	HEIGHT: auto
}
#menunava LI UL LI {
	BORDER-RIGHT: #FFFFFF 0px solid;
	BORDER-TOP: #FFFFFF 1px solid;
	BACKGROUND-IMAGE: none;
	BORDER-LEFT: #FFFFFF 0px solid;
	BORDER-BOTTOM: #FFFFFF 0px solid;
	BACKGROUND-COLOR: #ffffff;
	width: 62px;
}
#menunava LI UL LI:hover {
	BORDER-RIGHT: #FFFFFF 0px solid; BORDER-TOP: #FFFFFF 1px solid; BACKGROUND-IMAGE: none; BORDER-LEFT: #FFFFFF 0px solid; BORDER-BOTTOM: #FFFFFF 0px solid; BACKGROUND-COLOR: #f0f0f0
}
#menunava LI UL LI.IEMhover {
	BORDER-RIGHT: #FFFFFF 0px solid; BORDER-TOP: #FFFFFF 1px solid; BACKGROUND-IMAGE: none; BORDER-LEFT: #FFFFFF 0px solid; BORDER-BOTTOM: #FFFFFF 0px solid; BACKGROUND-COLOR: #f0f0f0
}
#menunava LI:hover UL {
	LEFT: auto
}
#menunava LI.IEMhover UL {
	LEFT: auto
}
#menunavb {
	BORDER-RIGHT: #ffffff 0px solid;
	PADDING-RIGHT: 0px;
	BORDER-TOP: #ffffff 0px solid;
	PADDING-LEFT: 0px;
	FLOAT: left;
	PADDING-BOTTOM: 0px;
	MARGIN: 1px -2px;
	BORDER-LEFT: #ffffff 1px solid;
	PADDING-TOP: 0px;
	BORDER-BOTTOM: #ffffff 1px solid;
	WHITE-SPACE: nowrap;
	LIST-STYLE-TYPE: none;
	font: 12px tahoma;
}
#menunavb UL {
	BORDER-RIGHT: #ffffff 1px solid;
	PADDING-RIGHT: 0px;
	BORDER-TOP: #ffffff 1px solid;
	PADDING-LEFT: 0px;
	FLOAT: left;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px;
	BORDER-LEFT: #ffffff 0px solid;
	PADDING-TOP: 0px;
	BORDER-BOTTOM: #ffffff 0px solid;
	WHITE-SPACE: nowrap;
	LIST-STYLE-TYPE: none;
	font: bold 12px tahoma;
}
#menunavb A {
	PADDING-RIGHT: 5px;
	DISPLAY: block;
	PADDING-LEFT: 5px;
	PADDING-BOTTOM: 4px;
	FONT: bold 12px tahoma;
	CURSOR: pointer;
	background-image: url(glossyback.png);
	COLOR: #FFFFFF;
	PADDING-TOP: 3px;
	TEXT-ALIGN: center;
	TEXT-DECORATION: none;
}
#menunavb LI {
	BORDER-RIGHT: #ffffff 1px solid;
	PADDING-RIGHT: 0px;
	BORDER-TOP: #ffffff 0px solid;
	background-image: url(glossyback.png);
	PADDING-LEFT: 0px;
	FLOAT: left;
	PADDING-BOTTOM: 0px;
	BORDER-LEFT: #ffffff 0px solid;
	PADDING-TOP: 0px;
	BORDER-BOTTOM: #ffffff 0px solid;
	font: bold 12px tahoma;
	width: auto;
}
#menunavb LI A:hover {
	CURSOR: pointer;
	COLOR: #0000CC;
	TEXT-DECORATION: none
}
#menunavb LI:hover {
	BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #ffffff 0px solid; BORDER-LEFT: #ffffff 0px solid; BORDER-BOTTOM: #ffffff 0px solid; BACKGROUND-COLOR: #b8b9bd
}
#menunavb LI.IEMhover {
	BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #ffffff 0px solid; BORDER-LEFT: #ffffff 0px solid; BORDER-BOTTOM: #ffffff 0px solid; BACKGROUND-COLOR: #b8b9bd
}
#menunavb LI UL A {
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	PADDING-BOTTOM: 4px;
	FONT: 10px tahoma;
	CURSOR: pointer;
	COLOR: #ffffff;
	PADDING-TOP: 4px;
	TEXT-ALIGN: left;
	background-image: url(glossyback.png);
	width: 114px;
	text-indent: 7px;
	margin-top: 0px;
}
#menunavb LI UL A:hover {
	BACKGROUND-IMAGE: none;
	CURSOR: pointer;
	COLOR: #0000CC;
	TEXT-DECORATION: none;
	background-image: url(glossyback.png);
}
#menunavb LI UL {
	BORDER-RIGHT: #FFFFFF 1px solid;
	BORDER-TOP: #FFFFFF 0px solid;
	LEFT: -999em;
	MARGIN: 0px -1px;
	BORDER-LEFT: #FFFFFF 1px solid;
	WIDTH: 114px;
	BORDER-BOTTOM: #FFFFFF 1px solid;
	POSITION: absolute;
	HEIGHT: auto
}
#menunavb LI UL LI UL{
	BORDER-RIGHT: #FFFFFF 1px solid;
	BORDER-TOP: #FFFFFF 0px solid;
	LEFT: -999em;
	MARGIN: -21px 114px;
	BORDER-LEFT: #FFFFFF 1px solid;
	WIDTH: 70px;
	BORDER-BOTTOM: #FFFFFF 1px solid;
	POSITION: absolute;
	HEIGHT: auto
}
#menunavb LI UL LI {
	BORDER-RIGHT: #FFFFFF 0px solid;
	BORDER-TOP: #FFFFFF 1px solid;
	BACKGROUND-IMAGE: none;
	BORDER-LEFT: #FFFFFF 0px solid;
	BORDER-BOTTOM: #FFFFFF 0px solid;
	BACKGROUND-COLOR: #ffffff;
	width: 114px;
}
#menunavb LI UL LI:hover {
	BORDER-RIGHT: #FFFFFF 0px solid; BORDER-TOP: #FFFFFF 1px solid; BACKGROUND-IMAGE: none; BORDER-LEFT: #FFFFFF 0px solid; BORDER-BOTTOM: #FFFFFF 0px solid; BACKGROUND-COLOR: #f0f0f0
}
#menunavb LI UL LI.IEMhover {
	BORDER-RIGHT: #FFFFFF 0px solid; BORDER-TOP: #FFFFFF 1px solid; BACKGROUND-IMAGE: none; BORDER-LEFT: #FFFFFF 0px solid; BORDER-BOTTOM: #FFFFFF 0px solid; BACKGROUND-COLOR: #f0f0f0
}
#menunavb LI LI {
	PADDING-RIGHT: 0px;
	WIDTH: 136px
}
#menunavb LI UL LI UL A {
	WIDTH: 70px
}
#menunavb LI UL UL {
	MARGIN: -21px 0px 0px 100px
}
#menunavb LI:hover UL UL {
	LEFT: -999em
}
#menunavb LI:hover UL UL UL {
	LEFT: -999em
}
#menunavb LI.IEMhover UL UL {
	LEFT: -999em
}
#menunavb LI.IEMhover UL UL UL {
	LEFT: -999em
}
#menunavb LI:hover UL {
	LEFT: auto
}
#menunavb LI LI:hover UL {
	LEFT: auto
}
#menunavb LI LI LI:hover UL {
	LEFT: auto
}
#menunavb LI.IEMhover UL {
	LEFT: auto
}
#menunavb LI LI.IEMhover UL {
	LEFT: auto
}
#menunavb LI LI LI.IEMhover UL {
	LEFT: auto
}

rickytenzer
Offline
newbie
Canada
Last seen: 12 years 26 weeks ago
Canada
Timezone: GMT-5
Joined: 2009-11-21
Posts: 3
Points: 4

Managed to fix it!

Managed to fix it!