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):
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):
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).
Gah. Sounds like MS alright 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.
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):
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):
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):
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.
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/.