Ignore some HTML tags using CSS?

@JMRKERJun 15.2010

This may be a dumb question and I’m not even sure how to give it a title, but …

Is it possible to ignore some HTML tags using CSS under certain conditions?
For example, I don’t want to use the <TABLE>, <TR> or <TD> tags when I display
on a mobile device, but want to be able to use the tags for a normal laptop or desktop monitor.

I’m having trouble figuring out how to make certain tags to be ignored.
I thought I might be able to create a css file with an @media command,
but just using

[code] @media screen and (max-device-width: 320px) { table, td, tr { }; } [/code]

does not do a thing. ?

Is what I’m trying to accomplish not possible?
Thanks for any insights. ?

to post a comment

CSS

12 Comments(s) _↴

@SiddanJun 15.2010 — #Hi

Allthough I haven´t investigated mobile design yet but I know you cannot just ignore some html markup using css. You can at most just hide them.

Is there any reason why you are using tables in the first place?

@aj_nscJun 15.2010 — #Not possible. Also, good practice wood state do not use the same website but a different stylesheet for mobile devices - use an entirely different site.

By virtue of the fact that websites are designed for computer monitors, they will have imgs, and tags and other things that allow you to lay them out properly. On your mobile site, you will want to get rid of excess, unnecessary images (they are just bandwidth hogs) and you can most likely use much lighter markup to get your site to display nicely on a mobile device.

Send the user to a subdomain/different version of your site, don't just use a 'handheld' stylesheet. What you are trying to accomplish isn't possible anyway.

@JMRKERauthorJun 15.2010 — #'aj_nsc' and 'siddan':

Thank you both for your responses.

I appreciate the information.

Hi

Is there any reason why you are using tables in the first place?[/QUOTE]
Sorry to say, I'm still trying to wean myself off them as I go forward. :o

@Lina123Jan 22.2014 — #I am also curious about this topic. I have a website and I want to create a version of it for smart phones. Someone told me to start with my current html and just create new CSSs. However, it is not just the presentation that needs to be changed but also the structure of the page. Based on what you are saying above I get the impression that to be truly successful the html and the css needs to be changed? Is this correct? If you ignore html elements by simply hiding them does it allow you to position new elements where the original html elements would have appeared or is their real estate unusable? I am not a developer, so don't be surprised if what I am asking doesn't make sense. Help!

@Gray1989Jan 22.2014 — #Would not the CSS style "display: none;" be sufficient?

@rtretheweyJan 23.2014 — #No, 'display:none' would cause any content enclosed by the element to disappear from the page.

About the only thing you could do to get a browser to appear to ignore a tag would be to set it to something like:

?? { display:inline; margin:inherit; padding:inherit; font:inherit; }

And even then I'd expect there would be individual elements that would need adjustment - especially those involving tables and lists. Overall, I'd say this was a lost cause.

The HTML mark-up and the CSS stylesheet need to be created in conjunction with each other in order to create a page that will display well and be easy to maintain.

@Gray1989Jan 23.2014 — #No, 'display:none' would cause any content enclosed by the element to disappear from the page.[/QUOTE]

Actually it would prevent the entire element from being rendered. But is that not exactly what the OP wants? The other option would be "visibility: invisible;", but I doubt that the OP would want a blank box rendered instead.

@tracknutJan 23.2014 — #I have no idea why display:none wasn't suggested in 2010 when this question was asked, but I suspect the OP has since found a solution to the problem ?

@rtretheweyJan 23.2014 — #It isn't exactly clear what JMRKER wanted. Since, as tracknut points out, the thread was started several years ago and JMRKER has shown he's skilled at web design, I'm sure he's found a solution by now, too. But a straight reading of his original post says he wanted the tags "ignored", which is quite different than display:none. I was trying to suggest a way to accomplish that to some extent to demonstrate why I thought it was futile to try.

@Gray1989Jan 23.2014 — #a straight reading of his original post says he wanted the tags "ignored", which is quite different than display:none[/QUOTE]

How is it different?

@rtretheweyJan 24.2014 — #Say, for example, the original HTML is:

<i>
 </i>&lt;p&gt;The &lt;b&gt;quick&lt;/b&gt; brown fox jumps over the lazy dog.&lt;/p&gt;

If the '<b>' tag is ignored, then the text is rendered normally (no bold effect). If it has it's CSS set to "display:none", the word "quick" is not displayed at all.

@Gray1989Jan 25.2014 — #If the '<b>' tag is ignored, then the text is rendered normally (no bold effect). If it has it's CSS set to "display:none", the word "quick" is not displayed at all.[/QUOTE]

You seem to be confused. Ignoring an element means to not display it at all. We're not trying to ignore an element's [B]meaning[/B].

Also in #CSS _↴

same size and width scrollbar color I want to have "border-color" displayed with "hr" elements

Success!

Help @JMRKER spread the word by sharing this article on Twitter...

Tweet This

Ignore some HTML tags using CSS?

12 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Ignore some HTML tags using CSS?

12 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #CSS _↴