Jump to content

Search the Community

Showing results for tags 'display'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 25 results

  1. What happens if I use style.display=""; let's say on some rows <tr> of a table. What is the output if I'm not using defined Property values but instead leaving the space empty?
  2. Hi all, how are we? I'm have issues with a font on my website, i've only just start here >>> https://crtest1.co.uk/ I used font squirrel to convert my font, i've done this many times before, never seen the issue i'm having... @font-face{ font-family: 'angelfaceregular'; src: url('/wp-content/uploads/2020/fonts/angelface-3-webfont.eot'); src: url('/wp-content/uploads/2020/fonts/angelface-3-webfont.eot?#iefix') format('embedded-opentype'), url('/wp-content/uploads/2020/fonts/angelface-3-webfont.woff') format('woff'), url('/wp-content/uploads/2020/fonts/angelface-3-webfont.ttf') format('truetype'), url('/wp-content/uploads/2020/fonts/angelface-3-webfont.svg') format('svg'); } h1 { font-family: 'angelfaceregular'; } it displays fine in firefox and safari the problem is some of the letters are displayed as only outlines in chrome. can anyone help me please? thank you in advance, and stay safe!
  3. hi forom piople i have a big problem that i dont succsed to solved for long time Setup description : i used with the NodeMcu ESP8266 as a web server Problem : font are not display on android but can be shwon on iPhone and regular web brouser all my knowlge on HTML is 80% from this site please find below the code const char homePage[] PROGMEM = R"=====( <html> <head> <title> Engineering Project </title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://kit.fontawesome.com/a076d05399.js"></script> <style> body{ margin-top: 10px; font-family: Times New Roman; background-color:#333333; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } h1{ font-size: 3.5em; /* 40px/16=2.5em */ margin: 0px auto 10px; } .buttonSetup { display: block; width: 130px; background-color: 2c3e50 ; border:4px solid #DAA520; color: #DAA520 ; padding: 30px 30px; text-decoration: none; font-size: 50px; margin: 0px auto 50px; cursor: pointer; border-radius: 10px; } .Cut { display: block; width: 130px; background-color: 2c3e50 ; border:4px solid #DAA520; color: #DAA520 ; padding: 30px 30px; text-decoration: none; font-size: 50px; margin: 0px auto 1px; cursor: pointer; border-radius: 10px; } .header_cut { background-color: #333333; border-width: 4px; border-color: yellow; color: #f2f2f2; padding: 1px 1px; display: inline; } .button { display: block; width: 180px; background-color: 333333 ; border:4px solid #DAA520; color: #DAA520 ; padding: 13px 30px; text-decoration: none; font-size: 50px; margin: 0px auto 5px; cursor: pointer; border-radius: 4px; } .header_button { background-color: ; border-width: 7px; border-color: yellow; color: #f2f2f2; padding: 15px 10px; } .Cut { background-color: #333333; color: white; border-width: 7px; border-color: #cccccc; } .buttonSetup { background-color: #333333; color: white; border-width: 7px; border-color: #cccccc; } .button-off:active {background-color: #2c3e50;} .my_button:active {background-color: white;} </style> </head> <body> <center> <h1 class="header_button" > &nbsp; Engineering Project &nbsp; </h1> <a class="buttonSetup my_button" href="/calibration"> <i class="fas fa-users-cog"></i> <i class="fas fa-cog fa-spin"></i></a> <a class="Cut my_button" href="/cut_start" > <i class="fas fa-fan fa-spin"></i> </a> <a class="header_cut my_button" href="/cut_start" > Start to Cat </a> </center> </body> </html>
  4. I have spent many hours (over many days) trying to find out how to align a <script></script> within HTML5 specifically one that creates a canvas using . There is a page referring to centering images... https://www.w3schools.com/howto/howto_css_image_center.asp useless! There is a page referring to CSS Layout.... https://www.w3schools.com/css/css_align.asp useless! And heres another one on Canvas reference.... https://www.w3schools.com/tags/ref_canvas.asp useless! https://www.w3schools.com/tags/tag_canvas.asp useless! https://www.w3schools.com/tags/tag_script.asp useless! https://www.w3schools.com/html/html5_canvas.asp also useless! This is so basic a feature you would think that there would be examples of this in some of your examples. but no! Here is the code I have been trying to center.....as you can see I have tried quite a few different methods. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <style> canvas { border:1px solid #d3d3d3; background-color: #f1f1f1; margin: auto; text-align: center; object-position:center } .center { display: block; margin-left: auto; margin-right: auto; width: 50%; } </style> </head> <body onload="startGame()"> <div class="center"> <script> var myGamePiece; function startGame() { myGamePiece = new component(30, 30, "red", 10, 120); myGameArea.start(); } var myGameArea = { canvas : document.createElement("canvas"), start : function() { this.canvas.width = 800; this.canvas.height = 600; this.canvas.x = 100; this.canvas.y = 50; this.canvas.style.cursor = "none"; //hide the original cursor this.context = this.canvas.getContext("2d"); document.body.insertBefore(this.canvas, document.body.childNodes[0]); this.interval = setInterval(updateGameArea, 20); window.addEventListener('mousemove', function (e) { myGameArea.x = e.pageX; myGameArea.y = e.pageY; }) }, clear : function(){ this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); } } function component(width, height, color, x, y) { this.width = width; this.height = height; this.speedX = 0; this.speedY = 0; this.x = x; this.y = y; this.update = function() { ctx = myGameArea.context; ctx.fillStyle = color; ctx.fillRect(this.x, this.y, this.width, this.height); } } function updateGameArea() { myGameArea.clear(); if (myGameArea.x && myGameArea.y) { myGamePiece.x = myGameArea.x; myGamePiece.y = myGameArea.y; } myGamePiece.update(); } </script> </div> <p>Move the cursor inside the canvas to move the red square.</p> </body> </html> Please can you place more references to alignment as this issue has become somewhat annoying considering how easy this is in p5 javascript for instance. In p5 its - var canvas = createCanvas(1000, 350); canvas.position(x,y); So please make some kind of reference to centering js and <script> in some of the other pages using the term center, like <center> (yes I know its deprecated - but what are the alternatives?) as the search for this info is rather long. Thankyou in advance.
  5. BACKGROUND: I have an AJAX call that pulls in an HTML file. The file is a template that is populated with variables whose values are obtained from a MySQL database before the template is called. One of the values that I obtain from the database is important to a script associated with the AJAX call. This value should not appear, however, in the browser window when the AJAX call has been completed. Now, I could easily hide the value of this variable with the CSS display property, but would it still be available to the aforementioned script? QUESTION: Is a hidden element still available for processing by other elements and script? Roddy
  6. So I have multiple divs each containing a list and the headers in each div, above the list are all at different y places. The lists with the most info have higher y positions and therefore are higher up on the page. How do I make it so the headers are in line with eachother? (If you copy this code, and add a heading and stuff you can open it up in firefox and see what im talking about) <style> h2{ text-decoration: underline; margin-top: -30px; } .anke{ display: inline-block; margin-left: 60px; font-family: corsiva; font-size: 20px; } .father{ display: inline-block; margin-left: 120px; font-family: corsiva; font-size: 20px; } .mother{ display: inline-block; margin-left: 120px; font-family: corsiva; font-size: 20px; } .brother{ display: inline-block; margin-left: 120px; font-family: corsiva; font-size: 20px; } .sister{ display: inline-block; margin-left: 120px; font-family: corsiva; font-size: 20px; } .others{ display: inline-block; margin-top: 20px; margin-left: 120px; font-family: corsiva; font-size: 20px; } </style> <body> <div class = 'anke'> <h2>Anke</h2> <ul> <li>Main Character</li> <li>Doesn't fit in with family</li> <li>Isn't abused</li> <li>Isn't loved</li> <li>Loves to play volleyball</li> <li>Is smart</li> </ul> </div> <div class = 'father'> <h2>Father</h2> <ul> <li>Abusive</li> <li>Moody</li> <li>Mood Swings</li> <li>Loves his wife</li> <li>Often drunk</li> </ul> </div> <div class = 'mother'> <h2>Mother</h2> <ul> <li>Sweet Mother</li> <li>Loves her children</li> <li>Takes care of husband</li> <li>Secretly scared</li> </ul> </div> <div class = 'sister'> <h2>Sister</h2> <ul> <li>Name is Yaicha</li> <li>Older Sister</li> <li>Likes makeup</li> <li>Constantly abused</li> </ul> </div> <div class = 'brother'> <h2>Brother</h2> <ul> <li>Name is Darren</li> <li>Older Brother</li> <li>Constantly abused</li> </ul> </div> <div class = 'others'> <h2>Other Characters</h2> <ol> <li>Angelina <ul> <li>Annoying 'friend' of Anke</li> <li>Very innocent</li> <li>Doesn't have a dad</li> <li>Likes Anke's dad (as a father)</li> </ul> </li> </ol> </div> </body>
  7. Hi everyone, Can anyone tell me why my div is not auto expanding to fit its contents, even though I set "width: auto;" ? Also, why does my "display: inline;" not work? You can see what I mean here: http://www.jasonwangart2.blogspot.ca/ Basically, I am trying to make it so that all the elements inside the div-with-thick-red-dashed-border will appear in one horizontal row. Question 1: I set the div-with-thick-red-dashed-border to "width: auto;", but the inner divs are wrapping for some reason, and the div-with-thick-red-dashed-border is not expanding horizontally to contain more divs. Question 2: Also, I set the div-with-thick-orange-dashed-border, the div-with-thick-green-dashed-border, and the div-with-thick-blue-dashed-border to "display: inline;", but they are wrapping and breaking up. Does anyone know the answers to the 2 above questions? My goal is to make all the elements inside the div-with-thick-red-dashed-border line up in one horizontal arrangement. The code is below. Thank you very much, Jason <!doctype html> <style>/* HEADER OUTER BOX */ .jw-1-header-box { border: 1px dashed red; width:100%; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; color: rgba(0,0,0,1); }/* GRAPHICS */ .jw-2-graphics-bar { border: 1px dashed purple; width: 100%; height: 0px; overflow: visible; } .jw-3-circle-large { position: relative; left: 10px; top: -200px; width: 270px; height: 270px; background-color: rgba(180,200,255,1); border-radius: 135px; } /* NAVIGATION */ .jw-2-nav-bar { border: 1px dashed cyan; width: 100%; overflow: hidden; } .jw-3-nav-bar-left-section { border: 1px dashed maroon; display: inline; float: left; } .jw-3-nav-bar-right-section { border: 5px dashed red; width: auto; display: inline; float: right; } /* HOME BUTTON */ .jw-3-button-home a:link, .jw-3-button-home a:visited { border: 1px dashed purple; position: relative; z-index: 1; font-size: 41px; color: rgba(80,100,155,1); } .jw-3-button-home a:hover, .jw-3-button-home a:active { color: rgba(0,0,0,1); text-decoration: none; /* to remove underline on hover */ } /* PAGES */ .jw-3-button-pages a:link, .jw-3-button-pages a:visited { border: 5px dotted orange; margin: 0px 10px 0px 10px; display: inline; font-size: 18px; color: rgba(80,100,155,1); } .jw-3-button-pages a:hover, .jw-3-button-pages a:active { color: rgba(0,0,0,1); text-decoration: none; /* to remove underline on hover */ } .jw-3-social-text-box { border: 5px dotted green; margin: 0px 10px 0px 10px; display: inline; font-size: 18px; color: rgba(0,0,0,0.7); } .jw-3-social-icon-box { border: 5px dotted blue; margin: 0px 10px 0px 10px; display: inline; font-size: 16px; /* need this to align block-1 */ } .jw-opacity-link a:link, .jw-opacity-link a:visited { border: 0px solid black; width: 30px; opacity: 0.45; } .jw-opacity-link a:hover, .jw-opacity-link a:active { border: 0px solid black; text-decoration: none; /* to remove the little line */ opacity: 1.0; } img /* need this to align icon image */ { vertical-align:top; /* top or bottom */ }/* DIVIDER */ .jw-2-divider-1 { border: 1px dashed violet; width: 100%; padding: 50px 0px 0px 0px; text-align: center; } .jw-3-circle-small { display: inline-block; width: 10px; height: 10px; background-color: rgba(171,225,250,1); border-radius: 5px; margin: 0px 50px 0px 50px; } /* UPDATE */ .jw-2-update-bar { border: 1px dashed pink; width:100%; text-align: center; } .jw-3-update-text-box { border: 1px dashed turquoise; font-size: 16px; color: rgba(0,0,0,1); }</style> <!-- HTML --><!-- MAIN BOX --> <div class="jw-1-header-box"><!-- GRPHICS --> <div class="jw-2-graphics-bar"> <div class="jw-3-circle-large"></div> </div><!-- NAVIGATION --> <div class="jw-2-nav-bar"> <div class="jw-3-nav-bar-left-section"> <div class="jw-3-button-home"> <a href="http://www.jasonwangart.com">Jason Wang Art</a> </div> </div> <div class="jw-3-nav-bar-right-section"> <div class="jw-3-button-pages"> <a href="http://www.jasonwangart.com/search/label/illustration">illustrations</a> <a href="http://www.jasonwangart.com/search/label/tutorial">tutorials</a> <a href="http://www.jasonwangart.com/search/label/reference">references</a> <a href="http://www.jasonwangart.com/p/about-web.html">about & contact</a> </div> <div class="jw-3-social-text-box"> Follow me on </div> <div class="jw-3-social-icon-box"> <div class="jw-opacity-link"> <a href="http://www.facebook.com/jasonwangart"> <img src="http://2.bp.blogspot.com/-GLgaU-VPshc/U4N08qWLn1I/AAAAAAAAAZ8/--FxtOA2W8g/s1600/LOGO+facebook+50+c.png" width="24px" height="24px" alt="facebook"/> </a> </div> </div> </div> </div> <!-- DIVIDER --> <div class="jw-2-divider-1"> <div class="jw-3-circle-small"></div> <div class="jw-3-circle-small"></div> <div class="jw-3-circle-small"></div> </div><!-- UPDATE --> <div class="jw-2-update-bar"> <div class="jw-3-update-text-box"> Berry Season 9 coming soon! </div> </div> </div> </!doctype>
  8. As you can see by the screenshot I have an unwanted horizontal scroll bar. The styles are below: #container { width: 100%; background: #fff; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; } #header { background: #fff; padding: 20px; height: 1%; } .header_right { background-color: #fff; float: right; height: 2%; display: inline; margin-bottom: 0px; } #header h1 { margin: 0; } #navigation { float: left; width: 100%; background: #333; } #navigation ul { margin: 0; padding: 0; } #navigation ul li { list-style-type: none; display: inline; } #navigation li a { display: block; float: left; padding: 5px 10px; color: #fff; text-decoration: none; border-right: 1px solid #fff; } #navigation li a:hover { background: #383; } #topspace { clear: both; background:#fff; text-align: right; padding: 10px; height: .25%; } #bottomspace { clear: both; background:#fff; text-align: left; padding: 10px; height: 0.15%; } /*Flyout CSS menu */ #flyout_menu { font-weight: 600; width: 200px; float: left; } #flyout_menu ul, li { list-style: none; margin: 0; padding: 0; } #flyout_menu ul li.hover, #flyout_menu ul li:hover { position: relative; z-index: 599; } #flyout_menu ul ul{ visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; } #flyout_menu ul li:hover > ul { visibility: visible; } #flyout_menu ul ul { top: 0; left: 100%; } #flyout_menu span, #flyout_menu a { display: inline-block; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-decoration: none; } #flyout_menu li { background-color: #333333; } #flyout_menu li:hover, #flyout_menu li.active { background-color: #666666; } #flyout_menu a { color: #FFF; line-height: 160%; padding: 16px 8px 16px 28px; width: 164px; } #flyout_menu ul ul li { background: #006C6C; border-bottom: 1px solid #007171; } #flyout_menu ul ul li:hover { background-color: #999999; } /* end of flyout menu */ #content-container1 { float: left; width: 100%; background: #fff url(/wp-content/uploads/layout-three-liquid-background1.gif) repeat-y 20% 0; } #content-container2 { float: left; width: 100%; background: url(/wp-content/uploads/layout-three-liquid-background2.gif) repeat-y 80% 0; } #section-navigation { float: left; width: 16%; padding: 20px 0; margin: 0 2%; display: inline; } #section-navigation ul { margin: 0; padding: 0; } #section-navigation ul li { margin: 0 0 1em; padding: 0; list-style-type: none; } #content { float: right; width: 56%; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0%; padding-top: 20px; padding-right: 25%; padding-bottom: 20px; padding-left: 0%; } #content h2 { margin: 0; font-family: Verdana, Arial, Helvetica, sans-serif; text-align: center; color: #000066; } #aside { float: right; width: 16%; padding: 20px 0; margin: 0 2% 0 0; display: inline; } #aside h3 { margin: 0; } #footer { clear: both; background: #333; text-align: right; padding: 7px; height: 1%; color: #FFFFFF; } .video { background-color: #0066CC; text-align: center; } p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; font-style: normal; line-height: 1.25em; font-weight: normal; } Thank you in advance
  9. So I'm a newb coder, just learned CSS in order to build a site for the music venue I work at. I got everything how I want it, I just can't get the entire page to center as the window enlarges, on bigger displays. I've got everything in a div id="mainbox", thinking that would then be able to be centered. But my fixed header always stays to the left side of the screen. I gave up and just left everything left justified, but it's been bugging me and I think would be an improvement to the site. http://thedelancey.com I'm open to suggestions and looking for advice. This site provided a lot of help when googling CSS questions, so I thought I'd join and ask one myself. Cheers, Andre
  10. The documentation states that the default for the css property display is inline. When i remove 'p {display:inline}' in the tryit editor here: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_display_inline the display changes. So, inline is not the default value for display.
  11. hi friend i am used the java script to display the currency of Iraqi dinars from this xml file http://www.xe.com/datafeed/samples/sample-xml-usd.xml and i used this code <script>if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); }else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }xmlhttp.open("GET","http://www.xe.com/datafeed/samples/sample-xml-usd.xml",false);xmlhttp.send();xmlDoc=xmlhttp.responseXML; currency=xmlDoc.getElementsByTagName("crate")[65].childNodes[0].nodeValue;document.write(currency);</script> but that is not work and i don't know why? please tell me what is my mistakes ... help me
  12. torsuntsu


    Hello,i have a problem with the css rule display: flex. Well to be honest, the problem is with the Safari browser. Every other browser displays the page as i intend it to display, but with Safari there´s a problem. I have a container with the class of promo that holds tree colomns with the class of coluna. The CSS is as fallows: .conteudo .promo { max-width: 100%; display:flex; display:-webkit-flex; flex-flow:row wrap; -webkit-flex-flow:row wrap; justify-content:center; } .conteudo .promo .coluna{ -moz-box-sizing:border-box; -o-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; max-width: 32%; padding: 5px; margin: 5px; display:flex; display:-webkit-flex; flex-flow:column; -webkit-flex-flow:column; } Is there anything i´m doing wrong because only in Safari the page isn´t displayed as it should.I´d really need some help. Please!!!!The page is on: www.sistemagestorconteudos.net/Alfaccop/Sitio8 Torsuntsu
  13. etsted

    displaying images

    this is my image code. Is there a way for me to make sure that all of it are displayed on the browser? <html> <body> <form action="index.php" method="POST" enctype="multipart/form-data"> <input type="file" name="file" /><br /> <input type="submit" name="submit" /> </form> <?php include "connect.php"; if(isset($_POST["submit"])) { $loc = "bilder/"; if(($_FILES["file"]["type"] == "image/png") || ($_FILES["file"]["type"] == "image/gif") || ($_FILES["file"]["type"] == "image/jpeg") || ($_FILES["file"]["type"] == "image/jpg")) { $file = explode(".", $_FILES['file']['name']); mysql_query("INSERT INTO bilder VALUES('','".$file[0]."', '".$file[1]."')") or die(mysql_error()); $id = mysql_insert_id(); $newname = $id.$file[1]; $path = "$loc$newname"; move_uploaded_file($_FILES['file']['tmp_name'], $path); echo "du har lastet opp et bilde. klikk her <a href='$path'>klikk</a>"; } else { echo "invalid file"; } } ?> </body> </html>
  14. media="all".wp-core-ui .button, .wp-core-ui .button-primary, .wp-core-ui .button-secondary { <a href="#" id="insert-media-button" class="button insert-media add_media" data-editor="pv_seller_info" title="Add Media"><span class="wp-media-buttons-icon"></span> Add Media</a> Hello, I need some css help beyond my knowledge. I'm using wordpress, woocommerce and matt's product vendor. I can add custom css however I can't get the correct display none. There is a add media button I want to hide for my vendors without hiding all media buttons. Using chrome inspect element, I can find is the above codes. Any idea what the display none codes would be? Thank you in advanceKimberly
  15. Hello! I have posted about this topic on Stack Overflow, but the responses I get seem to be a tad above my head, and I think they get impatient with my rudimentary knowledge. I'd like to post my question here, as a student and see if I can get an answer: What I want is to toggel two different passages one in French and one in English from hidden to visible. Here's the blog entry I'm talking about; http://techno-french.com/learning-french-online-free/learn-french-with-mouse-trap-dictee I would like to separately hide or show either the French or the English passage. Here's what the suggesion was at Stack Overflow: <!DOCTYPE html><html><head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><script>$(document).ready(function(){$("#hide").click(function(){$("p").hide();});$("#show").click(function(){$("p").show();});});</script></head><body><p style="display:none">If you click on the "Hide" button, I will disappear.</p><button id="hide">Hide</button><button id="show">Show</button></body></html> But this either hides or shows BOTH passages. How can I toggle them on or off INDEPENDENTLY? Any help would be appreciated. Barry
  16. fikiwan

    display datetime

    hello .... anyone here ...I try display datetime look the pic: why is the date that appears not the same as my computer thank regar
  17. Hello,I'm experiencing a few problems with my CSS.i currently have;#search { width: 300px;height: auto;color: #FFF;margin-left: 30px;display: inline-block;}#bar {margin-left: -15px;margin-right: -15px;margin-top: -12px;width: 110%;height: 50px;background-color: #000;position: fixed;border-radius: 3px;padding-left: 15px;padding-right: 15px;padding-top: 12px;}#title {width: 200px;height: auto;margin-top: -10px;margin-left: 20px;background-color:#000;opacity: 0.5;border-radius: 2px;color: #FFF;} and HTML wise;<div id="bar"><div id="title"><h1 color="#FFF">PitchIT</h1></div><div id="search">Search Here</div></div> However,I get the 'PitchIT' text on the line,and the 'Search here' is on the line below, despite my display: inline; Any help?
  18. Hi all, I'm new to JavaScript and I'm really stuck on something for a project that is probably easy to resolve but I can't seem to figure out after many trial and errors! I'm trying to get ALL of the onfocus events to work for each input field. For example, I want to create a div for the instructional message to appear whenever you click on the text field. It'll be much appreciated if anyone can help! I'm using this code but it only works for the first text field I click on and not the rest of the other text fields: function init(){ document.querySelector("#fEmail").onfocus = Einstructions;document.querySelector("#fName").onfocus = Ninstructions;document.querySelector("#fAddress1").onfocus = Ainstructions;} //function for instructions on the email text fieldfunction Einstructions(){ //select any message divs that might be where we don't want them, and destroy themmsgs = document.querySelectorAll(".DivMsg");for(var i=0;i<msgs.length;i++){ //ask the parent node of each message div to destory the message divmsgs[i].parentNode.removeChlid(msgs[i]);} var div = document.createElement("div");div.className = "DivMsg";div.innerHTML = "Please enter your e-mail address (example: john@blah.com)."; //append the div to the page, inside of the parent of the current form elementthis.parentNode.appendChild(div); } //function for instructions on the name text fieldfunction Ninstructions(){ //select any message divs that might be where we don't want them, and destroy themmsgs = document.querySelectorAll(".DivMsg");for(var i=0;i<msgs.length;i++){ msgs[i].parentNode.removeChlid(msgs[i]);}var div = document.createElement("div");div.className = "DivMsg";div.innerHTML = "Please enter your full name."; //append the div to the page, inside of the parent of the current form elementthis.parentNode.appendChild(div); }//function for instructions on the address text field function Ainstructions(){ //select any message divs that might be where we don't want them, and destroy themmsgs = document.querySelectorAll(".DivMsg");for(var i=0;i<msgs.length;i++){//ask the parent node of each message div to destory the message divmsgs[i].parentNode.removeChlid(msgs[i]);} var div = document.createElement("div");div.className = "DivMsg";div.innerHTML = "Please enter your full primary address."; //append the div to the page, inside of the parent of the current form elementthis.parentNode.appendChild(div); }
  19. I am trying to fix a problem that only occurs in IE 7 (and probably 6). View my page here with browser mode in IE7 (or view the screenshot I have attached) and you will see what I mean: http://houserepublicans.wa.gov/brad-klippert/. The hyperlinks are overlapping in some places, but not all. In my main stylesheet, I have a {display:inline !important;} It is the very last rule. While this worked to fix the problem in other browsers/versions, it doesn't for IE 7. I have spent a ridiculous amount of time with Google searching, to no avail. The biggest recommendation out there (and I think it was mostly if you're trying to use display:inline-block) was to add: zoom: 1; *display: inline; to my declaration. This merely makes my links dissapear altogether. I would appreciate any thoughts/ideas/links/suggestions...at my wits' end.I thought I could just ignore IE7, because it's nearly 3 versions old now, but unfortunately the agency I work for has "compatibility view" as a default selected on all our computers, as well as IE as the default browser. So people see our brand new beautiful site and think it's ugly.Thank you!!
  20. PGCoder

    Form Style

    Dear W3School- Community, I have a problem with a form style. My form should fit in light blue box as you can see on the screenshot. The id tag is following: #register-form .fieldgroup { display: block; width: 340px;} If I change the display property to "inline-block" I achieve my concern but the form changed the position to the right and isn't centered anymore!Do I need other properties? I would appreciate a reply,PGCoder error.tiff
  21. <div><form name="queries" style="display: table;"><div style="display: table-cell; width: 250px; height: 200px;"><input type="checkbox" name="libraries" value="Lib1" />Lib1<input type="checkbox" name="libraries" value="Lib2" />Lib2<input type="checkbox" name="libraries" value="Lib3" />Lib3<input type="checkbox" name="libraries" value="Lib4" />Lib4<br /><input type="checkbox" name="items" value="title" />Title<input type="checkbox" name="items" value="barcode" />Barcode</div><div style="display:table-cell; width: 100px; height: 200px;"><input type="input" name="query" value="" /></div></form></div> Any IE8- (in my case IE7) fix for not displaying the table-cells properly?
  22. I am new in the foray into HTML and am attempting to create a page, but as far as the page goes I always have issues with my navigation barIs this a result of bad coding and markup? My HTML5 does validate, so does my CSS. When I set the li to float left to create a vertical bar the entire bar dissapears off the screen not to be found anywhere...HTML5 code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Homepage</title> <meta name="description" content="fromthericefields, blog, home" /> <meta name="author" content="Joseph Davies" /> <link rel="stylesheet" type="text/css" href="header.css" /> </head> <body> <header id="mainheader"> <hgroup> <h1>fromthericefields</h1> <h2>Death and life are in the power of the tounge, and those loving it eat it's fruit</h2> <h3>Proverbs 18:21;</h3> </hgroup> <nav> <ul> <li><a href="signin.html">Sign in</a></li> <li>|</li> <li><a href="register.html">Register</a></li> </ul> </nav> </header> <nav id="mainnav"> <ul> <li><a href="index.html">Home</a></li> <li><a href="index.html">Blog</a></li> <li><a href="index.html">Gallery</a></li> <li><a href="index.html">About</a></li> <li><a href="index.html">Contact</a></li> </ul> </nav> <section> <article> <h4>Setting up fromthericefields:</h4> <h5>Posted on 10/5/12</h5> </article> </section> <aside> <blockquote> </blockquote> </aside> </body> </html> The CSS: body { } #mainheader { background: blue; margin-top: -25px; margin-left: auto; margin-right: auto; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; height: 200px; width: 1000px; } #mainheader hgroup { padding-top: 10px; width: 1000px; } #mainheader h1 { font-style: italic; color: #ffffff; text-shadow: 5px 5px 5px #000000; font-size: 40px; } #mainheader h2 { font-style: oblique; font-size: 20px; color: #FF0000; margin-left: 20px; margin-top: -20px; } #mainheader h3 { font-family: monospace; font-size: large; color: #AAAAAA; margin-left: 600px; margin-top: -10px; } #mainheader nav { margin-left: 810px; margin-top: -130px; } #mainheader ul { list-style-type: none; } #mainheader li { text-align: center; display: inline; color: white; } #mainheader a { text-decoration: none; color: white; } /*Main Navagation Bar*/ #mainnav { width: 900px; background: red; border-bottom-left-radius: 25px; border-bottom-right-radius:25px; margin-left: auto; margin-right: auto; } #mainnav ul { list-style-type: none; margin-left: -2.5em; } [b] #mainnav li { display: inline; border: solid; }[/b] #mainnav a { text-decoration: none; color: white; text-align: center; } The place where the issue occurs is in bold.setting the display to inline, when I go to adjust the width, nothing happens but they stay the same sizeset it to float: left the whole thing dissapears!Why?
  23. Hi I've used W3Schools for a good few years and find it the best educational tool for HTML and CSS. Thanks guys! I was really pleased to discover recently that you have forums, too. I have a problem with the display on my wife's site, which appears to only manifest itself on IE7 (and earlier). The display is as intended on IE8, IE9, Firefox, Safari and Chrome. My concern is obviously for those using IE browsers older than IE8. The site itself (in its current format) was originally built about five years ago, when my knowledge was confined to the use of tables for layout as opposed to using divs and css as I would now; were I to built the site from scratch. Because there are hundreds of photos on the site, I've never had the inclination to re-code it. The Home page, at least, validates - with the exception of a marquee banner, which I know will never validate. The URL is as follows: http://www.hillsntoes.co.uk/ - the css (if required) can be found at: http://www.hillsntoe...ayout/style.css . There are two problems - the first of which is critical. My horizontal menu bar does not display at all in IE7, thus making navigation (almost) impossible. The second problem relates to placement. Line spacing (both on the 'Home' and 'Zumba' tabs) where I'm using the sign for a registered trade mark (coded "®") is "squashed". Additionally, the placement of the 'Zumba Romford' and 'ZIN' logos on the 'Zumba' tab are vertically displaced downwards by about 60px. To reiterate; neither of these problems occur in other than IE7 and earlier (certainly in IE6 - I don't have access to anything earlier). The problems seem to occur irrespective of Windows platforms (tried on XP, Vista and 7). If anybody can shed any light on why I'm getting these problems, I'd be very grateful. Thanks and regards Webbo
  24. Hi, I am currently designing a website using CSS3 properties such as gradient but have found a strange display bug in IE9 that I really can't fathom currently. The website should look like this (Firefox): Whereas in IE it looks like this (Note right hand side of main content div): My CSS is as follows: @charset "utf-8";/* CSS Document */body {background-color: #B0C7E5;margin: 0px;}body,td,th {color: #FFF;}@font-face { font-family: 'TangerineBold'; src: url('../fonts/Tangerine_Bold-webfont.eot'); src: url('../fonts/Tangerine_Bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Tangerine_Bold-webfont.woff') format('woff'), url('../fonts/Tangerine_Bold-webfont.ttf') format('truetype'), url('../fonts/Tangerine_Bold-webfont.svg#TangerineBold') format('svg'); font-weight: normal; font-style: normal;}h1, h2, h3 {font-family: TangerineBold;font-weight: bold;text-decoration:underline;}a {color: #FFF;text-decoration: none;}.txt_shadow{text-shadow: 5px 5px 10px #000;-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=2,Direction=135, Color='#000')";filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2,Direction=135,Color='#000');}.centre_txt {text-align: center;}#sidebars{color: #fff;background: #b0c7e5;background-image: -moz-linear-gradient(top,#85a8d5, #b0c7e5);background-image: -webkit-gradient(lineaer,left top,left bottom,color-stop(0,#85a8d5),color-stop(1,#b0c7e5));-ms-filter: "progid:DXImageTransform.Microsoft.gradient(StartColorStr='#85a8d5', EndColorStr='#b0c7e5')";filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#85a8d5',EndColorStr='#b0c7e5');}#wrapper{width:960px;color: #fff;background: #b0c7e5;background-image: -moz-linear-gradient(top,#85a8d5, #b0c7e5);background-image: -webkit-gradient(lineaer,left top,left bottom,color-stop(0,#85a8d5),color-stop(1,#b0c7e5));-ms-filter: "progid:DXImageTransform.Microsoft.gradient(StartColorStr='#85a8d5', EndColorStr='#b0c7e5')";filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#85a8d5',EndColorStr='#b0c7e5');margin: 0 auto 0 auto;}#header{width:960px;margin: 0px;padding-top: 25px;padding-right: 15px;padding-bottom: 25px;padding-left: 15px;font-family: TangerineBold;font-weight: bold;font-size: 60px;}#date {float: right;font-size: 24px;color: #000;}#top_nav{width:960px;font-family: TangerineBold;font-weight: bold;font-size: 38px;}#top_nav ul {margin: 0px;padding-top: 10px;padding-right: 0px;padding-bottom: 10px;padding-left: 15px;}#top_nav li {display: inline;list-style-type: none;}#top_nav a:hover, a:focus, a:active{color: #000;}#main_content {width: 960px;-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px;box-shadow: 5px 5px 10px #000;padding: 15px;background-image:url(../assets/backgrounds/main_div_bg.png);color: #000; } #footer{clear:both;padding: 15px;font-size:24px;font-family: TangerineBold;font-weight: bold;color: #000;} Can anyone please suggest why this is happening and how I would go about fixing it? Many thanks, Anthony
  25. Description of the code:I have a few divs which act as buttons via an onClick function called "displayOptions()". When one of the divs (a category) is clicked, it displays a set of images(displayed elsewhere on the page in a separate container). The global variable "currentCategory" is used to track the status of whether or not images are currently displaying. What I would like to achieve is this functionality:--If no images are currently displayed then display the new set of images when a div is clicked.--If any images ARE currently displaying then 1) if the category of the just clicked div is the current category already, then simply remove the current images 2) if the category of the new div is different (AKA clicked a different div while other images were still displaying) then remove the current images then display the new category's images instead. (Note: The "images" are actually divs with background images) My problem:When I load the page in a web browser (Chrome, Firefox, Safari on both PC and Mac) it initially seems to work. I click a category div and it displays the correct images. Then I click the same div again or any other div and it removes the images just like it should--except when I've clicked a new category while other images are still displaying, it doesn't display the new images. It just removes the old ones. And when I try to click any div (after one set of images has been removed once) none of the divs will work anymore. The full code from my javascript file: var currentCategory = 'none';var currentOptions = new Array(); function displayOptions(itemClass){if (currentCategory == 'none'){displayOptionsArray(itemClass);}else{for (var i = 0; i <= currentOptions.length; i++){currentOptions[i].style.display = 'none';}currentOptions = [];if (newCategory == currentCategory){currentCategory = 'none';}else{displayOptionsArray(itemClass);}}} function displayOptionsArray(newCategory){currentCategory = newCategory;currentOptions = document.getElementsByClassName(currentCategory);for (var i = 0; i <= currentOptions.length; i++){currentOptions[i].style.display = 'block';}} Images are contained inside this div (from CSS file): #currentOptionsContainer{margin-left: auto;margin-right: auto;width: 1064px;position: relative;} Same container div, but here is the HTML (the div/buttons are inside "equipContainer"): <div id="equipContainer"> <div id="stockContainer" class="equipItem"><div class="itemBG"></div><div id="stock" class="itemContent" onClick="displayOptions('stock');"></div></div> <div id="receiverContainer" class="equipItem"><div class="itemBG"></div><div id="receiver" class="itemContent" onClick="displayOptions('receiver');"></div></div></div> <div id="currentOptionsContainer"> <!--******Stocks******--> <div class="stock item"><div class="itemBG"></div><div id="IdZ_stock" class="itemContent"></div></div> <!--******Receivers******--> <div class="receiver item"><div class="itemBG"></div><div id="receiver_standard" class="itemContent"></div></div></div> Thank you, any help is appreciated!
  • Create New...