Learn VBA & Macros in 1 Week!

CSS - Positioning Not Displaying In Firefox, Ie Is Ok

Full Excel VBA Course - Beginner to Expert

Positioning Not Displaying In Firefox, Ie Is Ok	View Content

For some reason the table isn't being positioned properly in firefox, but it is in IE. The attribute top:15% seems to not be used in firefox, does anyone know if I should be doing it another way?

Here is my css:

Code:

div.leftBorder
{
	position:absolute;
	height:100%;
	width:15%;
	background-color:#DDDDDD;
}
p.imgText{
	font-size:18px;
	position:absolute;
	left:1%;
	top:1%;
	color:#CC0000;
}
table.menuTable{
	position:relative;
	top:15%;
}

Here is the html:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="specs.css">
  <title></title>
</head>

<body>
<div class="leftBorder"></div>
<p class="imgText">MEDITECH Interface Specifications</p>
<center>
<table class="menuTable" cellspacing=0>
<!-- Spec number menu Title -->
<tr>
	<th class="menuTitle">Spec. Number</th>
	<th class="menuTitle">Description</th>
</tr>
<!-- Spec number menu -->
<tr>
	<td class="menuSpec"><a href=".\R404.htm" target="iframe">R404</a></td>
    <td class="menuDesc">MEDITECH MAGIC C/S Admissions System to Other Vendor Ancillary System</td>
</tr>
<tr>
    <td class="menuSpec"><a href=".\R469.htm" target="iframe">R469</a></td>
    <td class="menuDesc">EDI Integration: ANSI Formats 270 and 271 for Insurance Eligibility
</tr>
<tr>
    <td class="menuSpec"><a href=".\R948.htm" target="iframe">R948</a></td>
    <td class="menuDesc">MEDITECH MAGIC C/S ITS Orders to Other Vendor Image Viewing System</td>
</tr>
<tr>
    <td class="menuSpec"><a href=".\R949.htm" target="iframe">R949</a></td>
    <td class="menuDesc">MEDITECH MAGIC C/S ITS Reports to Other Vendor Image Viewing System</td>
</tr>
<tr>
    <td class="menuSpec"><a href=".\R953.htm" target="iframe">R953</a></td>
    <td class="menuDesc">Other Vendor Image Status Updates to MEDITECH ITS Application</td>
</tr>
</table>
<iframe name="iframe" frameborder=0 marginwidth=10 width=70 height=70></iframe>
</center>
</body>
</html>

Full Excel VBA Course - Beginner to Expert

Absolute Positioning Within A Relative Table Not Working With Firefox. Firefox Bug!?

Similar Tutorials

View Content

I am desperate. I think I found a bug in Firefox, and I'm not sure how to work around it.

The following code works in everything (IE 8, Chrome, Safari, Opera) except Firefox (version 3.6.3). Am I doing something wrong, or is this a bug in Firefox?

You can look what happens to the drop-down menu's on Menu 2 and 3 live by going to my site (deenfoxx dot com slash firefox-bug dot html).

css Code:
Original - css Code #main-nav { background-color: black; height: 40px; } #nav { position: relative; margin: 0; padding: 0; } #nav li { position: relative; float: left; display: table; width: 99px; height: 40px; border-right: 1px solid white; text-align: center; font-size: 10px; } #nav li:hover { background-color: darkred; } #nav a { display: table-cell; vertical-align: middle; line-height: 11px; font-weight: bold; text-decoration: none; color: #fff; } #nav li ul { position: absolute; padding: 0; background-color: gray; top: 40px; left: 0px; } #nav li ul li { width: 98px; border: 0; border-top: 1px solid white; }

  

 #main-nav


 {


     background-color: black;


     height: 40px;


 }


 #nav


 {


     position: relative;


     margin: 0;


     padding: 0;


 }


 #nav li


 {


     position: relative;


     float: left;


     display: table;


     width: 99px;


     height: 40px;


     border-right: 1px solid white;


     text-align: center;


     font-size: 10px;


 }


 #nav li:hover


 {


     background-color: darkred;


 }


 #nav a


 {


     display: table-cell;


     vertical-align: middle;


     line-height: 11px;


     font-weight: bold;


     text-decoration: none;


     color: #fff;


 }


 #nav li ul


 {


     position: absolute;


     padding: 0;


     background-color: gray;


     top: 40px;


     left: 0px;


 }


 #nav li ul li


 {


     width: 98px;


     border: 0;


     border-top: 1px solid white;


 }

html4strict Code:
Original - html4strict Code <div id="main-nav"> <ul id="nav"> <li id="m1"><a href="#1">Main Menu 1</a></li> <li> <a href="#2">Main Menu 2</a> <ul> <li><a href="#2a">Sub-Category 1</a></li> <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li> </ul> </li> <li> <a href="#3">Main Menu 3 with multiple lines</a> <ul> <li><a href="#3a">Sub-Category 2</a></li> </ul> </li> <li><a href="#4">Main Menu item which has a really long name on it</a></li> </ul> </div>

  

 <div id="main-nav">


     <ul id="nav">


         <li id="m1"><a href="#1">Main Menu 1</a></li>


         <li>


             <a href="#2">Main Menu 2</a>


             <ul>


                 <li><a href="#2a">Sub-Category 1</a></li>


                 <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li>


             </ul>


         </li>


         <li>


             <a href="#3">Main Menu 3 with multiple lines</a>


             <ul>


                 <li><a href="#3a">Sub-Category 2</a></li>


             </ul>


         </li>


         <li><a href="#4">Main Menu item which has a really long name on it</a></li>


     </ul>


 </div>

The problem appears to be that "#nav li" happens to have position:relative; and a display:table; and "#nav li ul" is position:absolute;. Normally, absolute positioning requires its parent or ancestor position to be set, but when used with the table display, it doesn't work normally on Firefox--but it does on other browsers.

Can someone help me with a workaround that does not involve altering the HTML? If I must, I will accept a workaround that requires changing the HTML, but I'll have to do some heavy duty recoding of Magento's core menu generation. Anyone that knows Magento knows I want to avoid that like the plague--my example is a very simplified version of the problem.

Not Displaying Right In Firefox

Similar Tutorials

View Content

I'm working on a client's website and trying to get the navigation menu to look right in firefox, for some reason it seems to ignore all width properties and the table cells overlap, but only in firefox. IE displays it perfectly, any help would be appreciated.
www.entsource.com/hcs/
It is source viewable and the css code follows:

a.nav {
color: black;
text-decoration: none;
border: 1px solid #6D92A2;
width: 150px;
padding: 2px;
font-family: tahoma;
font-size: 11pt;
text-align: center;
}

a.nav:hover {
color: #F80808;
text-decoration: none;
border: 1px solid #F80808;
width: 150px;
padding: 2px;
font-family: tahoma;
}

table.pane {
width: 900px;
}

td.nav-cell {
width: 155px;
border-right: 2px solid #6D92A2;

}
td.main {
width: 750px;
padding: 10px;

}

hr {
color: #6D92A2;
height: 1px;
width: 400px;
}

strong.header {
color: white;
background-color: #CCCCCC;
width: 700px;
height: 20px;
border-top: 1px black solid;
border-bottom: 1px black solid;
font-size: 16pt;
font-family: tahoma;
}

strong.bold {
color: black;
font-size: 16pt;
font-family: tahoma;
}

E Not Displaying In Ie But Does In Firefox

Similar Tutorials

View Content

I am using the below CSS to display a photo at the top of my pages. The CSS worked fine with the original photo (using a template) on both firefox and IE. However, when I changed the photo for my own it stops appearing on IE. Firefox displays the picture perfectly, and the div that holds the image is sized correctly (shows as white space on page).

Does anyone know why this may be happening? I am using IE 7. The rest of the CSS is working, even the links to other images I use as backgrounds.

Code:

#header-photo {
	clear: both;
	height: 200px;
	width: 790px;
	margin: 0 auto;
	background: #FFF url(header-photo.jpg) no-repeat center center;

}

Positioning: Ie Vs. Firefox

Similar Tutorials

View Content

The Page

The problem is the div with the controls in it (wheel: <dropdown>, etc.). I need it to be bumped up against the bottom of the large image above it, and it's working fine in Firefox. Unfortunately, IE is bumping it downward to it wraps instead of of nestling into position.

The css for it:

.controls {
clear: both;
width: 660px;
text-align: center;
}

And the instructions box it's bumping up against:

#instructions {
float: left;
width: 300px;
display: inline;
margin-left: 5px;
}

The problem has been there for a while, but wasn't really noticeable until I added the default text for counters section, which pushed the rest off the bottom of the screen (at 1280 x 1024).

Any help would be greatly appreciated.

Positioning In Firefox And Ie

Similar Tutorials

View Content

Take a look at the Firefox positioning and the disastrous positioning in IE and let me know what I need to do fix the div tag:
Code:

function areYouSure(){
	var newDiv = document.createElement("div");
	newDiv.setAttribute('style', 'position: absolute; left: 200px; top: 250px; text-align: center; width: 500px; height: 120px; z-index: 3; background-color: #999999;');
	newDiv.setAttribute('id', 'add_to_db');
	newDiv.innerHTML = "<div style='float: left; margin: 10px 10px 10px 10px;width: 480px; height: 100px; background-color: #D2C5A0;'>Are you sure you want to add it to the database?<br /><span style='position: absolute; left: 200px; top: 50px; text-align: center;'><input type='button' value='Yes' style='float:left; text-align: center; margin: 5px 5px 5px 5px; background-color: #4C5454; color: #FFFFFF; font-weight: bold; font-size: 12px; border-color: #98A9A9;' onClick='addToDb();' /><a href='javascript: cancelAddToDb();'><span style='float:left; text-align: center; margin: 5px 5px 5px 5px; background-color: #4C5454; color: #FFFFFF; font-weight: bold; font-size: 12px; border-color: #98A9A9; width: 60px; height: 20px; display: block;'>Cancel</span></a></span></div>";
	// And then inject it:
	document.body.appendChild(newDiv);
}
function cancelAddToDb(){
	var olddiv = document.getElementById('add_to_db');
	if (olddiv && olddiv.parentNode && olddiv.parentNode.removeChild){
		olddiv.parentNode.removeChild(olddiv);
	}
}

Menu Not Displaying Same In Ie And Firefox

Similar Tutorials

View Content

can anyone help me figure out why the css javascript menu does not display the same in IE and Firefox?

Are there common problems?

Margin Displaying Different In Ie And Firefox

Similar Tutorials

View Content

I've built a website using only div's and I am only having problems with one of them...
I have the div with a

margin-left : 48px;

In IE this aligns the div with a section of text above it (the result I had wanted) however in Firefox it displays about 20pixels to the left of the IE display. If I set the

margin-left : 96px;

it aligns properly in Firefox but is then messed up in IE.

I have an attachment of my code its not very large.
Is there any fix for this problem?

Firefox Not Displaying Properly

Similar Tutorials

View Content

Hello

Can anyone tell me where this code is going wrong, works fine in IE, firefox shows all the menu under one another.

Here is my code - css

Code:

div#menuContainer
	{ width:146px;
	position:absolute; 
	margin:0px; 
	background:#ffffff;
	height:400px; }

  
ul#mainMenu{	 margin:0; 
	padding:1px 0; 
	list-style:none;
	 width:100%;
	 height:21px; 
	border-left:1px solid #ffffff;
	   font-family:verdana, arial, helvetica;
	   font-size:12px;}
					
ul#mainMenu li{ margin:0; 
		padding:0; 
	         display:block;
		float:left;
					position:relative;
		width:146px; }
	
ul#mainMenu li a:link{ 	padding:4px 0; 					display:block;					text-align:center;					text-decoration:none; 	background-color:#333333;					color:#ffffff; 					width:146px; 					height:25px; 				border-right:1px solid #ffffff;				border-top:1px solid #ffffff;
		font-family:Arial, Helvetica, sans-serif;			font-size:16px;}


ul#mainMenu li a:visited{ 	padding:4px 0; 					display:block; 
			text-align:center; 
			text-decoration:none; 
			background-color:#999999; 
			border-top:1px solid #ffffff;
			border-right:1px solid #ffffff;
			color:#ffffff; 
			width:146px; 
			height:25px;
			font-family:Arial, Helvetica, sans-serif; }
								
ul#mainMenu li a:hover{	padding:4px 0;
			display:block;
			text-align:center; 
			text-decoration:none; 
			background-color:#666666;
			color:#ffffff; 
			width:146px; 
			height:25px; 
			border-right:1px solid #ffffff;
			border-top:1px solid #ffffff;
		font-family:Arial, Helvetica, sans-serif; }
								
ul#mainMenu li a:active{ 	padding:4px 0; 				display:block;
			text-align:center; 
			text-decoration:none;
			background-color:#999999;
			color:#ffffff; 
			width:146px; 
			height:25px; 
			border-right:1px solid #ffffff;
			border-top:1px solid #ffffff;
		font-family:Arial, Helvetica, sans-serif;}
								

ul#mainMenu	li ul.subMenu	{	 	display:none;					margin:0; 					padding:0; 
	list-style:none; 					position:absolute; 
		left:147px; 
		top:0px; 
		padding:1px 1px 0 1px;  
		border-right:1px solid #FFFFFF; 
		background:#ffffff; 
		z-index:1000; }
										
					
ul#mainMenu li:hover ul.subMenu{ display:block; }

ul#mainMenu li ul.subMenu li{ 	width:146px; 
					clear:left;
										} 

ul#mainMenu li ul.subMenu li a:link {	clear:left; 
			background-color:#000066;				padding:4px 0; 
			width:146px; 
			border:none; 
			border-bottom:1px solid #ffffff; 
			position:relative;
			z-index:1000;
												}
												
ul#mainMenu li ul.subMenu li a:visited{ 	clear:left; 
			background-color:#000099; 
			padding:4px 0; 
			width:146px; 
			border:none; 
			border-bottom:1px solid #ffffff; 
			position:relative; 
		z-index:1000; }
													
ul#mainMenu li ul.subMenu li:hover a{	clear:left; 
		background-color:#000099;
		padding:4px 0; 
	width:146px; 
		border:none; 
		border-bottom:1px solid #ffffff; 
		position:relative; 
		z-index:1000;}
												
ul#mainMenu li ul.subMenu li a:active{	clear:left; 
		background-color:#000099; 
	padding:4px 0; 
	width:146px; 
	border:none; 
	border-bottom:1px solid #ffffff; 
	position:relative;					z-index:1000;}
												
ul#mainMenu li ul.subMenu li a:hover{ 	clear:left; 
			background-color:#000099; 
			padding:4px 0; 
				width:146px; 
			border:none; 				border-bottom:1px solid #ffffff; 
			position:relative;					z-index:1000; }

ul#mainMenu li ul.subMenu li ul.subMenu1{ 	display:none;
						margin:0;						padding:0;					list-style:none; 
	position:absolute; 
	left:147px; 
top:-2px;
padding:1px 1px 0 1px;					border-right:1px solid #FFFFFF; 			background:#ffffff; 				z-index:900; }
														
ul#mainMenu li ul.subMenu li:hover ul.subMenu1{ display:block; }

ul#mainMenu li ul.subMenu li ul.subMenu1 li a:link{ background-color:#000099; }

ul#mainMenu li ul.subMenu li ul.subMenu1 li a:visited{ background:#000099; }

ul#mainMenu li ul.subMenu li ul.subMenu1 li:hover a{ background:#000099; }

ul#mainMenu li ul.subMenu li ul.subMenu1 li a:hover{ background:#000099; }

ul#mainMenu li ul.subMenu li ul.subMenu1 li a:active{ background:#000099; }

ul#mainMenu li ul.subMenu li a span{ 	position:absolute; 
			top:0; 
	left:132px; 					font-size:12pt; 
	color:#fe676f; }
												
ul#mainMenu li ul.subMenu li:hover a span{ 	position:absolute; 					top:0; 						left:132px; 					font-size:12pt;					color:#ffffff; }
														
ul#mainMenu li ul.subMenu li a:hover span{ 	position:absolute; 					top:0; 						left:132px; 
font-size:12pt; 
color:#ffffff; }

html
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Untitled</title>
	<link rel="stylesheet" type="text/css" href="menu_style.css" />
</head>
<body>

<div id="menuContainer">
		<ul id="mainMenu">
		<li><a href="#" name="Home">Home</a></li>
		<li><a href="#" name="Services">Services</a></li>
			<ul class="subMenu">
				<li><a href="#" name="internet marketing">Internet Marketing</a></li>
				<li><a href="#" name="web development">web development</a></li>				
				<li><a href="#" name="e-commerce">e-commerce</a></li>
			</ul>
	
		<li><a href="#" name="About">About Us</a></li>
		<li><a href="#" name="case studies">Case Studies</a></li>
		<li><a href="#" name="Jobs">Jobs at toltech</a></li>
		
		<li><a href="#" name="Contact Us">Contact Us</a></li>
			<ul class="subMenu">
				<li><a href="#" name="Location">Location</a></li>
				<li><a href="#" name="Enquiry Form">Enquiry Form</a></li>
			</ul>
	</ul>
	
</div>



</body>
</html>

Thanks in advance,
gillian

Firefox Vs Ie Positioning Problem

Similar Tutorials

View Content

Hello,

If you view my site in IE first: www.tombraiders.net/katie/MyTombRaiderStories.html you'll see there's a mini menu where I have updates on the right hand side.

If you view it in Firefox, the menu gets pushed down to the very bottom, under the main content.

Does anyone know why this is happening, and how I can fix it? Thanks!

Css Positioning In Safari, Ie And Firefox

Similar Tutorials

View Content

Still learning CSS and trying to position simple text inside a layer on my clients site:

The CSS positioning and font size are all appearing different in Safari (MAC), IE and Firefox.

What am I doing wrong here?

Go to : http://www.fractiousmusic.com

At the bottom left corner I am trying to position the Steady Systems text.

IE - looks fine
Firefox - slightly positioned to the right
Safari - completely out of wack. Covering one of the band member silohouettes and the font size is all wrong.

Please view source and let me know if its a code error.

Thanks!

Daniel

Similar Tutorials

View Content