Archive for the ‘HTML / CSS’ Category

Google Maps Does Not Print.

June 4, 2012

Tadpolers,

If your Google Maps does not print then perhaps your Print CSS is to blame. Mine, inherited from our esteemed clients, had this thermonuclear option embedded within it:

* {
position: static !important;
overflow: visible;
}

What you see there is the ‘asterisk’ selector applied at the top-level of the DOM which means it applies to every element on every page. Great, except that Google Maps rely on a combination of relative and absolute positioning, not static positioning and, most evil, the css had specified !important on the asterisk style, giving it a very high precedence.

To knock out the asterisk selector for Google Maps without disturbing the rest of my client’s Print CSS I had to declare a new selector for elements within Google Maps. This was:

#map_canvas * {
position: relative !important;
}

#map_canvas * > div {
position: absolute !important;
}

This seems to go OK.

Advertisements

Cross-Browser Styling For hr Tag

May 7, 2010

The innocuous hr tag renders quite differently across IE, Chrome and Firefox. In particular, on the last two mentioned browsers the hr was rendering with an indented border, which it didn’t in IE.

Searching for a cross-browser way to style hr I ended up at this very helpful forum post from HTML Help Central, entitled ‘Google Chrome With hr, but then had to tweak it a bit so that it worked across my browser family.

Here’s the final result for which I was awarded the VC, DSM, OBE and P-K4:

hr
{
border-top:1px #dbdee4 solid;
height: 1px;
border-bottom:0;
border-left:0;
border-right:0
}

Of course you can substitute #dbdee4 for any colour you desire. Maybe try ‘Off Puce’. Puce, specifically, is the color of the belly of a flea.

LinkButton (or any ASP.NET server control) has Inline Style Added From Nowhere

September 13, 2008

Of course this can never happen.

Inline styles do not ‘come from nowhere’.

But when my LinkButtons kept rendering with inline style color:#267fb7 text-decoration:none and I couldn’t see any Skins file, I started to wonder.

After 43 mins of pain I finally found where the inline style was coming from. Naturally, it was a Skins file that I hadn’t seen because three quarters of my brain has been eaten by maggots rendering me left with the basic congnition of Prokaryotic Protein.

Am I Not Mental Enough ?
What I had actually done before was inspect the Skins file of a completely different Solution File.
Yes, I am mental enough to do that.

Once I had inspected the correct Skins file for a change, I found this:

asp:LinkButton runat=”server” Font-Underline=”false” ForeColor=”#267fb7″ onmouseover=”this.style.color=’#0b5c91′;” onmouseout=”this.style.color=’#267fb7′;” /

Cunning observers amongst you will have already noticed that the ForeColor is set to #267fb7 which is where
my mystery coloration had come from, along with font-Underline=false, rendering as text-decoration: none.

Yes, so, if you have mystery display attributes being injected from nowhere into your server controls, then look in the
correct Skins file, i.e. the one in your Solution, not the one in a completely different solution. The latter is unlikely to help
much.

Here’s a gratuitous link to a sub-beginner level article on Skins files that should keep you and me amused for a couple of aeons.

Please note I only confess to the above in order to save you the same trouble. Look, I found the solution without Googling it, at least.