21 replies [Last post]
KostaKondra
KostaKondra's picture
Offline
Enthusiast
Sydney
Last seen: 9 years 9 weeks ago
Sydney
Timezone: GMT+10
Joined: 2009-11-19
Posts: 68
Points: 87

The code is at the bottom, the idea is to have rounded corners on the top left (tl) bottom left (bl), top right (tr) and bottom right (br). You get the idea. What am I doing wrong. I have copied this almost word for word from the Best Practice XHTML and CSS book:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body 
{
    color: White;
}
#testDiv 
{
    position:absolute;
    left: 100px;
    top: 100px;
}
p 
{
    background: black url("curve_tl.gif") top left no-repeat;
}
p span 
{
    background::url("curve_bl.gif") bottom left no-repeat;
}
p span span 
{
    background::url("curve_tr.gif") top right no-repeat;
}
p span span span 
{
    background::url("curve_br.gif") bottom right no-repeat;
 
</style></head>
 
<body>
 
<div id="testDiv">
<p><span><span><span>Testing testing</span></span></span></p></div>
</body>
</html>

pingu
pingu's picture
Offline
Enthusiast
UK
Last seen: 5 years 11 weeks ago
UK
Timezone: GMT+1
Joined: 2006-07-24
Posts: 63
Points: 5

It doesn't answer your

It doesn't answer your question, but have you considered using CSS3 for your rounded corners? very simple.
http://www.css3.info/preview/rounded-border/

New browsers get the nice rounded corners, and older ones get acceptable square ones.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 33 weeks 1 day ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

pingu wrote:It doesn't

pingu wrote:

It doesn't answer your question, but have you considered using CSS3 for your rounded corners? very simple.

If all you want is rounded corners for rounded corners sake then it's fine. There are still some issues with it. You can do much more with Thrashbox or ALA's Custom Corners and borders.

KostaKondra
KostaKondra's picture
Offline
Enthusiast
Sydney
Last seen: 9 years 9 weeks ago
Sydney
Timezone: GMT+10
Joined: 2009-11-19
Posts: 68
Points: 87

No

I want to do it this way and I don't want to use CSS3 if the older browsers don't support it. Anyone have any idea why this doesn't work? Surely someone must know, it's amazing to me that the code doesn't work from the book.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 33 weeks 1 day ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

KostaKondra wrote:I want to

KostaKondra wrote:

I want to do it this way and I don't want to use CSS3 if the older browsers don't support it. Anyone have any idea why this doesn't work? Surely someone must know, it's amazing to me that the code doesn't work from the book.

That book sounds like a real peach. Laughing out loud

KostaKondra wrote:

... I have copied this almost word for word ...

Quoted for posterity.

Can you show a link please? It may be something as simple as your image paths. Have you been to htmldog.com yet?

I agree with your stance on not wanting to use CSS3 if older browsers don't support it. May as well not bother since 95% of users use an "older browser".

KostaKondra
KostaKondra's picture
Offline
Enthusiast
Sydney
Last seen: 9 years 9 weeks ago
Sydney
Timezone: GMT+10
Joined: 2009-11-19
Posts: 68
Points: 87

Enjoy

Here is the URL so you can check out the code as well as confirm that the image paths are indeed correct: (I posted it up on my domain just nwo)

http://www.headstudios.com.au/Test/index.html

Verschwindende?

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 33 weeks 1 day ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

First, you didn't validate

First, you didn't validate your styling. This is even more important than validating your markup as a browser will at least try to work with malformed markup. Improper styling syntax is simply skipped.

Second, I think you're missing something very important from the book example (such as "display: block;").

KostaKondra
KostaKondra's picture
Offline
Enthusiast
Sydney
Last seen: 9 years 9 weeks ago
Sydney
Timezone: GMT+10
Joined: 2009-11-19
Posts: 68
Points: 87

?

What does validating my styling mean?

What must I change? I know there is something missing. The question is what?

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 33 weeks 1 day ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

KostaKondra wrote: What does

KostaKondra wrote:

What does validating my styling mean?

http://csscreator.com/beforepost Specifically 4.

KostaKondra
KostaKondra's picture
Offline
Enthusiast
Sydney
Last seen: 9 years 9 weeks ago
Sydney
Timezone: GMT+10
Joined: 2009-11-19
Posts: 68
Points: 87

Not Useful

Document Checked

URL: http://www.headstudios.com.au/Test/index.html
Last modified: Sat, 28 Nov 2009 13:09:18 GMT
Character encoding: UTF-8
Level of HTML: XHTML 1.0 Transitional
Congratulations, no errors!

Validation has nothing to do with it. What made you think my style needed to be validated?

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 33 weeks 1 day ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

KostaKondra wrote:Validation

KostaKondra wrote:

Validation has nothing to do with it. What made you think my style needed to be validated?

Well, I don't know how to tell you that your wrong except to just say it. You validated your HTML, not your CSS. To answer your question, I know your styling needs to be validated because it's invalid.

http://jigsaw.w3.org/css-validator/

Yes, I am purposely not handing you the answers because you won't learn anything that way. I have your page working locally but I want you to figure it out.

KostaKondra
KostaKondra's picture
Offline
Enthusiast
Sydney
Last seen: 9 years 9 weeks ago
Sydney
Timezone: GMT+10
Joined: 2009-11-19
Posts: 68
Points: 87

Not Fixed

Congratulations! No Error Found.

Nothing fixed. I put the trailing } and deleted the extra :. In other words the code is valid but the page still does not display properly. So what is the problem now?

Regards

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 33 weeks 1 day ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

Well, what is different from

Well, what is different from the example in the book? I don't have the book, you're going to have to tell me the answer.

Notice by fixing the styling errors the bottom left image shows up. Now you need it to move to it's correct location. To say that it had no effect is not correct.

KostaKondra
KostaKondra's picture
Offline
Enthusiast
Sydney
Last seen: 9 years 9 weeks ago
Sydney
Timezone: GMT+10
Joined: 2009-11-19
Posts: 68
Points: 87

Tutorial?

How would you achieve the effect I am aiming for, or can you point me to a relevant tutorial?

Regards

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 45 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I got it working on your

I got it working on your example by adding one simple property declaration, the fix I knew from the first post onwards, your use of the word 'Almost' indicative of the issue. V mentioned this as well, later or in the same comment actually gave you the answer!

We're not being unkind but learning to think for ones self and discover is worth far more than answers handed out.

Persevere, find that solution and then post back and ask why that was required as that may not be apparent and could perhaps do with a brief explanation.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 33 weeks 1 day ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

Yes, seriously. You're

Yes, seriously. You're almost there. So close.

One little item to make it work and maybe another to make it look better.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 33 weeks 1 day ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

KostaKondra wrote: How would

KostaKondra wrote:

How would you achieve the effect I am aiming for, or can you point me to a relevant tutorial?

What happened to the book mentioned in the first post?

KostaKondra
KostaKondra's picture
Offline
Enthusiast
Sydney
Last seen: 9 years 9 weeks ago
Sydney
Timezone: GMT+10
Joined: 2009-11-19
Posts: 68
Points: 87

Well

Well obviously it doesn't work/you guys aren't helping me. If I knew what was wrong I would have fixed it by now. There is another way of doing this however it does not allow you to scale your divs (aka liquid layouts with the :before and :after property but it can only be for fixed width if that makes any sense.

So tell me the one million dollar answer. What did I do wrong?

You might think I'm an expert at CSS but I'm not. I've closed all my brackets, there's only one ':' between the definitions.

Please.

I feel I'm in Alice in Wonderland - "You'll get it... just one more".

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 33 weeks 1 day ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

Scribd??

Are you looking at the scribd book online? It is incomplete (I wonder if by design, lolz). The example link does show that adding display: block; to p span is the key.

Well, here comes the little airplane, RRRRRRRRRAAAAAWWWWWERRRRRRRR! Spoon!

KostaKondra
KostaKondra's picture
Offline
Enthusiast
Sydney
Last seen: 9 years 9 weeks ago
Sydney
Timezone: GMT+10
Joined: 2009-11-19
Posts: 68
Points: 87

Lol

Excerpt from the book:

Background images aren’t just about the bigger picture—they are used for every
decorative effect. In Figure 4.6 two rounded corners are applied to a content
area. The first is applied to the area’s container and the last is applied to the
bottom paragraph, so there is no need for any extra markup.

As long as you have enough elements to latch CSS onto, you can apply more than
one background to a part of the page. For example, you could add one rounded
corner to a paragraph by applying a background image to the top left of a p
element,
but if you had something like

<p><span><span><span>whatever
</span></span</span></p>
then you could apply a rounded corner to each of the elements (p for the top left corner, p span for the top right corner, p span
span for the bottom left corner, and p span span span for the bottom right
corner) using something like this:
p {
background: white url(images/sifakaptl.gif) top left norepeat;
}
p span {
background: url(images/sifakaptr.gif) top right no-repeat;
}
p span span {
background: url(images/sifakapbr.gif) bottom right no-repeat;
}
p span span span {
background: url(images/sifakapbl.gif) bottom left no-repeat;
}
The p element applies one of the corner images (top left) and also sets the background
color of the box. Each of the nested span elements then applies another
corner.

So as you can see obviously the book is wrong, so where is that airplane going?

(I would show the PDF print page but I can't attach an image to a reply... strange).

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 33 weeks 1 day ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

Yeah, I found the same pirate

Yeah, I found the same pirate copy. I was just wondering if they purposely let that out to frustrate people that didn't buy the book. lol

So, did you try what I've twice suggested to fix the issue?

The airplane is strained peas and carrots.

KostaKondra
KostaKondra's picture
Offline
Enthusiast
Sydney
Last seen: 9 years 9 weeks ago
Sydney
Timezone: GMT+10
Joined: 2009-11-19
Posts: 68
Points: 87

Lol

1) I am using another method and lol why would you think I have a pirate copy? **hands start sweating**

And yeah maybe so. Still you guys were like acting like I had left out a bracket "Come on you're nearly there you can do it" while I'm completely lost.

Okay so I'm probably breaking a rule here (btw I have found another way to fix the problem but I will keep the p display:block in mind).

Can you tell me why my content text (it's the one with the naughty words) doesn't display to the right?

http://www.headstudios.com.au/faround/index.html

It's ridiculous, especially considering #leftBar (navigation) is position:absolute; so I really don't understand why #content would be coming after it.

You're going to help me make my awesome digital media production company website... and in exchange... well what do you want? Money right. I haven't got any.