CSS - Css Editor That's Simple

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 ?

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>

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!

Hi,
Does anybody know how i can have an image that switches to another image on rollover and also has a link?

Thanks

i have three relatively simple questions --

i want to put thumbnails on my page inside the main container-- (2 column layout)

i have used some code from
REAL WORLD
its close but not quite there--
also the thumb sizes will be different - they are stamps- like postage stamps so some
horizontal and some square -- just need a tweak here


also i have a gray line running thru the site--- not sure where it is coming from
but i think it might be from the link container on the sidebar--

and speaking of side bar list container--
i would like it to be centered
instead of up against right side--
i played with margins and padding -
i am still wading thru that concept-- but coudlnt get anything to work---

so i SURE WOULD appreciate help on these three items -- many thanks in advance--

here is link to page
THE PAGE

here is link to CSS

CSS

i was wondering if someone could help me with my problem..

i would like all font on my page to be:

size: 10px
font: verdana

ive tried to do this in css but to no hope..can someone help

thanks

Ok, I bought the manual on css but still can seem to resolve what I am sure is a simple issue for someone out there. Please browse to http://tmh.netdbs.com/turnkey You see the left column, I put a red background color in just to troubleshoot, the div it is specifying the color for should ALWAYS stretch to pages bottom? What is going on here? I can't get it to do that? Thanks so much. I set the height to 100%??? Tom

For some reason I seem to be having some trouble creating a simple border at the top of my page. Can anyone please advise me of a simple solution. The kind of thing I want to create is the one on the top of google.co.uk which simply spans the top of the page.

Many thanks in advance for any help..

JD

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

I'm having this CSS problem with a div not doing it's width to 100% like im telling it to.. Basically I have this problem:

img386.imageshack.us/img386/1795/ddddye5.png

As you can see by the picture, I need the side content box to resize and go 100% to the bottom where my footer is. I CANT have this being a fixed height because that's not what I'm looking for. Anyway, here's my CSS:

Quote:
#maincontentleft {
float : left;
width : 252px;
height: 100%;
background-image : url("images/sidecontentbg.gif");
}
#sidecontentbg {
background-image : url("images/sidecontentbg.gif");
padding-left : 15px;
padding-right : 15px;
height: 100%;
background-color: red;
}
#sidecontenttop {
background-image : url("images/sidecontenttop.gif");
}
#footer {
padding-top: 5px;
padding-bottom: 5px;
background-color : #ebebeb;
height : 35px;
border : 1px solid #dbdbdb;
text-align : center;
}



The entire side bar thing i'm making is in a div which CSS id is "maincontentleft" and then I have the actual side content box inside that with id's "sidecontenttop" and "sidecontentbg " where "sidecontentbg " is the repeating background that is supposed to go all the way to the bottom.

Thanks in advance!

Fairly straightforward problem:

I'm creating a header and I have a blank div to the left of the header that I have the width set to 10%, because i want to position the content depending on the browser size, but when I make the browser window too small the content to the right of the blank div moves underneath the blank div.

Anyway to set the content as fixed and just have the user scroll if the browser is too small?

Thanks!

Ohh..

and both divs the "blankDiv" and "header" are floated left...

Code:

#blankDiv{ 	width:10%; 	background-image:url("../images/header_tile.png"); 	background-repeat:repeat-x; 	height:224px; 	float:left; }  #header{ 	float:left; }

hye peeps i need to create a external css for my website

www. losttv . 50webs. com

would someone please help me, i have no idea. ive made the site how i want it to look and i need the css else i wont pass my assignment. i have no idea how to create it either and have tried reading books?

any advise would be SO welcome

ricki

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> 

I think that this is something really basic but I just haven't been able to put my finger on the problem. Can someone please point me in the right direction?

In IE 6 the cell background (as defined in CSS) or the table cell size is not correct, but it looks fine in FF.

The test page is: http://www.kdays.com/box/kerrin.htm