Web Development

28-Oct-10 6:00

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 ); /* Can't separate this colour. */
}

#doesNotWorkID
{
	border-color: rgb( 246, 199, 21 );
}

.doesNotWorkClass
{
	border-color: rgb( 246, 199, 21 );
}

Manfred Rudolf Bihy28-Oct-10 7:04

Manfred Rudolf Bihy

28-Oct-10 7:04

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

Patrick Skelton28-Oct-10 8:44

28-Oct-10 8:44

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

Manfred Rudolf Bihy28-Oct-10 11:57

Manfred Rudolf Bihy

28-Oct-10 11:57

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

Patrick Skelton28-Oct-10 23:22

Re: CSS Selector Problem [modified]

28-Oct-10 23:22

That really is the best explanation of CSS specificity I have ever read. Thanks for that, Manfred.

- Patrick

Smile | :)

Manfred Rudolf Bihy29-Oct-10 1:25

Manfred Rudolf Bihy

29-Oct-10 1:25

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

Patrick Skelton2-Nov-10 3:17

Increase your webpage performance by using 80/20 rule of Vilfredo Pareto

2-Nov-10 3:17

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

Sunasara Imdadhusen27-Oct-10 22:45

Sunasara Imdadhusen

27-Oct-10 22:45

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]

Thumbs Up | :thumbsup:

Thanks,
Imdadhusen

sunaSaRa Imdadhusen
+91 99095 44184
+91 02767 284464

Yahoo. Google Oauth APIs..

Lijo Rajan27-Oct-10 4:07

Lijo Rajan

27-Oct-10 4:07

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.

Html element tooltip / title attribute in Opera kioskmode not showing? [modified]

rolfhorror22-Oct-10 22:37

rolfhorror

22-Oct-10 22:37

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

Need help on Windows Mobile 5.0 [modified]

Rahul Chitte22-Oct-10 5:36

Rahul Chitte

22-Oct-10 5:36

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. Frown | :(

-- Modified Monday, October 25, 2010 3:17 AM

SSL, but not via a web server

TimWallace21-Oct-10 5:53

TimWallace

21-Oct-10 5:53

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?

Re: SSL, but not via a web server

Rob Smiley21-Oct-10 6:26

Rob Smiley

21-Oct-10 6:26

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"

ie css display issue, I need advice

cjoki15-Oct-10 3:30

15-Oct-10 3:30

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?

phil.o15-Oct-10 4:15

phil.o

15-Oct-10 4:15

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 ?

cjoki15-Oct-10 4:40

15-Oct-10 4:40

yeah that may help... here ya go Smile | :)

<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>

phil.o15-Oct-10 5:10

phil.o

15-Oct-10 5:10

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.

cjoki15-Oct-10 5:57

15-Oct-10 5:57

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.

cjoki16-Oct-10 8:05

16-Oct-10 8:05

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

phil.o26-Oct-10 3:41

phil.o

26-Oct-10 3:41

You're welcome !
Sorry for replying so late but I was out of office the whole last week.

W∴ Balboos, GHB8-Nov-10 2:34

W∴ Balboos, GHB

8-Nov-10 2:34

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

cjoki10-Nov-10 15:10