Trying To Use CSS

[havilah]

Could someone please help me. I've been trying to figure out what I did wrongly here http://havilahandhills.com/gasstocks . I tried to use CSS to set the body text. It appears good on IE but on Opera and Firefox, it's aweful. I need help very quickly. Anyone?

[tgreer]

You need to ask a specific question, in order for anyone to help.

[FC Jamison]

There are many things about that code that need to be fixed...but to answer your specific concern, remove the following from your text class:

display: table;
position: fixed;

Also, you cannot place paragraphs inside of a blockquote. Basically, a blockquote is just an indented paragraph...so use it in place of the p tag for indented text.

[havilah]

Deacon, thanks so much. I removed the stuffs you aked me to and it worked on Opera. I'm yet to test it on Firefox. BUt I think it will work. However, I didn't get what you were trying to say about the 'p' tag. If I remove that, how do I then achieve 'Paragraphing'? I also noticed that my flash animation isn't working on Opera, I don't know if it's my systems setting or it's a problem with the code. I don't know if you have an idea why.

[FC Jamison]

Instead of

<blockquote>
<p>
<span class="style1">Gasstocks  Limited</span> is a vibrant and dynamic international company operating out of Nigeria  with a robust and dedicated team who owing to the influence of our core values:  originality and excellence, and strengthened by a culture of pragmatism,  consistently provide high quality products and services which are innovative, pragmatic and  adapted to our client&rsquo;s requirements.<br />
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
</p>

<p>
Our technical staff  have many years experience in specifying, supplying, supervising and  undertaking works to achieve cost effective and maximum long term benefits for  a our clients. This experience garnered in the industry has supported our growth and diversification in a competitive  and demanding market.&nbsp;&nbsp;&nbsp; 
</p>
</blockquote>

Use

<blockquote>
<span class="style1">Gasstocks  Limited</span> is a vibrant and dynamic international company operating out of Nigeria  with a robust and dedicated team who owing to the influence of our core values:  originality and excellence, and strengthened by a culture of pragmatism,  consistently provide high quality products and services which are innovative, pragmatic and  adapted to our client&rsquo;s requirements.
</blockquote>

<blockquote>
Our technical staff  have many years experience in specifying, supplying, supervising and  undertaking works to achieve cost effective and maximum long term benefits for  a our clients. This experience garnered in the industry has supported our growth and diversification in a competitive  and demanding market.&nbsp;&nbsp;&nbsp; 
</blockquote>

You can then use CSS to set the spacing between blockquotes

blockquote { margin-bottom: 10px }

of whatever spacing you wish, instead of using all of theose  s

You haven't updated your site with the new code, but the flash appears to be working fine in Opera.

[havilah]

Deacon, thanks so much. I just can't thank you enough. Yeah, haven't updated the site yet. Still working on it. I'll send the real link to your e-mail box later if you don't mind. As per the Flash working on Opera, maybe it's my systems setting. All my flash work don't work on opera, but some how I think I like that because it helps me know how my sites will behave in old browsers. Though I'll like to know why so I can turn it on at will.

One last question, I know using blockquote is the main thing, but breaking like I did worked just fine, didn't it or was there something I was suppose to know. Ok! maybe using that, easily gives one away as an amateur, right? LOL

Stay cool, and God bless.

[mikeandike22]

it doesnt work in firefox.

[FC Jamison]

Yes, it works...it's just bad coding. If you were to try and validate your code, you would receive errors.

If you want to be a good Web designer, you should start learning the proper coding methods now. It will save you a lot of headaches in the future.

Mike, what didn't work in Firefox?

[havilah]

Deacon, thanks once more. There's something I'm thinking you could show me. Someone had tried to post it here before, but I didn't understand it. Maybe you can help me. It's about using CSS to add shadow to a page. If you noticed that page has shadow, but that shadow came with an image. I can get a way with it like that, but that could be limiting. Better still, I'll prefer to learn the proper thing, since there's a better way. Can you help with some explanation, that I can understand?

[FC Jamison]

Do you mean something like this?

<div style="width:272px;padding:10px;filter:shadow(color:gray); overflow: visible">
  <div style="width:250px;text-align:left;padding:10px;background-color:gold;border:1px solid black;font-size:10px;"> 
    This is an example of the shadow filter in action. 
    You can make the box any size you want and have any color background you desire. 
  </div>
</div>

NOTE: This only works in IE

[havilah]

Deacon,
Long time, hope you r fine? I did that stuff using blockqoute. This is the CSS code:

</script>
<style type="text/css">
 
body {
 background-color: #bea163;
 margin-top: -3px;
 margin-bottom: -20px;
}
.text {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 15px;
 font-style: normal;
 line-height: 1.2;
 font-weight: lighter;
 font-variant: normal;
 color: #000000;
 text-align: left;
 vertical-align: top;
 padding-right: 5px;
 padding-left: 2px;
 padding-top: 8px;
}
.image {
 float: left;
 margin-top: 8px;
 margin-right: 20px;
 margin-bottom: 3px;
 margin-left: 0px;
}
a:link {
 text-decoration: none;
}
a:visited {
 text-decoration: none;
}
a:hover {
 text-decoration: underline;
}
a:active {
 text-decoration: none;
}
#Layer1 {
 position:absolute;
 left:215px;
 top:221px;
 width:126px;
 height:140px;
 z-index:1;
 visibility: visible;
}
.style1 {
 color: #2D1E5A;
 font-weight: bold;
}td img {display: block;}td img {display: block;}
.bg-image {
 background-image: url(images/interface_r2_c2.gif);
 background-repeat: no-repeat;
}
#Layer2 {
 position:absolute;
 left:327px;
 top:234px;
 width:142px;
 height:124px;
 z-index:1;
}
</style>

and, this is the html:

<td colspan="13" rowspan="11" valign="top" bgcolor="#DBDBEB" class="text"><blockquote><span class="style1"><img src="images/refinery.gif" alt="refinery" width="198" height="136" class="image" />Gasstocks Limited</span> is a Nigerian Company strategically positioned to offer Front-End Engineering Design, Construction, Maintenance and Management of Process plants/pipelines as well as support Marine logistics operations. Included in the company&rsquo;s portfolio is the Procurement and Supply of specialized Oil and Gas materials and equipment for major projects around the world.</blockquote>
<blockquote> Our technical staff have many years experience in conceptualization, design and project management focused at achieving cost effective and maximum long term benefits for a our clients. Experience garnered in the industry has supported our growth and diversification in a competitive and demanding market. </blockquote></td><td rowspan="13"><img name="interface_r4_c17" src="images/interface_r4_c17.gif" width="13" height="575" border="0" id="interface_r4_c17" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="3" border="0" alt="" /></td>
</tr>
<tr>

Some how, the padding I had achieved before adding the blockquote disappeared, giving a much bigger padding. I've tried to reduce it by checking my padding and I couldn't. Do you know why that is so?

[FC Jamison]

Did you try

blockquote { margin: 0px; }

[havilah]

Deacon,
I'm supposed to put that in the text in the .text class style?
Meanwhile it seems to me like Dreamweaver 8 doesn't support that. I noticed it before I did that post (as in I saw it, but somehow - I can't explain it disappeared and has never re-appeared. lol) Maybe I'm not doing the right thing. This is the link www.gasstocksltd.com
Thanks

[FC Jamison]

No. put it in your css beneath your body styles.

body {
 background-color: #bea163;
 margin-top: -3px;
 margin-bottom: -20px;
}

blockquote { margin: 0px; }


.text {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 15px;
 font-style: normal;
 line-height: 1.2;
 font-weight: lighter;
 font-variant: normal;
 color: #000000;
 text-align: left;
 vertical-align: top;
 padding-right: 5px;
 padding-left: 2px;
 padding-top: 8px;
}

[havilah]

Deacon, Thanks I did it and it worked. I discovered that Style Rules above seem to affect the one below if applied together in that order.

My padding top and left attributed, refused to work leaving me with the option of controlling the entire content margin with the blockqoute style properties - though the td tag is defines as a .text style rule.
Thanks,
Uche Aniche

[FC Jamison]

Yeah...CSS is called cascading because the styles cascade from the top down.

if you have

td { margin: 5px; color: red }

.tdClass { margin: 0px }

and a tag <td class="tdClass">stuff</td> your td will have a margin of 0px (from the class) but the text color will be red (from the td style).

It takes some getting used to.

[tgreer]

I know of course that the "C" stands for "Cascading", but I always prefer to think of it as "Concatenating". The various appropriate styles for an element concatenate together into an overall "meta" style for that element. Any duplicate values are replaced during this process. That helps me understand it a bit better when I'm designing a site.

[FC Jamison]

I know of course that the "C" stands for "Cascading", but I always prefer to think of it as "Concatenating". The various appropriate styles for an element concatenate together into an overall "meta" style for that element. Any duplicate values are replaced during this process. That helps me understand it a bit better when I'm designing a site.

I know what concatenate means from my C++ programming classes. I never thought of CSS that way...but you are absolutely correct.

lol