Rectangle 27 90

Select the element with the inspector or in the DOM. Go to the "Styles" tab in firebug and click to the small arrow on the tab and select ":hover" (also available ":active"). The state will remain on "hover" and you can select other elements to make them hover.

Click the button to see three checkboxes, which you can use to set the :hover, :active and :focus pseudo-classes for the selected element

This feature can also be accessed from the popup menu in the HTML view.

If you set one of these pseudo-classes for a node, an orange dot appears in the markup view next to all nodes to which the pseudo-class has been applied:

document.getElementById('yourId').dispatchEvent(new Event('mouseover'));

The :hover firebug css state doesn't trigger javascript hover event. Just use jQuery('.css-class').trigger('mouseover') and no need to hack anything.

@machineaddict, great tip. Works very well

debugging - Firebug: How to inspect elements changing with mouse movem...

debugging firebug
Rectangle 27 1

Not wanting to go down the route of scanning style declerations I found that this works... but unfortunately only for firefox :( To me it would make sense that if the element has nothing to compute it's width against (i.e. it's not part of the document flow) it should return it's original value - which is what FireFox does:

Webkit and Opera however return a blank value - yet again another instance of where I agree with FireFox's implementation and frown at the others.

Ok, not a fan of being defeated by computers ;) so have come up with this function -- totally over the top, but it does seem to work. Again I have yet to test this on IE as I don't have a Windows machine to hand at the moment. It's annoying when the original FireFox-only version is quite succinct, but the logic here is sound - it falls back to what a normal human would do in testing if something is stretchy.

function isElementFluid(elm){
  var wrapper, clone = elm.cloneNode(false), ow, p1, p2;
  if( window.getComputedStyle ) {
    value = window.getComputedStyle(clone,null).width;
  } else if( clone.currentStyle ) {
    value = clone.currentStyle.width;
  /// the browsers that fail to work as Firefox does
  /// return an empty width value, so here we fall back.
  if ( !value ) {
    /// remove styles that can get in the way = '0'; = '0'; = 'none'; = 'none';
    /// create a wrapper that we can control, my reason for
    /// using an unknown element is that it stands less chance
    /// of being affected by stylesheets - this could be improved
    /// to avoid possible erroneous results by overriding more css
    /// attributes with inline styles.
    wrapper = document.createElement('wrapper'); = 'block'; = '500px'; = '0'; = '0';
    /// insert the element in the same location as our target
    /// store the clone's calculated width
    ow = clone.offsetWidth;
    /// change the wrapper size once more = '600px';
    /// if the new width is the same as before, most likely a fixed width
    if( clone.offsetWidth == ow ){
      /// tidy up
      return false;
    /// otherwise, calculate the percentages each time - if they
    /// match then it's likely this is a fluid element
    else {
      p1 = Math.floor(100/500*ow);
      p2 = Math.floor(100/600*clone.offsetWidth);
      /// tidy up
      return (p1 == p2) ? Math.round(p1)+'%' : false;
  else {
    p1 = (value && String(value).indexOf('%') != -1);
    return p1 ? value : false;

css - Determine whether element has fixed or percentage width using Ja...

javascript css mootools
Rectangle 27 0

I believe this is a bug on Safari, but I figured out a way to work around it. It has to do with certain elements and their styles. By process of elimination, I narrowed it down to a few "offending" HTML elements. Deleting width: 100%; from some elements and CSS styles, as well as other static widths like width: 120px; would start to get reduce problem. I say "start to reduce", because the margin on the right became smaller, but didn't go away completely. I then started playing with other CSS attributes like margin and padding. After getting rid of some left and right padding from some elements, the problem finally went away. But this wasn't really acceptable, as those styles were there for a reason.

The solution was to wrap everything in a container element, size that appropriately, and set overflow: hidden; in CSS. Setting overflow: hidden; to the body or html tags would work too, but that did funky things with vertical scrolling in Mobile Safari. In my case, there was already such a container element, so all I had to do was add the overflow property to it.

Like I said, I think this is a bug in Safari. When you rotate from Landscape to Portrait, everything should be resized back to fit portrait mode. Visually, everything does look like it was resized properly. However, Safari must have thought something wasn't resized properly, so it displayed the page wider than it really was. This works just fine in Chrome on an Android device. I also added different background colors and borders to highlight which element might be causing the page to stretch beyond the width of the device screen. Visually, there was no apparent culprit.

If you're thinking it might be a width: 100% plus padding issue, I had the same thought. But then deleting either the width or the margin/padding alone should have fixed the issue, which it did not. Not a single element was sitting beyond the edge of the screen. There was nothing but empty space there.

I also removed height=device-height from the viewport meta tag, as this didn't play nicely with Mobile Safari.

html - viewport settings causing rotation issues in Mobile Safari - St...

html ios rotation mobile-safari viewport