Web Development

6-Jul-12 11:45

[edited for clarity on July 7]

Let's say I have a web-site someone did, possibly an "amateur," or someone who clearly doesn't grasp what "standards compliant" is, and has created the web-site equivalent of BASIC "spaghetti code."

My goals here are:

1. Make the code standards compliant: but, not to alter the functioning of the site at all.

2. Cross-browser and cross-browser-version display issues: deal with issues of cross-browser display validation, and, possibly, make it display properly on the usual gamut of browsers/versions.

I realize these are two different issues, even though I think it's possible that having fully standards compliant HTML and CSS might make some impact on cross-browser display issues.

Are you using any tools now, paid, free, or, on-line, to help you analyze these issues in, or QA of, revising a site's HTML and CSS ?

thanks, Bill

The glyphs you are reading now: are place-holders signifying the total absence of a signature.

modified 7-Jul-12 5:36am.

Graham Breach6-Jul-12 23:14

Graham Breach

6-Jul-12 23:14

The W3C validator should help: http://validator.w3.org[^]

BillWoodruff7-Jul-12 14:33

7-Jul-12 14:33

Thanks, Graham,I am aware of that tool, and consider it a definite must-use in the diagnostic phase.

For handling cross-browser compatibility, I am considering the whole gamut of external JS libraries, including (for HTML5) BoilerPlate[^]. For mobile-device display issues I'm finding this article helpful:[^].

And then, there's, of course, Modernizr[^].

But, I am not optimistic that given web-site "X" written by someone's uncle, with the crudest possible HTMl/CSS, that will ever be able to be automatically brought up to standards, without hand-tuning by someone who understands standards compliancy, and the inevitable cross-browser testing, and cross-browser-version testing.

However, there are lots of tools for cross-browser testing I haven't explored yet:[^].

best, Bill

The glyphs you are reading now: are place-holders signifying the total absence of a signature.

Peter_in_27807-Jul-12 18:26

7-Jul-12 18:26

Here's[^] another source of links to good stuff. Perhaps a bit too far to the 'performance' end of the spectrum for your immediate needs, but well worth a dabble.

Cheers,
Peter

[edit] updated URL in links. [/edit]

Software rusts. Simon Stephenson, ca 1994. So does this signature. me, 2012

modified 8-Jul-12 17:35pm.

BillWoodruff8-Jul-12 2:46

8-Jul-12 2:46

Thanks, Peter,

It appears the content your link points to, which I assume is: "Sam's ultimate web performance tool and resource list;" is now here:[^].

best, Bill

The glyphs you are reading now: are place-holders signifying the total absence of a signature.

Peter_in_27808-Jul-12 11:35

8-Jul-12 11:35

The link worked when I posted it. As that URL now says, he moved it (adding a final 's'). Previous post updated (and my FF bookmark!)

Cheers,
Peter

Software rusts. Simon Stephenson, ca 1994. So does this signature. me, 2012

BillWoodruff8-Jul-12 14:13

iPhone iPad specific CSS --> How to make it work?

8-Jul-12 14:13

Peter_in_2780 wrote:
he moved it

"Moving the goalposts" is what happens in my current consulting job, everyday Smile | :)

best, Bill

The glyphs you are reading now: are place-holders signifying the total absence of a signature.

lakshmignarayanan5-Jul-12 23:30

lakshmignarayanan

5-Jul-12 23:30

I'm using Wordpress 3.3.2 and DynamiX theme.I have a small alignment issue on my site. I need the following bit of CSS code to be applied only on iPhones and iPads.

CSS

#footer-wrap-inner{
width: 200% !important;
}

Can anyone please help me start from the scratch?
Any sort of help is greatly appreciated! Java | [Coffee]

Thanks in advance

Re: iPhone iPad specific CSS --> How to make it work?

Pete O'Hanlon5-Jul-12 23:46

Pete O'Hanlon

5-Jul-12 23:46

For iPad:

CSS

@media only screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-min-device-pixel-ratio: 1)
  {
    #footer-wrap-inner{
      width: 200% !important;
    }
  }

For iPhone

CSS

@media handheld, only screen and (max-device-width: 480px) 
  {
    #footer-wrap-inner{
      width: 200% !important;
    }
  }

*pre-emptive celebratory nipple tassle jiggle* - Sean Ewington

"Mind bleach! Send me mind bleach!" - Nagy Vilmos

CodeStash - Online Snippet Management | My blog | MoXAML PowerToys | Mole 2010 - debugging made easier

Re: iPhone iPad specific CSS --> How to make it work?

lakshmignarayanan6-Jul-12 0:05

lakshmignarayanan

6-Jul-12 0:05

Sorry Pete.. That doesn't seems to work. Can you please take a look at my site http://cloudchowk.com/future/[^]and help me?
You can see the footer misaligned only when viewed in iOS devices and emulators( ipad-emulator.org, iphone-emulator.org)..
Thanks though for coming forward to help me..

Message Removed

30-Jun-12 3:03

shindePathak

30-Jun-12 3:03

Message Removed

modified 1-Jul-12 12:28pm.

Web page font

Rage28-Jun-12 2:46

Rage

28-Jun-12 2:46

On this web page[^] they are using a font named intel-neo-font, which is not available on my machine but yet displays correctly. How is this done ? (@fontface ?)

~RaGE();

I think words like 'destiny' are a way of trying to find order where none exists. - Christian Graus

Do not feed the troll ! - Common proverb

Peter_in_278028-Jun-12 3:07

28-Jun-12 3:07

What I see (with Firebug) is

font-family: "intel-neo-sans","tahoma","helvetica",sans-serif;

This is a list of preferences, so if you don't have intel-neo-sans, then your browser will use tahoma if it can, else helvetica and in the unlikely event you don't even have that, it'll find a generic sans-serif font (probably Arial in some form).

Cheers,
Peter

ps I wonder what intel-neo-sans looks like.

Software rusts. Simon Stephenson, ca 1994. So does this signature. me, 2012

Rage28-Jun-12 3:12

Rage

28-Jun-12 3:12

I do get the text displayed in intel-neo-sans. This font is however not installed on my machine, and I was wondering how they were achieving that.

Peter_in_2780 wrote:
I wonder what intel-neo-sans looks like.

Just hover the name in the css display of the FF Debugger, and it will be displayed.

Peter_in_278028-Jun-12 3:39

28-Jun-12 3:39

That's not a sans-serif font (on my machine, anyway)! It shows a serif font, probably one of the Times family. ~~I'm willing to bet that the page is rendered in Tahoma.~~ [edit] that's wrong! - I found the @font-face. Which raises another mystery - Firebug doesn't "know about" that font for the hover preview. Chasing that becomes a tomorrow job (only a few minutes away! Frown | :(

)

Cheers,
Peter

Software rusts. Simon Stephenson, ca 1994. So does this signature. me, 2012

User 171649228-Jun-12 3:15

User 1716492

28-Jun-12 3:15

Read these ... http://www.nczonline.net/blog/2009/10/27/data-uris-explained/[^] and http://jonraasch.com/blog/css-data-uris-in-all-browsers[^]

modified 1-Aug-19 21:02pm.