Inconsistent CSS

[magicalwonders]

I'm not sure what is going on here, as I seem to be getting three different results for products that have the same CSS applied.

I've created the following class in actinic.css style sheet:

.productpanel {
padding-left: 5px;
padding-right: 2px;
}

I've referenced this in the Act_Productline template as follows:

<span class="productpanel">NETQUOTEVAR:PRODUCTDESCRIPTION 
      NETQUOTEVAR:EXTINFOLINK NETQUOTEVAR:EXTINFOBUTTON 
NETQUOTEVAR:PRODUCTBEGINLINKNETQUOTEVAR:PRODUCTLINKTEXTNETQUOTEVAR:PRODUCTENDLINK</span>

You can see the results of this at URL: http://www.magicalwonders.com/acatalog/Consumables.html

The text of the first product "A bunch of Flowers" goes right up to the edge on the right hand side. The second product, "Calculator" has about 15px padding on the right. The last two appears to be correct for the first line, then breaks on line two and has no padding!

Viewing the source code shows that the span class is applied to the entire text, so am somewhat stumped as to what is going on - or not going on!

Any ideas would be appreciated.

Myles

[leehack]

Download Firefox and the Firebug add-on, you can drill down to each particular part then by using the 'inspect' option and see for yourself.

[magicalwonders]

Hello Lee,

".....drill down to each particular part then by using the 'inspect' option...."

What would I be looking at? At the moment I am using Actinic in uncompacted code mode. The html code on the final page in explorer shows:

<TD vAlign=top colSpan=2><span class="productpanel">Twice as expensive, but then it's twice as good! So at twice the price, you know you're getting something special! </span>

Is there other code that's hidden?

I'm using notepad to edit code in first instance. So not sure how the Firefox/firebug combo will help me.

Myles

[jont]

Don't forget that different sizes of words will wrap at different places and cause different effect (unless the text is justified) .. adding a background-color: green;
into .productpanel on the fly shows the span is working correctly for all ... IE simply as wide as the text (the span only wraps the actual text unlike a <div> which is a container)

[leehack]

You are a little confused on how things are looking different yet they are the same as far as you are concerned. Therefore if you download the Firefox browser and then install the Firebug add on, you can click all over the page and in the code window it will show both the code producing that area and the CSS styles styling it. A very large number of web designers use it, its great for finding out what the chuff is going on when it's a bit confusing.

Download as i say and then view the page with problems and you will understand then, just try it.

[magicalwonders]

Hi Jonty, Hi Lee,

Yes, I've taken a look at firefox/firebug. It is interesting stuff. I couldn't see any errors though. Have attached a screen shot of the results.

adding a background-color: green; into .productpanel on the fly shows the span is working correctly for all

So my code is O.K.? I can understand how words will wrap at different places on the right hand side. But words at the beginning of each line should line up - I would have thought!

Firefox seems to display the page better than explorer. However, there is still a slight indentation from one line to the next.

Time for bed!

Myles

[peblaco]

A span only goes around text but not when it wraps. Try a div: <div class="productpanel"> NETQUOTEVARs </div>

[jont]

But words at the beginning of each line should line up - I would have thought!

NO! You have a padding-left: 5px; .. the <span> literally spans the sentence of words.. in effect you are telling the sentence to indent by 5px .... even though the sentence is over several lines it is the same sentence so only indents (pads) at the start and the following line starts at position zero.

[jont]

I have lost my touch ... Louise's fingers are quicker than mine

[magicalwonders]

Hey Lee, Louise, Jonty,

Thanks for all your help. I've learned lots of stuff today! Thanks for the sample code Louise.

Divs are my new best friend!

Now I really am off to bed!!!

Myles

[TraceyHand]

I have to confess, I didn't know the difference between a span and a div either!!
I've learned something new today

[completerookie]

dont forget, the FireFox addin allows you to look at CSS and ALSO allows you to edit style on the fly so you can experiment with the css to TRY to get the effect you want without continually going back into actinic.

once you've "edited / played" with the style, save that style somewhere and then insert it into actinic once.

whats great is that you can use the css-information option to hover over virtually anything to see how they arrived at the styles. you will quickly learn an awful lot about style.
the onlything it doesn't allow you to see is the "hover" attribute of style but thats another story.

[TraceyHand]

the onlything it doesn't allow you to see is the "hover" attribute of style but thats another story.

although FF developer might not, I'm fairly sure FireBug does

[magicalwonders]

whats great is that you can use the css-information option to hover over virtually anything to see how they arrived at the styles. you will quickly learn an awful lot about style

Yes, I can see I will be using this a lot. It's a real cool tool!

Myles

[gabrielcrowe]

the difference between a span and a div:

spans suck
divs pwn

as a rule of thumb, a span will (unless styled out of the behaviour) allow items to flow after it.

this this:

this is <span>some</span> text

now this?

this is <div>some</div> text

see that the div breaks the flow?