38 replies [Last post]
Livingston
Offline
Regular
Seattle, WA
Last seen: 14 years 24 weeks ago
Seattle, WA
Joined: 2006-06-14
Posts: 25
Points: 0

I thought I had the basics down pretty well (I'm probably at the level of an advanced beginner), but I've run into something that has me stumpped.

For text I want to emphasize I use a <span> with a class. I thought things were working the way I wanted until I ran a preview in multiple browsers recently. Only IE rendered the text the way I wanted. Firefox and Netscape did not formatting of the spanned text. Since I tend to think FF and NS will be more true to spec. The containing DIV does have text styling specified in the style sheet but there is no direct conflict (i.e. font-weight: normal in the DIV and font-weight: bold in the SPAN).

I've run out of homework resources.

Why is IE, but not FF and NS, rendering a text area within a <span> to what is specified in the style sheet (.spanclass: {font-weight: bold;})? If I bound the text with an <em> or <b>, things are peachie but I'd prefer not to use those tecniques.

Thanks

Liv

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 31 weeks 6 days ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

[SOLVED] CSS style for &lt;span class=&gt; being lost

Hi and welcome to the forum.

Can you post the complete code or better still a link to a working page? That will make it easier to see what is happening.

Livingston
Offline
Regular
Seattle, WA
Last seen: 14 years 24 weeks ago
Seattle, WA
Joined: 2006-06-14
Posts: 25
Points: 0

CSS style for &lt;span class=&gt; being lost

Thanks for the note and the welcome. I've advanced from Microsofts Front Page forum and am looing for a good CSS and HTML forum. I hope this one turns out to be it.

Your absolutely right about giving specifics. Unfortunately, the site is not ready to be accessed for a number of reasons, so I'm going to have to take a lower road.

This is a representative piece of the html:

<p>A fundamental step in understanding whether a business opportunity is a good deal is to understand the profit that can be made on each item. The term often used in accounting for this profit is <span>Margin</span>.</p>

This paragraph is contained in a <div> which is nested in a couple more divs ("pageMain" within "container" within "wrapper").

Moving to the style sheet:

First all the containers:

body {
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #FFF;
color: #CCC;
}
#wrapper {
margin: 0px;
padding: 10px;
background-color: #666;
position: relative;
}
#container {
background-color: #FFF;
border-style: inset;
border-color: #333;
border-width: 15px;
margin: 0px;
padding: 10px 10px;
position: relative;
}
#pageMain {
margin: 15px 5px;
border-top: 2px solid #999;
padding: 10px 20px;
clear: both;
width: 875px;
}
#colCenter {
color: #000;
text-align: left;
font-size: 10pt;
margin-bottom: 1em;
}

And finally the span's class:

.emphasis {
font-weight: bold;
}

There are not specific tag styles, like for the <p>, in the style sheet.

What's displayed in IE are nice little bolded text in each of the SPANS but FF and NS display them with a font weight of normal.

Hope that helps.

Liv

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 31 weeks 6 days ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

[SOLVED] CSS style for &lt;span class=&gt; being lost

Ok I think I see the problem.

Change <span>Margin</span> to <span class="emphasis">Margin</span>
Checked in Fx, IE6 and Opera 8.54 all on XP Pro +SP2

PS I think if you hang around you will find that this forum is the best

briski
briski's picture
Offline
Elder
London
Last seen: 8 years 24 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

[SOLVED] CSS style for &lt;span class=&gt; being lost

Out of curiosity why do you not want to use <em> or <strong> tags? They seem to me to be the appropriate thing to use here.

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

[SOLVED] CSS style for &lt;span class=&gt; being lost

Note:
HTML tags turned off in original post as <b> was opened but not closed for all posts <b> is an allowed html tag in posts that will be parsed if using it, either escape the <> or turn off html tags.

Hugo.

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

Livingston
Offline
Regular
Seattle, WA
Last seen: 14 years 24 weeks ago
Seattle, WA
Joined: 2006-06-14
Posts: 25
Points: 0

[SOLVED] CSS style for &lt;span class=&gt; being lost

Interesting Hugo,

The text was copied directly from my site and there were no <b> tags in it.

Given the problem I'm having getting class to display in the forum, I may just disable html here all together.

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

[SOLVED] CSS style for &lt;span class=&gt; being lost

Liv you used <b> in your original post and in your last one :? were they not deliberate ? or have they appeared from nowhere? certain html tags are used alongside BB code tags for allowed formating of posts <b> being one of them if you leave the tag unclosed it runs on through all subsequent posts.

Hugo.

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 36 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

[SOLVED] CSS style for &lt;span class=&gt; being lost

Liv, please click "Post Reply" instead of "New Topic", that's where you're going wrong Tongue

Verschwindende wrote:
  • CSS doesn't make pies

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 36 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

[SOLVED] CSS style for &lt;span class=&gt; being lost

Here we go, the contents of the other posts:

Sorry, I didn't copy the html code properly into the thread. All the SPANS are coded <span>text</span>.

As far as the question about using <em> or for that matter <b>, even though those tags have not been depricated and can be referenced in a style sheet, it seems to me to be a hack to change them from the default function with a style sheet entry of something like em {font-weight: bold;}.

I perfer to have greater control over the emphasis by using span and class instead.

Liv

Nope, no insertion of b tags or any other formatting in the posts. They seem to have mysteriously appeared out of the ether. Simarly, it is interesting that the class portion of the spans have been removed from copy/paste text.

Liv

This is wierd. Every time I try to write the actual span and its class in the thread, the class portion is being removed.

I guess I'll try one more time to see if it's me:

I copied a paragraph directly from my html into this thread. The span has the class specified like this:

<span>text</span>

I'm going to post this an see. Maybe I need to disable html. If this doesn't work I'll try that next.

Live

Wierd. That's exactly what's happening. The post is stripping off the class in the span.

Now, with html disabled

<span>text</span>

Liv

P.S. Sure enough, I needed to have html disabled in the post to get the class to show up.

Oh well, back to the show.

All my spans have the proper class coding in them.

Verschwindende wrote:
  • CSS doesn't make pies

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 36 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

[SOLVED] CSS style for &lt;span class=&gt; being lost

It seems silly that you are adamant you WON'T use the emphasis tag to add emphasis to your HTML, you'd rather clutter it up with spans and classes?

WHat if a screen reader were to view your page? How would it know where the emphasis is?

Verschwindende wrote:
  • CSS doesn't make pies

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 49 weeks 8 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

[SOLVED] CSS style for &lt;span class=&gt; being lost

thepineapplehead wrote:
It seems silly that you are adamant you WON'T use the emphasis tag to add emphasis to your HTML, you'd rather clutter it up with spans and classes?

WHat if a screen reader were to view your page? How would it know where the emphasis is?

The <em> tag, if I recall right, was designed specifically as a semantic tag to allow one to avoid using unmeaningfull tags like <i> and <span>.

So it seems very odd to not use it for the purpose it was specifically designed for.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 36 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

[SOLVED] CSS style for &lt;span class=&gt; being lost

My point entirely.

Just as <h1> was designed for use instead of

<span class="heading"><font size="6"> <font color="black"> <b> <i> <span> <font> my title </font> </span> </i> </b> </font> </font> </span>

(God that was hard writing all those font tags Tongue )

Verschwindende wrote:
  • CSS doesn't make pies

Livingston
Offline
Regular
Seattle, WA
Last seen: 14 years 24 weeks ago
Seattle, WA
Joined: 2006-06-14
Posts: 25
Points: 0

CSS style for &lt;span class=&gt; being lost

OK, I give. I'll use something else other than a span class.

It still doesn't answer the question as to why it's not working.

Assuming that this will come throught properly in the post (and I have been pressing post reply not new thread), the coding is <span class="emphasis">text</span> and the style sheet specifies .emphasis {font-weight: bold;}

IE interprets it as I'd expect by bolding the text, but Firefox and Netscape don't.

Liv

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 49 weeks 8 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Re: CSS style for &lt;span class=&gt; being lost

Livingston wrote:
Assuming that this will come throught properly in the post (and I have been pressing post reply not new thread), the coding is <span class="emphasis">text</span> and the style sheet specifies .emphasis {font-weight: bold;}

IE interprets it as I'd expect by bolding the text, but Firefox and Netscape don't.

Based on the little we have, it seems quite likely that this is caused by an error in your CSS or xhtml code. Have you validated both? I often find that doing something as simple as accidentally leaving out a semicolon on a rule or typeing in a ) instead of a } can make a whole page go wonky.

CSS is designed to work on valid html or xhtml and if the code isn't valid the behaviour can be a real crapshoot.

I can't guarantee that validating both will solve your problem, but I can guarantee that knowing your code is valid will make it easier to find the problem if it doesn't solve it.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Livingston
Offline
Regular
Seattle, WA
Last seen: 14 years 24 weeks ago
Seattle, WA
Joined: 2006-06-14
Posts: 25
Points: 0

CSS style for &lt;span class=&gt; being lost

Thanks for reminding me to validate. Everything checks out fine after some minor corrections. I'm becoming more baffled as I run tests. I decided to create a very simple page and very simple style sheet to test the most basic parts of what I'm trying to do. The style sheet was simply an h1 and a class .emphasis. I used the h1 just to make sure the sheet was being linked to properly. On the web page I simple put in an h1 line of text followed by a <p>test <span class="emphasis">more text</span></p>. The test went fine.

I then went to the original web page, changes the style sheet link to pick up the test style sheet and, again, other than losing all the other styling, the test went fine.

I then put the link back to the original style sheet and made sure the coding for the .emphasis class was the same as the test style sheet. Finally, just to make sure, I commented out all the other style entries in the style sheet, except for the .emphasis class, and ran the test again.

The style is not being picked up in the web page. In otherwords, no matter what I do the the .emphasis class styling, nothing gets picked up on the page. I know that the commenting out of the other styles is working since I lose all other styling for the page.

Look, I don't think that debugging html and style sheets is the best use of these forums, so I'm going back to figure out why even the most basic test with limited changes between tests are producing very unusual results.

I'm doing something very wrong here. And now I have two problems. The original one where IE was displaying things as I expected but FF and NS were not, and now I have a mystery why the page isn't even picking up the styling in any browser when all the style data, other than the class I'm interested in, has been commented out.

If someone has the patience to follow along and offer suggestions or ask all the questions, I'd love the help. This is a hair puller.

Liv

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 6 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Re: CSS style for &lt;span class=&gt; being lost

Livingston wrote:
If someone has the patience to follow along and offer suggestions or ask all the questions, I'd love the help. This is a hair puller.

A link to the test page would help but it sounds like it could be a specificity problem. .emphasis { } may not be enough; you might need #myDiv .emphasis {}

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Livingston
Offline
Regular
Seattle, WA
Last seen: 14 years 24 weeks ago
Seattle, WA
Joined: 2006-06-14
Posts: 25
Points: 0

CSS style for &lt;span class=&gt; being lost

Thanks

I am building the test page and getting the original page put onto a test area I can publish today.

And your comment about specificity was exactly what I suspected when I first posted, along with the possibility of conflicting style assignments (e.g. p { } along with the span { } ) The latter I ruled out when I re-read the spec. It appears that the assignment closest to the text would take precedence if there's a conflict and in all other meaningful circumstances where there is no conflict the styles would simply merge.

I'll have test pages online later today.

Liv

Livingston
Offline
Regular
Seattle, WA
Last seen: 14 years 24 weeks ago
Seattle, WA
Joined: 2006-06-14
Posts: 25
Points: 0

CSS style for &lt;span class=&gt; being lost

So I have a test page online.

http://home.comcast.net/~tdcarp/margin_analysis.htm

The DWT is in the same structure in a folder called _dwt and the style sheet is in the same structure in a folder called _styles. The files actually were copied from another site currently only on my client to this one which I can use online for tests. (I wasn't ready to publish in the other area quite yet.)

I think I'd like to start at a very basic level. 1st, I've lost some formatting in the process of copying the dwt, style sheet, and page from the working site are to this one (on the client). Mostly what seems to have disappeared is the positioning but even some tag styles seem to have gone away.

So here's the first issue. I can change some of the styles and see the changes show up in the page. For example, .comment will accurately reflect a change in the style sheet. But, if I change a tag like h1 to, say, color: red, the change doesn't show on the page.

Whatever is causing this may be the root cause of my original problem so maybe we start there.

To test further, I put some inline styles (in the head section) and the styles worked fine. When I first tested this I thought maybe the style sheet wasn't being picked up, but the fact that a change to the .comment class did work seemed to eliminate that as an issue.

I'm going to keep testing on the client to see what I might find, but any help on this basic styling will probably be useful.

Thanks in advance

Liv

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

[SOLVED] CSS style for &lt;span class=&gt; being lost

Am I being thick, why have you commented out all the style rules in that external sheet?

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

Livingston
Offline
Regular
Seattle, WA
Last seen: 14 years 24 weeks ago
Seattle, WA
Joined: 2006-06-14
Posts: 25
Points: 0

CSS style for &lt;span class=&gt; being lost

No, you're not being thick. In fact, just the opposite. Sorry about that. Those were left over from an earlier test. They've been removed and in a few minutes the site will be republished.

On the client the good news is that we're back to my original problem.

Certain occurances of the word "Margin" are in spans with class of .emphasis. If you view the site in IE, things are as I expect; the words are bolded. But if you view in FF or NS, they are not. Since I tend to figure FF is more compliant, there's something IE is allowing that shouldn't be done.

Liv

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 31 weeks 6 days ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

[SOLVED] CSS style for &lt;span class=&gt; being lost

Hi again,

I've just been testing this and have found an interesting effect.

When I view the original test page that I did,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
  <head> 
  <meta http-equiv="content-type" content="text/html; charset=windows-1250"> 
  <meta name="generator" content="PSPad editor, www.pspad.com"> 
  <title></title> 
  <style type="text/css"> 
  body { 
margin: 0px; 
padding: 0px; 
font-family: Verdana, Arial, Helvetica, sans-serif; 
background-color: #FFF; 
color: #CCC; 
} 
#wrapper { 
margin: 0px; 
padding: 10px; 
background-color: #666; 
position: relative; 
} 
#container { 
background-color: #FFF; 
border-style: inset; 
border-color: #333; 
border-width: 15px; 
margin: 0px; 
padding: 10px 10px; 
position: relative; 
} 
#pageMain { 
margin: 15px 5px; 
border-top: 2px solid #999; 
padding: 10px 20px; 
clear: both; 
width: 875px; 
} 
#colCenter { 
color: #000; 
text-align: left; 
font-size: 10pt; 
margin-bottom: 1em; 
} 
 
/*And finally the span's class:*/ 
 
.emphasis { 
font-weight: bold; 
} 
</style> 
  </head> 
  <body> 
 
 <p>A fundamental step in understanding whether a business opportunity is a good deal is to understand the profit that can be made on each item. The term often used in accounting for this profit is <span class="emphasis">Margin</span>.</p> 
  </body> 
</html> 
the bold text does show up in Fx and the other browsers as I stated in an earlier post.

Now the interesting bit, If I open up the editCSS in the sidebar in Fx and view the above code, and then switch tabs in the main window to your latest test page http://home.comcast.net/~tdcarp/margin_analysis.htm the css from the simple test page is then applied to this new view. [b]And the bold text shows up.

Close the sidebar down and let the page use its own css, and no go, although afaics the code for the span is the same.

See screen grabs attached.
Oh crap why can't I add screengrabs??? No option showing.

Livingston
Offline
Regular
Seattle, WA
Last seen: 14 years 24 weeks ago
Seattle, WA
Joined: 2006-06-14
Posts: 25
Points: 0

CSS style for &lt;span class=&gt; being lost

Thanks for returning and you found exactly what I found.

If I simplify the style sheet and include it in the head section of the page, everything works exactly as you'd expect in all browsers.

But, when the style sheet is brought in via a link, things go south. I thought for awhile that it had to do with the linking, but that wouldn't explain why IE was picking up the bolding for the .emphasis class but Fx and NS weren't.

You've done a great job of advancing the topic of isolating the problem. Why does a simple styling approach like the one in your test page work, but when the style sheet being linked to by the actual page is used, the problem occurs?

Liv

Livingston
Offline
Regular
Seattle, WA
Last seen: 14 years 24 weeks ago
Seattle, WA
Joined: 2006-06-14
Posts: 25
Points: 0

CSS style for &lt;span class=&gt; being lost

I would like to go back and comment on a side subject that came up in this thread: why am I using span class when tags like em and strong are designed for dealing with what I'm looking for.

I understand it's easy to select some text and set the tags like em, strong, big, i, small, strong, etc. But I've moved away from them generally because of how I think the whole philosophy behind CSS.

Remember, I'm just a novice so I could be way off on this, but what I think I've learned about CSS is that it's based on the idea of separating structure and content (the code) from physical layout and styling (the CSS). If that's the case, them tags like em, strong, etc. are compromises to that philosophy. They embed styling in code.

The other generally philosophy behind CSS is to allow for maximum flexibility in styling. These text styling tags give very specific style results to the text the enclose. What happens if I want to emphasisze something by making it <strong> but also want it to be red? I haven't tested it, but I'm assuming I can format a <strong> tag in CSS and add the color attribute and maybe that's what those that thought I should use these tags as opposed to span class had in mind. But if not, that seems like a form of a hack to the intent of these tags.

As a compromise, I'm going to test being able to use the em tag with the ability to further format it via CSS em { }, but I would like to hear the thinking about whether the use of these text formatting tags truely align with the underlying philosophy of CSS.

And to paraphrase another regular:

....of course I could be totally wrong about this

Liv

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 49 weeks 8 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Re: CSS style for &lt;span class=&gt; being lost

Livingston wrote:

Remember, I'm just a novice so I could be way off on this, but what I think I've learned about CSS is that it's based on the idea of separating structure and content (the code) from physical layout and styling (the CSS).

Right. And that's why <strong> and <em> were invented - to separate layout from content.

Quote:

If that's the case, them tags like em, strong, etc. are compromises to that philosophy. They embed styling in code.

<b> and <i> do, but <strong> and <em> don't. That's there whole point. Emphasis is part of meaning - or why else would people shout?

Quote:

The other generally philosophy behind CSS is to allow for maximum flexibility in styling. These text styling tags give very specific style results to the text the enclose.

No, actually, they don't. Sure everything gets a default style in most browsers. You can change those styles with CSS.

The difference is that the <i> and <b> tags explicetly tell you how they should be presented. <strong> and <em> don't.

<em> simply means "emphasis" and <strong> simply means "strong empahsis". The CSS specification says nothing about how those meanings are to be implemented in a browser.

Quote:

What happens if I want to emphasisze something by making it <strong> but also want it to be red? I haven't tested it, but I'm assuming I can format a <strong> tag in CSS and add the color attribute and maybe that's what those that thought I should use these tags as opposed to span class had in mind. But if not, that seems like a form of a hack to the intent of these tags.

Quite the contrary. That's what is intended.

Quote:
..but I would like to hear the thinking about whether the use of these text formatting tags truely align with the underlying philosophy of CSS.

Read the documentation at the W3C site and you'll find out what the specification actually says.

"Emphasize this bit" (<em>) or "Really emphasise this bit" (<strong>), says nothing about how we are to do the emphasis, which is why these tags are semantic in nature and follow the CSS ideal. "Make this bit bold" (<b>) or "Render this bit in an italic font" (<i>) are presentational and that's why they were replaced with <em> and <strong>.

Your heart is in the right place! You just happen to have the details wrong in this instance. Wink

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Livingston
Offline
Regular
Seattle, WA
Last seen: 14 years 24 weeks ago
Seattle, WA
Joined: 2006-06-14
Posts: 25
Points: 0

CSS style for &lt;span class=&gt; being lost

Appreciate the lesson. Sounds like experimenting with setting styles for em and strong is a better way to go.

Liv

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 49 weeks 8 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Re: CSS style for &lt;span class=&gt; being lost

Livingston wrote:
Appreciate the lesson. Sounds like experimenting with setting styles for em and strong is a better way to go.

No need to experiment! These tags take the same styling rules as any others, so far as I know, given that they are inline elements, not block elements.

Most browsers have a default style for these tags and as people tend to get used to the defaults it's usually a good idea to stick with them without a good reason to vary. Just use them in a meaningful way in your html coding.

We all give emphasis to what we say when we are talking face to face, but we often do it in different ways. Around my neck of the woods people do it by talking loud, mostly. In other parts of the world you wave your hands in various ways. But emphasizing parts of what we say is part of the meaning of what we say.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 31 weeks 6 days ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

[SOLVED] CSS style for &lt;span class=&gt; being lost

Found the problem......

disable the .quote style rules in the CSS and it works .

Not quite sure why atm Wink

Livingston
Offline
Regular
Seattle, WA
Last seen: 14 years 24 weeks ago
Seattle, WA
Joined: 2006-06-14
Posts: 25
Points: 0

CSS style for &lt;span class=&gt; being lost

Now that's interesting! You're absolutely right.

I have to do some thinking to figure out why that worked. I'll need to understand what's happening.

And to think that it only is different at the browser level. Strange.

I really appreciate you're taking the time to do some testing. I'd become frustrated because the normal analysis of conflicting style settings, or bad coding didn't seem to show anything.

I never would have tried this.

I'll post back if/when I figure this out.

Thanks again

Liv

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 31 weeks 6 days ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

[SOLVED] CSS style for &lt;span class=&gt; being lost

I just commented out each complete set of rules for each class or id in turn and watched what happened in the main window. If nothing, uncomment and move to the next one, and so on.

I did find it easier to put all the code into a local page on my PC and then load it into Fx. Then by using the 'edit CSS' option in the 'web developer toolbar', it was reasonably easy to do.

Livingston
Offline
Regular
Seattle, WA
Last seen: 14 years 24 weeks ago
Seattle, WA
Joined: 2006-06-14
Posts: 25
Points: 0

CSS style for &lt;span class=&gt; being lost

I also went back to take a closer look and wanted to do some testing with replacing the span class with <em> instead (which did work although I had to override what my browser considered a default value for an em.)

When I was doing that I noticed that I had made an error in the CSS for .quote. Instead of using font-type: italic I had coded text-type: italic. Figuring I had maybe found at least another piece of the puzzle, I corrected it and ran the tests again. But that turned out not to be it. Still had to comment out the corrected .quote.

What's also strange is that .quote is not used on the page anywhere. For a while I thought maybe I had set a containing div or something that might be conflicting, but that's not it either.

Liv

Livingston
Offline
Regular
Seattle, WA
Last seen: 14 years 24 weeks ago
Seattle, WA
Joined: 2006-06-14
Posts: 25
Points: 0

CSS style for &lt;span class=&gt; being lost

Want to fry your noodle a little more?

Comment out both .quote and .emphasis and add a style setting for em {font-weight: bold;font-style: normal}, change the code to replace one of the scan classes with <em> and run the test again. You should get the text styled bold not-italic.

Now, remove the comment from .quote and run the test again.

In a way the same problem happens. The em, instead of being bold goes back to the browser default, which for Fx is italic and the bold is gone.

We're going to need to patent this .quote. It seems to be pretty powerful.

Liv

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 31 weeks 6 days ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

[SOLVED] CSS style for &lt;span class=&gt; being lost

While I am trying that, have a look at the code for .quote. See if you can see something wrong Laughing out loud

I'll tell you next post if you don't find it. Cool

Livingston
Offline
Regular
Seattle, WA
Last seen: 14 years 24 weeks ago
Seattle, WA
Joined: 2006-06-14
Posts: 25
Points: 0

css

Now I did change the css for .quote. One change was to correct text-weight to font-weight. The other was to change the font-family to New Times Roman, serif;. Made both changes before running the last tests.

I'll keep looking to see if there's something else.

Liv

Livingston
Offline
Regular
Seattle, WA
Last seen: 14 years 24 weeks ago
Seattle, WA
Joined: 2006-06-14
Posts: 25
Points: 0

CSS style for &lt;span class=&gt; being lost

BTW I did get Times New Roman enclosed in quotes.

So .quote now looks like this:

.quote (
font-style: italic;
font-family: "Times New Roman", serif;
}

Emphasis and em look like this:

.emphasis {
font-weight: bold;
}
em {
font-weight: bold;
font-style: normal;
}

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 31 weeks 6 days ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

[SOLVED] CSS style for &lt;span class=&gt; being lost

Right, what I meant was YOUR code.

But to save you time this is what the problem was. you had

.quote (

	text-style: italic;

	font-family: times new roman, serif;

	}

Notice the problem?

No?

The opening bracket is the wrong sort, change that to the curly one and you no longer need to comment out this piece of code. Although it is not in use atm it does not conflict with anything else.

It all came down to the wrong ({)

Livingston
Offline
Regular
Seattle, WA
Last seen: 14 years 24 weeks ago
Seattle, WA
Joined: 2006-06-14
Posts: 25
Points: 0

CSS style for &lt;span class=&gt; being lost

:oops: I'm so embarassed. Here I thought there was going to be a big learning and it turned out to be a typing error.

So lets see. There was no opening brace for .quote but there was a closing one. .emphasis had the proper braces. I can't imagine how the browsers would interpret that but obviously it's different for IE and FX and NS don't like it at all. I wonder if all styles after the .quote error were being recognized by those two browsers.

I owe you one. If I were there I'd have them pull a pint for you on me.

Ta

Liv

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 31 weeks 6 days ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

[SOLVED] CSS style for &lt;span class=&gt; being lost

Well I bet you learned something from that even.

It is hard to find some errors and when you do it seems so stupid, I know I've done the same not so long ago.

Anyway glad it's sorted now, if you have any other problems I'll bet you know where to ask now.

Lets have a virtual one together then, all the best.

Livingston
Offline
Regular
Seattle, WA
Last seen: 14 years 24 weeks ago
Seattle, WA
Joined: 2006-06-14
Posts: 25
Points: 0

CSS style for &lt;span class=&gt; being lost

What I did learn through real example was how unpredictable things can be with just a minor error in the style sheet.

Cheers!

Liv