Search Results

Search found 35485 results on 1420 pages for 'css background image'.

Page 298/1420 | < Previous Page | 294 295 296 297 298 299 300 301 302 303 304 305 | Next Page >

How come my form input sometimes moves when I refresh the page?

- by samoz

On a page that I'm designing I have a form with one input of type text. Normally, this form and input render properly in my browser, Chrome, but occasionally, it renders about 20 pixels to the left of where it is supposed to be. When I refresh the page, it goes back to the original, correct place. I have only tested in Chrome so far, so this isn't a cross-browser issue (it happens in the same browser). Is there anything wrong with my code below? Here's my HTML code: <!DOCTYPE htmls> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="style.css" type="text/css" /> <title>Test Site</title> </head> <body > <div id="supercontainer" class="style1"> <img class="floater" src="top.jpg" alt="Top" /> <img class="floater" src="left.jpg" alt="Left" /> <div id="content"> <p id="theText"> Welcome. Please type a username. </p> <form id="prompt"> <div><input type="text" name="promptLine" autocomplete="off" id="promptLine" onkeypress="return submitenter(event);" value="% " /></div> </form> </div> <img class="floater" src="right.jpg" alt="Right" /> <img class="floater" src="bottom.jpg" alt="Bottom" /> </div> Here's my CSS code: #supercontainer { margin: 0 auto; width: 900px; display: block; } img.floater { display: inline; float: left; } #content { background-color:black; display: inline; float: left; padding-left:5px; padding-right:5px; min-height:458px; max-height:458px; min-width: 803px; max-width: 803px; color: lime; } #theText { text-align:left; margin-bottom:0; margin-top:0; line-height: 0.3; font-family:"Courier New", Courier, monospace; } #prompt { position: fixed; top: 470px; } #promptLine { width: 100%; background-color: black; color: lime; border: none; outline:none; }

Read the article
jQuery: Div elements are not showing up

- by Legend

I am adapting the Coverflow technique to work with a div. Following is the html: <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <style type="text/css" media="screen"> body,html { margin: 0; padding: 0; background: #000; height: 100%; color: #eee; font-family: Arial; font-size: 10px; } div.magnifyme { height: 80px; padding: 80px; position: absolute; top: 0px; left: 0px; width: 8000px; } div.wrapper { margin: 0px; height: 470px; /*border: 2px solid #999;*/ overflow: hidden; padding-left: 40px; right: 1px; width: 824px; position: relative; } div.container {position: relative; width: 854px; height: 480px; background: #000; margin: auto;} div.nav {position: absolute; top: 10px; width: 20%; height: 10%; right: 1px; } div.magnifyme div { position: absolute; width: 300px; height: 280px; float: left; margin: 5px; position: relative; border: 2px solid #999; background: #500; } </style> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="ui.coverflow.js"></script> <script type="text/javascript"> $(function() { $("div.magnifyme").coverflow(); $("#add").click(function() { location.reload(); $(".magnifyme").append("<div id=\"div5\">hello world</div>"); $("div.magnifyme").coverflow(); }); }); </script> </head> <body> <div class="container"> <div class="wrapper"> <div class="magnifyme"> <div id="div0">This is div 0</div> <div id="div1">This is div 1</div> <div id="div2">This is div 2</div> <div id="div3">This is div 3</div> <div id="div4">This is div 4</div> </div> </div> <div class="nav"> <button type="button" id="add">Add to Deck</button> </div> </div> </body> </html> The coverflow function (included as a js file in the head section) is here. When I click the button, I was expecting it to add a DIV to the already present deck. For some reason, it doesn't show the newly added DIV. I tried calling the coverflow() function after I added the new element but that didn't work either. Is there any way I can make this work?

Read the article
Uploading image to flicker in c++

- by Alien01

I am creating an application in VC++ using win32,wininet to upload an image to Flickr.I am able to get Frob,Token correctly but when I try to upload the image I am getting error Post size too large. Headers are created as follows wstring wstrAddHeaders = L"Content-Type: multipart/form-data;boundary=ABCD\r\n"; wstrAddHeaders += L"Host: api.flickr.com\r\n"; wchar_t tempStr[MAX_PATH]; wsprintf(L"Content-Length: %ld\r\n",szTotalSize); wstrAddHeaders += tmpStr; wstrAddHeaders +=L"\r\n"; HINTERNET hSession = InternetConnect(hInternet, L"www.flickr.com", INTERNET_DEFAULT_HTTP_PORT, NULL,NULL, INTERNET_SERVICE_HTTP, 0, 0); if(hSession==NULL) { dwErr = GetLastError(); return; } Content of Post request are created as follows: wstring wstrBoundry = L"--ABCD\r\n"; wstring wstrContent =wstrBoundry; wstrContent +=L"Content-Disposition: form-data; name=\"api_key\"\r\n\r\n"; wstrContent +=wstrAPIKey.c_str() ; wstrContent += L"\r\n"; wstrContent +=wstrBoundry; wstrContent +=L"Content-Disposition: form-data; name=\"auth_token\"\r\n\r\n"; wstrContent +=m_wstrToken.c_str(); wstrContent += L"\r\n"; wstrContent +=wstrBoundry; wstrContent +=L"Content-Disposition: form-data; name=\"api_sig\"\r\n\r\n"; wstrContent +=wstrSig; wstrContent += L"\r\n"; wstrContent +=wstrBoundry; wstrContent +=L"Content-Disposition: form-data; name=\"photo\"; filename=\"C:\\test.jpg\""; wstrContent +=L"\r\n"; wstrContent +=L"Content-Type: image/jpeg\r\n\r\n"; wstring wstrFilePath(L"C:\\test.jpg"); CAtlFile file; HRESULT hr = S_OK; hr = file.Create(wstrFilePath.c_str(),GENERIC_READ,FILE_SHARE_READ,OPEN_EXISTING); if(FAILED(hr)) { return; } ULONGLONG nLen; hr = file.GetSize(nLen); if (nLen > (DWORD)-1) { return ; } char * fileBuf = new char[nLen]; file.Read(fileBuf,nLen); wstring wstrLastLine(L"\r\n--ABCD--\r\n"); size_t szTotalSize = sizeof(wchar_t) * (wstrContent.length()) +sizeof(wchar_t) * (wstrLastLine.length()) + nLen; unsigned char *buffer = (unsigned char *)malloc(szTotalSize); memset(buffer,0,szTotalSize); memcpy(buffer,wstrContent.c_str(),wstrContent.length() * sizeof(wchar_t)); memcpy(buffer+wstrContent.length() * sizeof(wchar_t),fileBuf,nLen); memcpy(buffer+wstrContent.length() * sizeof(wchar_t)+nLen,wstrLastLine.c_str(),wstrLastLine.length() * sizeof(wchar_t)); hRequest = HttpOpenRequest(hSession, L"POST", L"/services/upload/", L"HTTP/1.1", NULL, NULL, 0, NULL); if(hRequest) { bRet = HttpAddRequestHeaders(hRequest,wstrAddHeaders.c_str(),wstrAddHeaders.length(),HTTP_ADDREQ_FLAG_ADD | HTTP_ADDREQ_FLAG_REPLACE); if(bRet) { bRet = HttpSendRequest(hRequest,NULL,0,(void *)buffer,szTotalSize); if(bRet) { while(true) { char buffer[1024]={0}; DWORD read=0; BOOL r = InternetReadFile(hRequest,buffer,1024,&read); if(read !=0) { wstring strUploadXML =buffer; break; } } } } I am not pretty sure the way I am adding image data to the string and posting the request. Do I need to convert image data into Unicode? Any suggestions , if someone can find what I am doing wrong that would be very helpful to me.

Read the article
How to convert image to bitmap code for bluetooth print in iphone

- by John Patel

I am interested to print image from iPhone programmatically using bluetooth printer device. In one of the sample code I have implemented code for Text print but in that sample I am not getting how to convert image into format, like unsigned char buffer3[796]={ 0x55 , 0x66 , 0x77 , 0x88 , 0x44 , 0x1B , 0x58 , 0x31 , 0x19, 0x20, 0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x80 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x01 ,0xC0 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x01 ,0x80 ,0x00 ,0x03 ,0x60 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x03 ,0xA0 ,0x00 ,0x07 ,0xB0 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x05 ,0x60 ,0x00 ,0x07 ,0xD8 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x05 ,0xA0 ,0x00 ,0x13 ,0xEC ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x04 ,0x20 ,0x00 ,0x29 ,0xF4 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x03 ,0xC0 ,0x00 ,0x64 ,0xF9 ,0x00 ,0x0F ,0xFF ,0x9C ,0x01 ,0xC0 ,0x19 ,0xFF ,0xC0 ,0x7F ,0xFC ,0x7F ,0xF9 ,0xC0 ,0x3D ,0xFF ,0xF1 ,0xFF ,0xE3 ,0xFF ,0xC0 ,0x00 ,0x00 ,0xF2 ,0x73 ,0x80 ,0x0F ,0xFF ,0x9C ,0x01 ,0xC0 ,0x19 ,0xFF ,0xC0 ,0x7F ,0xFE ,0x7F ,0xFD ,0xE0 ,0x3D ,0xFF ,0xF1 ,0xFF ,0xE3 ,0xFF ,0xC0 ,0x00 ,0x00 ,0x79 ,0x26 ,0xC0 ,0x0F ,0xFF ,0xDC ,0x01 ,0xC0 ,0x19 ,0xFF ,0xC0 ,0x7F ,0xFE ,0xFF ,0xFD ,0xF0 ,0x7D ,0xFF ,0xFB ,0xFF ,0xF7 ,0xFF ,0xE0 ,0x00 ,0x03 ,0x3C ,0x8F ,0x60 ,0x0C ,0x01 ,0xDC ,0x01 ,0xC0 ,0x19 ,0x80 ,0x00 ,0x70 ,0x0E ,0xE0 ,0x1D ,0xF0 ,0x7D ,0x80 ,0x3B ,0x80 ,0x77 ,0x00 ,0xE0 ,0x00 ,0x04 ,0x9E ,0x8F ,0xB0 ,0x0E ,0x01 ,0xDC ,0x01 ,0xC0 ,0x19 ,0x80 ,0x00 ,0x70 ,0x0E ,0xE0 ,0x1D ,0xF8 ,0xFD ,0x80 ,0x33 ,0x80 ,0x77 ,0x00 ,0xE0 ,0x00 ,0x0E ,0x4F ,0x27 ,0xD8 ,0x0F ,0xFF ,0x9C ,0x01 ,0xC0 ,0x19 ,0xFF ,0xC0 ,0x7F ,0xFC ,0xE0 ,0x1D ,0xF9 ,0xFD ,0xFF ,0xF3 ,0x80 ,0x77 ,0x00 ,0xE0 ,0x00 ,0x0F ,0x26 ,0x53 ,0xC8 ,0x0F ,0xFF ,0x9C ,0x01 ,0xC0 ,0x19 ,0xFF ,0xC0 ,0x7F ,0xFC ,0xEF ,0xFD ,0xDD ,0xDD ,0xFF ,0xF3 ,0x80 ,0x77 ,0x00 ,0xE0 ,0x00 ,0x07 ,0x90 ,0xC9 ,0xF0 ,0x0F ,0xFF ,0xDC ,0x01 ,0xC0 ,0x19 ,0xFF ,0xC0 ,0x7F ,0xFE ,0xEF ,0xFD ,0xDF ,0x9D ,0xFF ,0xFB ,0x80 ,0x77 ,0x00 ,0xE0 ,0x00 ,0x03 ,0xC9 ,0xE4 ,0xE0 ,0x0C ,0x00 ,0xDC ,0x01 ,0xC0 ,0x19 ,0x80 ,0x00 ,0x70 ,0x06 ,0xE7 ,0xFD ,0xCF ,0x9D ,0x80 ,0x3B ,0x80 ,0x77 ,0x00 ,0xE0 ,0x00 ,0x01 ,0xF0 ,0xF2 ,0x40 ,0x0E ,0x01 ,0xDC ,0x00 ,0xC0 ,0x19 ,0x80 ,0x00 ,0x70 ,0x0E ,0xE0 ,0x1D ,0xCF ,0x1D ,0x80 ,0x3B ,0x80 ,0x77 ,0x00 ,0xE0 ,0x00 ,0x00 ,0xE6 ,0x79 ,0x00 ,0x0F ,0xFF ,0xDF ,0xFC ,0xFF ,0xF9 ,0xFF ,0xC0 ,0x7F ,0xFE ,0xE0 ,0x1D ,0xC7 ,0x1D ,0xFF ,0xFB ,0xFF ,0xF7 ,0xFF ,0xE0 ,0x00 ,0x00 ,0x49 ,0x3D ,0x00 ,0x0F ,0xFF ,0x9F ,0xFC ,0xFF ,0xF9 ,0xFF ,0xC0 ,0x7F ,0xFE ,0xE0 ,0x1D ,0xC2 ,0x1D ,0xFF ,0xF1 ,0xFF ,0xE3 ,0xFF ,0xC0 ,0x00 ,0x00 ,0x1C ,0x9E ,0x00 ,0x0F ,0xFF ,0x1F ,0xFC ,0x7F ,0xE1 ,0xFF ,0xC0 ,0x7F ,0xFC ,0xE0 ,0x1D ,0xC0 ,0x1D ,0xFF ,0xE0 ,0xFF ,0xC1 ,0xFF ,0x80 ,0x00 ,0x00 ,0x1E ,0x4C ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x0F ,0x20 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x07 ,0x90 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x03 ,0xE0 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x01 ,0xC0 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x80 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 ,0x00 }; //[self addLabel:@"buffer3 is selected"]; [[session outputStream] write:(const uint8_t *)buffer3 maxLength:796];//send print package*/ This is sample code for Image print I am not able to print any other image because I am not having idea how to convert UIImage or NSData to the below mentioned Bit code. If any proper step by step method to do Image to bitmap conversion, then please let me know this.

Read the article
jQuery image fader slow in IE6 & 7

- by Jamie

Hi guys, I'm using the following jQuery script to rotate through a series of images pulled into an unordered list using PHP: function theRotator() { $('#rotator li').css({opacity: 0.0}); $('#rotator li:first').css({opacity: 1.0}); setInterval('rotate()',5000); }; function rotate() { var current = ($('#rotator li.show') ? $('#rotator li.show') : $('#rotator li:first')); var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('#rotator li:first') :current.next()) : $('#rotator li:first')); next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 2000); current.animate({opacity: 0.0}, 2000).removeClass('show'); }; $(document).ready(function() { theRotator(); }); It works brilliantly in FF, Safari, Chrome and even IE8 but IE6 & 7 are really slow. Can anyone make any suggestions on making it more efficient or just work better in IE6 & 7? The script is from here btw. Thanks.

Read the article
Styling an Input Field

- by John

Hello When I try to alter the CSS for the input field named "title" below, which is classed by "submissionfield", the position changes, but the height, length, and font of the field do not change. How could I make the height of the input field "title" 22 px, the length 550 px, and the font Times New Roman? The CSS below does not do it. Thanks in advance, John echo '<form action="http://www...com/.../submit2.php" method="post"> <input type="hidden" value="'.$_SESSION['loginid'].'" name="uid"> <div class="submissiontitle"><label for="title">Story Title:</label></div> <div class="submissionfield"><input name="title" type="title" id="title" maxlength="1000"></div> <div class="urltitle"><label for="url">Link:</label></div> <div class="urlfield"><input name="url" type="url" id="url" maxlength="500"></div> <div class="submissionbutton"><input name="submit" type="submit" value="Submit"></div> </form> '; The CSS: .submissiontitle { position:absolute; width:100px; left:30px; top:200px; text-align: left; margin-bottom:3px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size: 12px; color:#000000; } .submissionfield { position:absolute; width:550px; left:50px; top:230px; text-align: left; margin-bottom:3px; padding:0px; font-family: "Times New Roman", Times, serif; font-size: 22px; color:#000000; } .urltitle { position:absolute; width:250px; left:30px; top:300px; text-align: left; margin-bottom:3px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size: 12px; color:#000000; } .urlfield { position:absolute; width:550px; left:30px; top:330px; text-align: left; margin-bottom:3px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size: 11px; color:#000000; } .submissionbutton { position:absolute; width:250px; left:30px; top:380px; text-align: left; margin-bottom:3px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size: 11px; color:#000000; } .submittitle { position:absolute; width:250px; left:30px; top:150px; text-align: left; margin-bottom:3px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size: 12px; color:#000000; }

Read the article
SVG text parameter changing on conversion to image uri : random dy on tspan element

- by Kitex

Sorry that I could not compile jsfiddle because it's jsf application hosted locally and code is dependent on data from jsf application. Although I have arrange part of it and part if it as snippet here. Now Everything's correct in Firefox. Suddenly when I open it in chrome something happened. The text on raphael paper suddenly gets scattered in the paper. It's not where it's meant to be. This happens when I convert svg to image and again generate svg. Everything works fine in Firefox. There is chagne id dy of tspan dy=3.09499999 dy=432.0949999999999 Why is there this change in dy although x and y are same? SVG Correct: The fiddle is here. SVG Incorrect: The fiddle is here. function printMap(){ var svg = $('#map').html().replace(/>\s+/g, ">").replace(/\s+</g, "<"); // strips off all spaces between tags canvg('cvs', svg, { ignoreMouse: true, ignoreAnimation: true }); var canvas = document.getElementById('cvs'); var img = canvas.toDataURL("image/png"); $("#resImg").attr("src",img); $("#resImg").css("display",'block'); //$("resImg").css("display",'none'); $("#map").css("display",'none'); // location.href = img; } Before: Text are above the object: After: Texts are scattered:

Read the article
IE7 rendering bug: Heading before a floated list

- by Tomalak

Can somebody please explain this IE7 bug to me? It occurs in Standards and Quirks mode rendering, it does not occur in Firefox, Chrome or IE8 (though switching the rendering engine via IE8 developer tools will provoke it). Here's the HTML to reproduce the behavior: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Test</title> <style type="text/css"> /* h1 { margin: 0px; } */ ul { padding: 0; margin: 0; list-style-type: none; } ul li { float: left; width: 140px; padding: 3px; } div { clear: left; padding: 3px; } div, li { background-color: OrangeRed; } /* ul { border: 1px solid blue; } */ </style> </head> <body> <h1>Heading 1</h1> <ul class="t"> <li>bla 1</li><li>bla 2</li><li>bla 3</li> </ul> <div>yada</div> </body> </html> This renders a floated <ul> above a <div> (supposed to be a tabbed user interface). There's an unexplained gap between the <div> and the <ul>. Now do one of the following: Uncomment the CSS rule for <h1>. The gap disappears and the list is rendered tight to the <div>, but also very close to the <h1>. Alternatively, uncomment the CSS rule for <ul>. Now a narrow blue border is rendered above the <ul>, but the gap disappears. My questions: How can the <h1> margin (I suppose any block level element with a defined margin will do) affect the space below the list? Can I prevent this from happening without having to set header margins to 0 or messing with the <ul> borders (setting border-width: 0; does not work BTW)? I suppose it is connected to the <ul> having no width because it has only floated children. Maybe someone with more insight into IE7 peculiarities than I have can explain what the rendering engine is doing here. Thanks!

Read the article
simple image animation with the keyboard

- by conorhiggins

Hi the app I am currently working on requires a simple animation to be performed, which I am able to do but timing is an issue. The app uses the slightly opaque keyboard and I have set up a black background to make it more visually pleasing . The app is a utility app and as the user clicks on a settings button the app will flip which looks great. However there is a problem at the moment in that while the app is flipping the keyboard also closes which itself looks great also, however the background remains. I was wondering if there was a way of animating the background image to follow the keyboard's animation pattern and speed? If I set up a discrete animation time the chances are there will be some sort of overlap and either the image will show too long or the keyboard will show too long. Any suggestions? Another option is to make the keyboard show constantly if anyone knows how to do that? i would rather animate it though as it is quite a simple app and so I would like to make it as aesthetically pleasing as possible. /Conor

Read the article
Why isn't the inline element inheriting height from its children?

- by jbarz

I'm trying to make a rather complicated grid of images and information (almost like Pinterest). Specifically, I'm trying to inline position one set of <ul>s right after another. I have it working but one aspect is causing issues so I'm trying to ask about this small piece to avoid the complication of the whole problem. In order to horizontally align the images and their information we are using inline <li>s with other inline-block level elements inside of them. Everything works correctly for the most part except that the <li>s have almost no height. HTML and CSS is in JSFiddle here if you want to mess with it in addition to below: HTML: <div> <ul class="Container"> <li> <span class="Item"> <a href="#"><img src="http://jsfiddle.net/img/logo.png"/></a> <span class="Info"> <a href="#">Title One</a> <span class="Details">One Point One</span> </span> </span> </li> <li> <span class="Item"> <a href="#"><img src="http://jsfiddle.net/img/logo.png"/></a> <span class="Info"> <a href="#">Title Two</a> <span class="Details">Two Point One</span> </span> </span> </li> </ul> CSS: .Container { list-style-type:none; } .Container li { background-color:grey; display:inline; text-align:center; } .Container li .Item { border:solid 2px #ccc; display:inline-block; min-height:50px; vertical-align:top; width:170px; } .Container li .Item .Info { display:inline-block; } .Container li .Item .Info a { display:inline-block; width:160px; } If you check out the result in the jsfiddle link you can see that the grey background only encompasses a small strip of the whole <li>. I know that changing the <li> to display:inline-block solves this problem but that isn't feasible for other reasons. So first of all, I'm just looking to see if anyone understands why the inline <li> element doesn't have any height. I can't find anything in the spec that explains this. I know I can't add height to an inline element but any explanation as to why this is happening that might enable me to fix would be great. Secondly, if you inspect the elements using IE's Developer Mode you will see that although the background color is in the correct location, the actual location of the <li>'s bounding box is at the bottom of the container according to hovering over the element. I could deal with this problem if it was at the top in every browser but it apparently varies. NOTE: I don't really care about older browsers in this case but I don't use HTML5 or JavaScript positioning. Thanks.

Read the article
Drop down list in menu disappears before able to click

- by user1834770

I've had quite a search through forums looking for a solution for this, but since I don't know coding I'm not sure what applies to me and what doesn't. So, apologies if this is an often solved problem, but I'll greatly appreciate your help! After much trial and error, I've managed to get a drop down list of pages on my navigation bar; however, when I go to click on a sub-page, the entire menu disappears. I've read through other similar problems where there has been an issue with a margin that's too big, but I think my margins are set to '0'. The blog is at: http://swirlstwirlsblog.blogspot.com.au/ I haven't got content in the sub pages but there are there and linked in the html/javascript widget. I've also looked at it in Chrome, Mozilla, and Safari and it's the same issue. I'm also not sure if this is a javascript, css, or html problem, so please be kind in your responses--I'm only new! Thanks so much to anyone able to help me on this. Here's the script I used in the Widget: <ul id="jsddm"> <li><a href="http://swirlstwirlsblog.blogspot.com.au/">Home</a> <li><a href="http://swirlstwirlsblog.blogspot.com.au/search/label/sparkles">Sparkles</a> </li> <li><a href="http://swirlstwirlsblog.blogspot.com.au/search/label/friendship">Friendship</a> </li> <li><a href="http://swirlstwirlsblog.blogspot.com.au/search/label/humour">Humour</a> </li> <li><a href="">About</a> <ul> <li><a href="http://swirlstwirlsblog.blogspot.com.au/p/about_16.html">Us</a></li> <li><a href="http://swirlstwirlsblog.blogspot.com.au/p/contributers.html">Contributors</a> </li> <li><a href="http://swirlstwirlsblog.blogspot.com.au/p/advertising.html">Advertising</a> </li> <li><a href="http://swirlstwirlsblog.blogspot.com.au/p/privacy-policies.html">Privacy</a></li> <li><a href="http://swirlstwirlsblog.blogspot.com.au/p/contact.html">Contact</a></li> </ul> </li> </li></ul> And here's the html code I put in the template: <pre>#jsddm { margin: 0; padding: 15px; z-index:1000000000; position:relative; } #jsddm li { float: left; list-style: none; font: 12px Tahoma, Arial; } #jsddm li a { display: block; white-space: nowrap; margin:1px 3px; padding: 5px 10px; border-right: 1px color: eeeeee; text-shadow: #ffffff 0 1px 0; color: #363636; font-size: 15px; font-family: crushed; text-decoration: none; vertical-align: middle; } #jsddm li a:hover { background: #C8C8C8; } #jsddm li ul { margin: 0; padding: 0; position: absolute; visibility: hidden; border-top: 1px solid white; } #jsddm li ul li { float: none; display: inline; } #jsddm li ul li a { width: auto; background: #ffffff; } #jsddm li ul li a:hover { background: #eeeeee; }</pre>

Read the article
How to prevent DIVs from sliding over each other

- by Haghpanah

I’m going to use DIV-based layout instead of table-based to reduce amount of markups and speed up page loading, however I’ve found it too much tricky as I’m not CSS guru. I use following CSS class to simulate rows of a table containing one column for label and one for textbox. .FormItem { margin-left: auto; margin-right: auto; width: 604px; min-height: 36px; } .ItemLabel { float: left; width: 120px; padding: 3px 1px 1px 1px; text-align: right; } .ItemTextBox { float: right; width: 480px; padding: 1px 1px 1px 1px; text-align: left; } , <div class="FormItem"> <div class="ItemLabel"> <asp:Label ID="lblName" runat="server" Text="Name :"></asp:Label> </div> <div class="ItemTextBox"> <asp:TextBox ID="txtName" runat="server"></asp:TextBox> <p><span>User Name</span></p> </div> </div> <div class="FormItem"> <div class="ItemLabel"> <asp:Label ID="lblComments" runat="server" Text="Comments :"></asp:Label> </div> <div class="ItemTextBox"> <asp:TextBox ID="txtComments" runat="server"></asp:TextBox> <p><span>(optional)Comments</span></p> </div> </div> These styles work fine if the height of ItemData DIVs are less than or equal to FormItem DIVs min-height. If ItemData DIVs height gets more than FormItem height then ItemText DIVs start sliding over FormItem DIVs to and ItemText and ItemData are no longer aligned. For example the following markups… <div class="FormItem"> <div class="ItemLabel"> <asp:Label ID="lblName" runat="server" Text="Name :"></asp:Label> </div> <div class="ItemTextBox"> <asp:TextBox ID="txtName" runat="server"></asp:TextBox> <p><span>User Name</span></p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> </div> <div class="FormLabel"> <div class="ItemText"> <asp:Label ID="lblComments" runat="server" Text="Comments :"></asp:Label> </div> <div class="ItemTextBox"> <asp:TextBox ID="txtComments" runat="server"></asp:TextBox> <p><span>(optional)Comments</span></p> </div> </div> I've tried several CSS attributes such as; position, float, clear… but I can not correct the problem. I’ll be appreciated for any help.

Read the article
Adding array of images to Firebase using AngularFire

- by user2833143

I'm trying to allow users to upload images and then store the images, base64 encoded, in firebase. I'm trying to make my firebase structured as follows: |--Feed |----Feed Item |------username |------epic |---------name,etc. |------images |---------image1, image 2, etc. However, I can't get the remote data in firebase to mirror the local data in the client. When I print the array of images to the console in the client, it shows that the uploaded images have been added to the array of images...but these images never make it to firebase. I've tried doing this multiple ways to no avail. I tried using implicit syncing, explicit syncing, and a mixture of both. I can;t for the life of me figure out why this isn;t working and I'm getting pretty frustrated. Here's my code: $scope.complete = function(epicName){ for (var i = 0; i < $scope.activeEpics.length; i++){ if($scope.activeEpics[i].id === epicName){ var epicToAdd = $scope.activeEpics[i]; } } var epicToAddToFeed = {epic: epicToAdd, username: $scope.currUser.username, userImage: $scope.currUser.image, props:0, images:['empty']}; //connect to feed data var feedUrl = "https://epicly.firebaseio.com/feed"; $scope.feed = angularFireCollection(new Firebase(feedUrl)); //add epic var added = $scope.feed.add(epicToAddToFeed).name(); //connect to added epic in firebase var addedUrl = "https://epicly.firebaseio.com/feed/" + added; var addedRef = new Firebase(addedUrl); angularFire(addedRef, $scope, 'added').then(function(){ // for each image uploaded, add image to the added epic's array of images for (var i = 0, f; f = $scope.files[i]; i++) { var reader = new FileReader(); reader.onload = (function(theFile) { return function(e) { var filePayload = e.target.result; $scope.added.images.push(filePayload); }; })(f); reader.readAsDataURL(f); } }); } EDIT: Figured it out, had to connect to "https://epicly.firebaseio.com/feed/" + added + "/images"

Read the article
Visual Studio 2008 - syntax-highlighting and intellisense not working for aspx, js, css

- by michalstanko

Hello all, I'm having problems with Visual Studio 2008, namely, syntax-highlighting and intellisense for *.aspx, *.js and *.css files (and maybe more) not working. Also, when I go to Tools - Options... - Text editor - HTML - Format, I see this error message: "An error occurred loading this property page" Everything was working fine before, until recently. The only change that might have possibly triggered this (but I am not 100% sure whether it stopped working at that exact time or some other time) was a change of the display language in my Windows 7 installation. I have already tried running: devenv /Setup devenv /ResetSkipPkgs devenv /ResetSettings ...none of which helped. Also, setting my default system font to Tahoma, which was a suggestion I found somewhere else, did not work for me (it was Tahoma before, since I use the Windows Classic theme). Thank you very much for your suggestions.

Read the article
Display a Photo Gallery using Asp.Net and SQL

- by sweetcoder

I have recently added photos to my SQL database and have displayed them on an *.aspx page using Asp:Image. The ImageUrl for this control stored in a separate *.aspx page. It works great for profile pictures. I have a new issue at hand. I need each user to be able to have their own photo gallery page. I want the photos to be stored in the sql database. Storing the photos is not difficult. The issue is displaying the photos. I want the photos to be stored in a thumbnail grid fashion, when the user clicks on the photo, it should bring up the photo on a separate page. What is the best way to do this. Obviously it is not to use Asp:Image. I am curious if I should use a Gridview. If so, how do I do that and should their be a thumbnail size stored in the database for this? Once the picture is click on how does the other page look so that it displays the correct image. I would think it is not correct to send the photoId through the url. Below is code from the page I use to display profile pictures. protected void Page_Load(object sender, EventArgs e) { string sql = "SELECT [ProfileImage] FROM [UserProfile] WHERE [UserId] = '" + User.Identity.Name.ToString() + "'"; string strCon = System.Web.Configuration.WebConfigurationManager.ConnectionStrings["SocialSiteConnectionString"].ConnectionString; SqlConnection conn = new SqlConnection(strCon); SqlCommand comm = new SqlCommand(sql, conn); conn.Open(); Response.ContentType = "image/jpeg"; Response.BinaryWrite((byte[])comm.ExecuteScalar()); conn.Close(); }

Read the article
GPGPU programming with OpenGL ES 2.0

- by Albus Dumbledore

I am trying to do some image processing on the GPU, e.g. median, blur, brightness, etc. The general idea is to do something like this framework from GPU Gems 1. I am able to write the GLSL fragment shader for processing the pixels as I've been trying out different things in an effect designer app. I am not sure however how I should do the other part of the task. That is, I'd like to be working on the image in image coords and then outputting the result to a texture. I am aware of the gl_FragCoords variable. As far as I understand it it goes like that: I need to set up a view (an orthographic one maybe?) and a quad in such a way so that the pixel shader would be applied once to each pixel in the image and so that it would be rendering to a texture or something. But how can I achieve that considering there's depth that may make things somewhat awkward to me... I'd be very grateful if anyone could help me with this rather simple task as I am really frustrated with myself. UPDATE It seems I'll have to use an FBO, getting one like this: glBindFramebuffer(...)

Read the article
A good web 'desktop' JavaScript, CSS, or both, library that likes ASP.NET Web Forms

- by ProfK

I've come across, in passing, several suites of functions, widgets, frameworks, etc. that seek to produce a desktop like experience on the web. Most are JavaScript and CSS tools that handle web content on an emulation of the desktop-paradigmed UI, e.g. TreeView + Content == Explorer. Is there such a library nicely compatible with ASP.NET Forms without weeks of grief? I'll also settle for something similar, but instead of native ASP.NET, a library for any of the open source CMS products for ASP.NET. (Umbraco is at the top of my list, followed by mojoPortal. I aspire to the level of coding their creators easily demonstrate in the product. [PS, I don't want a 'desktop' ux per se, just light and simple dynamic layout for drag 'n drop, dock windows, a dock bar?.. and other fancy magic.

Read the article
JQuery: Problem in getting element's width in Chrome

- by Sarfraz

Hello, Suppose I have this image: <img src="images/01.jpg" border="0" rel="shadow" /> Then with JQuery, I get its width using: $('[rel="shadow"]').width(); Firefox and IE report correct dimensions of the image eg 140px while Chrome reports 0. How to solve this problem? Note: I don't want to set explicit width for images eg: <img src="images/01.jpg" border="0" rel="shadow" width="140" /> So, how to get width in cross-browser way which is not defined in width attribute of elements? Thanks

Read the article
How to style an asp.net menu with CSS

- by md1337

I'm in the process of styling an asp.net menu and I'm trying to understand the meaning of the StaticSelectedStyle-CssClass and StaticHoverStyle-CssClass parameters. My understanding is that the styles defined with these parameters are applied as CSS classes to the relevant elements, whenever needed. So I created my menu as follows: <asp:Menu ID="NavigationMenu" DataSourceID="NavigationSiteMapDataSource" StaticMenuStyle-CssClass="StaticMenuStyle" StaticMenuItemStyle-CssClass="StaticMenuItemStyle" StaticSelectedStyle-CssClass="StaticSelectedStyle" StaticHoverStyle-CssClass="StaticHoverStyle" Orientation="Horizontal" MaximumDynamicDisplayLevels="0" runat="server"> </asp:Menu> It works for StaticMenuStyle-CssClass and StaticMenuStyle-CssClass (the classes are applied to the relevant elements), but StaticSelectedStyle-CssClass and StaticHoverStyle-CssClass are not applied, regardless of the selected or hover status of an element. What am I supposed to do to make this work? Thanks.

Read the article
MFMailComposeViewController broke CSS styles in html template

- by Victor

I use MFMailComposeViewController to send a message in html format. If my html template contains the css styles: <div class="margin:10 10 10 0"> <a href="domain.name">Go To</a></div> In this case it works good. But if I send: <a href="domain.name">Go To</a> then I see the letter that comes with broken styles as there (3D is not my misprint) <div style=3D"margin:10 10 10 10;"><a href=3D"www.google.com">Go=C2=A0To</a></div> Well as the letter goes broken when I insert in the template symbols from national alphabets. Somebody can tell what the problem and check with yourself?

Read the article
How can I force overflow: hidden to not use up my padding-right space

- by AlfaTeK

I have the following code: <div style="width: 100px; overflow: hidden; border: 1px solid red; background-color: #c0c0c0; padding-right: 20px; "> 2222222222222222222222111111111111111111111111113333333333333333333</div> (XHTML 1.0 transitional) What happens is that the padding-right doesn't appear, it's occupied by the content, which means the overflow uses up the padding right space and only "cuts off" after the padding. Is there any way to force the browser to overflow before the padding-right, which means my div will show with the padding right? What I get is the first div in the following image, what i want is something like the 2nd div: image

Read the article
How could I embed a html/css/js view in a webstart application

- by phmr

I would like to use a html/css/js view in my webstart project without requesting all permissions. I figured out that I could use the java HTTPServer to process the requests but I need a way to avoid using real sockets, so that the HTTPServer instantiation doesn't ask for some permission. Do you know any projects that achieve that ? and if not, what should I do to get an HTTPServer completely working locally (without hitting boundaries...) ? edit: maybe an HTTPServer is too much, I maybe only need a HttpHandler..

Read the article
Javascript and CSS Popups

- by user183315

Hi all, I've got a question about CSS based popup windows, like those generated by jQuery UI's dialog system, or Colorbox. If I use those (or something like them) to open a popup window to an HTML page and that page has Javascript in it, does the Javascript in the popup window run in its own context, or does it become part of the context of the Javascript in the parent window that opened it? I ask so that I can write the Javascript on both pages (parent and popup) so there is no namespace collision. Thanks in advance! Doug

Read the article
css absolute position won't work with margin-left:auto margin-right: auto

- by user1118019

Say you have the following css applied to a div tag .divtagABS { position: absolute; margin-left: auto; margin-right:auto; } the margin-left and margin-right does not take effect but if you have relative, it works fine i.e. ,divtagREL { position: relative; margin-left: auto; margin-right:auto; } why is that? i just want to center an element can someone explain why setting margins to auto in absolute position does not work?

Read the article
How do laziness and I/O work together in Haskell?

- by Bill

I'm trying to get a deeper understanding of laziness in Haskell. I was imagining the following snippet today: data Image = Image { name :: String, pixels :: String } image :: String -> IO Image image path = Image path <$> readFile path The appeal here is that I could simply create an Image instance and pass it around; if I need the image data it would be read lazily - if not, the time and memory cost of reading the file would be avoided: main = do image <- image "file" putStrLn $ length $ pixels image But is that how it actually works? How is laziness compatible with IO? Will readFile be called regardless of whether I access pixels image or will the runtime leave that thunk unevaluated if I never refer to it? If the image is indeed read lazily, then isn't it possible I/O actions could occur out of order? For example, what if immediately after calling image I delete the file? Now the putStrLn call will find nothing when it tries to read.

Read the article

< Previous Page | 294 295 296 297 298 299 300 301 302 303 304 305 | Next Page >