1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

<div> tags not displaying in Firefox properly

Discussion in 'CSS' started by relixx, Jul 28, 2005.

0
  1. #1
    I've been asked to build a site using <div> tags, something I'm a bit apprehensive about due to me never being able to get them to display properly in all browsers.

    My current headache is with Firefox. The code below works perfectly in IE but
    but in Firefox the divs overlap on the right-hand side which annoys me to no end.

    Could someone please help me fix this code so that it'd work in IE and Firefox?

    
<html>
<head>
<title>Div Tag errors in Fx</title>
<style type="text/css">
<!--
.border_outermost {
border: 1px solid #834343;
width: 90%; 
padding: 1px;
background-color: #834343;
}

.border_innerlevel1 {
width: 100%;
position: static;
background-color: #834343;
border: 2px solid #FFFFFF;
padding: 0px;
}

.border_innermost {
border: 2px solid #6F3939;
width: 100%; 
background-color: #834343;
padding: 5px;
}
-->
</style>
</head>
<body bgcolor="#CCCCCC" text="#FFFFFF">

<div class="border_outermost"> 
<div class="border_innerlevel1"> 
<div class="border_innermost">

<h3>Well, it would be nice to see the divs properly
in Firefox, someone please help me :( </h3>

</div>
</div>
</div>


</body>
</html>
    Code (markup):
     
    relixx, Jul 28, 2005 IP
  2. Dji-man

    Dji-man Peon

    Messages:
    185
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    try this:


    <html>
<html>
<head>
<title>Div Tag errors in Fx</title>
<style type="text/css">
<!--
.container {
border: 6px double #6F3939;
width:80%;
}

.inside {
width:100%;
height:100px;
background-color: #834343;
}

h3 {
margin: 0px;
color: #ffffff;
}
-->
</style>
</head>
<body bgcolor="#CCCCCC" text="#FFFFFF">



</body>
</html>

<body>


<div class="container" ><div class="inside"><H3>Well, it would be nice to see the divs properly
in Firefox, someone please help me :( </H3></div></div>


</body>
</html>
    Code (markup):
     
    Dji-man, Jul 29, 2005 IP
  3. CompressedAir

    CompressedAir Peon

    Messages:
    56
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    One quick note: as you will soon see, if it displays 'properly' in IE, you have probably done something wrong ;) You should always test your website in a standards-based browser like Firefox first and then make it work for IE. From my experience, Firefox usually displays things as they should be displayed (whether or not that is how you intended something to look is a different story).
     
    CompressedAir, Jul 30, 2005 IP
  4. relixx

    relixx Active Member

    Messages:
    946
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    70
    #4
    Gah. Sounds like MS alright :p

    Dji-man, your code worked until I nested other divs into it. I found out what the problem was, I was setting the width. I simply remove the width: 100% bits and some of the padding and everything worked.
     
    relixx, Jul 31, 2005 IP
  5. fishbulb

    fishbulb Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    ok, but I am not seeing the solution :(

    I have a more complex structure in my main container (700x600), basically I have a main container with a header (700x115) and footer(700x50) <div> and then in between the header and footer, I have two side by side <div> say left navigation (170x435) and main contents (530x435). All the measurements have been measured and remeasured, the absolute positions are exact and for some reason the main contents <div> is going too wide in Firefox and Safari, which is what I typically try to work in. I checked IE based on this thread and it looks perfect. can try to post the main code

    Help!
    
<div id="MainContainer" style="position:absolute; left:133px; top:0px; width:768px; height:600px; z-index:2; background-color: #FFF">
<div id="TopBar" style="position:absolute; left:0px; top:0px; width:768px; height:115px; z-index:3; background-color: #FFF"><img src="images/place_holder.jpg" width="768" height="150"></div>
<div id="MenuBar" style="position:absolute; left:0px; top:115px; width:170px; height:450px; z-index:4; background-color: #FFF; padding-left:25px; padding-top:10px"> 
  <!-- START OF MENU -->
  <div id="dhtmlgoodies_slidedown_menu"> 
    <ul>
      <li><a href="index.htm">Home</a> </li>
      <li><a href="about.htm">About Us</a> 
        <ul>
          <li><a href="#">Who We Are</a></li>
          <li><a href="#">Broadway and Events</a></li>
          <li><a href="#">Promos and Gifts</a></li>
        </ul>
      </li>
      <li><a href="#">Clients and Products</a> 
        <ul>
          <li><a href="#">Broadway</a></li>
          <li><a href="#">Events and Corporations</a></li>
        </ul>
      </li>
      <li><a href="#">Contact Us</a> 
        <ul>
          <li><a href="#">For Info</a></li>
          <li><a href="#">For Employment</a></li>
        </ul>
      </li>
    </ul>
		</div>
		<!-- END OF MENU -->
		<script type="text/javascript">
		initSlideDownMenu();
		</script>
		</div>
<!-- InstanceBeginEditable name="main" -->
  <div id="Contents" style="position:relative; left:170px; top:115px; width:598px; height:450px; z-index:5; background-color: #FFF; padding-left: 25px; padding-top:20px; padding-right:25px">
    <p>Text goes here</p>
    <p><br>
    </p>
  </div>
    Code (markup):
     
    fishbulb, Jun 14, 2008 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    Well, let's see... Position:static is almost always a miserable /FAIL/ cross browser. You have no doctype so IE is in quirks mode, good luck EVER getting ANYTHING to work right between IE and FF that way - you're declaring 100% width on the inner ones when that's the default behavior (again, must be that static declaration - what are you trying to even DO with that?)... pixel padding + % width usually fails, so margin the div inside it instead.... and 5px padding + 100% == 100%+5px in REAL browsers - only IE's buggy quirks mode box model will incorrectly give you the 100%... NOT that the innermost needs that width on it in the first place.

    That's your biggest problem - you are relying on IE's quirks mode broken box model, and declaring widths on things that shouldn't need widths... AND using a property (static) that barely works in IE, much less anywhere else.

    I believe this is what you are TRYING to do, ja?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=iso-8859-1"
/>

<title
	>Div Tag errors in Fx
</title>

<style type="text/css"><!--

* {
	margin:0;
	padding:0;
}

body {
	color:#FFF;
	background:#CCC;
}

.border_outermost {
	width:90%;
	background:#834343;
	border: 1px solid #834343;
}

.border_innerlevel1 {
	margin:1px;
	background:#834343;
	border:2px solid #FFF;
}

.border_innermost {
	padding: 5px;
	background:#834343;
	border:2px solid #6F3939;
}

--></style>

</head><body>

<div class="border_outermost">
	<div class="border_innerlevel1">
		<div class="border_innermost">

			<h3>Well, it would be nice to see the divs properly
in Firefox, someone please help me :( </h3>

		</div>
	</div>
</div>

</body></html>
    Code (markup):
    DOCTYPE - feel it, smell it... love it. Block level elements auto-expand, you don't need to declare widths on them - and in general a % width + pixel padding == complete total and miserable /FAIL/ in standards compliant code.

    As Compressed Air said, 99.99% of the time if there's a browser doing it wrong, it's IE - this is a thousand times more true without a valid doctype.

    -- edit --

    BTW you've only got three borders, so you only need two div.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=iso-8859-1"
/>

<title
	>Div Tag errors in Fx
</title>

<style type="text/css"><!--

* {
	margin:0;
	padding:0;
}

body {
	color:#FFF;
	background:#CCC;
}

.border_outermost {
	width:90%;
	background:#FFF;
	border:2px solid #834343;
}

.border_innermost {
	margin:2px;
	padding: 5px;
	background:#834343;
	border:2px solid #6F3939;
}

--></style>

</head><body>

<div class="border_outermost">
	<div class="border_innermost">

		<h3>
			Well, it would be nice to see the divs properly
			in Firefox, someone please help me :(
		</h3>

	</div>
</div>

</body></html>
    Code (markup):
     
    deathshadow, Jun 15, 2008 IP
  7. fishbulb

    fishbulb Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    well, I didn't include all the code, just the code that was causing the fits, but here is the complete code:

    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable --> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body{
		font-family: Arial, helvetica sans-serif;
		font-size:12px;
		margin:0px;
		padding:0px;

		background-color:#ccccff;
		height:100%;
		text-align:left;
	}
#dhtmlgoodies_slidedown_menu li{
		list-style-type:none;
		position:relative;
	}
	#dhtmlgoodies_slidedown_menu ul{
		margin:0px;
		padding:0px;
		position:relative;

	}

	#dhtmlgoodies_slidedown_menu div{
		margin:0px;
		padding:0px;
	}
	/* 	Layout CSS */
	#dhtmlgoodies_slidedown_menu{		
		width:205px;	
		visibility:hidden;
	}

	/* All A tags - i.e menu items. */
	#dhtmlgoodies_slidedown_menu a{
		color: #652C91;
		text-decoration:none;	
		clear:both;
		width:170px;	
		padding-left:2px;	

	}
	
	/*
	A tags 
	*/
	#dhtmlgoodies_slidedown_menu .slMenuItem_depth1{	/* Main menu items */
		margin-top:10px;
		font-weight:bold;
	}	
	#dhtmlgoodies_slidedown_menu .slMenuItem_depth2{	/* Sub menu items */
		margin-top:10px;
	}	
	#dhtmlgoodies_slidedown_menu .slMenuItem_depth3{	/* Sub menu items */
		margin-top:10px;
		color:blue;
	}	
	#dhtmlgoodies_slidedown_menu .slMenuItem_depth4{	/* Sub menu items */
		margin-top:1px;
		color:red;
	}	
	#dhtmlgoodies_slidedown_menu .slMenuItem_depth5{	/* Sub menu items */
		margin-top:1px;
	}

	/* UL tags, i.e group of menu utems. 
	It's important to add style to the UL if you're specifying margins. If not, assign the style directly
	to the parent DIV, i.e. 
	
	#dhtmlgoodies_slidedown_menu .slideMenuDiv1
	
	instead of 
	
	#dhtmlgoodies_slidedown_menu .slideMenuDiv1 ul
	*/
	
	#dhtmlgoodies_slidedown_menu .slideMenuDiv1 ul{
		padding:2px;
	}
	#dhtmlgoodies_slidedown_menu .slideMenuDiv2 ul{
		margin-left:5px;
		padding:2px;
	}
	#dhtmlgoodies_slidedown_menu .slideMenuDiv3 ul{
		margin-left:10px;
		padding:2px;
	}
	#dhtmlgoodies_slidedown_menu .slMenuItem_depth4 ul{
		margin-left:15px;
		padding:2px;
	}
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<script type="text/javascript">	
var expandFirstItemAutomatically = false;	// Expand first menu item automatically ?
var initMenuIdToExpand = false;	// Id of menu item that should be initially expanded. the id is defined in the <li> tag.
var expandMenuItemByUrl = true;	// Menu will automatically expand by url - i.e. if the href of the menu item is in the current location, it will expand


var initialMenuItemAlwaysExpanded = true;	// NOT IMPLEMENTED YET

var dhtmlgoodies_slmenuObj;
var divToScroll = false;
var ulToScroll = false;	
var divCounter = 1;
var otherDivsToScroll = new Array();
var divToHide = false;
var parentDivToHide = new Array();
var ulToHide = false;
var offsetOpera = 0;
if(navigator.userAgent.indexOf('Opera')>=0)offsetOpera=1;	
var slideMenuHeightOfCurrentBox = 0;
var objectsToExpand = new Array();
var initExpandIndex = 0;
var alwaysExpanedItems = new Array();
	
function popMenusToShow()
{
	var obj = divToScroll;
	var endArray = new Array();
	while(obj && obj.tagName!='BODY'){
		if(obj.tagName=='DIV' && obj.id.indexOf('slideDiv')>=0){
			var objFound = -1;
			for(var no=0;no<otherDivsToScroll.length;no++){
				if(otherDivsToScroll[no]==obj){
					objFound = no;		
				}					
			}	
			if(objFound>=0){
				otherDivsToScroll.splice(objFound,1);	
			}		
		}	
		obj = obj.parentNode;
	}	
}

function showSubMenu(e,inputObj)
{

	if(this && this.tagName)inputObj = this.parentNode;
	if(inputObj && inputObj.tagName=='LI'){
		divToScroll = inputObj.getElementsByTagName('DIV')[0];
		for(var no=0;no<otherDivsToScroll.length;no++){
			if(otherDivsToScroll[no]==divToScroll)return;
		}			
	}
	hidingInProcess = false;
	if(otherDivsToScroll.length>0){
		if(divToScroll){				
			if(otherDivsToScroll.length>0){
				popMenusToShow();
			}
			if(otherDivsToScroll.length>0){	
				autoHideMenus();
				hidingInProcess = true;
			}
		}	
	}		
	if(divToScroll && !hidingInProcess){
		divToScroll.style.display='';
		otherDivsToScroll.length = 0;
		otherDivToScroll = divToScroll.parentNode;
		otherDivsToScroll.push(divToScroll);	
		while(otherDivToScroll && otherDivToScroll.tagName!='BODY'){
			if(otherDivToScroll.tagName=='DIV' && otherDivToScroll.id.indexOf('slideDiv')>=0){
				otherDivsToScroll.push(otherDivToScroll);
									
			}
			otherDivToScroll = otherDivToScroll.parentNode;
		}			
		ulToScroll = divToScroll.getElementsByTagName('UL')[0];
		if(divToScroll.style.height.replace('px','')/1<=1)scrollDownSub();
	}	
	
	return false;
}



function autoHideMenus()
{
	if(otherDivsToScroll.length>0){
		divToHide = otherDivsToScroll[otherDivsToScroll.length-1];
		parentDivToHide.length=0;
		var obj = divToHide.parentNode.parentNode.parentNode;
		while(obj && obj.tagName=='DIV'){			
			if(obj.id.indexOf('slideDiv')>=0)parentDivToHide.push(obj);
			obj = obj.parentNode.parentNode.parentNode;
		}
		var tmpHeight = (divToHide.style.height.replace('px','')/1 - slideMenuHeightOfCurrentBox);
		if(tmpHeight<0)tmpHeight=0;
		if(slideMenuHeightOfCurrentBox)divToHide.style.height = tmpHeight  + 'px';
		ulToHide = divToHide.getElementsByTagName('UL')[0];
		slideMenuHeightOfCurrentBox = ulToHide.offsetHeight;
		scrollUpMenu();		
	}else{
		slideMenuHeightOfCurrentBox = 0;
		showSubMenu();			
	}
}


function scrollUpMenu()
{

	var height = divToHide.offsetHeight;
	height-=15;
	if(height<0)height=0;
	divToHide.style.height = height + 'px';

	for(var no=0;no<parentDivToHide.length;no++){	
		parentDivToHide[no].style.height = parentDivToHide[no].getElementsByTagName('UL')[0].offsetHeight + 'px';
	}
	if(height>0){
		setTimeout('scrollUpMenu()',5);
	}else{
		divToHide.style.display='none';
		otherDivsToScroll.length = otherDivsToScroll.length-1;
		autoHideMenus();			
	}
}	

function scrollDownSub()
{
	if(divToScroll){			
		var height = divToScroll.offsetHeight/1;
		var offsetMove =Math.min(15,(ulToScroll.offsetHeight - height));
		height = height +offsetMove ;
		divToScroll.style.height = height + 'px';
		
		for(var no=1;no<otherDivsToScroll.length;no++){
			var tmpHeight = otherDivsToScroll[no].offsetHeight/1 + offsetMove;
			otherDivsToScroll[no].style.height = tmpHeight + 'px';
		}			
		if(height<ulToScroll.offsetHeight)setTimeout('scrollDownSub()',5); else {
			divToScroll = false;
			ulToScroll = false;
			if(objectsToExpand.length>0 && initExpandIndex<(objectsToExpand.length-1)){
				initExpandIndex++;
				
				showSubMenu(false,objectsToExpand[initExpandIndex]);
			}
		}
	}
}
	
function initSubItems(inputObj,currentDepth)
{		
	divCounter++;		
	var div = document.createElement('DIV');	// Creating new div		
	div.style.overflow = 'hidden';	
	div.style.position = 'relative';
	div.style.display='none';
	div.style.height = '1px';
	div.id = 'slideDiv' + divCounter;
	div.className = 'slideMenuDiv' + currentDepth;		
	inputObj.parentNode.appendChild(div);	// Appending DIV as child element of <LI> that is parent of input <UL>		
	div.appendChild(inputObj);	// Appending <UL> to the div
	var menuItem = inputObj.getElementsByTagName('LI')[0];
	while(menuItem){
		if(menuItem.tagName=='LI'){
			var aTag = menuItem.getElementsByTagName('A')[0];
			aTag.className='slMenuItem_depth'+currentDepth;	
			var subUl = menuItem.getElementsByTagName('UL');
			if(subUl.length>0){
				initSubItems(subUl[0],currentDepth+1);					
			}
			aTag.onclick = showSubMenu;				
		}			
		menuItem = menuItem.nextSibling;						
	}		
}

function initSlideDownMenu()
{
	dhtmlgoodies_slmenuObj = document.getElementById('dhtmlgoodies_slidedown_menu');
	dhtmlgoodies_slmenuObj.style.visibility='visible';
	var mainUl = dhtmlgoodies_slmenuObj.getElementsByTagName('UL')[0];		
	var mainMenuItem = mainUl.getElementsByTagName('LI')[0];
	mainItemCounter = 1;
	while(mainMenuItem){			
		if(mainMenuItem.tagName=='LI'){
			var aTag = mainMenuItem.getElementsByTagName('A')[0];
			aTag.className='slMenuItem_depth1';	
			var subUl = mainMenuItem.getElementsByTagName('UL');
			if(subUl.length>0){
				mainMenuItem.id = 'mainMenuItem' + mainItemCounter;
				initSubItems(subUl[0],2);
				aTag.onclick = showSubMenu;
				mainItemCounter++;
			}				
		}			
		mainMenuItem = mainMenuItem.nextSibling;	
	}		
	
	if(location.search.indexOf('mainMenuItemToSlide')>=0){
		var items = location.search.split('&');
		for(var no=0;no<items.length;no++){
			if(items[no].indexOf('mainMenuItemToSlide')>=0){
				values = items[no].split('=');
				showSubMenu(false,document.getElementById('mainMenuItem' + values[1]));	
				initMenuIdToExpand = false;				
			}
		}			
	}else if(expandFirstItemAutomatically>0){
		if(document.getElementById('mainMenuItem' + expandFirstItemAutomatically)){
			showSubMenu(false,document.getElementById('mainMenuItem' + expandFirstItemAutomatically));
			initMenuIdToExpand = false;
		}
	}

	if(expandMenuItemByUrl)
	{
		var aTags = dhtmlgoodies_slmenuObj.getElementsByTagName('A');
		for(var no=0;no<aTags.length;no++){
			var hrefToCheckOn = aTags[no].href;				
			if(location.href.indexOf(hrefToCheckOn)>=0 && hrefToCheckOn.indexOf('#')<hrefToCheckOn.length-1){
				initMenuIdToExpand = false;
				var obj = aTags[no].parentNode;
				while(obj && obj.id!='dhtmlgoodies_slidedown_menu'){
					if(obj.tagName=='LI'){							
						var subUl = obj.getElementsByTagName('UL');
						if(initialMenuItemAlwaysExpanded)alwaysExpanedItems[obj.parentNode] = true;
						if(subUl.length>0){								
							objectsToExpand.unshift(obj);
						}
					}
					obj = obj.parentNode;	
				}
				showSubMenu(false,objectsToExpand[0]);
				break;					
			}			
		}
	}
			
	if(initMenuIdToExpand)
	{
		objectsToExpand = new Array();
		var obj = document.getElementById(initMenuIdToExpand)
		while(obj && obj.id!='dhtmlgoodies_slidedown_menu'){
			if(obj.tagName=='LI'){
				var subUl = obj.getElementsByTagName('UL');
				if(initialMenuItemAlwaysExpanded)alwaysExpanedItems[obj.parentNode] = true;
				if(subUl.length>0){						
					objectsToExpand.unshift(obj);
				}
			}
			obj = obj.parentNode;	
		}
		
		showSubMenu(false,objectsToExpand[0]);

	}
	

		
}
	
	</script>
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>

<body>

<div id="sidePanel" style="position:absolute; left:13px; top:0px; width:117px; height:605px; z-index:1"><a href="../maxmerch/index.htm"><img src="../maxmerch/images/mm_logo.jpg" width="117" height="605" border="0"></a></div>
<div id="MainContainer" style="position:absolute; left:133px; top:0px; width:768px; height:600px; z-index:2; background-color: #FFF">
<div id="TopBar" style="position:absolute; left:0px; top:0px; width:768px; height:115px; z-index:3; background-color: #FFF"><img src="../maxmerch/images/place_holder.jpg" width="768" height="150"></div>
<div id="MenuBar" style="position:absolute; left:0px; top:150px; width:170px; height:415px; z-index:4; background-color: #FFF; padding-left:25px; padding-top:10px"> 
  <!-- START OF MENU -->
  <div id="dhtmlgoodies_slidedown_menu"> 
      <ul>
        <li><a href="../xxxxxx/index.htm">Home</a> </li>
        <li><a href="../xxxxxxh/about.htm">About Us</a> 
          <ul>
            <li><a href="#">Who We Are</a></li>
            <li><a href="#">Broadway and Events</a></li>
            <li><a href="#">Promos and Gifts</a></li>
          </ul>
        </li>
        <li><a href="#">Clients and Products</a> 
          <ul>
            <li><a href="#">Broadway</a></li>
            <li><a href="#">Events and Corporations</a></li>
          </ul>
        </li>
        <li><a href="#">Contact Us</a> 
          <ul>
            <li><a href="#">For Info</a></li>
            <li><a href="#">For Employment</a></li>
          </ul>
        </li>
      </ul>
		</div>
		<!-- END OF MENU -->
		<script type="text/javascript">
		initSlideDownMenu();
		</script>
		</div>
<!-- TemplateBeginEditable name="main" -->
  <div id="Contents" style="position:absolute; left:170px; top:150px; width:598px; height:415px; z-index:5; background-color: #FFF; padding-left: 25px; padding-top:20px; padding-right:25px; overflow: hidden;"> 
    Text goes here </div>
<!-- TemplateEndEditable -->
  <div id="bottomBar" style="position:absolute; left:0px; top:565px; width:768px; height:40px; z-index:6; background-color: #FFF; padding-left: 25px; padding-top: 5px"> 
    <font color="#663399" size="1">address and information <a href="mailto:info@xxxxx.com">info@xxxxh.com</a></font> 
  </div>
</div>
</body>
</html>
    Code (markup):
     
    fishbulb, Jun 16, 2008 IP
  8. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #8 
    
dhtmlgoodies_slmenuObj = document.getElementById('dhtmlgoodies_slidedown_menu');
    Code (markup):
    Thats a problem. In sooo many ways, particularly the first word of that line.

    Second problem:

    function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
    Code (markup):
    I am sick of people who use Dreamweaver. It is a bad, bad tool. Uppercase tags and Dreamweaver's Javascript rollovers make me very mad. I must stop posting now. Though I will say if you did any of this in Dreamweaver's design view, its a wonder you expected it to work crossbrowser.
     
    blueparukia, Jun 18, 2008 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #9
    Class happy, script happy, and enough inlined presentation to make bothering with CSS pointless - yeah, I'd say you have problems there. I would ballpark about 6k of your html file serving no real purpose... So my advice would be chuck it and start over with minimalist semantic markup.

    I'd give you an example - but I'm not even sure what that page is supposed to look like. What I am certain of is all of that scripting needs to be pitched in the trash, and you need to ease up on throwing divs and classes at everything - much less all that absolute positioning. On the whole, absolute positioning, unless inside a small fixed dimension container in flow, is a miserable /FAIL/. Using it for major layout elements like that sidebar - complete and total /FAIL/.
     
    deathshadow, Jun 18, 2008 IP