|
The following works for h3 - h6, but not h1 or h2
.test h1,h2,h3,h4,h5,h6 {
font-style: italic;
}
.test h1,h3,h5 {
color: red
}
.test h2,h4,h6 {
color: maroon;
}
Specifically, 'italic' is ignored for h1, h2, red ignored for h1, maroon ignored for h2
BUT
If I rearrange so that neither h1 nor h2 is the first in either list, then all is well for all h's
OR
If I put a dummy value as the first arg in the lists, all is well.
[ex: .test dummy, h1, h2, h3, h4, h5, h6 { stuff }
Is there some rule about h1,h2 I never learned, or is this a weird bug in CSS ?
Additional Notes:
This is in an external style sheet, but seems to be the same when declared in
Browsers tested:
Firefox 3.6.10 and IE6 . Also, rendering in Expression Web 3 design window.
Header:
Anyone know what's up (and are there other such weirdnesses ?)
| "The difference between genius and stupidity is that genius has its limits." - Albert Einstein | | "As far as we know, our computer has never had an undetected error." - Weisert | | "If you are searching for perfection in others, then you seek dissappointment. If you are searching for perfection in yourself, then you seek failure." - Balboos HaGadol Mar 2010 |
modified on Friday, September 24, 2010 9:48 AM
|
|
|
|
|
Hi
Here is the solution
<style type="text/css">
.test
{
font-style: italic;
}
h1.test,h3.test,h5.test
{
color: red;
}
h2.test,h4.test,h6.test
{
color: maroon;
}
</style>
Please do let me know, if you have any doubt.
Please provide "Vote" if this would be helpful, and make "Correct Answer" if this would be correct answer.![Rose | [Rose]](https://www.codeproject.com/script/Forums/Images/rose.gif)
Thanks,
Imdadhusen
sunaSaRa Imdadhusen
+91 99095 44184
+91 02767 284464
|
|
|
|
|
Thanks for your effort, but making this work for h1 through h6 was not my question.
The question is 'why does putting h1, h2 as first element in the list fail?'
Putting a dummy value in front of them, or rearranging them, also fixed the values.
Why does h3, h4, h6, h6, h1, h2 work for all, yet h1, h2, h3, h4, h5, h6 only work for h3-h6 ?
Is this a bug in CSS, and are there other known similar bugs?
As an aside, the .test { font-style: italics; } is rather extreme - requiring correction styles whenever that class is declared and italics are not required. I think this point is somewhat a matter of taste.
None-the-less, thanks for your input. At least I know someone is reading this forum!
| "The difference between genius and stupidity is that genius has its limits." - Albert Einstein | | "As far as we know, our computer has never had an undetected error." - Weisert | | "If you are searching for perfection in others, then you seek dissappointment. If you are searching for perfection in yourself, then you seek failure." - Balboos HaGadol Mar 2010 |
|
|
|
|
|
".test h1" means h1 INSIDE another element with a class equal to "test". Maybe you were expecting your style to work with headings outside of that element with the "class=test". Subsequent headings did not encounter the problem because there were no constraints, that is they did not have to be inside the said element to adapt the style.
|
|
|
|
|
Well - actually, if you consider what I posted more carefully when proposing an explaination:
If it were simple the adjacency, the the declaration that went .test h1, h2, h3, . . . h6 would only fail for h1 (or h2 through h6). It fails for h1 and h2 . Your supposition that the class declaration only applies to the first element doesn't follow my description of the behavior.
Your analysis is incorrect for another reason: to limit the declaration as specifically as you propose, wouldn't the syntax be more like: h1.test, h2.test, h3, h4, h5, h6 {} ? ? ? The commas are the syntax used to tell the browser "interpret all of these tags with the following styles"
Your analysis would be more correct if I had left out the commas between the h# tags.
None the less - I thank you for at least considering the problem. Pretty much no one wants to touch it.
| "The difference between genius and stupidity is that genius has its limits." - Albert Einstein | | "As far as we know, our computer has never had an undetected error." - Weisert | | "If you are searching for perfection in others, then you seek dissappointment. If you are searching for perfection in yourself, then you seek failure." - Balboos HaGadol Mar 2010 |
|
|
|
|
|
Oh I see. Stupid me. Weird indeed. Unless of course the styles were overridden somewhere.
|
|
|
|
|
You're probably right about something overriding the values - but I thought specificity was on my side, here, as well as the last reference winning.
An interesting note:
If, instead of declaring the <hn class="test"> for each individual tag, if I wrap them all in a single <div class="test">, (instead) all is well. So, the interpretation is more predictable when the style is less direct.
THIS WORKS CORRECTLY
<div class="test">
<h1>Testing h1 </h1>
<h2>Testing h2 </h2>
<h3>Testing h3 </h3>
<h4>Testing h4 </h4>
<h5>Testing h5 </h5>
<h6>Testing h6 </h6>
</div>
Curious
| "The difference between genius and stupidity is that genius has its limits." - Albert Einstein | | "As far as we know, our computer has never had an undetected error." - Weisert | | "If you are searching for perfection in others, then you seek dissappointment. If you are searching for perfection in yourself, then you seek failure." - Balboos HaGadol Mar 2010 |
|
|
|
|
|
Can I see your code?
I tried creating a test page using the style in your first post like this. I'm only assuming that you did it somewhat like this.
<html>
<head>
<title>CSS Test Page</title>
<style type="text/css">
.test h1,h2,h3,h4,h5,h6 {
font-style: italic;
}
.test h1,h3,h5 {
color: red
}
.test h2,h4,h6 {
color: maroon;
}
</style>
</head>
<body>
<h1 class="test">Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>
</body>
</html>
Everything went as expected. Since styles with the syntax
<classname> <element>
{
}
requires the element to be inside another element with the stated class. Like
<div class="test">
<!--
the element to adopt the style from the previous declaration
-->
</div>
h2 was italicized though. your problem was it was not italicized right?
the color red for h1 and color maroon for h2 did not apply as expected.
you said you encountered no problem when you put it inside
<div class="test"></div>
right? try creating another set of headers outside the "div" tags and you will encounter the problem again.
I've been working with CSS for quite a while now. I'm just really curious about this. whatever you might have in mind about this, i'll be glad for a reply. 
|
|
|
|
|
Right now, I'm still leaning towards a bug - for if you put a dummy element as the first element, q,h1,..., all of the h's work.
So far, we know it's a positional problem.
A lot of experiments come to mind - what if I declared each of the h's separately, but still made them part of class test?
Suppose the first element were another type - a valid one, instead of a dummy, does the style still fail?
Macotti wrote: I'm just really curious about this.
Your words, above, were very consoling. I've been a developer since the 80's, but HTLM, especially with styles, is relatively new. There's always the feeling I've missed something obvious conflicting with the feeling that I'm pretty good at finding bugs in my code.
I'll let you know if I discover anything.
| "The difference between genius and stupidity is that genius has its limits." - Albert Einstein | | "As far as we know, our computer has never had an undetected error." - Weisert | | "If you are searching for perfection in others, then you seek dissappointment. If you are searching for perfection in yourself, then you seek failure." - Balboos HaGadol Mar 2010 |
|
|
|
|
|
Hi Friends,
Kindly help me for this. I wanted to export of excel data to table in sql server. I have to compare the column name in excel and table then export that column then next column. Like this i wanted this export.
Please help...
Thanks in Advance,
Regards,
|
|
|
|
|
' Path to excel file
z="uploadasp/contact_data.xls;"
Path = Server.MapPath(z)
SQL_Query = "SELECT * FROM [Commercial$]"
Driver ="{Microsoft Excel Driver (*.xls)}"
DataSource = "DBQ=" & Path & ";"
DataSource = DataSource & "DefaultDir=" & Path & ";"
DataSource = DataSource & "Driver=" & Driver & ";"
DataSource = DataSource & "FIL=excel 5.0;ReadOnly=1;"
Set MyConn =Server.CreateObject("ADODB.Connection")
MyConn.ConnectionTimeout = 15
MyConn.CommandTimeout = 30
MyConn.Open DataSource
'Set MyConn = Server.CreateObject("ADODB.Connection")
'Set MyConn = Server.CreateObject("ADODB.Recordset")
'strBaseFilePath ="uploadasp/contact_data.xls"
'MyConn.Open "Provider=Microsoft.Jet.OLEDB.4.0;" & _
'"Data Source=" & Server.MapPath(strBaseFilePath) & ";" & _
'"Extended Properties=""Excel 8.0;"""
'RS.Open SQL_Query, MyConn, adOpenStatic
'Lets loop through the data and output it into a HTML table
Set RS = MyConn.Execute(SQL_Query)
IF RS.EOF THEN
'There is no data to show
tot=0
ELSE
'Lets output the field names
' FOR EACH Field IN RS.Fields
' NEXT
'Now we will output each row of the data
tot=0
tota=0
DO WHILE NOT RS.EOF
if rs.fields(0)<>"" then
Set rs4 = Server.CreateObject("ADODB.Recordset")
rs4.open "select * from data where 1<>1",Con,1,3
rs4.addnew
IF rs.Fields(0)<>"" THEN RS4("name")=rs.Fields(0)
IF rs.Fields(1)<>"" THEN RS4("surname")=rs.Fields(1)
IF rs.Fields(2)<>"" THEN RS4("primary_email")=rs.Fields(2)
rs4.UPDATE
end if
RS.MoveNext
LOOP
END IF
RS.Close
Set RS = nothing
MyConn.Close
Set MyConn = nothing
===================
Hope this code will help
|
|
|
|
|
Does anyone know a really good site that I could download a really good flash file?
THANKS!!!!
|
|
|
|
|
Are you cross posting??
You have a very similar question in JavaScript forum!
You want everything for nothing?
Heard of Google yet?
Dave
Find Me On: Web| Facebook| Twitter| LinkedIn
CPRepWatcher now available as Packaged Chrome Extension, visit my articles for link.
|
|
|
|
|
Just like to thank the univoter. it was a pleasure.
The original OP's question was so open ended, there is more chance of getting a sensible answer out of a politician. so i will gladly take the 1 vote.
Have a nice day.
Dave
Find Me On: Web| Facebook| Twitter| LinkedIn
CPRepWatcher now available as Packaged Chrome Extension, visit my articles for link.
|
|
|
|
|
i am new in web development my question is how to construct a side bar just like the one
at the left of this website that is when i click on web development it drops down and shows
the categories under web development please note i am using CSS HTML and PHP
|
|
|
|
|
I have developed a website. i had problem in viewing in Mozilla Firefox,Internet Explorer 8.0 and above.
How to over come with this problem
|
|
|
|
|
Since no one here is endowed with second sight or telepathy you'll need to tell us what the problem is (keep it brief and simple).
"If you think it's expensive to hire a professional to do the job, wait until you hire an amateur." Red Adair.
nils illegitimus carborundum
me, me, me
|
|
|
|
|
You can use different css file per browser but I don't think you want that. You may want to explain what 'problems' you have...
|
|
|
|
|
|
Hi, I am getting below error ,
---------------------------
Microsoft Development Environment
---------------------------
Error while trying to run project: Unable to start debugging on the web server. Server side-error occurred on sending debug HTTP request.
Make sure the server is operating correctly. Verify there are no syntax errors in web.config by doing a Debug.Start Without Debugging. You may also want to refer to the ASP.NET and ATL Server debugging topic in the online documentation.
Please hellp
- Ajay K
|
|
|
|
|
Hi, I am getting below error ,
---------------------------
Microsoft Development Environment
---------------------------
Error while trying to run project: Unable to start debugging on the web server. Server side-error occurred on sending debug HTTP request.
Make sure the server is operating correctly. Verify there are no syntax errors in web.config by doing a Debug.Start Without Debugging. You may also want to refer to the ASP.NET and ATL Server debugging topic in the online documentation.
Please hellp
- Ajay K
|
|
|
|
|
Hi everyone,
I've got a few icons I'm using sprites for, however they seem to work in every single browser except IE7. My code's very simple:
<div style="display:inline;margin:0 10px">
<a href="javascript:window.print()" title="Print">
Print Page <div class="useicon" style="background-position:0px 0px"></div>
</a>
</div>
My useicon class:
div.useicon {
display:inline;
height:16px;
width:16px;
background:url('../img/icons.gif') no-repeat 0px 0px;
padding:0 8px
}
Now the problem apparently is the display:inline part of that - the sprites just don't show up as long as that div is inline (if I remove display:inline the sprites show up but the thing is I want everything on the same line). Already tried using span instead of div, unfortunately it appears that as long as the object is inline the sprites won't show up.
Any suggestions?
The padding: 0 8px is there to keep the width at 16px, because some browsers completely collapse the div because it's empty even though I've specified width:16px.
Thanks in advance
|
|
|
|
|
You might need to add a space to your div containing the sprite, inline rendering should always cause the height attribute to be ignored.
You will also need to add the style a {text-decoration: none;} to avoid an ugly line in your empty div.
|
|
|
|
|
Thanks! I can't believe I forgot to try that. It's working fine now.
|
|
|
|
|
Hi dear
you can let div#useicon stay block level but you must change a to block level and then float the div#useicon for gain width and height. and that work in all IE versions.
here the css code:
a
{
display:block;
width:16px;
height:16px;
overflow:hidden;
}
div#useicon
{
width:16px;
height:16px;
float:left;
}
I used overflow for get arount collapse height because of floating div#useicon.
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
