Showing posts with label css. Show all posts
Showing posts with label css. Show all posts

Remove URLs next to links when printing from browsers like Firefx

at 4:28 PM

Sometimes you need get something done quick like printing a receipt off a webpage, but the browser just vomits URLs all over your print preview.

I've yet to figure out why this happens, but some sites will go the extra mile to make your life difficult.


What you see:



What you didn't expect:



Now to get rid of the extra URLs, paste the following into the browser Javascript console. Try pressing F12 to make it appear. If it doesn't, then how you get to that console depends on the browser and operating system you're using. A quick Google search should get you the answer.

el = document.createElement('style');

el.setAttribute('type', 'text/css');

el.textContent = `@media print {

    a[href]:after {

        content: none !important;

    }

}`;

document.head.append(el);


What you'll get:



Source

Tags: ,

Remote Firebug-like web content debugging for your mobile device

at 8:03 PM

Debugging browser quirks on your mobile device is a pain in the ass. There's no such Firebug or developer console or anything nice like their desktop counterparts.

The ability to quickly modify CSS on the fly easily saves hours of work. If only we had something like that for mobile web dev...

f8Uf8FH
One could go mad debugging mobile CSS quirks...

One option is to use Firebug Lite, but to be honest, screen space is valuable and I personally would not be stuffed typing in names of CSS style properties on an on-screen keyboard.

In comes weinre to the rescue. This unfortunately named tool stands for WEb INspector REmote and is supposed to be pronounced "winery", but I always end up calling it "weener".

This gives you remote access to the content in the browser, via a another browser. It's as close as we'll get to a remote web Firebug for now.

Installation

I'm sorry to say but we'll need NodeJS for this. At time of writing I installed v0.10.18.

  • Download and install NodeJS.
  • Now open up the normal Windows Command Prompt (not the NodeJS one)
  • Type in:

npm -g install weinre

  • This installs weinre (v2.0.0-pre-HH0SN197 at time of writing)

Setup and debugging

  • Once it's all done, type:

weinre --bound -all-

  • Ensure that there are no firewall rules blocking this service (node.exe, allow inbound on port 8080 - such as uTorrent)
  • Edit your HTML and add this script into the <head> tag

<script src="http://YourWeinreIP:8080/target/target-script-min.js"></script>

  • Open up a desktop browser page to http://YourWeinreIP:8080/client
  • Load your test page on the mobile device and it should appear in the client list under "Targets"

image

  • Click on the link for the target so it turns green
  • Click "Elements" in the top menu
  • You should now see a familiar Chrome/Firebug style element tree and a CSS panel on the right.
  • The rest (resources, network, timeline, console) should be fairly straight forward.
  • Enjoy =)

Sources

Tags: , , ,

CSS: Horizontal scrollbar when using Facebook "fb-like" widget

at 8:58 PM

This has been bugging me for a good while. Tracked it down to the Facebook "Like" widget taking up more horizontal real-estate than it should.

image

If I deleted the fb-like widget, everything would go back to normal. Unfortunately, that's not proper solution...

So why is it even showing up!?

  • Restricting the widths on the iframe didn't seem to do anything.
  • Restricting the width of the parent div didn't seem to do anything either.
  • Setting overflow hidden on the parent div didn't work.

So what now?

The answer lies a few elements above. The one just above the <script> tag. There's a hidden div #fb-root.FB_UI_Hidden, which has a div and iframe nested inside it.

That iframe is injected during load time and although out of sight, it has a width of 575px causing the horizontal scrollbar to show unnecessarily.

Solution? Well first, don't use overflow; hidden on the <body> tag as suggested here. That's just silly because it disables your scrollbars altogether.

The correct method is to target CSS styling to it and restrict the width.

.FB_UI_Hidden { width: 100px !important; }

That's it! Another one line wonder.

image

Source

Tags: ,

CSS: Use display inline-block on Internet Explorer 6 and 7

at 12:10 PM

IE6 has a pretty bad reputation for being incompatible with standards, and these days IE7 is the new IE6.

One of the biggest gripes I have about it is the inability to use display inline-block! It's the saviour of all layout rendering issues, yet shamed by IE.

Well, luckily there's a "compatibility hack" for it.

.shirt-details .tabs {
font-weight: bold;
font-size: larger;
display: inline-block;
/* IE6/7 */
*display: inline;
padding: 3px 10px;
height: 20px;
}

Whalla, problem solved.

uFCzAEven Christian Bale deliciously agrees.

Source

Tags:

CSS: Easy cross-browser compatible rounded borders/corners

at 3:59 PM

Most new browsers now support the rounded borders CSS3 attribute.

However, during the drafting period, it was all done differently. To properly support these browsers, you'll need some extra styling rules to make it work.

The way I do it is less compatible but uses no hacks such as external .HTC files or browser specific CSS files because I dislike these solutions.

The rounded borders should be supported natively (with prefixes) from Firefox 1.0, Internet Explorer 9, Opera 10.5 and Chrome/Safari 3.

The magic

I like to separate my proper classes from the "compatibility" tweaks. The tweaks I normally put at the end of the file but with a matching selector name.

.tooltip {
border-radius: 3px;
}

.tooltip {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
}

As you can see, the later ".tooltip" definition adds prefixes for Mozilla, Webkit (Chrome/Safari) and Konquerer.

div.box {
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}

div.box {
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
-khtml-border-top-right-radius: 5px;
-khtml-border-top-left-radius: 5px;
}

Just a little something to watch out for, the earlier versions of Mozilla has their syntax as "radius-topright" rather than "top-right-radius" like the other browsers do.

Also, if rounded borders aren't working on IE9, please see this post regarding the X-UA-Compatible tag.

Sources

Tags:

CSS (IE8/IE9/IE10): Meta tag to disable compatibility view

at 1:04 PM

I had some trouble with CSS on Internet Explorer 8 the other day and wondered why the hell it wasn't working.
After hours of frustration, I disabled compatibility mode by clicking on "Tools" > "Compatibility View" and it just worked.

image
But I had to disable this for the whole site, without having to teach each user about it. Luckily, there is a meta tag for it!

Add the following tag into the head section of your page and IE will use the specified rendering mode.

<meta http-equiv="X-UA-Compatible" content="IE=8" />
Unsure which version of Internet Explorer supports this, but I know IE8 and IE9 honours this setting.

*update 12/8/2011*

OK, this caused a bit of confusion to me but I figured out why rounded corners (CSS border-radius) wasn't working on IE9.

I shot myself in the foot because I've set the "IE=8" compatibility mode, IE9 will not render rounded borders because IE8 doesn't actually support it.

After reading a post on StackOverflow, I looked up the docs for document compatibility and found a fix. Set the order of compatibility in this format:

<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />

Now it'll try IE9 mode first, IE8, then IE7. You can even set IE=EDGE so it'll use the highest mode possible.

*update 21/8/2013*

haha a little over 2 years since the last update, I ran into another issue with this.

IE9 dev tools was spitting out this error:

X-UA-Compatible META tag ignored because document mode is already finalized.

The hell does that mean?

Well apparently it only works if we have it as the VERY FIRST tag in the <head> element, with the exception of <title>. Moving your compatibility meta tag up will fix it.

[ Source ]

[ Fix: IE9 fieldset rounded corners, Defining Document Compatibility, HTML1115: X-UA-Compatible META tag ('IE=9, IE=8, chrome=1') ignored because document mode is already finalized ]

Tags: ,

CSS: Internet Explorer, position relative/absolute and z-index don't act right

at 4:29 PM

Another day, another IE6/IE7 CSS quirk. Good thing it doesn't affect IE8 and luckily this ones a bit easier to fix than most.

image

It doesn't make sense. The light blue div on the bottom left has the "position: relative;" style set, while the menu has "position: absolute" with a higher z-layer index.

For some reason, IE decides to just ignore the z-layer and put the div on top anyway. Annoying little critter...

To fix this:

  • Give the troublesome div a small z-index (0 or so)
  • Give the menu a higher z-index, say 10 (anything higher than 1 will do)
  • Give the menu's parent a z-index of anything thats higher than the menu.

[ Source ]

Tags: ,

CSS: Make floated elements to push down items below it

at 12:17 AM

Floating is a nice way of positioning elements, but most of the time you dont want it to have no weight on the page that elements below it will try to take up its display space.

For example:

<div>
  <ul class="list_wrap">
    <li style="float: left;">FLOAT A </li>
    <li style="float: left;">FLOAT B </li>
    <li style="float: left;">FLOAT C </li>
  </ul>
  <p>Content thats pushed up</p>
</div>

Will give you:

  • FLOAT A
  • FLOAT B
  • FLOAT C
Content thats pushed up

Example of retarded floating.

To fix that, its really simple! Just add "overflow: auto; width: 100%;" to "ul.list_wrap" and you've got yourself a winner!

  • FLOAT A
  • FLOAT B
  • FLOAT C

Content thats pushed up

Not so retarded floating.

[ Source ]

Tags:

Vertically aligning text in a div with CSS

at 1:31 PM

Tables were good. When you tell it to align something somewhere, it'd work!

Divs are also good, it keeps your mark-up clean.

But when it comes to displaying grids of data in divs... who the fuck decided it was time to deprecate tables!?

Anyways, you're probably here because "vertical-align: middle;" isn't working on your div. Either that or I'm back because I've forgotten how this works.

Problem is, you need to also set "line-height: ##px;".

[ Source ]

Tags:
Subscribe to: Posts (Atom)
 
Copyright © Twig's Tech Tips
Theme by BloggerThemes & TopWPThemes Sponsored by iBlogtoBlog