Use `top: auto` to &quot;reset&quot; `top` to its [initial value](https://developer.mozilla.org/en/CSS/top).

`bottom` is a totally separate property to `top` ([an element can have both a `top` and `bottom`](http://jsfiddle.net/gcJvp/)), so perhaps you won&#39;t need `bottom` anymore.

Also, make sure your override selector is [specific enough][1], but it doesn&#39;t sound like that&#39;s the problem in this case.


  [1]: http://css-tricks.com/specifics-on-css-specificity/

    .my .element { position: inherit !important; top: auto; }

There is an option in IB to uncheck vertical scrolling on a scrollview, but it doesnt seem to work.

How can the scrollview be set to only scroll horizontally, and not vertically in the code rather than IB?



Disabling vertical scrolling in UIScrollView

How do you split a long piece of text into separate lines? Why does this return *line1* twice?

    /^(.*?)$/mg.exec(&#39;line1\r\nline2\r\n&#39;);

&gt; [&quot;line1&quot;, &quot;line1&quot;]

I turned on the multi-line modifier to make `^` and `$` match beginning and end of lines.  I also turned on the global modifier to capture *all* lines.

I wish to use a regex split and not `String.split` because I&#39;ll be dealing with both Linux `\n` and Windows `\r\n` line endings. 

JS regex to split by line

I&#39;m having a problem with overriding some plugin CSS. Editing that CSS directly is not really an option, as it would make updating the plugin more risky. 

The problem: an element has absolute positioning, and has top:0px in the original. I want to override it by bottom:0px. 

For the sake of example 

        .element {position:absolute; top:0;}
    
        /* in another file */
        .my .element {bottom:0;}

On firefox this works ok (bottom:0 is the applied style), but safari/chrome don&#39;t seem to be get over the top:0.

I can work around this problem, but it would be nice to come up with a clean solution.


CSS (webkit): overriding top with bottom on absolute-positioned element

I'm having a problem with overriding some plugin CSS. Editing that CSS directly is not really an option, as it would make updating the plugin more risky.
The problem: an element has absolute positioning, and has top:0px in the original. I want to override it by bottom:0px.
For the sake of example
<pre><code class="hljs language-css"> .element {position:absolute; top:0;}

 /* in another file */
 .my .element {bottom:0;}
</code></pre>
On firefox this works ok (bottom:0 is the applied style), but safari/chrome don't seem to be get over the top:0.
I can work around this problem, but it would be nice to come up with a clean solution.

Given this HTML and CSS:

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;p&gt;
        &lt;span&gt; Foo &lt;/span&gt;
        &lt;span&gt; Bar &lt;/span&gt;
    &lt;/p&gt;
&lt;!-- language: lang-css --&gt;

    span {
        display:inline-block;
        width:100px;
        background-color:palevioletred;
    }
    &lt;!-- end snippet --&gt;

As a result, there will be a 4&amp;nbsp;pixel wide space between the SPAN elements.

**Demo:** http://jsfiddle.net/dGHFV/

I understand why this happens, and I also know that I could get rid of that space by removing the white-space between the SPAN elements in the HTML source code, like so:

&lt;!-- language: lang-html --&gt;

    &lt;p&gt;
        &lt;span&gt; Foo &lt;/span&gt;&lt;span&gt; Bar &lt;/span&gt;
    &lt;/p&gt;

However, I was hoping for a CSS solution that doesn&#39;t require the HTML source code to be tampered with.

I know how to solve this with JavaScript - by removing the text nodes from the container element (the paragraph), like so:

&lt;!-- language: lang-js --&gt;

    // jQuery
    $(&#39;p&#39;).contents().filter(function() { return this.nodeType === 3; }).remove();


**Demo:** http://jsfiddle.net/dGHFV/1/

But can this issue be solved with CSS alone?


How to remove the space between inline/inline-block elements?

&gt; **Possible Duplicate:**  
&gt; [How do I prevent CSS inheritance?](https://stackoverflow.com/questions/958170/how-do-i-prevent-css-inheritance)  

&lt;!-- End of automatically inserted text --&gt;

Is there a way to declare the CSS property of an element such that it will not affect any of its children or is there a way to declare CSS of an element to implement just the style specified and not inherit any of the style declared for its parents?

A quick example

HTML:

    &lt;body&gt;
     &lt;div id=&quot;container&quot;&gt;
      &lt;form&gt;
       &lt;div class=&quot;sub&quot;&gt;Content of the paragraph
        &lt;div class=&#39;content&#39;&gt;Content of the span&lt;/div&gt;
       &lt;/div&gt;
      &lt;/form&gt;
     &lt;/div&gt;
    &lt;/body&gt;


CSS:

&lt;!-- language: lang-css --&gt;

    form div {font-size: 12px; font-weight: bold;}
    div.content
    {
     /* Can anything go here? */
    }

Under normal circumstances one would expect the text block &quot;Content of the paragraph&quot; and &quot;Content of the span&quot; will both be 12px and bold.

Is there a property to include in the CSS above in the &quot;div.content&quot; block that will prevent it from inheriting the declaration in the &quot;#container form div&quot; block to limit the style to just &quot;content of the paragraph&quot; and spare &quot;Content of the span&quot; including any other children div?

If you are wondering why, well, I created a particular CSS file that gives all the forms on my project a particular feel and the `div` elements under the form all inherit the feel. No problem. But inside the form I want to use Flexigrid but flexigrid inherits the style and it just looks useless. If I use flexigrid outside the form and such it won&#39;t inherit the forms css, then it looks great. Otherwise it just looks terrible.

CSS to prevent child element from inheriting parent styles

Is it possible to use CSS pseudo-classes to select even and odd instances of list items?

I&#39;d expect the following to produce a list of alternating colors, but instead I get a list of blue items:

&lt;!-- language: lang-html --&gt;

	&lt;html&gt;
		&lt;head&gt;
			&lt;style&gt;
				li { color: blue }
				li:odd { color:green }
				li:even { color:red }
			&lt;/style&gt;
		&lt;/head&gt;
		&lt;body&gt;
			&lt;ul&gt;
				&lt;li&gt;ho&lt;/li&gt;
				&lt;li&gt;ho&lt;/li&gt;
				&lt;li&gt;ho&lt;/li&gt;
				&lt;li&gt;ho&lt;/li&gt;
				&lt;li&gt;ho&lt;/li&gt;
			&lt;/ul&gt;
		&lt;/body&gt;
	&lt;/html&gt;

How can I style even and odd elements?

The text is correctly displayed in Chrome. I want it to display this way in all browsers. How can I do this?

I was able to fix this in Safari with `-webkit-font-smoothing: antialiased;`

Chrome:  
![Chrome][1]

Firefox:  
![Firefox][2]

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    h1 {
        font-family: Georgia;
        font-weight: normal;
        font-size: 16pt;
        color: #444444;
        -webkit-font-smoothing: antialiased;
    }

&lt;!-- language: lang-html --&gt;

    &lt;h1&gt;Hi, my name&lt;/h1&gt;

&lt;!-- end snippet --&gt;

And a JSFiddle: http://jsfiddle.net/jnxQ8/1/


  [1]: http://i.stack.imgur.com/wcqO8.png
  [2]: http://i.stack.imgur.com/mvXHg.png

Same font except its weight seems different on different browsers

I want to rotate the image which is placed in the button of scrollbar in Chrome. Now I have a CSS with this content:
```css
::-webkit-scrollbar-button:vertical:decrement {
    background-image: url(images/arrowup.png);
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ECEEEF;
    border-color: #999;
}
```
I wish to rotate the image without rotating its content.


How to rotate the background image in the container?

I am disappointed at the lack of documentation of WebView and related stuff.

(unless you think the following is propert documetation)

&gt; public void setLoadWithOverviewMode
&gt; (boolean overview) 
&gt; 
&gt; Set whether the
&gt; WebView loads a page with overview
&gt; mode

and:

&gt; public synchronized void setUseWideViewPort (boolean use)
&gt; 
&gt;
&gt; Tell the WebView to use the wide viewport

So: **What is &quot;Overview mode&quot; ? what is &quot;Wide viewport&quot; ?**

ps: I tried to look for webkit related docs but could not find it.

What do setUseWideViewPort() and setLoadWithOverviewMode() precisely do?

I have two absolutely positioned div elements that overlap. Both have set z-index values via css. I use the `translate3d` webkit transform to animate these elements off the screen, and then back onto the screen. After the transform, the elements no longer respect their set `z-index` values.

Can anyone explain what happens to the z-index / stack-order of the div elements once I do a webkit transform on them? And explain what I can do to keep the stack-order of the div elements?

Here is some more information on how I am doing the transform.

Before the transform, each element gets these two webkit transition values set via css (I am using jQuery to do the `.css()` function calls:

    element.css({ &#39;-webkit-transition-duration&#39;: duration + &#39;s&#39; });
    element.css({ &#39;-webkit-transition-property&#39;: &#39;-webkit-transform&#39; });

The element is then animated using the translate3d -webkit-transform:

    element.css({ &#39;-webkit-transform&#39;: &#39;translate3d(&#39; + hwDelta + &#39;px, 0, -1px)&#39; });

Btw, I have tried setting the 3rd parameter of `translate3d` to several different values to try to replicate the stack-order in the 3d space, but to no luck.

Also, iPhone/iPad and Android browsers are my target browser that this code needs to run on. Both support webkit transitions.


css z-index lost after webkit transform translate3d

The user-agent stylesheet for Chrome gives a border-radius of 5px to all the corners of a `&lt;select&gt;` element. I&#39;ve tried getting rid of this by applying a radius of 0px through my external stylesheet, as well inline on the &lt;select&gt; element itself; I&#39;ve tried both `border-radius:0px` and `-webkit-border-radius:0px;` and I&#39;ve tried the even more specific `border-top-left-radius:0px` (along with it&#39;s -webkit equivalent).

None are working.

When I examine the element in webkit&#39;s developer tools, the Computed Style still lists the radius as 5px. But if I click the expander arrow next to it to see the specifics, it reads: element.style - 0px. And below that it shows the external css specification I gave of 0px, along with the user-agent stylesheet specification of 5px. And both of those latter two are crossed out, as they should be.

Any ideas?

Removing rounded corners from a &lt;select&gt; element in Chrome/Webkit

I have an app where I load content to a `UIWebView` and present this. I cannot disable user interaction completely because I want the user to be able to click links. I just need to disable user selection. I found somewhere in the Internets that you can use:

    document.body.style.webkitUserSelect=&#39;none&#39;;

I tried inserting this as 
    
    [self.contentView stringByEvaluatingJavaScriptFromString:@&quot;document.body.style.webkitUserSelect=&#39;none&#39;;&quot;]; 

in `webViewDidFinishLoad:`

However, it does not work. I am still able to select and copy text inside the WebView. 

Any Ideas what might be going wrong?

Update: This only seems to happen starting with iOS 4.3




Disabling user selection in UIWebView

I am using a Direct Web Remoting (DWR) JavaScript library file and am getting an error only in Safari (desktop and iPad)

It says 

&gt; Maximum call stack size exceeded.

What exactly does this error mean and does it stop processing completely?

Also any fix for `Safari` browser (Actually on the `iPad Safari`, it says 

&gt; JS:execution exceeded timeout

which I am assuming is the same call stack issue)

Maximum call stack size exceeded error

I need to show the popular red notification indicator with count such as the one shown below. Getting something that looks nice cross browser seems tricky. For example, different browsers seem to treat &lt;span&gt; paddings differently, resulting in weird looking notifications.  

What is the best cross-browser way of ensuring the notifications show up nicely? Not adverse to using javascript, but pure css is of course preferable

![enter image description here][1]


  [1]: http://i.stack.imgur.com/rL5uy.png


Easiest CSS for &quot;red notification badge&quot; with count

I have 3 `div` elements.

1st `div` is bigger (wrap) and has `position:relative;`

2nd `div` is positioned absolute to the 1st `div` relative positioning (and is included in the 1st `div`)

3rd `div` is contained in the 2nd `div` and also has absolute positioning.

    &lt;div id=&quot;1st&quot;&gt;
       &lt;div id=&quot;2nd&quot;&gt;
         &lt;div id=&quot;3rd&quot;&gt;&lt;/div&gt;
       &lt;/div&gt;
    &lt;/div&gt;

Why is the 3rd `div` position absolute to the 2nd `div` (which is also absolute position to the 1st `div`) and not to 1st `div` that has relative position ?

Because the 3rd `div` is absolute positioning to the absolute positioned 2nd `div`.

Absolute positioning inside absolute position

How can I relatively position an element, and have it not take up space in the document flow?

Relatively position an element without it taking up space in document flow

I&#39;ve got a menu that appears on hover over an absolutely positioned div. All of the menu items have to be relatively positioned because the absolutely div will appear multiple times on a page and will appear in multiple sizes in one instance.

How would I center multiple items with `position: relative` both vertically and horizontally when I won&#39;t know the the size of the parent div?

I know the `position: absolute` trick with negative margins, but this situation calls for something different.

Here&#39;s the code:

    .OuterCase { 
      position  : absolute; 
      width     : 100%;  
      height    : 100%; 
      text-align: center;
    }
    
    .InnerItem  { 
       width  : 38px;
       height : 38px;
       display: inline-block;
    }

I&#39;ve got it to center the items horizontally; it&#39;s getting the vertical that&#39;s being a bit elusive.




Center an item with position: relative

I am trying to fix a `div` so it always sticks to the top of the screen, using:

    position: fixed;
    top: 0px;
    right: 0px;

However, the `div` is inside a centered container. When I use `position:fixed` it fixes the `div` relative to the browser window, such as it&#39;s up against the right side of the browser. Instead, it should be fixed relative to the container.

I know that `position:absolute` can be used to fix an element relative to the `div`, but when you scroll down the page the element vanishes and doesn&#39;t stick to the top as with `position:fixed`.

Is there a hack or workaround to achieve this?


Content Type	Original Author	Original Content on Stackoverflow
Question	Marcus	View Question on Stackoverflow
Solution 1 - Css	thirtydot	View Answer on Stackoverflow
Solution 2 - Css	Chris Godwin	View Answer on Stackoverflow

CSS (webkit): overriding top with bottom on absolute-positioned element

Css Problem Overview

Css Solutions

Solution 1 - Css

Solution 2 - Css

JS regex to split by line

Disabling vertical scrolling in UIScrollView

Attributions