|
Hi,
I am having trouble getting a CSS selector to hit a target. The included HTML and CSS showing an image inside some layout divs. I have been trying to separate colour from layout using classes, and this seemed to work fine until I got to the problem of separating the colour of the border on the image. As the files stand, the image has the border colour I want, but if I comment out the line labelled 'Can't separate this colour' the image gets a white border from somewhere. Though I have tried adding both a class and an ID to the img, these seem to be ignored.
Why are these lines being ignored? And where is the image inheriting its border colour from?
I have experimented with many ways of trying to separate the border colour for the image into its own CSS rule, but none of them works. It seems that the colour has to be in the same rule as the border width to work.
I confess to struggling with CSS at the best of times, but this seems such a simple thing. Can anyone tell me what I am missing, and - hopefully - come up
with a way of allowing me to specify the colour of the image's border in a separate rule to the border itself?
Any help would be very much appreciated.
Best wishes, Patrick
<!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" xml:lang="en-gb">
<head runat="server">
<link rel="stylesheet" type="text/css" href="Screen.css" media="screen" />
</head>
<body class="baseColour">
<form id="homePage" class="borderOutlineColour" runat="server">
<div id="headerOuterContainer" class="borderColour">
<div id="headerLogo">
<img id="doesNotWorkID" class="doesNotWorkClass" src="NonExistantImage.jpg" height="100px" width="100px" />
</div>
<div class="clear">
</div>
</div>
</form>
</body>
</html>
body
{
font-family: arial, helvetica, sans-serif;
padding: 10px;
}
.clear
{
clear: both;
}
#homePage
{
width: auto;
border-style: solid;
border-width: 2px;
}
#headerOuterContainer
{
border-style: solid;
border-top-width: 0;
border-bottom-width: 0;
border-left-width: 150px;
border-right-width: 150px;
z-index: 3;
}
#headerLogo
{
float: left;
position: relative;
z-index: 20;
margin-top: 0;
margin-right: 1px;
margin-bottom: 0;
margin-left: -150px;
height: 150px;
width: 150px;
}
.baseColour
{
background-color: black;
color: white;
}
.borderOutlineColour
{
border-color: rgb( 246, 199, 21 );
}
.borderColour
{
background-color: rgb( 15, 10, 100 );
border-color: rgb( 15, 10, 100 );
}
#headerLogo img
{
border: 2px solid;
border-color: rgb( 246, 199, 21 );
}
#doesNotWorkID
{
border-color: rgb( 246, 199, 21 );
}
.doesNotWorkClass
{
border-color: rgb( 246, 199, 21 );
}
|
|
|
|
|
Hi Patrick,
I debugged this using FireBug and made it work by either prefixing either of the CSS rules #doesNotWorkID or .doesNotWorkClass with img:
img#doesNotWorkID
img.doesNotWorkClass
Why that did the trick only the CSS gods may know.
It may help you though!
Cheers
Manfred
|
|
|
|
|
Thank you for that, Manfred. It does work, though I won't pretend to know why it is necessary.
It seems to matter where I put it in the file; it seems to need to go somewhere near the bottom of the file, which suggests another rule somewhere is overriding it.
And, just as an experiment, I tried it with a space between img and #doesNotWork, and that fails. I suppose I need to RTFM, but I don't know what the difference in meaning is between having a space there and joining the two specifiers.
Thanks again.
- Patrick
|
|
|
|
|
Here's a bit I just found that might shed some light on the situation:
http://reference.sitepoint.com/css/specificity
I only skimmed over it, as I'm getting ready to hit the sack (gotta get up early this Friday morning),
but it explains why one rule may be chosen over another because it's more specific than the other one (thus the title Specificity etc.)
Laters
Manfred
|
|
|
|
|
That really is the best explanation of CSS specificity I have ever read. Thanks for that, Manfred.
- Patrick
|
|
|
|
|
The question remains if whether it can explain what is happening with your CSS?
Or to be more specific: What makes the browsers interpret your CSS in a
way that makes the images border white. FireFox and IE8 even seem to
agree on that interpreation in showing the same result.
FireBug tells me that the border-color style is calculated (infered), but
it does not explain in which way that was done.
Did you gain any insights from the above mentioned document regarding this
strange behaviour? If you did please share them with us.
Greetings
Manfred
modified on Friday, October 29, 2010 7:36 AM
|
|
|
|
|
Hi,
I have had a play around with this, and I am none the wiser about where the image was getting a more-specific CSS rule. All my other rules were either IDs or classes not applied to the image, or they were one of a handful of rules applied to document elements, which shouldn't be overriding classes and IDs as the document elements have lower specifity than classes and IDs.
I'm going to try reading tealeaves to solve my next CSS problem.
Thanks again for the help.
Best wishes, Patrick
|
|
|
|
|
You can increase your webpage performance by using 80/20 rule of Vilfredo Pareto. Please have a look at the following link
[80/20 Rule by Vilfredo Pareto]
Thanks,
Imdadhusen
sunaSaRa Imdadhusen
+91 99095 44184
+91 02767 284464
|
|
|
|
|
Hi All,
I am using Yahoo,google oauth APIs in my application. I have implimented it successfully in my local machine. It is going to our production soon. So can any one please tell me, will these APIs cause any performance or security impact on my website. Because my site is an e commerce site where we are giving much importance for security and performance. If so what are all the precautions i need to take before it goes to the production. It would be really helpfull for me if anyone can give me some idea on this since this is the first time i am working on these APIs.
Thanks
Lijo.
|
|
|
|
|
Let's take this example; in a html-doc:
<img src="mypic.gif" title="Hello world" />
"Hello world" tooltip/title does not show up in Opera kioskmode/fullscreen (not F11), nor does any other html element title attribute value..
Anyone know how to get opera to show this ?
Cant seem to find a kioskmode switch to enable this..
Is this a opera bug ?
(btw using Opera version 10.63. Linux and Windows)
I really dont want to use javascript/css to make tooltip-popups.
thx!
modified on Saturday, October 23, 2010 12:31 PM
|
|
|
|
|
Hi,
I am running web application on Pocket IE(Ver.5.0),application contains some server controls and i have to access those controls using javascript.
I used getElementById('controlName') ... so on. but i could not acces those controls.. I searched lot on google but dint got any decent reason why this is happening.
Can anyone help in this regards.?
Thanks in advanced
Rahul C. 
-- Modified Monday, October 25, 2010 3:17 AM
|
|
|
|
|
I have an application that basically acts as a web server (it's more involved then that, but this gets the point across). I am putting the code in place to use SSL to secure the stream. I need to test this on my local PC, so of course I need a test cert. Try as I might, I cannot get makecert.exe create a certificate that will let me export it to a file as an X.509 certificate for use in my code (e.g. X509Certificate.CreateFromCertFile()). Can anyone point me toward a good tutorial on the whole process of doing this, please?
|
|
|
|
|
You need 2 or 3 files to implement this - .cer for the public key, .pvk for the private key and optionally (recommended) a .pfx for the combined certificate store key.
This is the sequence i've used before to generate all the bits:
makecert -n "CN=My Secure Key" -sv "MyKey.pvk" MyKey.cer
cert2spc "MyKey.cer" "MyKey.spc"
pvk2pfx -pvk "MyKey.pvk" -pi KeyPassword -spc "MyKey.spc" -pfx "MyKey.pfx" -f
Once you have the files, embed the .cer in the 'public' past of your code, Install the .pfx in the server certificate store. Load the .cer with X509Certificate2 & find the private key in X509Store, e.g.
_publicCert = New X509Certificate2()
_publicCert.Import(My.Resources.PublicKeyCer)
Dim certStore As X509Store = New X509Store()
certStore.Open(OpenFlags.ReadOnly)
For Each installObj As X509Certificate2 In certStore.Certificates.Find(X509FindType.FindByThumbprint, _publicCert.Thumbprint, False)
Next
Hope this helps, Rob
"An eye for an eye only ends up making the whole world blind"
|
|
|
|
|
Hello,
I have a website www.redash.org and I have recently updated the site to use html5. Everything looks good except for some weirdness displayed in ie (no surprise, I know) and was hoping to get some advice to address it.
From the main website go to system basics and then select powers from the right side menu. From the drop down select a power (like bite). Under the description is where the issue is. In ie there is a space between "form" and "usage". This is not suppose to be there yet I have not been able to get it to display like it does in ff.
Any ideas?
|
|
|
|
|
As we can't see the code that populates the 'power_display' div, it's difficult to see what's happening with this formatting issue.
Could you post a small code-snippet of the inner html of this div ?
|
|
|
|
|
<div id="power_display">
<header>Bite</header>
<div id="power_desc">
<span class="bold_label">DESC: </span>Many creature have teeth as a physical way of consuming food, but they do not gain a bite that can be used in combat.<br>
<p>In Red Ash this is split into the following categories; None, Carnivore, Herbivore and Omnivore. The teeth of an Carnivore are made for eating flesh and do piercing damage. The Herbivore has teeth made for crushing plants and will do bludgeoning damage. The Omnivore's teeth are meant for a more varied diet and are generally smaller and do half the damage of the others (piercing or bludgeoning).</p>
</div>
<div id="pap"><span class="bold_label">PAP: </span>2</div>
<div id="map"><span class="bold_label">MAP: </span>0</div>
<div class="power_type"><span class="bold_label">Type: </span>Combat, Alternative Attack</div>
<div class="power_form"><span class="bold_label">Form: </span><span class="underlined">Bite, Small</span></div>
<div class="power_form_etc"><span class="bold_label">Usage: </span>Permanent</div>
<div class="power_form_etc"><span class="bold_label">Base Cost: </span>-100</div>
<div class="power_form"><span class="bold_label">Form: </span><span class="underlined">Bite, Ideal</span></div>
<div class="power_form_etc"><span class="bold_label">Usage: </span>Permanent</div>
<div class="power_form_etc"><span class="bold_label">Base Cost: </span>-200</div>
<div class="power_form"><span class="bold_label">Form: </span><span class="underlined">Bite, Large</span></div>
<div class="power_form_etc"><span class="bold_label">Usage: </span>Permanent</div>
<div class="power_form_etc"><span class="bold_label">Base Cost: </span>-300</div>
<div class="power_form"><span class="bold_label">Form: </span><span class="underlined">Bite, Huge</span></div>
<div class="power_form_etc"><span class="bold_label">Usage: </span>Permanent</div>
<div class="power_form_etc"><span class="bold_label">Base Cost: </span>-400</div>
</div>
|
|
|
|
|
For 'Form', the content is encapsulated in a span (maybe for the underline feature) => what if you try another way to underline the content (i.e. not in another spam) ? Maybe you won't have the space after if you don't encapsulate in another span. Something like :
<div class="power_form"><span class="bold_label">Form: </span><u>Bite, Small</u></div>
It's just a guess ; what I see is that there's a difference with other fields in the layout. Maybe that difference is not interpreted the same way in IE.
|
|
|
|
|
thanks for the reply, sadly the <u> tag is not a part of html5, so I would rather not use it. I may need to make a change to the design and providea different visual cue to the form. I am using it to distinguish between the start of one form and the end of another...I will work on it tonight and let you know how it goes.
|
|
|
|
|
I did a redesign and got rid of may of the divs used inside the form area (usage, base cost, etc..), replacing them with br's. I also got rid of the span with the underlined class. IE seams to be ok with this new layout and is behaving itself.
Exact cause of the display error...not sure although I suspect the underlined class was playing a part in it.
thanks for you efforts.
Chris
|
|
|
|
|
You're welcome !
Sorry for replying so late but I was out of office the whole last week.
|
|
|
|
|
Thanks for that successful battle w/IE. I went through the HTML5 exercise, as well, but my main annoyance was getting rid of and other such deprecated tags.
I haven't experience your specific problem because I'm somewhat of an HTML minimalist (probably from being a C programmer for many years). By minimalist, I mean that I generally do my line-feeds with br and text appearance with span. div get its play, primarily because of items that won't work in the span/br methods, such as text-align. It's from an impulse to maintain control. The only p tags on my websites are legacy from when I used FrontPage - and they're disappearing as time permits. From your experience, I was innocently lucky.
| "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 |
|
|
|
|
|
Thank you for your words, I feel that with the promiss of html5 and css3 we face interesting times ahead. My current design will most likely change a bit more as I back off of the overly flexible layout to a more traditional centered and fixed width layout. This flex layout I have was a fun idea, but I see issues with this design such as if I want to add a banner exchange. Ah well, the fun never ends, and honestly would we ever really want it to?
All the Best!
Chris J
|
|
|
|
|
I'm creating a tabbed page. I'm stuck with setting the images to the tab headers.
Coding
<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Try Tabbed Page Example</title>
<script type="text/javascript" >
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>
<style>
div.TabView div.Tabs {
height: 36px;
overflow: hidden;
}
div.TabView div.Tabs a {
float: left;
display: block;
width: 148px;
text-align: center;
height: 36px;
line-height: 30px;
vertical-align: middle;
background: url('images/tab1-h.jpg') no-repeat;
text-decoration: none;
font-family: "Times New Roman", Serif;
font-weight: 900;
font-size: 13px;
color: #fff;
margin-right:1px;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {
background: url('images/tab1.jpg') no-repeat;
}
div.TabView div.Pages {
clear: both;
overflow: hidden;
}
div.TabView div.Pages div.Page {
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad {
padding: 3px 18px;
}
</style>
</head>
<body>
<div class="TabView" id="TabView-demo" style="width: 740px; height: 192px; text-align: left; background: url('images/bgTabMenu 2.jpg') no-repeat;">
<!-- *** Tabs ************************************************************** -->
<div class="Tabs" style="width: 740px;">
<a>Academics</a>
<a>Notifications</a>
<a>Opportunities</a>
<a>Announcements</a>
<div style="width:144px; height:36px; float:right; top:0; margin:0; padding:0; background: url('images/tab2-h.jpg') no-repeat"> </div>
</div>
<!-- *** Pages ************************************************************* -->
<div class="Pages" style="width: 740px; height: 156px; text-align: left;">
<!-- *** Page1 Start *** -->
<div class="Page">
<div class="Pad">
<br>
<p> You are Viewing Tab Page 1.</p>
</div>
</div>
<!-- *** Page1 End ***** -->
<!-- *** Page2 Start *** -->
<div class="Page">
<div class="Pad">
<br>Categories include:<br>
<br>
<p> You are Viewing Tab Page 2.</p>
</div>
</div>
<!-- *** Page2 End ***** -->
<!-- *** Page3 Start *** -->
<div class="Page">
<div class="Pad">
<br>
<p> You are Viewing Tab Page 3.</p>
</div>
</div>
<!-- *** Page3 End ***** -->
<!-- *** Page4 Start *** -->
<div class="Page">
<div class="Pad">
<br>
<br>Categories include:<br>
<br>Categories include:<br>
<p> You are Viewing Tab Page 3.</p>
</div>
</div>
<!-- *** Page4 End ***** -->
</div>
<script type="text/javascript">
tabview_initialize('TabView-demo');
</script>
</body>
</html>
The above coding is working fine how i need. But still i need some modifications which satisfies my work defenition..
And the modifications which i need to satisfy client requirement are mentioned as below.
Modifications needed only in setting the background of the tabs as follows:
1. Acadamics tab contains 2 images (tab1-h.jpg) as background and when hover/clicked the image (tab1.jpg) should get displayed.
2. All the other 3 tabs uses the images (centre-h.jpg) and (centre.jpg) during hover/clicked of the tabs.
I need the same functionality which is currently present in my code. Only i need the modifications which i've mentioned...
I need it urgently.
Thanks
M.Sworna Vidhya
|
|
|
|
|
programaticaly change the background img / css classes for mouseover & out.
|
|
|
|
|
<%
strSearch = "SELECT Brief,Area,City,Country,Telephone,File Data" & "FROM [registration] " & "WHERE City LIKE '" & Replace(request.Form("txtsearch"), "'", "''") & "%' "
rsSearch.open strSearch, strconn, 3,3
%>
<%
On error resume next
rsSearch.movefirst
while Not rsSearch.eof
%>
</p>
<table>
<tr>
<td height="20" colspan="4" class="fontbold"> <%=rsSearch("Brief")%> </td>
</tr>
<tr>
<td width="217" height="20" class="font"> <%=rsSearch("Area")%> </td>
<td width="99" class="font"> <%=rsSearch("City")%> </td>
<td width="94" class="font"> <%=rsSearch("Country")%> </td>
<td width="225" class="font"> <%=rsSearch("Telephone")%> </td>
<td width="200">
<%
if not (rsSearch.EOF and rsSearch.BOF) then
PicSize = rsSearch("File Data").ActualSize
if PicSize > 0 then
Response.BinaryWrite rsSearch("File Data").GetChunk(rsSearch("File Data").ActualSize)
End if
End If
response.End
'if rsSearch.eof then
' respond.end
' else
'Response.ContentType ="image/jpeg"
'Response.BinaryWrite(rsSearch("File Data"))
'end if
%>
</td>
</tr>
<%
rsSearch.Movenext
%>
<%
Wend
%>
modified on Thursday, October 14, 2010 9:07 AM
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
