Posts

Showing posts with the label CSS

Donate

Bootstrap Table Column Width And Word-Break Not Working Using Data-Width Attribute

-
Hello All, One of the issue that I had with Bootstrap Tables by Wenzhixin is that you can't set the width directly using data-width attribute given the code below. <th data-field= "description" data-sortable= "true" data-searchable= "true" data-width= "350px" > Description </th> After doing some research and experiments, the solution that worked for me is to set the Bootstrap Table table-layout style to fixed. Bootstrap Table CSS #tblEmployeeDependents { table-layout : fixed ; } And use data-class attribute instead of data-width property to set the column width. HTML Code <th data-field= "description" data-sortable= "true" data-searchable= "true" data-class= "tdDescription" > Description </th> Data-Class CSS Style .tdDescription { width : 350px ; word - break : break - word; }
Post a Comment
Read more

Inline-Block Elements Not Filling Up The Entire Width Of Div Container Using Width Percentage

-
Image
Hello, I encountered this issue several weeks ago and decided to put the solution here. This pertains to inline-block elements not occupying the entire width of the container. Each element's width is set using percentage instead of pixels. After doing some research, I found a solution here: Display Inline-Block with Widths as Percent with the solution to set the font-size of the container element to 0 and add style box-sizing to border-box. For the child elements, set the default font size. CSS Code .container { margin : 0 0 1em 0; border : 2px solid black; padding : 1em; font-size : 0; box-sizing: border -box; } nav { vertical-align : top ; display : inline - block ; width : 25%; word-wrap: break-word; background-color : lightgray; font-size : 16px; } .column { vertical-align : top ;
Post a Comment
Read more

How To Set Transparent Border Color In Internet Explorer 8 And Below Using CSS

-
Good evening! Normally, the css snippet below paints a transparent border to containers or divs using Mozilla Firefox, Chrome or IE9+. .NewsContent { background-color : #fff; border : 10px solid transparent ; background - clip : content -box; } However, for other IE8 and below, I had a hard time figuring out how to make the border transparent. Luckily, I found a link: Border Color Transparent in IE6 which serves as the basis on how to set transparent border color in Internet Explorer 8 and below using CSS below: .NewsContent { background-color : #fff; border : 10px solid black; filter: chroma( color =black); } Afterwards, the border color changed to transparent. MSDN link: MSDN Chroma Filter :)
Post a Comment
Read more

CSS Linear Gradients Not Working In Internet Explorer 9 But Working In Firefox And Chrome

-
Image
I came across with linear gradients not working correctly in IE 9. One solution suggested by a popular forum is to utilize an image as the background of a particular element. Since I'm not a graphic designer, I searched for other solution. I came up with an alternative which is to embed an svg file instead of an image file as an element's background. The css code below won't work in IE 9. body { background-image : -ms-linear-gradient( top , #000, #666); } Here's a solution using .svg file: <svg xmlns= "http://www.w3.org/2000/svg" width= "100%" height= "100%" viewBox= "0 0 1 1" preserveAspectRatio= "none" > <linearGradient id= "g762" gradientUnits= "userSpaceOnUse" x1= "0%" y1= "0%" x2= "0%" y2= "100%" > <stop stop-color= "#000000" offset= "0" /><stop stop-color= "#666666" o
Post a Comment
Read more

Apply Drop Shadow Effect To Text Using CSS (Cross Browser Compatibility Issue)

-
Image
Out of boredom, I tried manipulating the drop shadow effect of text in a simple html file. The browsers tested where IE 9, Firefox 12 and Chrome version 32.However, I found some difficulties on controlling the drop shadow effect in IE 9. After doing some research, I found a solution using filter. Here's my simple html markup: <!DOCTYPE html> <html> <head> <meta charset= "utf-8" /> <title>Chapter 2: Drop shadows on text</title> <link rel= "stylesheet" href= "textshadowGreg.css" /> <!-- http://reference.sitepoint.com/css/conditionalcomments --> <!--[if IE ]> <link href="textshadowIE.css" rel="stylesheet" type="text/css"> <![endif]--> </head> <body> <h1>What is CSS?</h1> <p> Cascading Style Sheets (CSS) is a style sheet language used for de
Post a Comment
Read more

CSS Pseudo Element Selector ::first-letter Not Working On Mozilla Firefox

-
I have a css and html markup below using ::first-letter selector. The markup below works in Google Chrome and Internet Explorer which changes the font size, weight and color properties of the first letter but not on Mozilla Firefox. .fourthwrapper ::first-letter { font-size : 200%; font-weight : bold ; color :brown; } <div class= "fourthwrapper" > <p> This is some text within a div with a class of wrapper. </p> </div> The solution would be to change the css code to specify that the first letter of the paragraph should be modified. .fourthwrapper p::first-letter { font-size : 200%; font-weight : bold ; color :brown; }
Post a Comment
Read more

URL Rewritting Resolve URL In My External CSS And JavaScript Files

-
I have applied url rewritting from scott: URL Rewriting Tutorial to make my url's SEO friendly. However, my css and javascript files are created internally (w/ in the page itself). When i tried separating my css and .js files, I usually encountered javascript errors such as: 1. GetCustomerDetail is undefined [based from Mozilla Firebug] 2. Microsoft JS runtime error: object required [Internet explorer] I tried googling for hours about object required and have'nt found an answer. As i read again scott's article, the last paragraph was a hint regarding how to resolve CSS and image external links. The solution I came up with was using Control.ResolveUrl() so that my external javascript and css files will work. src= '<%= Page.ResolveUrl("yourjsfile")%>' 2: href= '<%= Page.ResolveUrl("yourcssfile")%>' A good resource, but haven't tested yet. Westwind Tutorial FROM MSDN: MSDN
Post a Comment
Read more

Format Width Of AutocompleteExtender AjaxControlToolkit

-
By default, the width of the autocomplete list of autocomplete extender is inherited from the target control which is the textbox. However, you can customize the width and appearance of the ajax control: 1. Create an asp.net website 2. Add a webservice to your site 3. In your webservice, add a code to retrieve customer or any info. 4. In your asp.net website, add an aspx markup similar below:  Note that CompletionListElementID target control is the div called autocomplete declared below the textbox. <asp:ToolkitScriptManager ID= "ToolkitScriptManager1" runat= "server" > <Services> <asp:ServiceReference Path= "~/YourSampleService.asmx" /> </Services> </asp:ToolkitScriptManager> <div> <table> <tr> <td><asp:TextBox ID= "txtName" runat= "server" ></asp:TextBox></td> <td><div id= "AutoComplete" runat= "server&q
Post a Comment
Read more

CSS Color For ASP.NET Web FormsTextbox In Disabled State

-
i was wondering what's the hex equivalent of asp.net textbox color rendered in firefox/IE. The default color is: #7F9DB9 (Firefox/chrome/IE) #DADADA (Safari) CSS Code: 1 2 3 4 .Disabled { border-color : #7F9DB9 ; } Or you may use the border attribute and define other properties such as border-style, border-width and border-color.
Post a Comment
Read more

Donate