CSS Experts... - SQL Server Forums

Please start any new threads on our new site at https://forums.sqlteam.com. We've got lots of great SQL Server experts to answer whatever question you can come up with.

All Forums

Development Tools

Other Development Tools

CSS Experts...

Author

Topic

jhermiz

3564 Posts

Posted - 2005-02-09 : 18:12:37

Small simple problem I hope...

Just playing around with css and all i wanted was a dashed line across one of my <td>'s inside a table. I have it working but it only places the dashed line under actual text and not the actual entire td. Also I am not sure why the actual text in the td takes the color attribute of my border-bottom-color setting.

For instance, consider this css:


<style type="text/css">
<!--
.style1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #CCCCCC;
	border-bottom-style: dashed;
	border-bottom-color: #999999;
}
-->
</style>

Here I wanted to define the color of the actual text to be #CCCCCC (a blueish color), and my border bottom color to be a grayish color. But it ends up when I enter my text in my td it takes the grayish color.

As well as the actual dashed line not coming out across the entire td...for instance if I did this:


<body>
<table width="100%">
<tr>
<td width=40 valign="bottom"><img src='QuikFix.jpg'></td>
<td>
  <table width="100%"  border="0">
    <tr>
      <td width="100%"><span class="style1">Welcome Guest</span></td>
    </tr>
    <tr>
      <td></td>
    </tr>
  </table></td>
</tr>
<tr>
<td background="test2.gif" width=100 colspan=100 height=35 valign=top></td>
</tr>
</table>
</body>

The layout is nice and all but the dashed line doesnt go across that td "Welcome Guest" in fact it only puts a dashed line under Welcome Guest. Also why does the color become gray rather than the color i have defined ?

For anyone interested here is what it ends up looking like:

I would like it so the text is a baby blue and the actual dashed line goes all the way across...

Jon

Keeping the web experience alive -- [url]http://www.web-impulse.com[/url]
Imperfection living for perfection -- [url]http://jhermiz.blogspot.com/[/url]

jhermiz

3564 Posts

Posted - 2005-02-09 : 18:29:20

If anyone is interested in helping the
html is:


<html>
<style type="text/css">
<!--
.style1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #CCCCCC;
	border-bottom-style: dashed;
	border-bottom-color: #999999;
	border-bottom-width: 100%;
}
-->
</style>
<body>
<table width="100%">
<tr>
<td width=40 valign="bottom"><img src='QuikFix.jpg'></td>
<td height=20 colspan=2>
  <table width="100%"  border="0">
    <tr>
      <td colspan=2 width="100%"><span class="style1">Welcome Guest</span></td>
    </tr>
    <tr>
      <td></td>
    </tr>
  </table></td>
</tr>
<tr>
<td background="test2.gif" width=100 colspan=100 height=35 valign=top></td>
</tr>
</table>
</body>
</html>

The two images can be found here:
http://www.jakrauseinc.com/jhermiz/QuikFix.jpg
http://www.jakrauseinc.com/jhermiz/test2.gif

Keeping the web experience alive -- [url]http://www.web-impulse.com[/url]
Imperfection living for perfection -- [url]http://jhermiz.blogspot.com/[/url]

Seventhnight
Master Smack Fu Yak Hacker

2878 Posts

Posted - 2005-02-09 : 18:47:27

first of all #CCCCCC is gray.

try this:


<!--
.style1 {
	width:100%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #D0DDFF;
	border-bottom-style: dashed;
	border-bottom-color: #999999;
	border-bottom-width: 2px;
}
-->

Corey

"If the only tool you have is a hammer, the whole world looks like a nail." - Mark Twain

Seventhnight
Master Smack Fu Yak Hacker

2878 Posts

Posted - 2005-02-09 : 18:54:33

Here's a neat program I use to find colors I like:
http://www.seventhnight.com/downloads/colorFun.exe

and I use this for shades:
http://www.seventhnight.com/examples/colorBlending.html

PS. if the links don't work, try back tomorrow (server went haywire this morning

)

Corey

"If the only tool you have is a hammer, the whole world looks like a nail." - Mark Twain

jhermiz

3564 Posts

Posted - 2005-02-09 : 20:25:58

Hey corey sorry for the mix up with the colors, the colors are fine now however the dashed line does not go to the entire td. In addition the dashed line just shows up under the word itself "Welcome guest" and not across the entire td.

Keeping the web experience alive -- [url]http://www.web-impulse.com[/url]
Imperfection living for perfection -- [url]http://jhermiz.blogspot.com/[/url]

SamC
White Water Yakist

3467 Posts

Posted - 2005-02-09 : 21:49:31

Assign a CSS border to an element and it will show up on that element.

Here's the fix: Don't apply the CSS to the <span> - in fact, omit the <span> completely. Apply the .style1 to the <td> element and the TD's bottom border will take on the dashed attribute.

A good easy tool for picking colors off your display is color cop. It's free.

jhermiz

3564 Posts

Posted - 2005-02-09 : 23:10:40

Im not at work but do you mean <Td style=".style1"> ???

Is that even valid ?

Jon

Keeping the web experience alive -- [url]http://www.web-impulse.com[/url]
Imperfection living for perfection -- [url]http://jhermiz.blogspot.com/[/url]

jhermiz

3564 Posts

Posted - 2005-02-09 : 23:27:22

Cool got it thanks sam:

<td colspan=2 width="100%" style="border-bottom-style: dashed;
border-bottom-color: #999999;
border-bottom-width: 2px;">Welcome Guest</td>

jon

Keeping the web experience alive -- [url]http://www.web-impulse.com[/url]
Imperfection living for perfection -- [url]http://jhermiz.blogspot.com/[/url]

Seventhnight
Master Smack Fu Yak Hacker

2878 Posts

Posted - 2005-02-10 : 07:25:22

jon

you can use the a class like you had:
<td class="style1">Welcome Guest</td>

Oh and I just learned that you can combine styles like:
<td class="style1 style2">Welcome Guest</td>

Corey

"If the only tool you have is a hammer, the whole world looks like a nail." - Mark Twain

SamC
White Water Yakist

3467 Posts

Posted - 2005-02-10 : 08:05:43

Combining styles isn't widely supported.

class= or style= can be applied to any HTML element.

Seventhnight
Master Smack Fu Yak Hacker

2878 Posts

Posted - 2005-02-10 : 08:16:03

Oh.. well dang.

it works for me though (mostly internal applications

)

Corey

"If the only tool you have is a hammer, the whole world looks like a nail." - Mark Twain

SamC
White Water Yakist

3467 Posts

Posted - 2005-02-10 : 17:25:46

Ever notice when typing a post, just to the left it says "HTML is OFF"...

If we could get Graz to enable HTML codes in our posts, well, then we could show some CSS stuff.

Or not...

SamC
White Water Yakist

3467 Posts

Posted - 2005-02-10 : 17:28:25

quote:
Originally posted by Seventhnight

and I use this for shades:
http://www.seventhnight.com/examples/colorBlending.html

Try loading this page using Netscape / Firefox / Mozilla

Somethings wrong...

Works great in IE though.

Seventhnight
Master Smack Fu Yak Hacker

2878 Posts

Posted - 2005-02-10 : 17:37:14

Well, I generally do internal stuff so its all IE

. I'd be scared to look at half of the stuff we use at work in other browsers

Corey

"If the only tool you have is a hammer, the whole world looks like a nail." - Mark Twain

SamC
White Water Yakist

3467 Posts

Posted - 2005-02-10 : 18:18:18

quote:
Originally posted by Seventhnight

Well, I generally do internal stuff so its all IE . I'd be scared to look at half of the stuff we use at work in other browsers

Say hello to my leetle friend

Subscribe to SQLTeam.com

SQLTeam.com Articles via RSS

SQLTeam.com Weblog via RSS

- Advertisement -

Resources