Search Results

Search found 11147 results on 446 pages for 'background foreground'.

Page 88/446 | < Previous Page | 84 85 86 87 88 89 90 91 92 93 94 95  | Next Page >

  • CSS position absolute doesn't work in IE7

    - by Syom
    i have the following simple script, but it doesn't work in IE7 <div id="content"> <div id="left"></div> <div id="right"></div> <div id="bottom_menus">any text here...</div> </div> and CSS #content { margin: 0 auto; padding: 0; width: 980px; background-color: lime; height: 800px; overflow: hidden; position: relative; } #left { width: 275px; float: left; background-color: olive; margin: 0px 0px -5000px 0; padding: 0 0 5000px 0; min-height: 400px; } #right { width: 704px; float: left; background-color: red; margin: 0px 0px -5000px 0; padding: 0 0 5000px 0; min-height: 400px; } #bottom_menus { background-color: orange; height: 15px; position: absolute; bottom: 0px; width: 100%; } why position absolute doesn't work? thanks in advance

    Read the article

  • Jquery Flexslider - can't see navigational images (manualControl)

    - by Kim Thomas
    I've spent a lot of time looking at the post on 3/13/12 re: manual controls, but isn't getting me all the way there...probably because I don't know jquery. Sorry, newbie on board. I'm trying to get the right/left arrows to show, as well as the 1, 2, 3...at the bottom. They are there, I see the lists on Firebug, just don't know how to add them to the "hook" (?) so they appear. Here is the code I have in header: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script src="jquery.flexslider.js"></script> <script type="text/javascript" charset="utf-8"> $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", slideshow: false, controlNav: true, manualControls: ".flex-control-nav li a", controlsContainer: ".flex-container" }); }); </script> Here is my html: <div class="flex-container"> <div class="flexslider"> <ul class="slides"> <li><img src="images/tah_home.jpg" alt="taylor art house home page" width="600" height="320"/> <p class="flex-caption">Taylor Art House Home Page</p></li> <li><img src="images/tah_blog.jpg" alt="taylor art house blog page" width="600" height="320" /> <p class="flex-caption">We created a blog that fits seemlessly into Taylor Art House's look</p></li> <li><img src="images/tah_artwork_page.jpg" alt="taylor art house art page" width="600" height="320" /> <p class="flex-caption">One of Taylor Art House's gallery pages, using a Wordpress plugin</p></li> <li><img src="images/tah_arch_portfolio.jpg" alt="jon taylor architecture portfolio page" width="600" height="320" /> <p class="flex-caption">We created links to toggle from TAH to Jon Taylor Architecture</p></li> </ul> </div><!--end flexsider--> </div><!--end flex-container--> Here is the Flexslider CSS: /* * jQuery FlexSlider v1.8 * http://www.woothemes.com/flexslider/ * * Copyright 2012 WooThemes * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php */ /* Browser Resets */ .flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus {outline: none;} .slides, .flex-control-nav, .flex-direction-nav {margin: 0; padding: 0; list-style: none;} /* FlexSlider Necessary Styles *********************************/ .flexslider { width: 100%; margin: 0; padding: 0; } .flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; } /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img { max-width: 100%; display: block; } .flex-pauseplay span { text-transform: capitalize; } /* Clearfix for the .slides element */ .slides:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } html[xmlns] .slides { display: block; } * html .slides { height: 1%; } /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */ .no-js .slides > li:first-child { display: block; } /* FlexSlider Default Theme *********************************/ .flexslider { width: 600px; background: #fff; border: 4px solid #999; position: relative; margin: 30px 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; zoom: 1; } .flexslider .slides { zoom: 1; } .flexslider .slides > li { position: relative; } /* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */ .flex-container { zoom: 1; position: relative; margin-left:100px; } /* Caption style */ /* IE rgba() hack */ .flex-caption { background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); zoom: 1; } .flex-caption { width: 96%; padding: 2%; margin: 0; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 14px; line-height: 18px; } /* Direction Nav */ .flex-direction-nav { height: 0; } .flex-direction-nav li a { width: 52px; height: 52px; margin: -13px 0 0; display: block; background: url(theme/bg_direction_nav.png) no-repeat; position: absolute; top: 50%; cursor: pointer; text-indent: -999em; } .flex-direction-nav li .next { background-position: -52px 0; right: -21px; } .flex-direction-nav li .prev { left: -20px; } .flex-direction-nav li .disabled { opacity: .3; filter:alpha(opacity=30); cursor: default; } /* Control Nav */ .flex-control-nav { width: 100%; position: absolute; bottom: -30px; text-align: center; } .flex-control-nav li { margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline; } .flex-control-nav li:first-child { margin: 0; } .flex-control-nav li a { width: 13px; height: 13px; display: block; background: url(theme/bg_control_nav.png) no-repeat; cursor: pointer; text-indent: -999em; } .flex-control-nav li a:hover { background-position: 0 -13px; } .flex-control-nav li a.active { background-position: 0 -26px; cursor: default; } Here is how it appears in Firebug: <div class="flex-container"> <div class="flexslider" style="overflow: hidden;"> <ul class="slides" style="width: 1200%; margin-left: -1800px;"> <li class="clone" style="width: 600px; float: left; display: block;"> <li style="width: 600px; float: left; display: block;"> <li style="width: 600px; float: left; display: block;"> <li style="width: 600px; float: left; display: block;"> <li style="width: 600px; float: left; display: block;"> <li class="clone" style="width: 600px; float: left; display: block;"> </ul> </div> <ol class="flex-control-nav"> <li> <a class="">1</a> </li> <li> <li> <li> </ol> <ul class="flex-direction-nav"> <li> <a class="prev" href="#">Previous</a> </li> <li> <a class="next" href="#">Next</a> </li> </ul> </div> Finally, here is a link to the jsFiddle file (I saw someone wanted that in other flexslider post): http://jsfiddle.net/kthms/Wxmsp/ Link to page: http://www.kajortdesigns.com/tah.php I've tried every combo of class from the CSS in the manualControl: "", but I'm just guessing. If anyone can help this newbie out, I would be very appreciative. Explicit instructions are always appreciated.

    Read the article

  • Call bindings for DependencyObject when DependencyProperites are changed

    - by melculetz
    Is there a way to notify a DependencyObject's bindinigs when the inner DependencyProperties have changed? For example, I have this class: public class BackgroundDef : DependencyObject { public static readonly DependencyProperty Color1Property = DependencyProperty.Register("Color1", typeof(Color), typeof(Background), new UIPropertyMetadata(Colors.White)); public static readonly DependencyProperty UseBothColorsProperty = DependencyProperty.Register("UseBothColors", typeof(bool), typeof(Background), new UIPropertyMetadata(false)); public static readonly DependencyProperty Color2Property = DependencyProperty.Register("Color2", typeof(Color), typeof(Background), new UIPropertyMetadata(Colors.White)); public Color Color1 { set { SetValue(Color1Property, value); } get { return (Color)GetValue(Color1Property); } } public bool UseBothColors { set { SetValue(UseBothColorsProperty, value); } get { return (bool)GetValue(UseBothColorsProperty); } } public Color Color2 { set { SetValue(Color2Property, value); } get { return (Color)GetValue(Color2Property); } } } For which I have 3 separate two-way bindings that set the values for Color1, Color2 and UseBothColors. But I also have a binding for a BackgroundDef instance, which should create a Brush and draw the background of a button (either a single color, or two gradient colors). My problem is that the two-way bindings for the DependencyProperties update the properties, but the binding for the class instance is not called, as apparently the entire object does not change. Any idea how I could call the bindings for the DependencyObject when the DependencyProperties are changed?

    Read the article

  • IE8 developer tools missing some styles

    - by Craig Warren
    Hi, I'm having some problems with some CSS properties in IE8. I've tested my site in IE7, Chrome and Firefox and they work fine but IE8 is having some layout issues. I inspect the developer tool option on ie8 and I've noticed that some of the properties I set in CSS are being ignored by ie8. For example: #header { position: relative; padding: 20px; height: 100px; background:url(header.png); } In this header IE8 ignored the height property: If I inspect the element in developer tools it is missing that property and it's crushed into another line: background:url;HEIGHT: 100PX The same thing happens for floats too: #logon { float: left; text-align:right; width:20%; height: 40px; padding-left: 0px; padding-right:7px; border:0; margin:0; background: url(navgradient.gif); } This ignores the float value: background: url(navgradient.gif); FLOAT:left; What is happening here and how can I fix it?

    Read the article

  • How to get a TextBlock to wrap text inside a DockPanel area?

    - by Edward Tanguay
    What do I have to do to get the inner TextBlock below to wrap its text without defining an absolute width? I've tried Width=Auto, Stretch, TextWrapping, putting it in a StackPanel, nothing seems to work. XAML: <UserControl x:Class="Test5.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:tk="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit" Width="800" Height="600"> <tk:DockPanel LastChildFill="True"> <StackPanel tk:DockPanel.Dock="Top" Width="Auto" Height="50" Background="#eee"> <TextBlock Text="{Binding TopContent}"/> </StackPanel> <StackPanel tk:DockPanel.Dock="Bottom" Background="#bbb" Width="Auto" Height="50"> <TextBlock Text="bottom area"/> </StackPanel> <StackPanel tk:DockPanel.Dock="Right" Background="#ccc" Width="200" Height="Auto"> <TextBlock Text="info panel"/> </StackPanel> <StackPanel tk:DockPanel.Dock="Left" Background="#ddd" Width="Auto" Height="Auto"> <ScrollViewer HorizontalScrollBarVisibility="Auto" Padding="10" BorderThickness="0" Width="Auto" VerticalScrollBarVisibility="Auto"> <tk:DockPanel HorizontalAlignment="Left" Width="Auto" > <StackPanel tk:DockPanel.Dock="Top" HorizontalAlignment="Left"> <Button Content="Add More" Click="Button_Click"/> </StackPanel> <TextBlock tk:DockPanel.Dock="Top" Text="{Binding MainContent}" Width="Auto" TextWrapping="Wrap" /> </tk:DockPanel> </ScrollViewer> </StackPanel> </tk:DockPanel> </UserControl>

    Read the article

  • Problems playing multiple sounds using AVPlayer (NOT AVAudioPlayer)

    - by myetter37
    I'm trying to play a background song in my iPhone game and also have sound effects, using the AVFoundation framework and AVPlayerItem. I've scoured the Internet for help with AVPlayerItem and AVPlayer but I'm only finding stuff about AVAudioPlayer. The background song plays fine, but when the character jumps, I have 2 problems: 1) On the initial jump ([player play] inside jump method), the jump sound effect interrupts the background music. 2) If I try to jump again, the game crashes with the error "AVPlayerItem cannot be associated with more than one instance of AVPlayer" My professor told me to create a new instance of AVPlayer for each sound I want to play, so I'm confused. I'm doing data driven design, so my sound files are listed in a .txt and then loaded into a NSDictionary. Here's my code: - (void) storeSoundNamed:(NSString *) soundName withFileName:(NSString *) soundFileName { NSURL *assetURL = [[NSURL alloc] initFileURLWithPath:[[NSBundle mainBundle] pathForResource:soundName ofType:soundFileName]]; AVURLAsset *mAsset = [[AVURLAsset alloc] initWithURL:assetURL options:nil]; AVPlayerItem *mPlayerItem = [AVPlayerItem playerItemWithAsset:mAsset]; [soundDictionary setObject:mPlayerItem forKey:soundName]; NSLog(@"Sound added."); } - (void) playSound:(NSString *) soundName { // from .h: @property AVPlayer *mPlayer; // from .m: @synthesize mPlayer = _mPlayer; _mPlayer = [[AVPlayer alloc] initWithPlayerItem:[soundDictionary valueForKey:soundName]]; [_mPlayer play]; NSLog(@"Playing sound."); } If I move this line from the second method into the first: _mPlayer = [[AVPlayer alloc] initWithPlayerItem:[soundDictionary valueForKey:soundName]]; The game does not crash, and the background song will play perfectly, but the jump sound effect does not play, even though the console is showing "Playing sound." on each jump. Thank you

    Read the article

  • Imageview in a listview - Height is bugged?

    - by Abdullah Gheith
    I am having a listview but i have problem i have the main.xml file, which contains a Listview: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/gradient" android:gravity="center" android:padding="1pt"> <ListView android:id="@+id/ListView01" android:layout_width="wrap_content" android:layout_height="fill_parent" android:background="@android:color/transparent" android:cacheColorHint="#00000000"/> </LinearLayout> Then, i have a custom listview file called listview.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" android:background="@android:color/transparent" android:cacheColorHint="#00000000"> <TextView android:gravity="center" android:textColor="#ffffff" android:background="#0097D0" android:text="Overskrift" android:id="@+id/tvOverskrift" android:layout_width="fill_parent" android:layout_height="wrap_content" android:textStyle="bold" /> <ImageView android:id="@+id/ivBillede" android:scaleType="fitXY" android:padding="2px" android:gravity="fill" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/test"/> <TextView android:gravity="center" android:textColor="#ED2025" android:text="Dato" android:id="@+id/tvDato" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textStyle="normal"/> <TextView android:gravity="left" android:textColor="#000000" android:text="Indledning" android:id="@+id/tvIndledning" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textStyle="normal"/> </LinearLayout> the bitmap in the imagview i am getting is from a URL. By that code, i am getting is this: http://img585.imageshack.us/img585/5665/unavngivetv.png I am getting too much space in the height as you see

    Read the article

  • Beginner question about CSS and layout and height

    - by vtortola
    Hi, I'm trying to create a very simple page that contains a container, a header, a left column and a footer: [containter] [header /] [content /] [leftBar /] [footer /] [/containter] (Sorry, I cannot paste the code properly, only appears the tag "body" and the rest disapears :S ... ) As you can see, very simple stuff. I want to use the 100% of the height, as I can do with the width, but I simply don`t get it work :S At his moment I'm using min-height, but how could I use the height:100% ? What I like is that the footer is always visible, and you scroll the content. This is what I have till the moment: body { font-family: Verdana; font-size: 0.8em; background-color:#f1f1f1; } container { border:solid 2px Black; position:absolute; left:10%; width:80%; margin:auto; } header { height:20px; background: #DDDDDD; } leftBar { width: 20%; background: #669966; min-height:600px; postion:absolute; top:20px; bottom:20px; } content { float:right; background-color: #cdcde6; position:absolute; left:20%; right:0px; bottom:20px; top:20px; padding:5px; } footer { position:absolute; height:20px; } I'm reading a book about CSS, but I still don't get the part about the height :S Thanks in advance.

    Read the article

  • CSS menu broken in Firefox (display:table-cell;)

    - by roman m
    HTML: <td align="center" width="100%"> <a class="Forum_ib_moderate" href="Default.aspx" title="Moderate"></a> <a class="Forum_ib_admin" href="Default.aspx" title="Admin"></a> ... CSS: A.Forum_ib_moderate:link, A.Forum_ib_moderate:visited, A.Forum_ib_moderate:active, A.Forum_ib_moderate:hover { background-image: url(images/ib_moderate.png); background-repeat: no-repeat; background-position: center; padding-left: 2px; padding-right: 2px; padding-top: 8px; padding-bottom: 0px; height: 35px; width: 35px; display:table-cell; } A.Forum_ib_admin:hover { background-image: url(images/ib_admin_hover.png); } the menu looks just fine in IE, shows up vertical in Firefox. If i turn off "display:table-cell;" style in Firebug and then turn it back on, it fixes that menu node. any ideas? p.s.: i don't want to mess with the menu itself, since it's a part of a DNN Forum 4.4.3. I'd rather fix the CSS to make it show correctly.

    Read the article

  • Getting error: "This webpage is not available" for my chrome app's options page

    - by Don Rhummy
    My CRX had the proper html page options.html in it, the manifest declares it properly (it shows up as a link on the chrome://extensions page) but when I click that link, Chrome gives the error: This webpage is not available The webpage at chrome-extension://invalid/ might be temporarily down or it may have moved permanently to a new web address. It says "invalid" but the app runs perfectly well (all the content scripts run, the background created a database and saved to it). Why would it show as invalid? Why doesn't it have the extensions' id? Here's the manifest: { "manifest_version": 2, "name": "MyAPP", "description": "My App", "version": "0.0.0.32", "minimum_chrome_version": "27", "offline_enabled": true, "options_page": "options.html", "icons": { "16": "images/icon16.png", "48": "images/icon48.png", "128": "images/icon128.png" }, "app": { "background": { "scripts": [ "scripts/background.js" ] } }, "permissions": [ "unlimitedStorage", "fullscreen", { "fileSystem": [ "write" ] }, "background", "<all_urls>", "tabs" ] } Does it need to be declared in "web_accessible_resources"? Any idea what's wrong? Update Adding to "web_accessible_resources" does not fix the issue. I added everything on that page too. update 2 It looks like it might be a Chrome bug for packaged apps. When I remove the "app" section in the manifest, it works! This is a bug since the Chrome app documentation states that apps can have options pages: https://developer.chrome.com/apps/options.html

    Read the article

  • Programatic re-evalutation of MVVM command's "can execute" state

    - by dzs
    Hello! I'm writing a WPF application using the MVVM pattern, based on the following article: WPF Apps With The Model-View-ViewModel Design Pattern I have two buttons on my View with the buttons' "Command" property bound (with data binding) to a given instance of the RelayCommand class (see "Figure 3 The RelayCommand Class" from the article above). The RelayCommand class has support for checking whether the given command can be executed. WPF automatically disables buttons whose command cannot be executed. Each of my commands (in the ViewModel class) start a background operation, and the command cannot be executed again until the background operation is finished. The RelayCommand instances have information whether the background operation is still working or it is finished. My problem is the following: after pressing the any of the buttons, the buttons automaticaly go disabled (which is OK) because the background operation started and the command cannot be executed until it is finished, but after the operation had finished, the buttons don't go enabled automatically because their command's "can be executed" predicate is not automatically reevaluated. The reevaluation can be manually triggered by having the application loose and regain focus (by pressing ALT+TAB). After doing this trick, the buttons get enabled once again. How can I programatically reevaluate the buttons' command's "can execute" state?

    Read the article

  • Setting EditText imeOptions to actionNext has no effect

    - by Katedral Pillon
    I have a fairly complex (not really) xml layout file. One of the views is a LinearLayout (v1) with two children: an EditText(v2) and another LinearLayout(v3). The child LinearLayout in turn has an EditText(v4) and an ImageView(v5). For EditText v2 I have imeOptions as android:imeOptions="actionNext" But when I run the app, the keyboard's return does not check to next and I want it to change to next. How do I fix this problem? Also, when user clicks next, I want focus to go to EditText v4. I do I do this? For those who really need to see some code: <LinearLayout android:id="@+id/do_txt_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/col6" android:orientation="vertical" android:visibility="gone" > <EditText android:id="@+id/gm_title" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="5dp" android:background="@drawable/coldo_text" android:hint="@string/enter_title" android:maxLines="1" android:imeOptions="actionNext" android:padding="5dp" android:textColor="pigc7" android:textSize="ads2" /> <LinearLayout android:layout_width="match_parent" android:layout_height="100dp" android:orientation="horizontal" > <EditText android:id="@+id/rev_text" android:layout_width="0dp" android:layout_height="match_parent" android:layout_gravity="center_vertical" android:layout_margin="5dp" android:layout_weight="1" android:background="@drawable/coldo_text" android:hint="@string/enter_msg" android:maxLines="2" android:padding="5dp" android:textColor="pigc7" android:textSize="ads2" /> <ImageView android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="center_vertical" android:background="@drawable/colbtn_r” android:clickable="true" android:onClick=“clickAct” android:paddingLeft="5dp" android:paddingRight="5dp" android:src="@drawable/abcat” /> </LinearLayout> </LinearLayout>

    Read the article

  • Broadcasting an intent to a specific component.

    - by Nic Strong
    I have an activity that is starting a background operation in another service. This activity receives various notifications from this service. As part of the intent I use to initiate the background operation I pass extra data with the context of my activity so the background service can broadcast intents back to me (the download service is a good example of this usage). So in the activity I use the following to attach the context: intent.putExtra(Intents.EXTRA_NOTIFICATION_PACKAGE, IntentTestActivity.this.getPackageName()); intent.putExtra(Intents.EXTRA_NOTIFICATION_CLASS, IntentTestActivity.class.getCanonicalName()); intent.putExtra(Intents.EXTRA_NOTIFICATION_EXTRAS, myContext); I register for the notifications in the activity: IntentFilter intentFilter = new IntentFilter(); intentFilter.addAction(Intents.ACTION_NOTIFICATION); intentFilter.addCategory(Intents.CATEGORY_COMPLETION); intentFilter.addCategory(Intents.CATEGORY_PROGRESSS); Intent intent = registerReceiver(receiver, intentFilter); In the background service I send notifications with the following code: void broadcastNotification(String action, String category, String packageName, String className, String extras, int operationResult) { Intent intent = new Intent(action); intent.addCategory(category); intent.setClassName(packageName, className); if (extras != null) { intent.putExtra(Intents.EXTRA_NOTIFICATION_EXTRAS, extras); } intent.putExtra(Intents.EXTRA_OPERATION_RESULT, operationResult); context.sendBroadcast(intent); } My problem is that the above broadcast will never be received. If however I comment out the line intent.setClassName(packageName, className); Then the broadcast is received. Is it a problem with my filter? Do I have to specify intents intended for a specific component? Or cannot I not use such fine grain control over the delivery of broadcasts. Thanks, Nic

    Read the article

  • Splitting an image in GWT results in unwanted white space

    - by rancidfishbreath
    I am using GWT 2.03 and am have an image that I want to place partially in an area with a background and partially above a background. I am using a FlexTable to try to accomplish this and have used GIMP to cut the image into two sections. I am trying to load the top part of the image into row 0 and the bottom part of the image into row 1. I set the alignment of the top image to ALIGN_BOTTOM but there is a bit of space at the bottom of cell and so the two parts of the picture don't touch. Here is an image showing what I am talking about. I set the background of the cell to be yellow show where the cell boundaries are. The bottom image and background are rendering correctly. Here is the relevant code snippet: FlexTable table = new FlexTable(); table.setCellSpacing(0); table.setCellPadding(0); table.setBorderWidth(0); FlexCellFormatter formatter = table.getFlexCellFormatter(); table.setWidget(0, 0, topImage); formatter.setStyleName(0, 0, "topImageStyle"); formatter.setVerticalAlignment(0, 0, HasVerticalAlignment.ALIGN_BOTTOM); table.setWidget(1, 0, bottomImage); formatter.setStyleName(1, 0, "bottomImageStyle"); How can I get rid of that space between my image and the cell boundary?

    Read the article

  • jQuery plugin Tablesorter 2.0 behaves weird

    - by gunther-von-goetzen-sanchez
    I downloaded the jQuery plugin Tablesorter 2.0 from http://tablesorter.com/jquery.tablesorter.zip and modified the example-pager.html which is in tablesorter/docs directory I wrote additional Rollover effects: $(function() { $("table") .tablesorter({widthFixed: true, widgets: ['zebra']}) .tablesorterPager({container: $("#pager")}); /** Additional code */ $("tr").mouseover(function () { $(this).addClass('over'); }); $("tr").mouseout(function () { $(this).removeClass('over'); }); $("tr").click(function () { $(this).addClass('marked'); }); $("tr").dblclick(function () { $(this).removeClass('marked'); }); /** Additional code END */ }); And of course modified the themes/blue/style.css file: /* Additional code */ table.tablesorter tbody tr.odd td { background-color: #D1D1F0; } table.tablesorter tbody tr.even td { background-color: #EFDEDE; } table.tablesorter tbody tr.over td { background-color: #FBCA33; } table.tablesorter tbody tr.marked td { background-color: #FB4133; } /* Additional code END*/ All this works fine BUT when I go to further pages i.e. page 2 3 or 4 the effects are gone! I really appreciate your help

    Read the article

  • How do I change the CellErrorStyle for an Xceed Datagrid?

    - by Bob
    So in the Xceed documentation there is a code example that does not work for me. It may be because my grid is bound to a DataGridCollectionView. The objects in the collection used by the datagridcollection are what implement IDataErrorInfo. The errors are showing up just fine. The problem is that they are using the default orange background for errors...I need a red border. Below is the XAML instantiation of my grid. I set the DataCell background property to red just so I could be sure I had access to the grid's properties... I do. I just can't find the way to identify the cell's w/ errors so I can style them. Thanks! <XceedDG:DataGridControl Grid.Row="1" Grid.ColumnSpan="5" ItemsSource="{Binding Path = ABGDataGridCollectionView, UpdateSourceTrigger=PropertyChanged}" Background="{x:Static Views:DataGridControlBackgroundBrushes.ElementalBlue}" IsDeleteCommandEnabled="True" FontSize="16" AutoCreateColumns="False" x:Name="EncounterDataGrid" AllowDrop="True"> <XceedDG:DataGridControl.View> <Views:TableView ColumnStretchMode="All" ShowRowSelectorPane="True" ColumnStretchMinWidth="100"> <Views:TableView.FixedHeaders> <DataTemplate> <XceedDG:InsertionRow Height="40"/> </DataTemplate> </Views:TableView.FixedHeaders> </Views:TableView> </XceedDG:DataGridControl.View> <!--Group Header formatting--> <XceedDG:DataGridControl.Resources> <Style TargetType="{x:Type XceedDG:GroupByControl}"> <Setter Property="Visibility" Value="Collapsed"/> </Style> <Style TargetType="{x:Type XceedDG:DataCell}"> <Setter Property="Background" Value="Red"/> </Style> </XceedDG:DataGridControl.Resources> ...

    Read the article

  • jQuery accordion - different image for active sections

    - by Andrew Cassidy
    Hi, I'm using Ryan Stemkoski's "Stupid Simple Jquery Accordion Menu" which is available here: stemkoski.com/stupid-simple-jquery-accordion-menu/ Here is the javascript $(document).ready(function() { //ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING) $('.accordionButton').click(function() { //REMOVE THE ON CLASS FROM ALL BUTTONS $('.accordionButton').removeClass('on'); //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES $('.accordionContent').slideUp('normal'); //IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT if($(this).next().is(':hidden') == true) { //ADD THE ON CLASS TO THE BUTTON $(this).addClass('on'); //OPEN THE SLIDE $(this).next().slideDown('normal'); } }); /*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/ //ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER $('.accordionButton').mouseover(function() { $(this).addClass('over'); //ON MOUSEOUT REMOVE THE OVER CLASS }).mouseout(function() { $(this).removeClass('over'); }); /*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/ /******************************************************************************************************************** CLOSES ALL S ON PAGE LOAD ********************************************************************************************************************/ $('.accordionContent').hide(); }); and the CSS #wrapper { width: 800px; margin-left: auto; margin-right: auto; } .accordionButton { width: 800px; float: left; _float: none; /* Float works in all browsers but IE6 */ background: #003366; border-bottom: 1px solid #FFFFFF; cursor: pointer; } .accordionContent { width: 800px; float: left; _float: none; /* Float works in all browsers but IE6 */ background: #95B1CE; } /*********************************************************************************************************************** EXTRA STYLES ADDED FOR MOUSEOVER / ACTIVE EVENTS ************************************************************************************************************************/ .on { background: #990000; } .over { background: #CCCCCC; } There is an "on" class which allows the style of the accordionButton class when it is active but I would like to be able to have each active accordionButton class have a different image. http://www.thepool.ie For example, in the above site the word "WORK" should be a darker grey image when the work section is selected, so should COLLAB when it is selected etc. I can't figure out how to do this, any help would be greatly appreciated. Thanks, Andrew

    Read the article

  • Cross-browser padding/margins

    - by Lucifer
    Hi All, I was wondering if you could give me some helpful hints on how to correct this issue? I have a main menu on my site, the code for it is as follows: li:hover { background-color: #222222; padding-top: 8px; padding-bottom: 9px; } And here's a demo of what it actually looks like: The problem is that when I hover over a menu option (li), the background appears, but it overflows to the outside of the menu's background, and makes it look really dodgy/crap/cheap/yuck! Note that (obviously) when I change the padding to make it display correctly in these browsers, it appears too small in height in IE! So I'm screwed either way. How can I make little imperfections like this look the same in all browsers? Update: HTML (The menu): <ul class="menu"> <li class="currentPage" href="index.php"><a>Home</a></li> <li><a href="services.php">Services</a></li> <li><a href="support.php">Support</a></li> <li><a href="contact.php">Contact Us</a></li> <li><a href="myaccount/" class="myaccount">My Account</a></li> </ul> The CSS: .menu { margin-top: 5px; margin-right: 5px; width: 345px; float: right; } li { font-size: 9pt; color: whitesmoke; padding-left: 6px; padding-right: 8px; display: inline; list-style: none; } li:hover { background-color: #222222; padding-top: 8px; padding-bottom: 9px; }

    Read the article

  • Problems with jQuery plugin Tablesorter 2.0

    - by gunther-von-goetzen-sanchez
    I downloaded the jQuery plugin Tablesorter 2.0 from http://tablesorter.com/jquery.tablesorter.zip and modified the example-pager.html which is in tablesorter/docs directory I wrote additional Rollover effects: $(function() { $("table") .tablesorter({widthFixed: true, widgets: ['zebra']}) .tablesorterPager({container: $("#pager")}); $("tr").mouseover(function () { $(this).addClass('over'); }); $("tr").mouseout(function () { $(this).removeClass('over'); }); $("tr").click(function () { $(this).addClass('marked'); }); $("tr").dblclick(function () { $(this).removeClass('marked'); }); }); And of course modified the themes/blue/style.css file: /* Additional code */ table.tablesorter tbody tr.odd td { background-color: #D1D1F0; } table.tablesorter tbody tr.even td { background-color: #EFDEDE; } table.tablesorter tbody tr.over td { background-color: #FBCA33; } table.tablesorter tbody tr.marked td { background-color: #FB4133; } /* Additional code END*/ All this works fine BUT when I go to further pages i.e. page 2 3 or 4 the effects are gone! I really appreciate your help

    Read the article

  • Following code overflows my browser window

    - by oneat
    Why following HTML (CSS) code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> </head> <body> <style type="text/css"> *{margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;} div#header{width:100%;height:10%;min-width:100px;height:30%;background-color:red;} div#left_bar{width:20%;height:85%;float:left;background-color:green;} div#content{width:80%;height:85%;float:left;background-color:yellow;} div#foot{width:100%;height:5%;clear:both;background-color:black;} </style> <div id="header">a</div> <div id="left_bar">s</div> <div id="content">d</div> <div id="foot">f</div> </body> </html> Fails to fill my browser's (firefox 3.6.13 linux) window? I mean that I have to scroll down to see bottom. Any ideas?

    Read the article

  • positioning text/image with a border

    - by user167487
    Learning html/css, having trouble with positioning text and or images within a border on a page exactly where i want them. I'm first trying to stack them underneath each other vertically, but i dont know how to move each box underneath, at the moment they are stacking horizontally until they go over the max width, what do i do? HTML: <div id="column1"> <p>blah blah blah</p> </div> <div id="column2"> <p>blah blah blah</p> </div> <div id="column3"> <p>blah blah blah</p> </div> CSS: p { font-family: Tahoma; font-size: 14px; margin: 1px; padding: 10px; text-align: left; background-color: white; width: 800px; } #column1 {float: left; position: relative; width: 200px; padding: 3px; background: gray ; top: 10px;margin: 1px; } #column2 {float: left; position: relative; width: 200px; padding: 3px; background: orange; top:50px;margin: 1px; } #column3 {float: left; position: relative; width: 200px; padding: 3px; background: gray; top: 100px;margin: 1px; }

    Read the article

  • Listen to double click not click

    - by Mohsen
    I'm just wondering why click event happening when I dbclick an element? I have this code:(JSBIN) HTML <p id="hello">Hello World</p> JavaScript document.getElementById('hello').addEventListener('click', function(e){ e.preventDefault(); this.style.background = 'red'; }, false); document.getElementById('hello').addEventListener('dbclick', function(){ this.style.background = 'yellow'; }, false); It should do different things for click and double click, but it seems when you double click on the p it catch click event in advance and ignore double click. I tried preventDefault the click event too. How can I listen to just dbclick? UPDATE I had a typo in my code. dbclick is wrong. It's dblclick. Anyway the problem still exist. When user double clicks the click event happens. This is updated code that prove it:(JSBin) document.getElementById('hello').addEventListener('click', function(e){ e.preventDefault(); this.style.background = 'red'; this.innerText = "Hello World clicked"; }, false); document.getElementById('hello').addEventListener('dblclick', function(){ this.style.background = 'green'; }, false);

    Read the article

  • DD_belatedPNG.js - how to access the vml object? this is for a PNG image-swap.

    - by akc
    I am trying to use Drew Dillard's awesome DD_belatedPNG fix + jQuery to achieve a run-of-the-mill image-swap on hover -- but with PNGs, and to work on IE6. Example: <a id="thelink" href="blah.html"><img src="f-u-ie6.png" /></a> Since DD's script sets the visibility of the original image to "hidden", you can't effectively hover over it. A lot of people, I have noticed, are thwarted by this limitation. Enough so that Drew mentioned he would try to get a work-around into the next version of his PNG fix. Well, in the meantime, I thought I could get around this by handling the hover event on the image's parent instead. So onmouseover, I would hide the VML object created by DD_belatedPNG while setting a background image on "thelink", and onmouseout, show the VML object again and set the background image to nothing. The following code was just to see if I could access the VML object, but it does not work on the VML. It hides all manner of other children, but not the VML. Any ideas? $(document).ready(function(){ $("thelink").hover(function() { $(this).children().attr({ style: "visibility:hidden" }); }, function() { $(this).children().attr({ style: "visibility:visible" }); }); }); Alternatively, can anyone suggest a great PNG image-swap method? I know that you can swap a background image of a link. But you still need to have something inside the A tag. That's not my case. Also, you could put a transparent GIF in the A tag and have the background image swapped to achieve the effect, but I really don't want to do that. Thanks for your insights!

    Read the article

  • Why hovering in this menu is not working in IE?

    - by janoChen
    When a anchor is hovered in this menu it should turn its background white. It works in Firefox and Chrome but in IE the words just disappear and the background doesn't turn white. CSS: #lang { float: right; padding: 0 0 0 0; margin: 50px 25px 0 0; width: 285px; } #lang li { font-size: 10px; float: right; } #lang li a#english, #spanish, #chinese { color: #FFF; float: right; padding-right: 20px; padding-top: 2px; padding-bottom: 2px; width: 200px; /* ie fix */ } #lang li a#english { padding-left: 231px; } #lang li a#spanish { padding-left: 228px; } #lang li a#chinese { padding-left: 219px; } #lang li a:hover { background: #FFF; color: #444; } #lang li.current a { background: #FFF !important; color: #444 !important; cursor: default; } HTML: <ul id="lang"> <li <?php if($lang_file=='lang.en.php') {echo 'class="current"';} ?>><a id="english" href="index.php?lang=en">english</a></li> <li <?php if($lang_file=='lang.es.php') {echo 'class="current"';} ?>><a id="spanish" href="index.php?lang=es">español</a></li> <li <?php if($lang_file=='lang.zh-tw.php') {echo 'class="current"';} ?>><a id="chinese" href="index.php?lang=zh-tw">??(??)</a></li> <li <?php if($lang_file=='lang.zh-cn.php') {echo 'class="current"';} ?>><a id="chinese" href="index.php?lang=zh-cn">??(??)</a></li> </ul>

    Read the article

  • Determine if the current thread has low I/O priority

    - by Magnus Hoff
    I have a background thread that does some I/O-intensive background type work. To please the other threads and processes running, I set the thread priority to "background mode" using SetThreadPriority, like this: SetThreadPriority(GetCurrentThread(), THREAD_MODE_BACKGROUND_BEGIN); However, THREAD_MODE_BACKGROUND_BEGIN is only available in Windows Server 2008 or newer, as well as Windows Vista and newer, but the program needs to work well on Windows Server 2003 and XP as well. So the real code is more like this: if (!SetThreadPriority(GetCurrentThread(), THREAD_MODE_BACKGROUND_BEGIN)) { SetThreadPriority(GetCurrentThread(), THREAD_PRIORITY_LOWEST); } The problem with this is that on Windows XP it will totally disrupt the system by using too much I/O. I have a plan for a ugly and shameful way of mitigating this problem, but that depends on me being able to determine if the current thread has low I/O priority or not. Now, I know I can store which thread priority I ended up setting, but the control flow in the program is not really well suited for this. I would rather like to be able to test later whether or not the current thread has low I/O priority -- if it is in "background mode". GetThreadPriority does not seem to give me this information. Is there any way to determine if the current thread has low I/O priority?

    Read the article

< Previous Page | 84 85 86 87 88 89 90 91 92 93 94 95  | Next Page >