I use the following css:
/* style.css */
#someId {
background-color: red;
}
#someId.medium {
width: 300px;
}
#someId.large {
width: 500px;
}
with the html:
<!-- medium.html -->
<div id="someId" class="medium">hello, world</div>
and
<!-- large.html -->
<div id="someId" class="large">hello, world</div>
I know the above works fine on FireFox and Opera, and, it does not work on IE6 (surprise, surprise).
My questions are:
Is the above CSS correct according to the CSS-specifications (and where can I find this specific issue)?
What browsers (on what platform) do & do not support this?
Update:
The IDs are unique per page. I tried to communicate that by having medium.html and large.html but apparently it wasn't obvious enough.
Update 2:
The code example above was just written to illustrate my question. It is not part of production code and it is not meant to be complete. In short, it is just an example to demonstrate a problem with a very specific solution.
quirksmode have a table of which selector (among other things) browser supports. unfortunaltly, there is not test for combining selector.
but as ie6 fail multiple classes it's not that surprising.
w3c css specification explains how css selector should works, there is a DIV.warningand E#myid which are not exactly like yours but suggest it should work (maybe it's explain in the page I didn't read it all ;) )
if you do not need "#someId" to be an id you can make it to a class ".someId" and then use the other two classes to extend where needed... like this class="someId medium" ect. Try this and see if it will work. Besides it`s a better solution anyway because you can not have two ids with the same name on one page.
.someId {
background-color: red;
}
.medium {
width: 300px;
}
.large {
width: 500px;
}
and then..
<div class="someId medium">hello, world</div>
or
<div class="someId large">hello, world</div>
Should be working! That's odd. Try flipping them over, as in .large#someId.
One thing you could try is being more verbose than you would like to be. Add to the class names like so:
<div id="someId" class="someId-medium">hello, world</div>
or
<div id="someId" class="someId-large">hello, world</div>
and then change your CSS to this:
#someId {
background-color: red;
}
.someId-medium {
width: 300px;
}
.someId-large {
width: 500px;
}
Crikey. I’ve never come across this one before, but you’re totally right. Your code should work as you’re expecting.
I’m pretty sure it’s only IE 6 that’ll have a problem with it.
Like some mentioned above, ID a unique identifier, thus should only be used once in a page. Normally, ID's would be used for major sections in your mark-up like #header, #content #footer, etc... for the rest, just use classes.
As for your text, change the #someId to .someId and then you can use .large or .medium since you can apply multiple classes to an element.
<div class="someId large">hello, world</div>
And your CSS would be
.someId { background-color: #ccc; }
.large { font-size: 50px; }
.medium { font-size: 25px; }
Also... if the text "Hello, World" is a title, I strongly suggest you use the proper elements (h1, h2, etc...) and tweak their styles rather than create new ones.
Hope this helps!
EDIT: For the comment below, here's a little HTML code that I've just tested out in IE6 and works. It works in FF and Opera as well so I'm assuming it works in Safari and Chrome too.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
.something { background-color: #ccc; }
.else { color: #090; }
</style>
</head>
<body>
<div class="something">This is just something</div>
<div class="else">This is just else</div>
<div class="something else">This is something else</div>
</body>
</html>
Not sure if dragging a Javascript library into the mix is possible in your application, but a lot of CSS that doesn't work well in IE6 is possible when using jQuery.
However, if you have no other use for a the 24kb jQuery library, it seems a hefty addon for a single CSS-attribute. Maybe you can go with graceful degradation?
Related
I am writing an HTML file and using a lot this:
<iframe src="blablabla" width=100% height=555 frameBorder=0></iframe>
Is it possible to somehow define myiframe such that I can set this width, height and frame border in the definition and then just do
<myiframe src="blablabla"></myiframe>
?
Yeah, You can. These Custom Components are called Web Components.
For More info, take a look at this. (To make things easy, you can switch to ReactJS).
But, In your case, Adding a CSS will apply the styling to every iframe element.
iframe{ width:100%; height:555px; }
Implementation (Put style tag after head tag) -
<style>
iframe{
width:100%;
height:555px;
}
</style>
<body>
<iframe src="blablabla" frameBorder=0></iframe>
</body>
Is it possible to somehow define myiframe such that I can set this
width, height and frame border in the definition and then just do
<myiframe src="blablabla"></myiframe> ?
Yes, it is.
And though WebComponents are an incredibly powerful tool (and I very much hope they will continue to increase in popularity), in this situation you just need CSS:
Working Example:
.myiframe {
width: 200px;
height: 180px;
border: 3px dashed red;
}
<iframe class="myiframe" srcdoc="blablabla"></iframe>
The simplest way to start with CSS is go to the <head>...</head> of your HTML Document and add the following, somewhere in the document head:
<style>
.myiframe {
width: 200px;
height: 180px;
border: 3px dashed red;
}
</style>
Not sure if this is possible or not, my requirement is something like this - I have a web page having three div which are wrapped inside another main div having display:flex so that all the three div can appear adjacent to each other. Now the issue is that in the middle div I am extracting some data from my database which itself contains DIVs. the divs may not be properly closed i:e few might not be closed with /div. So when the data appears on the middle div, the third div sometimes goes out of the flex box causing issue in the layout. Is there any possible way to avoid this ? Hope I am able to explain my issue.
As a rule, we never inject user generated content into a page without properly sanitising it to help prevent security vulnerabilities such as XSS. Please research HTML sanitisation and make sure you're processing this user generated content safely.
With that being said, browsers are quite forgiving of improperly formatted markup and will try their best to render what you give them. So to prevent this user generated content messing with your page you're going to want to isolate these documents from the rest of your page.
Instead of dropping this user generated html directly in the page you could provide it as a srcdoc to an iframe like so:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>foo</title>
<style type="text/css" media="screen">
.container {
display: flex;
}
.one, .two, .three {
height 200px;
}
.one {
background-color: red;
}
.two {
background-color: green;
}
.three {
background-color: blue;
}
.inline {
border: none;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="one">
<iframe class="inline" srcdoc="<div><h1>my parent was not properly closed</h1>"></iframe>
</div>
<div class="two">
<iframe class="inline" srcdoc="<div><div><h2>nor mine</h2>"></iframe>
</div>
<div class="three">
<iframe class="inline" srcdoc="<div><div><div><h3>neither was mine</h3>"></iframe>
</div>
</div>
</body>
</html>
Given the LESS syntax for css nesting as follows
.center {
h2 {
text-align : center;
}
h3 {
color:red;
}
}
When checked with online compiler, got it as expected:-
.center h2 {
text-align: center;
}
.center h3 {
color: red;
}
But for the less syntax doesn't work as given above. Whereas, if given as mentioned in 2nd (the compiled one) directly, then it works.
https://jsfiddle.net/s0hajL4m/
https://jsfiddle.net/co60cdus/
This the html i used
<body>
<div class="center">
<h2>Welcome Users</h2>
<h3>Login</h3>
</body>
Is there any css rule for this scenario? Or is this a bug?
Browsers don't support LESS.
You've just dumped your LESS in a box that JSFiddle marks "CSS". JSFiddle then builds a webpage and tells the browser it is CSS. Since it is not CSS, browsers hit syntax errors and don't parse it the way you expect.
You need to compile it to CSS and then include the CSS in the page.
Alternatively (and not recommended because it is inefficient and less reliable) you can include JavaScript to read the LESS and generate CSS on the fly.
I have a division placed on the bottom of the page. I put an image into this division, but I don't know how to modify the image. The problem may be, that the inline style for <img> is setting modification rules for all images. I have an inline style sheet that has this code and HTML code for <div>.
My CSS code looks like this:
<style type="text/css">
img {
image-align: center;
padding: 10px;
height: 200px;
width: 140px;
}
div {
position: absolute;
right: 10px;
}
</style>
And my HTML code is like that:
<div align="center" >
<img src="images/music_banner.jpg" >
</div>
you can do this:
div img{
}
or give the div a name and do this
#div img{
}
or you give the img an id as below
<div>
<img id="mg"/>
</div>
Use id as #mg in CSS code.
or you can do as define class name in img tag.
<div>
<img class="mg"/>
</div>
Use class as .mg in CSS Code.
You might try learning a little bit more about CSS selectors: these are the rules that tell the browser which element you'd like to apply the following rules to.
I would recommend Code Academy for an easy to follow course. You can skip down to the CSS section if you are already comfortable with HTML.
Note: if you google CSS, you'll get "w3schools" as the first results. That website is generally derided on Stack Overflow. I don't know if it's really that bad, but I tend to skip it just because everyone else has a bad opinion of it. Your call if you find it helpful of course.
I should note that I like to use the W3C (World Wide Web Consortium) website for reference, as they're the ones trying to make everything standard. It is a pretty technical read, though.
Create a div element in your HTML code:
<div class="parent">
<img src="image">
</div>
Than add this to your CSS code:
.parent {
width: 42px; /* I took the width from your post and placed it in css */
height: 42px;
}
/* This will style any <img> element in .parent div */
.parent img {
height: 100%;
width: 100%;
}
I want my page's BODY not to be scrollable but a DIV inside the BODY should be scrollable.
I have this in my css file:
body {
overflow:hidden
}
.mainSection {
overflow:scroll
}
but it doesn't work and the DIV doesn't become scrollabel (it just shows two disabled scroll bars for the DIV)!
.mainSection needs to have a height. Otherwise the browser can not know what it should consider overflow.
Are you sure the style for your mainSection class is being applied? You can use a tool like Web Developer or Firebug (for Firefox) to make sure that the style is being correctly applied. Also if you just have one mainSection, you might want to use an id instead of a class. the tag in html would then be <div id="mainSection"> instead of <div class="mainSection"> and the css becomes #mainSection { ... } instead of .mainsection { ... }
Here is the whole thing well explained
http://www.w3schools.com/css/pr_pos_overflow.asp
You can experiment.
I had the same problem before, but I could manage to solve it just with overflow: auto;. Try it and it will work.
Updated
The full html code looks like this
<html>
<head>
<title>Test page</title>
<style type="text/css">
#scrollable_div{
overflow: auto;
width: 100px;
height: 100px;
border: solid thin black;
}
</style>
</head>
<body>
<div id="scrollable_div">my div text</div>
</body>
Works perfectly in any browsers. I tested myself in Chrome, IE, Safari, Mozilla, and Opera