I am trying to understand the CSS specifications on http://www.dynamicdrive.com/style/csslibrary/item/matt_black_tabs/.
I tried to understand what difference and why put those properties just at the li and the a elements. What if the display was inline or block? I have tried to close some styles to see how it looks and I can't understand it.
Why is the display on the li and a elements set to inline and block? What would happen without those specifications?
The display property tells what style you want your object arranged. When you use block style it displays it like paragraphs and headers. Inline is default and has no line break before or after it. For more information on display go to
http://www.htmldog.com/guides/cssadvanced/display/
Related
I have a page where I am reading an HTML from email.
Sometimes, the text which comes from the email has HTML and CSS and it changes my page style completely.
I don’t want my page style to be impacted because of this. How do I read the HTML and CSS strictly inside a particular div (box) and not let the page get impacted by this?
you have to write your css using some parent > child format. You might have to use !important.
May be you are using some kind of common selectors like "a", "p", "div". In these cases we can prevent the overriding by using parent class/id or with "!important.". I will not recommend the second one.
Ex. using parent className:
.parent-classname p{
/*style here*/
}
put that div in iframe so it behave like a seperate window so your html content not effected by loadded css.
You can use <iframe></iframe> tag instead of the <div></div>. Using Parent>Child Css format will also help make your styles more unique and protect them from being overridden.
Here is a difficulty I am trying to solve. I am working inside a client's page to develop a scroller interface. Basically, I cannot change the doctype, the surrounding elements and the stylesheets or scripts that are already in the client's page and I have to make my little block of code "fit" inside this. This is common for web developers.
The tricky part now is that some img elements inside my block are actually being targeted by a CSS rule inside the inherited client's stylesheet (which, of course, I cannot remove or change). It would be too long to explain why here in this case I actually can't use more specific CSS rules myself to compensate this, but it's a fact. So my question is : is there a way to prevent a HTML element from being targeted by a CSS rule other than creating another rule or deleting the rule? The difficulty is that a rule like
.containter1 .containter3 { ... }
will target an element inside :
<div class="container1">
<div class="containter2">
<div class="containter3">Element
...
Elements inside the page don't make "walls" for CSS rules, which "jump" over containers to target elements. So a rule like
img { ... }
will target any img tag. The only way I know to compensate this is to create a more specific CSS rule targetting the precise img to protect. But I cannot do that here. Is there a way to get the same result without creating a CSS rule, only by adding HTML?
/* EDIT TO CLARIFY */
I know CSS rules, specificity, inheritance, etc. My question was more pragmatic. Consider this example to clarify the problem : imagine you have a client's stylesheet that you can't touch and that defines the following general rule:
img { display:none; }
The problem is that you cannot set a corresponding generic rule to do the opposite, like :
img { display:not-none; }
because there is no such thing as the opposite to none. The opposite of "none" can either be "inline", "block", "inline-block", and so on.
So basically, this means that the first generic rule forces you to explicitly define the display property for each and every img in your page. And that sucks. So I was trying to find a hack to solve situations like this (my actual problem is even worst than this, believe me, but this example is much clearer and quicker to explain).
If you're saying you want to prevent targeting without changing any code, then no, that's obviously not possible.
In-line styles always over-ride style-sheet rules ( unless they're using an !important tag, then you'll need to also use it).
You should be able to reset whatever elements you need, using syntax from your favorite CSS reset. Here are some options:
http://www.cssreset.com/
So, something like -
<div style="border:0 !important;padding:0 !important;margin:0 !important;height:auto;"></div>
is your best bet.
The only way you can change CSS for specific element is modification of existing styleshits or creating new style which is more specific and will overload other styles.
and I have to make my little block of code "fit" inside this.
Once you have make some block of code, you can put style tag inside that block of HTML code like this, for instance:
<div id="block_of_code_available_for_modification">
<style type="text/css">
//css code which will fix styles of your content without influencing other elements on a page.
</style>
</div>
Or, if you have just a few elements you need to fix styles for, you can use style attribute of HTML elements (once you can set modify HTML, you can always add something like below... Well, the same as adding style tag). Priority of css properties inside style attribute is the highest one. Except if there is no !important in some previouse styles:
<img style="any css properties you need" src="..." />
The default display value for an img element is inline-block. If you want to reset the display value for all images, why not use that?
If you've got multiple different types of elements that are being set to weird values, then the problem is maybe a bit more complex as you'd need to consider which elements to set to what display type. But all HTML elements do have well-defined default display types, so it shouldn't be too hard to reset them all.
img {display: inline-block;}
span, a, etc {display:inline;}
div, etc {display:block;}
... etc ...
If it comes down to it, you could just use one of the reset CSS scripts that are available, to set everything back to the correct defaults.
No there is no way you can stop other rules from getting applied on a particular element.
you have to redefine all those rules for that html element so they will overwrite all the other rules.
Ok, I have read a lot of times that inline elements should never contain block elements. I agree, there are problems with that and it can get messy after. But I find it the only solution to do the following:
I'm trying to create an HTML template that imitates the Metro UI "tiles" (yeah, the one that is in windows 8). The tiles are made using <li> elements. Now, the problem is that I want the tiles (the whole <li> tag) clickable, but proper HTML tells me you can't surround a block element with an inline element. Besides, you can't surround an <li> with an <a>. Is there any method of doing this without going against the rules of html?
A legal and clean way of accomplishing this is to use a style of inline-block for the A tags and let them fill the complete LI.
LI > A
{
display: inline-block;
}
OR
LI > A
{
display: block;
}
This will work in IE7+, and all recent versions of Firefox, Chrome, Safari, Opera, etc.
Note that in the current draft of HTML 5, it is legal to put a greater variety of elements inside an anchor tag than was previously allowed (see "permitted content" and examples): http://dev.w3.org/html5/markup/a.html
Additional article: http://html5doctor.com/block-level-links-in-html-5/
If you have a look at the stackoverflow menu you will see it is quite easy. You put a <a> inside a <li>, put it to display block and give it the padding you want to achieve the block feel.
Running the Ubuntu cloud page http://www.ubuntu.com/business/cloud/overview through http://validator.w3.org/ gives several errors, the majority of which are centred around not having <divs> and <h>s etc. within an <a> tag.
The implementation I'm interested in is the four boxes with arrows, which change colour as you hover over them (as they are <a> links). What is the valid method to implement this?
Valid ways to implement this:
separate links inside each block. Put the :hover effect on the parent div, not the link. Downside: more markup
use only inline elements inside a single link, using CSS to change them into display: block elements if necessary. Downside: potentially less semantic
use an HTML5 doctype, as [X]HTML5 allows this construction. Downside: the less easy-to-validate current moving-target nature of HTML5.
Each one of those can be a (with a :hover effect to change the background color/image), and the , which sits inside, just covers the entire div with a height and a width in your CSS.
I've difficulties to set up css rules of tags containing text inside li tag. Anything inside li becomes anormaly smaller. To make it readable, I need to make it bigger in an important scale (for instance, from .8em to 1.1 em). Unfortunately, the new text's size doesn't always match the one before it was put inside the anchor tag.
What I want is to be able to restore the previous settings as before I place the tag containing the text inside the li tag. Is there a trick to do that? Let's say, for font-size = 12px, do I need to make it, for instance, 15px to go back to 12px?
EDIT
Actually, a tag is not causing me trouble, but it's rather li tag which shrinks all the put inside. So, I've edited the above post by replacing all the a tag by li tag. I'm sorry for that. Anyway; while I thought I've run into an issue, after reading article suggested by S. Jones, I'm aware of the inheritence property on some tags.
Here's the issue. Let's say, I have
<a href = "somewhere">Somewhere<a>
a { font-size: 12px;}
After I put the above tag inside a li tag
<li><a href = "somewhere">Somewhere<a></li>
a { font-size: ???;}
After reading S. Jones article, I wonder if I need to disable inheritence or use IMPORTANT!!!
Thanks for helping
It sounds like you've got cascading and inheritance issues with your CSS.
You might want to look through the following:
Cascading Order and Inheritance in CSS
CSS Structure and Rules
There are several ways that you could fix your issue, but I can't say sure without seeing your CSS and HTML. If you could post some sample HTML along with your CSS file which illustrates your issue - several people here on SO will be able to recommend solutions.
Debug Recommendation: If you're not currently using it, you might want to look at installing the Firebug plugin for Firefox. It's a great tool for inspecting your page. You can highlight specific areas, and Firebug will show you which HTML elements and CSS classes are responsible for the layout.
UPDATE: Thanks, that's much more clear. Check your CSS file for any styling being applied to your list elements (li, ol, ul). You'll either need to remove some styling from these elements, or define font-size specifically for a elements nested within li.
For Example: li a {font-size:12px;} which will set the font size for a elements, only when they are nested within li elements.
Cheers.