CSS - Simple Question About Border Attribute

Hi,
beginner question. How do I achive this

Code:

<TABLE BORDER="1" CELLPADDING="5">

in my CSS?

Thank you for your help?

Sorry for the confusing title, I didn't know how I could describe it better.

Anyways, here is the 'problem' I am currently using for my website Cufon. Which works great. However with Internet Explorer 8 it becomes really slow. Therefor I decided to use:

PHP Code:
<![if !(IE 8)]>
<script type="text/javascript" src="js/myriad-pro.cufonfonts.js"></script>
<script type="text/javascript">
Cufon.replace('.example1') ('.example2') ('.example3') ('.example4') ('.example5');
</script>
<![endif]> 





This works great, however not for everything. Some parts of the scripts, which calls Cufon in the script itself, it doesn't work and Cufon will still be displayed in IE8 (with all negative results from it).

Several included scripts / parts have the following code in it:

PHP Code:
<?php
echo "<script language=\"javascript\" type=\"text/javascript\">";
echo "$(document).ready(function() { Cufon.replace('.orderpart1') ('.orderpart2') ('.orderpart3'); });";
echo "</script>";
?>




Now is it possible to make a same statement as with <![if !(IE 8)]> within the PHP script(s)? So if it's any browser other than IE8 it will load the Cufon, but if it's IE8 it will not load Cufon?

Hopefully someone understands what I mean here, cause it's kinda hard to explain for me...

//update

If I use:

PHP Code:
<?php 
echo "<![if !(IE 8)]>"; 
echo "<script language=\"javascript\" type=\"text/javascript\">"; 
echo "$(document).ready(function() { Cufon.replace('.orderpart1') ('.orderpart2') ('.orderpart3'); });"; 
echo "</script>"; 
echo "<![endif]>"; 
?>




My script / order form stops working completely... :S



Update!

It's working now!! Thanks!

I loaned my CSS book to remote colleague si I can't look at it.

I have a simple

td.BLUEBG {background-color: #0000BC; color: #FFFF00; font-weight: bold}

now I want to put <a href=""">xxx</a> stuff in those TD's and I want
them to be yellow too.
I tried

td.BLUEBG A:link {color: #FFFF00; text-decoration: none}

and now some of those links turn yellow and some don't.

Here is a snippet of my generated code:

<tr>
<td class=BLUEBG>Controls</td>
<td class=BLUEBG>Last edit</td>
<td class=BLUEBG>Approved by</td>
<td class=BLUEBG><a href="xxxxxxxx.php?sortby=Manufacturer">Manufacturer</a></td>
<td class=BLUEBG><a href="xxxxxxxx.php?sortby=Description">Description</a></td>
<td class=BLUEBG><a href="xxxxxxxx.php?sortby=Code">Code</a></td>
<td class=BLUEBG>Comments</td><td class=BLUEBG><a href="xxxxxxxxx.php?sortby=Submitter">Submitter</a></td>
</tr>

http://www.invalidheart.org/test/

works in IE fine, but in FF the background and the footer stay up at the top, when it should be scrolling down with the rest of the content. any ideas? Thanks in advance.

Hi...

I was just wondering..

when u have something like:

margin:5px 10px

which side does the 5px and 10px apply to?


thanks in advance

This is simple (I think) -- I'm a bit new to CSS and still learning, so I really appreciate any help you guys have to offer.

I have this page - vitalmodels (DOT) com/V3/

The columns on the right/left, the backround extends past the bottom graphic. I basically need the bottom graphic to be at the literal bottom of the div container so that it closes off the box cleanly. I have tried vertical align/bottom/baseline to no avail. And this is only in mozilla/safari as well... Any suggestions?

Also, a second question. The 3 columns (divs) in the main area, are within a single container div... they don't push that container down when populated with information, and merely overlap... right now I have the container set to a height in order to look decent, but when it's set to "auto" the content in the columns seems to do nothing.

Again, I REALLY appreciate any help I get here... thanks again.

-Ryan



This is the code if you need it -

PHP Code:
#index_left_column {
    padding: 0px;
    float: left;
    height: auto;
    width: 194px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    position: relative;
    left: 16px;
    background-image: url(images/index/left_column_bg.jpg) 





and

PHP Code:
<div id="index_left_column">
      <p><img src="images/index/left_column_featured_female.jpg" alt="" width="194" height="26" /></p>
           
       <?php include("inc/m_female.php"); ?>
      
      <p><img src="images/index/left_column_featured_male.jpg" alt="" width="194" height="25" /></p>
       
       <?php include("inc/m_male.php"); ?>
      
      <p><img src="images/index/left_column_featured_photog.jpg" alt="" width="194" height="25" /></p>
      
        <?php include("inc/m_photographer.php"); ?>
     
      <p><img src="images/index/left_column_bottom.jpg" alt="" width="194" height="7" /></p>
    </div> 

Im trying to position 3 divs like in this image the html will look like this:

Code:

<div id="container">
	<div id="rightGrey></div>
	<div id="blueContent"></div>
	<div id="leftGrey></div>
</div>

how will the css look like ?

Hello Guys,

I have the following problem with my .css:


#pagerank {
margin: 20px 0 20px 0;
padding: 8px;
width: 225px;
float: left;
background-color: #F6F8F9;
border: solid #eee 0px;
background-repeat:no-repeat;
background-image:url(top3.jpg);

I need this background-repeat:no-repeat; to be in the same line as this: background-image:url(top3.jpg);

kind of like this: background-image:url(top3.jpg) no-repeat; but I dont know how to format it correctly how do you do it?


Best Reagrds,
Brill

Hi,


I see something like this,





span.small {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #666666;
}


<span class="small">

my question is why they put the word span. Why not do





.small {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #666666;
}


<span class="small">

I've never used one line of CSS every before tonight. I'm learning how to use HTML and CSS Properly and the CSS thing is completly new to me.

The book gives an example:

Code:

<HTML>
	<HEAD>
		<TITLE>StarBuxx Coffee</TITLE>
		<style type="text/css">
			body {
				 background-color: #d2b48c;
				 margin-left: 20%;
				 margin-right: 20%;
				 border: 1px dotted gray;
				 padding: 10px 10px 10px 10px;
				 font-family: sans-serif;
			}
		</STYLE>
	</HEAD>
	<BODY>
		<H1>StarBuxx Coffee Beverages</H1>
		<H2>House Blend, $1.49</H2>
		<P>A smooth, mild blend of coffees from Mexico, Bolivia, and Guatemala.</P>
		<H2>Mocha Cafe Latte, $2.35</H2>
		<P>Expresso, steamed milk and chocolate syrup.</P>
		<H2>Cappuccino, $1.89</H2>
		<P>A mixture of espresso, steamed milk and foam</P>
		<H2>Chai Tea, $1.85</H2>
		<P>A spicy drink made with black tea, spices, milk and HHUUHHHHNAY!</P>
	</BODY>
</HTML>

In The picture in the book, it shows a 1px border around the entire Content, but when I open it up in IE I don't see the border around the content. Why is this? Is the book out-dated?

Also, Did anybody know Gray and Grey are both the same thing? g-r-a-y is simply an American derivation of the original spelling g-r-e-y.

Gray is a color.
Grey is a *colour*

Hi,

I have the following code:

<h1>Some text <span class='special'>special text</span></h1>

And my CSS:

Code:

.special {
  font-size: 10pt;
}
h1 .special {
  font-size: 20pt;
}

The problem is, the SPECIAL text within the H1 tag above still remains as 10pt I want it to be 20pt only within the h1 tag. Is there a way I can do this?

(Worst case: I would need to add a new style and update all my HTML code to use this new style..but I'm hoping there's a quick CSS fix)

Many thanks!

Ok. I have some javascript functions I want to happend whenever a button is pressed. Would it be easiest to use <div> tags to section off parts of a larger images as "special link areas" that really have nothing in them.

And when they are clicked, respond appropriately?
I hate using ImageMaps, and I'm hoping this is an alternative, if maybe easier solution...

Hi people! Just a n00bish pondering I have...

Which would be the more efficient code


Code:

#logo, #logo a {
	left: 45px;
	top: 30px;
	width: 190px;
	height: 100px;
}

or

Code:

#logo {
	left: 45px;
	top: 30px;
	width: 190px;
	height: 100px;
}
#logo a {
	height: 100px;
}

I only need to specify height for '#logo a' but the first code appears less cluttered to me.

Which code would be more kind on the server?

Thanks in advance!...

Hi,

In the code below, when i put the font to arial, i do not see any difference, i mean if I have it arial or if I do not have any style tags it does not make any difference the way text look. Am I doing something wrong here.

Code:

<html>
<head>
<style>

td {font-family:arial}
</style>
</head>

<table>
    <tr><td>John</td></tr>
    <tr><td><p>Pong</p></td></tr>
</table>
</html>