Search Results

Search found 15935 results on 638 pages for 'background color'.

Page 147/638 | < Previous Page | 143 144 145 146 147 148 149 150 151 152 153 154  | Next Page >

  • css position when resizing browser

    - by user478636
    When resizing the browser I noticed that all the elements get out of place and the website layout gets distorted. This also occurs on with low-resolution. Is this because I have used position:relative;? How can I make the page elements not move from their position when resizing. body{ background:url(../img/bg-silver.jpg) #F2F2F2; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:11px; line-height:18px; color:#636363; margin-top:10%; } #containerHolder { background: #eee; padding: 5px; position:relative; } #container { background: #fff; background:rgba(245,245,245,0.8); border: 1px solid #ddd; } #main { margin: 0 0 0 20px; padding: 0 19px 0 0; }

    Read the article

  • Delphi / MySql : Problems escpaing strings

    - by mawg
    N00b here, having problems escaping strings. I used the QuotedStr() function - shouldn't that be enough. Unfortunately, the string that I am trying to quote is rather messy, but I will post it here in case anyone wants to paste it into WinMerge or KDiff3, etc. I am trying to store an entire Delphi form into the database, rather than into a .DFM file. It has only one field, a TEdit edit box. The debugger shows the form as text as 'object Form1: TScriptForm'#$D#$A' Left = 0'#$D#$A' Top = 0'#$D#$A' Align = alClient'#$D#$A' BorderStyle = bsNone'#$D#$A' ClientHeight = 517'#$D#$A' ClientWidth = 993'#$D#$A' Color = clBtnFace'#$D#$A' Font.Charset = DEFAULT_CHARSET'#$D#$A' Font.Color = clWindowText'#$D#$A' Font.Height = -11'#$D#$A' Font.Name = 'MS Sans Serif''#$D#$A' Font.Style = []'#$D#$A' OldCreateOrder = False'#$D#$A' SaveProps.Strings = ('#$D#$A' 'Visible=False')'#$D#$A' PixelsPerInch = 96'#$D#$A' TextHeight = 13'#$D#$A' object Edit1: TEdit'#$D#$A' Left = 192'#$D#$A' Top = 64'#$D#$A' Width = 121'#$D#$A' Height = 21'#$D#$A' TabOrder = 8'#$D#$A' end'#$D#$A'end'#$D#$A before calling QuotedStr() and ''object Form1: TScriptForm'#$D#$A' Left = 0'#$D#$A' Top = 0'#$D#$A' Align = alClient'#$D#$A' BorderStyle = bsNone'#$D#$A' ClientHeight = 517'#$D#$A' ClientWidth = 993'#$D#$A' Color = clBtnFace'#$D#$A' Font.Charset = DEFAULT_CHARSET'#$D#$A' Font.Color = clWindowText'#$D#$A' Font.Height = -11'#$D#$A' Font.Name = ''MS Sans Serif'''#$D#$A' Font.Style = []'#$D#$A' OldCreateOrder = False'#$D#$A' SaveProps.Strings = ('#$D#$A' ''Visible=False'')'#$D#$A' PixelsPerInch = 96'#$D#$A' TextHeight = 13'#$D#$A' object Edit1: TEdit'#$D#$A' Left = 192'#$D#$A' Top = 64'#$D#$A' Width = 121'#$D#$A' Height = 21'#$D#$A' TabOrder = 8'#$D#$A' end'#$D#$A'end'#$D#$A''' afterwards. The strange thing is that my complete command 'INSERT INTO designerFormDfm(designerFormDfmText) VALUES ("'object Form1: TScriptForm'#$D#$A' Left = 0'#$D#$A' Top = 0'#$D#$A' Align = alClient'#$D#$A' BorderStyle = bsNone'#$D#$A' ClientHeight = 517'#$D#$A' ClientWidth = 993'#$D#$A' Color = clBtnFace'#$D#$A' Font.Charset = DEFAULT_CHARSET'#$D#$A' Font.Color = clWindowText'#$D#$A' Font.Height = -11'#$D#$A' Font.Name = ''MS Sans Serif'''#$D#$A' Font.Style = []'#$D#$A' OldCreateOrder = False'#$D#$A' SaveProps.Strings = ('#$D#$A' ''Visible=False'')'#$D#$A' PixelsPerInch = 96'#$D#$A' TextHeight = 13'#$D#$A' object Edit1: TEdit'#$D#$A' Left = 192'#$D#$A' Top = 64'#$D#$A' Width = 121'#$D#$A' Height = 21'#$D#$A' TabOrder = 8'#$D#$A' end'#$D#$A'end'#$D#$A''");' executes in a MySql console, but not from Delphi, where I pass that command as parameter command to a function which ADOCommand.CommandText := command; ADOCommand.CommandType := cmdText; ADOCommand.Execute(); I can only assume that I am having problems escpaing sequences which contain single quotes (and QuotedStr() doesn't seem to escape backslahes(?!)) What am I doing that is obviously, glaringly wrong?

    Read the article

  • HTML CheckBox labels within a container are not displayed as expected

    - by Tiny
    The following HTML code attempts to display checkboxes inside a <div></div> container. <div style="overflow: auto; width: auto; display:block; max-height:130px; max-width:200px; background-color: #FFF; height: auto; border: 1px double #336699; padding-left: 2px;"> <label for="chk12" style='white-space: nowrap;'> <input type='checkbox' id="chk12" name='chk_colours' value="12" class='validate[required] text-input text'> <div style='background-color:#FF8C00; width: 180px;' title="darkorange">&nbsp;&nbsp;</div> </label> <label for="chk11" style='white-space: nowrap;'> <input type='checkbox' id="chk11" name='chk_colours' value="11" class='validate[required] text-input text'> <div style='background-color:#D9D919; width: 180px;' title="brightgold">&nbsp;&nbsp;</div> </label> <label for="chk10" style='white-space: nowrap;'> <input type='checkbox' id="chk10" name='chk_colours' value="10" class='validate[required] text-input text'> <div style='background-color:#76EE00; width: 180px;' title="chartreuse2">&nbsp;&nbsp;</div> </label> <label for="chk9" style='white-space: nowrap;'> <input type='checkbox' id="chk9" name='chk_colours' value="9" class='validate[required] text-input text'> <div style='background-color:#2E0854; width: 180px;' title="indigo">&nbsp;&nbsp;</div> </label> <label for="chk8" style='white-space: nowrap;'> <input type='checkbox' id="chk8" name='chk_colours' value="8" class='validate[required] text-input text'> <div style='background-color:#292929; width: 180px;' title="gray16">&nbsp;&nbsp;</div> </label> </div> What it displays can be visible in the following snap shot. It is seen that various colour stripes which are displayed using the following <div> tag <div style='background-color:#FF8C00; width: 180px;' title="darkorange">&nbsp;&nbsp</div> are displayed below their respective checkboxes which are expected to be displayed in a straight line even though I'm using the white-space: nowrap; style attribute. How to display each stripe along with its respective checkbox in a straight line? It was explained in one of my questions itself but in that question each checkbox had a text label in place of such colour stripes. Here it is. I tried to do as mentioned in the accepted answer of that question but to no avail in this case.

    Read the article

  • ComboBox values disappears after selected when objects used for display

    - by Gakk
    I have a combobox where I want to display objects and have enum values returned. When first opened the combobox displays the items as supposed, but after a value is chosen it seems to disappear from the list. But if the combobox is active I can use the keyboard to navigate up and down between the other values, so they are in the list but only invisible. I have created a little test application to show my problem. When started the application shows the combobox with all the choices (the two first are type of Object, the third is a String): After the blue line is selected and when the combobox is opened again this line is missing: When the line with the text "Green" is selected that line is still showing: If I had chosen the red line the only thing that would still be in the list is the test "Green". I am using .NET Framework 3.5. Any hints or tips to why the elements disappears? Here are all the code needed after starting a blank project in Visual Studio. MainWindow.xaml.cs: using System; using System.Collections.Generic; using System.Diagnostics; namespace Test { public partial class MainWindow { public MainWindow() { InitializeComponent(); } private ColorComboBoxValue _activeColor; public ColorComboBoxValue ActiveColor { get { return _activeColor; } set { _activeColor = value; Debug.WriteLine("ActiveColor: " + _activeColor.Color); } } } public class ColorList : List<ColorComboBoxValue> { } public class ColorComboBoxValue { public Color Color { get; set; } public Object Object { get; set; } } public enum Color { Red, Blue, Green } } MainWindow.xaml: <Window x:Class="Test.MainWindow" x:Name="window" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:System="clr-namespace:System;assembly=mscorlib" xmlns:local="clr-namespace:Test" Title="ComboBoxTest" Height="100" Width="200"> <Window.Resources> <local:ColorList x:Key="ColorList"> <local:ColorComboBoxValue Color="Red"> <local:ColorComboBoxValue.Object> <Path Data="M0,0 L0,30 60,30 60,0 Z" Fill="Red"/> </local:ColorComboBoxValue.Object> </local:ColorComboBoxValue> <local:ColorComboBoxValue Color="Blue"> <local:ColorComboBoxValue.Object> <Path Data="M0,0 L0,30 60,30 60,0 Z" Fill="Blue"/> </local:ColorComboBoxValue.Object> </local:ColorComboBoxValue> <local:ColorComboBoxValue Color="Green"> <local:ColorComboBoxValue.Object> <System:String>Green</System:String> </local:ColorComboBoxValue.Object> </local:ColorComboBoxValue> </local:ColorList> </Window.Resources> <ComboBox ItemsSource="{Binding Source={StaticResource ColorList}}" SelectedItem="{Binding ActiveColor, ElementName=window}"> <ComboBox.ItemTemplate> <DataTemplate> <ContentPresenter Content="{Binding Path=Object}"/> </DataTemplate> </ComboBox.ItemTemplate> </ComboBox> </Window>

    Read the article

  • Description Class for Navigation Links not working

    - by Carmel
    My problem is with my navigation links. I've created a class for the links so that the link color is different from the typical links throughout. The problem is that the color defined in a:visited is taking precedence over the color defined in a:link. I've tried everything and can't work this out. Any suggestions?

    Read the article

  • Highlight row of form when input is focussed

    - by Jeepstone
    I have the following piece of Mootools 1.11 code (not upgradable as this is within Joomla), which I want to highlight the form row, when an item within it is focussed. However, this doesn't work. I need to know how to access the parent div of the form item. window.addEvent('domready', function() { var list = $$('#ChronoContact_lensorder div.formrow'); list.each(function(element) { var fx = new Fx.Styles(element, {duration:200, wait:false}); element.addEvent('focus', function(){ fx.start({ 'background-color': '#e6f0f2', color: '#FFF' }); }); element.addEvent('focus', function(){ fx.start({ 'background-color': '#FFF', 'color': '#2F9AD0' }); }); }); }); HTML is: <div class="formrow"> <label for="ud">Uncut Diameter:</label> <input type="text" id="ud" name="ud" /> </div> Thanks

    Read the article

  • HTML/CSS: Keep the same height between the backgrounds of a term-description pair in a table-like de

    - by peroyomas
    I want to format a definition list in HTML as if it were a table with th in a column and td in another, with a background that alternates per row (although a background for the dt and another for the dd also fits for the problem), so I have this CSS: dl { font-family: Verdana, Geneva, sans-serif; font-size: 0.6em; overflow: hidden; width: 200px;; } dl dt { font-weight: bold; float: left; clear: left; padding-right: 1%; width: 48%; } dl dt:nth-of-type(odd), dl dd:nth-of-type(odd) { background-color: #EEE; } dl dt:nth-of-type(even), dl dd:nth-of-type(even) { background-color: #DDD; } dl dd { float: left; width: 50%; padding-left: 1%; margin-left: 0; } Example HTML: <dl> <dt>Key 1</dt> <dd>Value 1</dd> <dt>Very very very long key 2 </dt> <dd>Value 2</dd> <dt>Key 3</dt> <dd>Value 3 with<br /> line breaks</dd> <dt>Key 4</dt> <dd>Value 4</dd> </dl> The problem is that, due to the eventual height dissimilarity, "holes" with no background appears in the list: Is there a way to fix that?

    Read the article

  • Table cells with space between them

    - by Naor
    I want to make the foollowing but with CSS classes - as simple as can be: <table cellspacing="0" cellpadding="0"> <tr> <td style="color:red;text-decoration:underline;padding-right:50px;>cell1</td> <td style="color:red;text-decoration:underline;>cell2</td> </tr> <tr> <td style="color:red;text-decoration:underline;padding-right:50px;>cell3</td> <td style="color:red;text-decoration:underline;>cell4</td> </tr> </table> What is the best way to do it?

    Read the article

  • CSS: How the backgrounds can extend the border and overlap?

    - by AlexStack
    I'm designing a navigation bar as shown in image below (a) with the following code: <ul> <li class="unselected">Step 1</li> <li class="selected">Step 2</li> <li class="unselected">Step 3</li> <li class="unselected">Step 4</li> <li class="unselected">Step 5</li> </ul> I want to have one background image for unselected steps (d) and one for the selected step (c). For simplicity let's assume Step 1 and Step 5 use the same background as well. I want to adjust the button background in HTML only with a class name. The question is how can I achieve the result with CSS? I just want to know how background of two neighbor elements can overlap each other?

    Read the article

  • double border with no space in between

    - by user330239
    Hi guys, i wanted to make a double border but with no space in between and the double border should be of different color. I tried using image instead but i thought css could probably perform this job for me, i searched the net but hardly find anything close. What i wanted is total of 2px dotted border with top color of #a4a4a4 and bottom color of #474747. Any idea how i can do this instead of creating 2 divs?

    Read the article

  • Why is this CustomValidator client function not firing?

    - by xaisoft
    I have a dropdown with the Id of "BACKGROUND" and if nothing is selected or the value is other, it should fire my client side validation function, but it is not. Am I missing something? I have the following client side function: function cv26(oSrc, args) {//BACKGROUND,BG_OTHER alert("cv26"); var otherCtrl = document.getElementById("BG_OTHER"); args.IsValid = (args.Value != " ") || (otherCtrl.value.length > 0); } My Custom validator looks like this: <asp:CustomValidator ID="cv26" runat="server" ErrorMessage="26. Background is required." ControlToValidate="BACKGROUND" ClientValidationFunction="cv26" Display="Dynamic" ValidateEmptyText="true">*</asp:CustomValidator>

    Read the article

  • Posting form using javascript and json with nested objects

    - by Tim
    I have an html form that has the following structure: <input type="text" name="title" /> <input type="text" name="persons[0].name" /> <input type="text" name="persons[0].color" /> <input type="text" name="persons[1].name" /> <input type="text" name="persons[1].color" /> I would like to serialize this into the following json: { "title":"titlecontent", "persons":[ { "name":"person0name", "color":"red" }, { "name":"person1name", "color":"blue" } ] } Notice that the number of persons can vary from case to case. The structure of the html form can change, but the structure of the submitted json can't. How is this done the easiest?

    Read the article

  • Inconsistent email formatting with inline css created using Javamail

    - by user1816183
    Okay, so I have a program that sends an email when it is finished running. I use inline css to format the email. This was working up until yesterday however now I am seeing different formats depending on which email account I view the email in. It coincides with an upgrade from Selenium 2.35.0 to 2.37.0 however I don't think this is my issue since I rolled back to 2.35.0 and it still happens. package tests; import java.util.Properties; import javax.mail.Message; import javax.mail.Session; import javax.mail.Transport; import javax.mail.internet.InternetAddress; import javax.mail.internet.MimeMessage; public class TESTTEST { public static void main(String[] args) throws Exception { Properties props = new Properties(); props.put("mail.smtp.host","xxx.xxx.xxx.xxx"); Session session = Session.getInstance(props); String emailFrom="[email protected]"; String emailTo1="[email protected]"; MimeMessage message = new MimeMessage(session); message.setSubject("Testing HTML Email"); message.setFrom(new InternetAddress(emailFrom)); String htmlBody = "<STYLE>body {font-family:sans-serif,arial,helvetica,sans-serif;font-size:9pt;}" +"TABLE {border-collapse:collapse;border:1px solid black;}" +"TH {background-color:grey;color:white;padding:5px;border:1px solid black;font-size:9pt;}" +"TD {padding:5px;border:1px solid black;font-size:9pt;}" +"H3 {font-size:12pt;}" +".PASSED {background-color:#00FF00}" +".FAILED {background-color:#FF0000}" +".SKIPPED {background-color:#DEDEDE}" +".ITALIC {font-style:italic}" +"</STYLE>" + "<TABLE><TR><TD CLASS=PASSED>FAIL</TD><TD STYLE=background-color:#FF0000>FAIL</TD></TR></TABLE>"; message.setContent(htmlBody, "text/html; charset=ISO-8859-1"); message.addRecipient(Message.RecipientType.TO,new InternetAddress(emailTo1)); Transport.send(message,message.getRecipients(Message.RecipientType.TO)); System.out.println(htmlBody); System.out.println("Email Sent"); } } When I view the email in Hotmail/Outlook.com, it looks fine In Gmail In Lotus Notes Anybody able to help?

    Read the article

  • Changing image domain / path in css for production?

    - by Neil
    Currently, for things like background images, our css files have no domain specified. This works both in our development and production environments. background-image: url(/images/bg.png); For performance reasons (cookie-less domain), we'd like to switch this: background-image: url(http://staticimagedomain.com/images/bg.png); Ideally, we don't hard code those, so our development environments can still pull locally. Any thoughts on how to best achieve this?

    Read the article

  • jQuery toggle pushing other elements around... bullies!!

    - by tony noriega
    Ok, so in the left_col of my page, i have a list UL LI that incorporates a jQuery toggle to open a small box, which is "LoginBox". <ul> <li class="members"><a href="/members/signon.asp?userType=member">Members</a></li> <li class="employers"><a href="/employers/signon.asp?userType=employer">Employers</a></li> <li class="providers"><a href="#LoginBox" class="clicker">Providers</a></li> <div class="loginbox" id="LoginBox"> <p>Medical</p> <p>Dental</p> </div> <li class="brokers"><a href="/brokers/signon.asp?userType=broker">Brokers</a></li> </ul> when the jQuery is invoked, it pushes the elements below it down. As expected. What i dont get is that i have an H3 tag below this UL LI which has a background image. The text portion of the H3 gets pushed down, but the background image seems to stay put, and the UL LI that gets pushed down just covers up the background image of the H3. why would the text move, but not the background image itself? here is the H3 style: .sectionmenu h3{ background: url(/_images/h3-triangle.gif) left center no-repeat; color: #000; font-size: 12px; font-weight: bold; padding: 4px 0px 4px 10px; margin: 0; border-bottom:1px dotted #aeaeae;; } and the login box style: .loginbox{ display:none; width:100px; height:50px; margin:0 0 0 77px; }

    Read the article

  • how to define div or table cell height depending on the height of other divs or cells

    - by John
    I want to have a web page that contains 3 parts: A header at the top of the page , a footer (both of which having specific height in px)and the main part of the page which should be a div or table cell with the appropriate height attribute in order to take all the available space between them. I want the page to take 100% of the browser window height, trying to avoid scrollbars. The problems I have are the following: USING DIVs a) If I set the maindiv height to 100%, the page overflows and I get a vertical scrolbar. (the maindiv's height is set to the 100% of the browser window) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <style type="text/css"> <!-- body, html{ height: 100%; max-height:100%; width: 100%; margin:0; padding:0; } div{padding:0;margin:0;} #containerdiv{height:100%;width:100%;background-color:#FF9;border:0;} #headerdiv{height:150px;width:100%;background-color:#0F0;border:0;} #footerdiv{height:50px;width:100%;background-color:#00F;border:0; } #maindiv{ background-color:#F00; height:100%; } div{border:#000 medium solid;border:0;} </style> <body> <div id="containerdiv"> <div id="headerdiv">headerdiv</div> <div id="maindiv">maindiv</div> <div id="footerdiv">footerdiv</div> </div> </body> </html> b) If I set the maindiv height to auto, the maindiv height is depending on it's content, which is not what I want. USING tables a) If I set the main cell height to 100% it works fine with Firefox but in Internet Explorer 8 I get a vertical scrollbar (you can use the next code block using th style="height:100%" instead of "auto" to see this.) b) If I set the main cell to auto it seems to be working both in IE and FF but then I have the problem that anything I put inside the maincell (table or div) cannot get maincell's full height in IE. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <style type="text/css"> <!-- body, html, table{ height: 100%; width: 100%; margin:0; padding:0; } table{border:#000 0px solid} </style> <body> <table style="background:#063" cellpadding="0" cellspacing="0" border="0"> <tr><th style="height:150px;background-color:#FF0"></th></tr> <tr> <th style="height:auto"><table style="background:#0FF;" cellpadding="0" cellspacing="0" border="0"><tr><th style="height:auto">nested cell</th></tr></table> </th> </tr> <tr><th style="height:50px;background-color:#FF0"></th></tr> </table> </body> </html> </html> Any ideas? Maybe there is an easier way to define the size of the main part of the page in px using javascript? (my javascript skills are pretty poor so any help with this is welcome!)

    Read the article

  • change an absolutely positioned webpage into a centered one

    - by Jonathan
    So I have this template design that is currently absolutely positioned, but I'm trying to make it centered in any widescreen browser. I've tried making the width auto on the left and right side in my container, but it is still aligned with the left side. Css .JosephSettin_png { position: absolute; left:0px; top:0px; width:216px; height:40px; background: url("JosephSettin.png") no-repeat; } .home_png { position: absolute; left:472px; top:16px; width:48px; height:16px; } .discography_png { position: absolute; left:528px; top:16px; width:80px; height:24px; } .purchase_png { position: absolute; left:608px; top:16px; width:88px; height:24px; } .about_png { position: absolute; left:696px; top:16px; width:48px; height:24px; } .contact_png { position: absolute; left:744px; top:16px; width:56px; height:24px; } .main__pic_png { position: absolute; left:0px; top:56px; width:264px; height:264px; background: url("main_pic.png") no-repeat; } .footer__lines_png { position: absolute; left:0px; top:512px; width:800px; height:24px; background: url("footer_lines.png") no-repeat; } .info__heading_png { position: absolute; left:32px; top:360px; width:216px; height:32px; background: url("info_heading.png") no-repeat; } .info__pic3_png { position: absolute; left:265px; top:360px; width:159px; height:112px; background: url("info_pic3.png") no-repeat; } .info__pic2_png { position: absolute; left:432px; top:360px; width:176px; height:112px; background: url("info_pic2.png") no-repeat; } .info__pic1_png { position: absolute; left:616px; top:360px; width:177px; height:112px; background: url("info_pic1.png") no-repeat; } .info__pane_png { position: absolute; left:0px; top:345px; width:800px; height:144px; background: url("info_pane.png") no-repeat; } body { text-align: center; background-color:maroon; } #wrapper { width: 800px; margin-left: auto; margin-right: auto; text-align: left; } #a { text-decoration: none; color:white; font-weight:bold; } .style1 { font-weight: bold; color: #FFFFFF; } html <body> <center> <div id="wrapper"> <div class="JosephSettin_png"> </div> <div class="home_png"> <a href="home.html" style="color:yellow">Home</a></div> <div class="discography_png"> <a href="discography.html">Discography</a></div> <div class="purchase_png"><a href="store.html"><span class="style1">Store</span></a></div> <div class="about_png"><a href="about.html">About</a></div> <div class="contact_png"><a href="contact.html"><span class="style1"></span>Contact</a></div> <div class="ad_png"> </div> <div class="main__pic_png"> </div> <div class="welcome__header_png"> </div> <div class="welcome__text_png"> </div> <div class="footer__lines_png"> </div> <div class="footer__text_png"> </div> <div class="info__pane_png"></div> <div class="info__heading_png"> </div> <div class="info__text_png"> </div> <div class="info__pic3_png"> </div> <div class="info__pic2_png"> </div> <div class="info__pic1_png"> </div> <div class="info__pic3_png"> </div> </div> </center> </body> I know the container I create works if all my div classes aren't absolutely positioned. Do I have to change the position or did I make another error?

    Read the article

  • Alternate colors on click with jQuery

    - by Jace Cotton
    I'm sure there is a simple solution to this, and I'm sure this is a duplicate question, though I have been unable to solve my solution particularly because I don't really know how to phrase it in order to search for other questions/solutions, so I'm coming here hoping for some help. Basically, I have spans with classes that assigns a background-color property, and inside those spans are words. I have three of these spans, and each time a user clicks on a span I want the class to change (thus changing the background color and inner text). HTML: <span class="alternate"> <span class="blue showing">Lorem</span> <span class="green">Ipsum</span> <span class="red">Dolor</span> </span> CSS: .alternate span { display : none } .alternate .showing { display : inline } .blue { background : blue } .green { background : green } .red { background : red } jQuery: $(".alternate span").each(function() { $(this).on("click", function() { $(this).removeClass("showing"); $(this).next().addClass("showing"); }); }); This solution works great using $.next until I get to the third click, whereafter .showing is removed, and is not added since there are no more $.next options. How do I, after getting to the last-child, add .showing to the first-child and then start over? I have tried various options including if($(".alternate span:last-child").hasClass("showing")) { etc. etc. }, and I attempted to use an array and for loop though I failed to make it work. Newb question, I know, but I can't seem to solve this so as a last resort I'm coming here.

    Read the article

  • css3 nth child question

    - by JCHASE11
    Hello. I am designing a 960px wide layout with an unordered list. Each list item is 240px wide, so 4 list items fit horizontally in a row. I have about 20 rows on the page.... I want every other list item to have a background of #ececec, so my css would be: ul li:nth-child(2n+2){ background-color:#ececec; } This works. The only problem is because there are 4 items in a row (an even #), the next row would be identical, thus rendering background colors on every 1st and 3rd list items in a row. This is not the effect I am looking to achieve. I want the background colors to alternate, creating a grid-like effect. What is the correct css to do so (think a checker board). Thanks!

    Read the article

  • css not:first-child selector

    - by OTARIKI
    I have div tag and him is several ul tags. If I trying set css properties only for first ul tag, this code works: div ul:first-child { background-color: #900; } But when i want set css properties each ul tags, except first, I trying this: div ul:not:first-child { background-color: #900; } also this div ul:not(:first-child) { background-color: #900; } and this div ul:first-child:after { background-color: #900; } But effect none. Someone tell please, how must write in css: "each element, except first" ?

    Read the article

  • Concurrent Threads in C# using BackgroundWorker

    - by Jim Fell
    My C# application is such that a background worker is being used to wait for the acknowledgement of some transmitted data. Here is some psuedo code demonstrating what I'm trying to do: UI_thread { TransmitData() { // load data for tx // fire off TX background worker } RxSerialData() { // if received data is ack, set ack received flag } } TX_thread { // transmit data // set ack wait timeout // fire off ACK background worker // wait for ACK background worker to complete // evaluate status of ACK background worker as completed, failed, etc. } ACK_thread { // wait for ack received flag to be set } What happens is that the ACK BackgroundWorker times out, and the acknowledgement is never received. I'm fairly certain that it is being transmitted by the remote device because that device has not changed at all, and the C# application is transmitting. I have changed the ack thread from this (when it was working)... for( i = 0; (i < waitTimeoutVar) && (!bAckRxd); i++ ) { System.Threading.Thread.Sleep(1); } ...to this... DateTime dtThen = DateTime.Now(); DateTime dtNow; TimeSpan stTime; do { dtNow = DateTime.Now(); stTime = dtNow - dtThen; } while ( (stTime.TotalMilliseconds < waitTimeoutVar) && (!bAckRxd) ); The latter generates a very acurate wait time, as compared to the former. However, I am wondering if removal of the Sleep function is interferring with the ability to receive serial data. Does C# only allow one thread to run at a time, that is, do I have to put threads to sleep at some time to allow other threads to run? Any thoughts or suggestions you may have would be appreciated. I am using Microsoft Visual C# 2008 Express Edition. Thanks.

    Read the article

  • asp.net page flickers

    - by user464111
    I have an asp.net webform. I have the background as an image,that when i aslo have a menu bar, when i click on an icon, it uses response.redirect() to redirect to a new page, but when it loads up the page, it seems like the background image is slow. I can see the backgroud as white first and then split seconds later the background image will load up, this causes an illusion of flickering when it redirects to a new page. How do i solve this problem? When i tested using visual studio web server, it dont flicker. I am using a background image in the master page hosted up on the internet.

    Read the article

  • Javascript autocomplete function href

    - by user896692
    I´ve the following javascript-function: <script type="text/javascript"> $(function() { var data = (<?php include("php/search_new.php"); ?>).Data.Recipes; var source = []; for (var i in data) { source.push({"href": "/php/get_recipe_byID.php?id=" + data[i].ID, "label": data[i].TITLE}); } $("#searchrecipes").autocomplete({ minLength: 3, source: source, select: function(event, ui) { window.location.href = ui.item.href; } }); }); </script> <input id="searchrecipes" type="text" name="searchrecipes" style="margin-left: 850px; margin-top: 0px; width:170px; background: #fff url(images/search_icon.png) no-repeat 100%;" onblur="this.style.background='#ffffff'; background: #fff url(images/search_icon.png) no-repeat 100%;" onfocus="this.style.background='#c40606'; background: url(images/search_icon.png) no-repeat 100%;" placeholder="Suchen..."></input> <input type="submit" name="buttonsenden" style="display:none;" value="" width: 5px></input> The function has already worked but suddenly it stopped working. The problem is, that the href on the dropdown-autocomplete isn´t clickable. var data = ({"Data":{"Recipes":{"Recipe_5":{"ID":"5","TITLE":"Spaghetti Bolognese"},"Recipe_7":{"ID":"7","TITLE":"Wurstel"},"Recipe_9":{"ID":"9","TITLE":"Schnitzel"},"Recipe_10":{"ID":"10","TITLE":null},"Recipe_19":{"ID":"19","TITLE":null},"Recipe_20":{"ID":"20","TITLE":"Hundefutter"},"Recipe_26":{"ID":"26","TITLE":"Apfelstrudel"},"Recipe_37":{"ID":"37","TITLE":null},"Recipe_38":{"ID":"38","TITLE":"AENDERUNG"},"Recipe_39":{"ID":"39","TITLE":null},"Recipe_40":{"ID":"40","TITLE":"Schnitzel"},"Recipe_42":{"ID":"42","TITLE":"Release-Test"},"Recipe_43":{"ID":"43","TITLE":"Wurstel2"}}},"Message":null,"Code":200}).Data.Recipes; All the necessary jquery scripts are available. What can be the problem?

    Read the article

  • CSS: right wrapper dropping off the end of the page

    - by user310606
    I have an issue with a site I am working on where the right wrapper keeps dropping down below the site. Obviously I want it to stay on the right hand side. I've coded up a test case which shows my issue (I think) and I'm wondering if there is a better way to do things. The website url is http://www.musicworkshop.co.nz/ Below is the test case which (I think) is the cause of my issue, however it may not be. The pink box drops down if it does not fit within the page width. Is there a better way to do this? John <html> <head> <title> Test page </title> <link rel="stylesheet" href="test.css" type="text/css" /> </head> <body> <div id="superbox"> <div id="box1"> </div> <div id="box2"> </div> <div id="box3"> </div> <div id="box4"> </div> <div id="box5"> </div> <div id="box6"> </div> </div> </body> </html> #outsidebox{ width: 100%; } #superbox{ width: 1000px; height: 100px; margin: 0 auto; } #box1{ height: 100px; width: 200px; background: red; float: left; } #box2{ height: 100px; width: 200px; background: yellow; float: left; } #box3{ height: 100px; width: 200px; background: blue; float: left; } #box4{ height: 100px; width: 200px; background: green; float: left; } #box5{ height: 100px; width: 200px; background: grey; float: left; } #box6{ height: 100px; width: 200px; background: pink; float: left; }

    Read the article

< Previous Page | 143 144 145 146 147 148 149 150 151 152 153 154  | Next Page >