HTML - Div Not Working As Expected - Misunderstood?
Maybe I misunderstand the way that DIV works. Someone on here once suggested that I use DIV to float images on a page. I am doing this on this (and a couple of other) page- http://www.RobotsAndComputers.com/robots/teslacoil.htm with unexpected results. On the page, I alternate between floating the images left and right with the text wrapping around them. The thing is, when I issue the /DIV command, I would think (logically) that any attributes bestowed by the DIV command (ie. float) would be terminated.
That isn't what happens though. Even after the last /DIV command, the text continues to wrap around the image, instead of being placed under it as I would expect/intend. No matter what I do, I cannot get the float to break. Can someone take a look at the code and see what I am doing wrong, or if I am just expecting too much from this command... Thanks... Similar TutorialsHi, I am trying to format this page to look like it has two columns, first column = "Action...", second column = "Key...". The html: HTML Code: <HTML> <HEAD> <TITLE>Test title</TITLE> <LINK REL="STYLESHEET" TYPE="TEXT/CSS" HREF="style.css" /> </HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="#000000"> <P><A NAME="keyboard_shortcuts"></A><B>Using the keyboard</B></P> <P>Some text. </P> <P>The following buttons have keyboard shortcut keys:</P> <DIV ID="fields_left"><B><I>Action...</I></B></DIV> <DIV ID="fields_right"><B><I> Key...</I></B></DIV> <HR> <DIV ID="fields_left"><IMG SRC="img1.bmp" ALT="alttext1" BORDER=0 /></DIV> <DIV ID="fields_right">Esc1</DIV> <DIV ID="fields_left"><IMG SRC="img2.bmp" ALT="alttext2" BORDER=0 /></DIV> <DIV ID="fields_right">Esc2</DIV> <P>Related topics</P> <P>some text....</P> </BODY> </HTML> The css: Code: #fields_left { float:left; padding: 10px; text-align:left; width:30%; } #fields_right{ float:left; padding: 10px; text-align:left; width:70%; } I am trying to have an image and text next it as if it was a table with two columns, but it is not coming out as expected: Does anybody know whats going on here ? I'm on XP, IE 7 My code says that there's an error on line 44 which is the body tag with "onload" in it, i can't seem to find the solution to this error, any advice? <HTML> <HEAD> <TITLE> **** </TITLE> <SCRIPT type="text/javascipt"> var Color= new Array(9); Color[1] = "ff"; Color[2] = "ee"; Color[3] = "dd"; Color[4] = "cc"; Color[5] = "bb"; Color[6] = "aa"; Color[7] = "99"; Color[8] = "88"; Color[9] = "77"; Color[10] = "66"; Color[11] = "55"; Color[12] = "44"; Color[13] = "33"; Color[14] = "22"; Color[15] = "11"; Color[16] = "00"; function fadeIn(where) { if (where >= 1) { document.bgColor="#" + Color[where] +"0000"; where -= 1; setTimeout("fadeIn("+where+")", 15); } else { setTimeout('fadeOut(1)', 15); } } function fadeOut(where) { if (where <=16) { document.bgColor="#" + Color[where] +"0000"; where += 1; setTimeout("fadeOut("+where+")", 15); } else { setTimeout("fadeIn(16)", 15); } } </SCRIPT> </HEAD> <body onLoad="fadeIn(16)"> <p></p> </body> </HTML> Im getting an error in line 44 of my code, my body tag with upload in it. The error says object expected. Any advice? Code: <HTML> <HEAD> <TITLE> **** </TITLE> <SCRIPT type="text/javascipt"> var Color= new Array(9); Color[1] = "ff"; Color[2] = "ee"; Color[3] = "dd"; Color[4] = "cc"; Color[5] = "bb"; Color[6] = "aa"; Color[7] = "99"; Color[8] = "88"; Color[9] = "77"; Color[10] = "66"; Color[11] = "55"; Color[12] = "44"; Color[13] = "33"; Color[14] = "22"; Color[15] = "11"; Color[16] = "00"; function fadeIn(where) { if (where >= 1) { document.bgColor="#" + Color[where] +"0000"; where -= 1; setTimeout("fadeIn("+where+")", 15); } else { setTimeout('fadeOut(1)', 15); } } function fadeOut(where) { if (where <=16) { document.bgColor="#" + Color[where] +"0000"; where += 1; setTimeout("fadeOut("+where+")", 15); } else { setTimeout("fadeIn(16)", 15); } } </SCRIPT> </HEAD> <body onLoad="fadeIn(16)"> <p></p> </body> </HTML> I uploaded an adobe web gallery to my website and it doesn't work because of an object expected error. I believe it may have something to do with the AC_FL_RunContent code, but I'm not sure what to add or take away. Could someone please look at this code and let me know what's wrong? The html file comes up fine until I upload it to my website and try to view it online. Thanks! HTML Code: <!-- saved from url=(0013)about:internet --> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Photoshoot</title> <style> body,html { margin-top:0; margin-left:0; margin-right:0; margin-bottom:0; height: 100%; width: 100%; } </style> <!-- Active Content Workaround Support File --> <script src="resources/AC_RunActiveContent.js" language="javascript"></script> <script language="JavaScript" type="text/javascript"> function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i<vars.length;i++) { var pair = vars[i].split("="); if (pair[0] == variable) { return pair[1]; } } return -1; } </script> <script language="JavaScript" type="text/javascript"> var startImg = getQueryVariable("startImg"); //alert(startImg); </script> <!-- Flash Detection Script Block --> <script language="JavaScript" type="text/javascript"> <!-- // ----------------------------------------------------------------------------- // Globals // Major version of Flash required var requiredMajorVersion = 8; // Minor version of Flash required var requiredMinorVersion = 0; // Minor version of Flash required var requiredRevision = 0; // the version of javascript supported var jsVersion = 1.0; // ----------------------------------------------------------------------------- // --> </script> <script language="VBScript" type="text/vbscript"> <!-- // Visual basic helper required to detect Flash Player ActiveX control version information Function VBGetSwfVer(i) on error resume next Dim swControl, swVersion swVersion = 0 set swControl = CreateObject("ShockwaveFlash.ShockwaveFlash." + CStr(i)) if (IsObject(swControl)) then swVersion = swControl.GetVariable("$version") end if VBGetSwfVer = swVersion End Function // --> </script> <script language="JavaScript1.1" type="text/javascript"> <!-- // Detect Client Browser type var isIE = (navigator.appVersion.indexOf("MSIE") != -1) ? true : false; var isWin = (navigator.appVersion.toLowerCase().indexOf("win") != -1) ? true : false; var isOpera = (navigator.userAgent.indexOf("Opera") != -1) ? true : false; jsVersion = 1.1; // JavaScript helper required to detect Flash Player PlugIn version information function JSGetSwfVer(i){ // NS/Opera version >= 3 check for Flash plugin in plugin array if (navigator.plugins != null && navigator.plugins.length > 0) { if (navigator.plugins["Shockwave Flash 2.0"] || navigator.plugins["Shockwave Flash"]) { var swVer2 = navigator.plugins["Shockwave Flash 2.0"] ? " 2.0" : ""; var flashDescription = navigator.plugins["Shockwave Flash" + swVer2].description; descArray = flashDescription.split(" "); tempArrayMajor = descArray[2].split("."); versionMajor = tempArrayMajor[0]; versionMinor = tempArrayMajor[1]; if ( descArray[3] != "" ) { tempArrayMinor = descArray[3].split("r"); } else { tempArrayMinor = descArray[4].split("r"); } versionRevision = tempArrayMinor[1] > 0 ? tempArrayMinor[1] : 0; flashVer = versionMajor + "." + versionMinor + "." + versionRevision; } else { flashVer = -1; } } // MSN/WebTV 2.6 supports Flash 4 else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.6") != -1) flashVer = 4; // WebTV 2.5 supports Flash 3 else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.5") != -1) flashVer = 3; // older WebTV supports Flash 2 else if (navigator.userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 2; // Can't detect in all other cases else { flashVer = -1; } return flashVer; } // When called with reqMajorVer, reqMinorVer, reqRevision returns true if that version or greater is available function DetectFlashVer(reqMajorVer, reqMinorVer, reqRevision) { reqVer = parseFloat(reqMajorVer + "." + reqRevision); // loop backwards through the versions until we find the newest version for (i=25;i>0;i--) { if (isIE && isWin && !isOpera) { versionStr = VBGetSwfVer(i); } else { versionStr = JSGetSwfVer(i); } if (versionStr == -1 ) { return false; } else if (versionStr != 0) { if(isIE && isWin && !isOpera) { tempArray = versionStr.split(" "); tempString = tempArray[1]; versionArray = tempString .split(","); } else { versionArray = versionStr.split("."); } versionMajor = versionArray[0]; versionMinor = versionArray[1]; versionRevision = versionArray[2]; versionString = versionMajor + "." + versionRevision; // 7.0r24 == 7.24 versionNum = parseFloat(versionString); // is the major.revision >= requested major.revision AND the minor version >= requested minor if ( (versionMajor > reqMajorVer) && (versionNum >= reqVer) ) { return true; } else { return ((versionNum >= reqVer && versionMinor >= reqMinorVer) ? true : false ); } } } } // --> </script> </head> <body><div align="center" style="width:100%; height:100%"> <script language="JavaScript" type="text/javascript"> <!-- // Version check for the Flash Player that has the ability to start Player Product Install (6.0r65) var hasProductInstall = DetectFlashVer(6, 0, 65); // Version check based upon the values entered above in "Globals" var hasReqestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision); // Location visited after installation is complete if installation is required var MMredirectURL = window.location; // Stored value of document title used by the installation process to close the window that started the installation process // This is necessary to remove browser windows that will still be utilizing the older version of the player after installation is complete // DO NOT MODIFY THE FOLLOWING TWO LINES //document.title = document.title.slice(0, 47) + " - Flash Player Installation"; document.title = document.title.slice(0, 47); var MMdoctitle = document.title; // Check to see if a player with Flash Product Install is available and the version does not meet the requirements for playback if ( hasProductInstall && !hasReqestedVersion ) { var productInstallOETags = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"' + 'width="550" height="200"' + 'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">' + '<param name="movie" value="resources/playerProductInstall.swf?MMredirectURL='+MMredirectURL+'&MMplayerType=ActiveX&MMdoctitle='+MMdoctitle+'" />' + '<param name="quality" value="best" /><param name="bgcolor" value="#3A6EA5" />' + '<embed src="resources/playerProductInstall.swf?MMredirectURL='+MMredirectURL+'&MMplayerType=PlugIn" quality="high" bgcolor="#3A6EA5" ' + 'width="550" height="300" name="detectiontest" aligh="middle"' + 'play="true"' + 'loop="false"' + 'quality="best"' + 'allowScriptAccess="sameDomain"' + 'type="application/x-shockwave-flash"' + 'pluginspage="http://www.adobe.com/go/getflashplayer">' + '<\/embed>' + '<\/object>'; document.write(productInstallOETags); // embed the Flash Product Installation SWF } else if (hasReqestedVersion) { // if we've detected an acceptable version AC_FL_RunContent( 'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0', 'flashvars','baseRefUrl=resources/&groupxml=group.xml&stylexml=style.xml&localText=localText.xml&livePreview=false&startImg='+startImg, 'width', '100%', 'height', '100%', 'src', 'resources/gallery', 'quality', 'high', 'pluginspage', 'http://www.adobe.com/go/getflashplayer', 'align', 'middle', 'play', 'true', 'loop', 'true', 'scale', 'showall', 'wmode', 'window', 'devicefont', 'false', 'id', 'gallery', 'bgcolor', '#f7f7f7', 'name', 'gallery', 'menu', 'true', 'allowScriptAccess','sameDomain', 'movie', 'resources/gallery', 'salign', '' ); } else { // flash is too old or we can't detect the plugin var alternateContent = 'This photo gallery requires the Adobe Flash Player.' + '<a href=http://www.adobe.com/go/getflash/>Get the free Flash Player here</a>'; document.write(alternateContent); // insert non-flash content } // --> </script> <noscript> // Provide alternate content for browsers that do not support scripting // or for those that have scripting disabled. Sorry, this photo gallery requires that scripting be enabled on your web browser and that the Adobe Flash Player be installed. <a href="http://www.adobe.com/go/getflash/">Download the Adobe Flash Player</a> </noscript> </div> </body> </html> I've found a website that shows my Steam status every amount of time, just like the rest of other websites. This banner or gamecard should show if i'm online, what i'm playing and other stuff that is in the gamecard. The website has an option for yourself to put your own PNG image as the card's background. I entered the link correctly of the image and after that it gave me the codes to put them wherever i want. The problem is that when i submit the code wherever i want (Forums) the image doesnt show but the code in text itself. The PNG had transparent parts so i tried on a pure black background, didnt work either. Then i noticed the code has some different values/elements from the included images that the website comes with. This is the code of my custom PNG image: Code: http://steamsigs.com/steam.php?id=ik....png&tborder=1 And this is with the default image of the website: Code: http://steamsigs.com/steam.php?id=ik...rmal&tborder=1 I also tried different text borders and options. You can try yourself doing the gamecard he www.steamsigs.com You will need a custom Steam ID url, but you can use mine: ikamikaze15 And if it could be something wrong with the image, here it is: http://i1000.photobucket.com/albums/...ndoGR15/ua.png Thanks for helping. Hi guys, For some reason, in IE8, on product pages (Example) of my ecommerce site, the 'Size Chart' and 'Email to a Friend' popups don't work, and the product image lightbox won't work either. I have turned pop-up blocker off but they still don't work. These popups work in every other browser I have tested in, including IE7. It seems to only be IE8 that is having this problem. Upon looking at the page source, one thing I have noticed that both the 'Size Chart' and 'Email to a Friend' buttons have in common, is that the popups seem (I'm far from an expert) to be 'triggered' by a span element (class="more") within the HTML. For example: Code: <div class="row "> <label >Size: </label> <strong class="fl"><select name="size" id="size" onchange="checkstock(this.value)"><option value="">Select Size</option><option value="S">S</option><option value="M">M</option><option value="L">L</option><option value="XL">XL</option><option value="XXL">XXL</option></select></strong> <span style="text-decoration: underline;" class="size_chart more" title="size_chart1">+ Size Chart</span> <div style="display: none;" class="size_chart1 hide" > <div class="close"></div> <img src="http://www.projectdisobey.com/disobeyclothing/wp-content/themes/eCommerce3/images/size_chart.jpg" alt="" /> </div> <!-- size chart --> </div> Code: <ul class="fav_link"> <li class="print"><a href="#" onclick="window.print();return false;">Print</a> </li> <li class="rss"><a href="http://feeds.feedburner.com/DisobeyClothing">RSS</a> </li> <li class="emailtofriend"><span style="text-decoration: underline;" class="more" title="tellafrnd_div">Email to a Friend</span> </li> <li class="blank"><span id="tellafrnd_success_msg_span"></span></li> <li class="blank"><div style="display: none;" id="tellfrnddiv" class="tellafrnd_div hide"> <iframe src="http://www.projectdisobey.com/disobeyclothing/?page=tellafriend_form&pid=402" style="border: medium none ; width: 547px; height: 558px;" frameborder="0" ></iframe> </div> </li> <li class="share"> <div class="a2a_kit addtoany_list"><a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save"><img src="http://www.projectdisobey.com/disobeyclothing/wp-content/plugins/add-to-any/share_save_171_16.png" width="171" height="16" alt="Share"/></a></div> <script type="text/javascript"><!-- var a2a_config = a2a_config || {}; a2a_config.linkname="Know Your Enemy"; a2a_config.linkurl="http://www.projectdisobey.com/disobeyclothing/?p=402"; a2a_config.color_main = "f3f3e7";a2a_config.color_border = "C0C88A";a2a_config.color_link_text = "332402";a2a_config.color_link_text_hover = "332402";a2a_config.color_bg = "7f6f2"; a2a_config.num_services = 14; //--></script><script type="text/javascript" src="http://static.addtoany.com/menu/page.js"></script> </li> </ul> I have no idea what could be stopping the lightbox from working. Anybody have any suggestions as to what the problem might be (and how I can rectify it)? If you need more info, let me know... Thanks! I have a code for div and the strange thing is that it is working in empty html code but if i put it in an existing html code then it will not work! please help!!! Hi, I'm a self-taught web designer with not a lot of experience and need some help please! This website shows up perfectly in Chrome + Firefox, but it completely fails in IE. http://fparchitectural.ca/beta/ I'm guessing it's a css/div issue. Hopefully it is a simple fix. Please Help. Hey all I have just joined these forums as I am learning HTML and CSS. However the book that I am following does not appear to be working. I have created a custom class in css called "Stewart" and a test page to test it however it does not appear as I have defined. Below is the code for the CSS page Quote: <!-- A CSS style sheet --> body { font-size: 10pt; font-family: Arial; color: black; line-height: 14pt; padding-left: 5pt; padding-right: 5pt; padding-top: 5pt; } h1 { <!-- ALso possible to define different classes see SAM's teach yourself HTML and CSS p59 --> background-color: pink; font-size: 14pt; font-family: Arial; font-weight: 20pt; color: red; } h2 { font-size: 12pt; font-family: Arial; font-weight: 20pt; color: red; } h3.silly {font: 36pt Comic Sans; } h3.serious {font: 8pt Arial; } p.subheader { font-weight: bold; color: green; } <!-- Custom Class, use the div heading to create a custom class --> DIV.stewart {font-size: 30pt; color: red; font-style: italic; } And here is the code for the test page Quote: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <link rel="stylesheet" type="text/css" href="styles.css" /> <!--The above is a link to the css file in this directory --> <title>CSS Test sheet</title> </head> <body> <h1> This is a test sheet for my css, it might possibly look different every time. </h1> <h3 class="silly"> Silly</h3> <p> The above text is silly class of heading 3</p> <h3 class="serious">serious</h3> <p> The above text is serious class of heading 3 </P> <p> <div class="stewart">This is my own custom style</div> </p> </body> </html> Can someone please explain where I am going wrong. I am using IE on WIndows 7. Hi Guys, I have this link: <a href="programs/XMLPoster.exe">programs/XMLPoster.exe</a> It works when i view it in Firefox, but gives me an error when i click it in i.e? Do you know why this is happening? Ideally i want to be able to launch the .exe file and not just ask the user if they want to save it? Thanks, Chloe ~X~ i have installed IIS 5.1 in my XP machine but when i type http://localhost it shows a blank page. I'm new to this forum and was not quite sure where to post this but I am having some trouble putting this code I made into my myspace and making it work. It shows up correctly on the normal browser but when I go to add it to my page it doesn't work. Any help would be appreciated. HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN"> <html> <head> <style type="text/css"> #picturebox { background: #transparent; background-image:url('http://img231.imageshack.us/img231/6485/tvphotosmallergs4.jpg'); background-repeat: no-repeat; position: absolute; top: 0px; left: 0px; width: 800px; height: 631px; } #moviebox { background: #FFFFFF; background-repeat: no-repeat; position: absolute; top: 120px; left: 168px; width: 400px; height: 300px; } </style> </head> <body> <div id="picturebox"> <div id="moviebox"> <object type="application/x-shockwave-flash" width="400" height="300" data="http://www.vimeo.com/moogaloop.swf?clip_id=721534&server=www.vimeo.com&fullscreen=1&show_title=1&show_byline=1&show_portrait=0&color="> <param name="quality" value="best" /> <param name="allowfullscreen" value="true" /> <param name="scale" value="showAll" /> <param name="movie" value="http://www.vimeo.com/moogaloop.swf?clip_id=721534&server=www.vimeo.com&fullscreen=1&show_title=1&show_byline=1&show_portrait=0&color=" /></object> </div> </div> </body> </html> Thank you! I'm new to all this. I have designed a Form (see attached ZIP file) that has many TEXT boxes. When the user clicks "Submit" I want to capture the info in the Text boxes and e-mail the results to me. I have no idea how to do this. Can you HELP? Another question: How can I verify data in the text box? For Example--the text box of Quantity, must be numeric. The other text boxes in the table must contain the letter "X" or be blank. The concept of the form I'm trying to do is like an "Order Form". Maybe there is an easier way to do this????? Any help on your part would be most welcome. Some idea of my background--I did some VB programming so I know "logic". I don't know any of the Web languages such as ASP, Java, etc. Thanks, Sam hi i have this code done up it seems to work internally but does not work externally when i send it to someone else. any ideas why this is here is the code Code: <body> <form action="mailto:joebloggs@gmil.com" method="POST" enctype="multipart/form-data" name="EmailTestForm"> <img height="70" border="0" width="400" usemap="#locations" src="http://www.harvest-financial.ie/Contact_Us/upload/Image/harvestlogo.jpg" </br> <br> <br> <INPUT type="radio" name="Answer" value="Yes I am interested in a meeting. Please contact me to arrange a meeting">Yes I am interested in a meeting. Please contact me to arrange a meeting<BR> <INPUT type="radio" name="Answer" value="No I do not require a meeting"> No I do not require a meeting<BR> <INPUT type="radio" name="Answer" value="Yes I am interested in a meeting but at a later date. Please contact me in a months time">Yes I am interested in a meeting but at a later date. Please contact me in a months time<BR> </br> </br> </br> <div align="center"><input type="submit" value="Submit"></div> </body> http://insomnia.eternal-glory.org/2.0/index.php I'm trying to imitate a Mac computer, Tiger. Looks great in FF/Safari, but in IE7, the dock refuses to center. I have: Code: body { text-align:center;} in my CSS, that's supposed to fix the margin-left/-right:auto; bug for IE. But... it's not? Help, please? Doctype is Strict, and I have margin-left/-right set to auto. Thanks in advance, Michele http://www.wishwishwish.net Okay, so i created this website by modifying the default wordpress theme, and using my own image as a background, which is defined in the css. I originally wanted to use an imagemap, so I used this tutorial to help me create one, with the css in the style.css, and html in header.php this works perfectly in firefox, but not at all in IE, the links do not appear. this might be happening in other browswers as well, what's wrong? is it the method i've used for creating the floating image map? Hi all, Just wondering if someone may shed some light on why SSI would work for my php pages but not my HTML ones? .htaccess root/include (I don't want to be setting this type of access across the site so it sits at the .shtml location): Options +Includes AddHandler server-parsed .shtml PHP (works): <?php include("../include/copyright.shtml"); ?> HTML (fails): <!--#include virtual="../include/copyright.shtml"--> Trying to load the HTML file with the include will through the following error: [an error occurred while processing this directive] Here is the layout: PHP: root/common/myPage.php HTML: root/common/myPage.html SSI: root/include/copyright.shtml If I move the copyright.shtml to the root location or put it in the same location as the files I'm trying to serve the include to, it works fine. Obviously with the site structure you want to keep all your .shtml files together so having them all stored in a common area is far more practical. Just not sure why HTML is having such a problem targeting a dir! Any help would be greatly appreciated. Thanks all! Cheers, Nick. Hello all, I was wondering if anyone can help me, I a site look exactly right in IE7 but Firefox doesn't work... I'm guessing this will be the same as Safari. The site has been uploaded to here http://www.chappo.co.uk/years_ahead Please can someone show me where I'm going wrong... Thanks all!! Jason |