CSS - Black Lines?

Hi, I am trying to make a link's text black with a blue underline. Is this possible?

Here is my code, which produces black text with a black underline: Code:

.link{ text-align:left; 
color:#000000; 
font-size:14.5pt; 
font-family:times new roman,serif; 
font-weight:normal; 
text-decoration:underline color:#09328a; }

Hi everyone,

I am using nivo slider for a website that I'm building. I have created a gradient png for the background of the captions that will go over the slider images.

Everything is working perfectly in ie9 and FF, however in ie8 and 7 all I get is a big black block where the gradient should be.

The strange thing is that if I set a background color, then the gradient shows through.

I have tried to make the background transparent with no luck at all. I have tried to set the background-color to transparent, and made it !important. I've also tried to use filters, nothing seems to work.

The URL of the site is http://www.backupstorage.co.za/new/ .

If anyone out there can help, I really would be incredibly grateful!

This is a very interesting bug and I have been trying to do a little bit of hacking but with no success here. So, thought anyone of you would know what I'm missing.. The problem here is that it showed up just fine on the webpage but not in Print Preview or Print-Out for IE.

Code:

<style type="text/css">
   divBlackBox1
   {
     margin: 50px auto;
     padding: 0px;
     width: 400px;
     height: 4px;
     display: block;  /* for IE stupidity (to make height work correctly with the correct pixels)... */
     font-size: 1pt;  /* for IE stupidity (to make the smaller height work due to default font-size)... */
     overflow: hidden; /* Problem is that it doesn't work for print preview or print-out in IE... */
     background-color: #000000;
   }
</style>

<div class="divBlackBox1"></div>

Thanks,
FletchSOD

This problem just started happening, but frustratingly I can't remember what I was changing when it started happening.

The problem is that (almost) all the images on the site seem to be "bumped" 1px out of place, with a black border showing on the top and left hand sides of the images. This is not showing up with ALL images, however. I've embedded an image and you can see the effect on the logo, on the graphics in the body text, and on the sub-menu items (with the 'empty' box icons). However the effect does not occur on the menu items with the 'full' box icons.

OK, apparently, I CAN'T EMBED AN IMAGE. Or a link to an image. Or a link to the site in question. SO I have no idea how I am actually supposed to get help for this problem.

If someone can PSYCHICALLY DEDUCE what the problem might be without being able to view the site or an image of the problem, that'd be ACE!

GAAAAH

Alright, let's see if we can do this with JUST the CSS & HTML. Here is the CSS:
Code:

html {
margin: 0;
padding: 0;
min-height: 100%;
height: auto;
}
 body {
margin: 0; 
padding: 0; 
background-color: #FFFFFF;
background-image:url('background-index.gif');
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #666666;
min-width: 900px;
min-height: 100%;

}

img {
border:0;
}

a:link {
text-decoration: none;
color: #0096db;
}

a:hover {
text-decoration: underline;
}

a:visited {
color: #00abc7;
text-decoration: none;
}

#header {
width:900px;
height:80px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #0096db;
}

#logo {
float:left;
width:140px;
margin:0;
padding:0;
}

#head_nav {
width:760px;
position:relative;
float: right;
background-color: #ebf9ff;
height: 80px;
margin:0;
padding:0;
}

#clear_both {
clear:both;
}

#sidenav {
float:left;
width:100px;
padding-left:10px;
padding-top:0;
margin-top:0;
}

#content_wrap {
float:right;
width:760px;
background-color: #ebf9ff;
background-image:url('content-background.gif');
}

#content {
float:left;
width:500px;
}

#content h1, h2, h3, ul {
padding-top: 15px;
padding-left: 15px;
}

#content p {
padding-left: 15px;
}

#focus_box {
width:260px;
float: right;
margin-top:0;
padding-top:0;
}

#focus_box h1 {
padding-top:15px;
}

#focus_box p, h1, ul {
padding-left:15px;
}

table.blue_highlight {
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#0096db;
margin-left:15px;
margin-right:15px;
padding-top:15px;
padding:0;
margin:0;
}


#menu2 {
float: left;
width: 200px;
}

#main {
float: right;
}

p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	color: #666666;
}

ul {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	color: #666666;
}

h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: 700;
color: #0096db;
}

h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11pt;
color:#666666;
font-weight: bold;
}

a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
color: ;
}

/*!!!!!!!!!!! MENU STYLES FOR LEVEL1MENU !!!!!!!!!!!*/

#level1menu {
position:absolute;
bottom:0px;
padding-left:60px;
}

#sitemap li {
margin-left: 15px;
}

#sitemap ul {
margin-bottom:15px;
}

#sitemap ul li ul {
margin-left:15px;
}

And here is the HTML:
Code:

<%@ LANGUAGE="VBSCRIPT" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)" lang="en" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


	<title>BB Group Homes</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "(URL address blocked: See forum rules)">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">@import "style.css";</style>
</head>
<body class="developments">
<div id="header">
<div id="logo">
<!--#INCLUDE FILE="logo.asp" -->
</div>
<!--END LOGO-->
<div id="head_nav">

<!-- #INCLUDE FILE="menutop.asp" -->

<!-- END MENU_TOP -->
<div id="level1menu">
<!-- #INCLUDE FILE="level1menu.asp" -->
</div>
<!--END level1menu-->
</div>
<!--END HEADER -->
<div id="clear_both"></div>
<div id="sidenav">
<!-- #INCLUDE FILE="menu_developments.asp" -->
</div>
<div id="content_wrap">
<img src="banner_developments1.png">
<div id="focus_box">
<!-- #INCLUDE FILE="focus_boxes.asp" -->
</div>
<div id="content">
<h1>Developments</h1>
<table class="blue_highlight">
<tr>
 <td><a href="golfsociety.asp"><img src="Golf_society_residence_logo.gif"></a></td>
 <td><h2>Golf Society Residence</h2>
<p>The Golf society project was initiated for a variety of reasons, some of which include the scenic environmental landscape, increasing trend of Bodrum as a holiday destination for tourists and natives, the beach and the close proximity to the airport.</p>
<p><a href="golfsociety.asp">-> More</a></p></td>
</tr>
</table>
<table class="blue_highlight">
<tr>
 <td><a href="thevillage.asp"><img src="thevillagelogo.gif"></a></td>
 <td><h2>The Village Bodrum - Tuzla</h2>
<p>You will find everything you have dreamed of at Vita Park Golf Resort, a world-c1*** destination in the heart of the peninsula Bodrum, the famed pearl of the Aegean Sea. </p>
<p><a href="thevillage.asp">-> More</a></p>
</td></tr></table>
<table class="blue_highlight">
<tr>
 <td><a href="bluemarina.asp"><img src="bluemarinalogo.gif"></a></td>
 <td><h2>Blue Marina Bodrum - Yalikavak</h2>
<p>Blue Marina Apartments, overlooking the spectacular view of Yalıkavak amongst the centeranian olive trees, designed for all year long living, your comfort and every desire is planned to the finest detail.
</p>
<p><a href="bluemarina.asp">-> More</a></p>
</td></tr></table>
<table class="blue_highlight">
<tr>
 <td><a href="bluelife.asp"><img src="bluelifelogo.gif"></a></td>
 <td><h2>Blue Life Bodrum -Yalikavak</h2>
<p>Each villa has a magnificent sea view which can not be blocked. They has own entrance & garden, swimming pool with 40 sqm, wooden terrace with 40 sqm for sunbathing, garage for 2 cars and is 100 metres distance to the sea. The living  rooms have high vault ceilings.</p>
<p><a href="bluelife.asp">-> More</a></p>
</td></tr></table>
<table class="blue_highlight">
<tr>
 <td><a href="bluelife.asp"><img src="bluelifelogo.gif"></a></td>
 <td><h2>Kalkan Luxus Villas</h2>
<p>Each villa has a magnificent sea view which can not be blocked. They has own entrance & garden, swimming pool with 40 sqm, wooden terrace with 40 sqm for sunbathing, garage for 2 cars and is 100 metres distance to the sea. The living  rooms have high vault ceilings.</p>
<p><a href="bluelife.asp">-> More</a></p>
</td></tr></table>
<p></p>
</div>
</div>

</body>
</html>


</body>

</html>

A lot of the images that are showing the 1px-off problem are contained in the SSIs (I don't think anyone here wants me to post the full content of the SSIs, do they?) but quite a few of the images in the main HTML are, as well: banner_developments1.png & all the logos.

This would be a lot easier if I could show you a picture of what was going on.

Anyone knows of a method to cause a vertical line to come all the way down ? Currently it stops where the text stops. but i want it to go all the way to the buttom of the document regardless of the text. (right now i use box border on one side)



Thanks!

When printing pages from this site http://www.sorensteensen.dk/kvl/ one or two lines disappear when the pages break.

I have no idea why. Anyone knows about it?

Soren Steensen

Thanks for taking the time to read my question.

I am trying to make a new page layout. I have one main box on the left [float: left;], and 3 stacked smaller boxes on the right [float: right;]

I would like 2 lines joining the box on the left to the center box on the right.

I'm trying to do this with a container that only has top and bottom borders.

I don't know how to get the horizontal lines centered vertically.

Also, the page layout works great in FF but not in IE. Not really sure why.

Any suggestions on how to do this?

oh and the green and red colors are only for development so they stand out.

Thanks,

Brad

HTML:
Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="piercedjunkmail@hotmail.com">
<meta name="generator" content="AceHTML 5 Freeware">
<link href="TestLayoutCSS.css" rel="stylesheet" type="text/css" />
<title>Test Layout 1</title>
</head>
<body>
<div id="HeaderContainer">hi</div>
<div id="RightTopContainer">hi</div>
<div id="PageTitle">This is the title of the page</div>
<div id="MajorLeftMainContainer">
	<div id="LeftMainContainer">hi</div>
<div id="HorizontalLines"></div></div>
<div id="RightCenterContainer">hi</div>
<div id="RightBottomContainer">hi</div>
</body>
</html>

CSS:
Code:

@charset "iso-8859-1";
body {
font-family: Foo, times, serif;
margin: 0px;
background-color: #4F9FC5;
}

#HeaderContainer {
height: 50px;
width: 100%;
/*border-color: green;
border-style: solid;
border-width: 2px;*/
}

#MajorLeftMainContainer {
/*border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
border-bottom-color: #C0C0C0;
border-right-color: #C0C0C0;
border-style: solid;
border-width: 5px;*/
float: left;
margin-top: 90px;
margin-left: 10px;
width: 67%;
height: 310px;
background-color: green;
}

#LeftMainContainer {
border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
border-bottom-color: #C0C0C0;
border-right-color: #C0C0C0;
border-style: solid;
border-width: 5px;
float: left;
/*margin-top: 90px;
margin-left: 10px;*/
width: 80%;
height: 300px;
background-color: #EAEAEA;
}

#RightTopContainer {
border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
border-bottom-color: #C0C0C0;
border-right-color: #C0C0C0;
border-style: solid;
border-width: 5px;
float: right;
margin-top: 30px;
margin-right: 10px;
width: 30%;
height: 150px;
background-color: #EAEAEA;
}

#RightCenterContainer {
border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
border-bottom-color: #C0C0C0;
border-right-color: #C0C0C0;
border-style: solid;
border-width: 5px;
float: right;
margin-top: 50px;
margin-right: 10px;
width: 30%;
height: 150px;
background-color: #EAEAEA;
}

#RightBottomContainer {
border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
border-bottom-color: #C0C0C0;
border-right-color: #C0C0C0;
border-style: solid;
border-width: 5px;
float: right;
margin-top: 50px;
margin-right: 10px;
width: 30%;
height: 150px;
background-color: #EAEAEA;
}

#PageTitle {
font-size: 25px;
font-family: arial, times, serif;
/*border-color: green;
border-style: solid;
border-width: 2px;*/
width: 340px;
height: 35px;
margin-top: 40px;
margin-left: 25px;
color: black;
font-variant: small-caps;
}

#HorizontalLines {
border-top-size: 2px;
border-top-color: red;
border-top-style: solid;
border-bottom-size: 2px;
border-bottom-color: red;
border-bottom-style: solid;
float: left;
width: 124px;
height: 30px;
vertical-align: middle;
}

Hi there,

I would like to get some opinions on what would be the best way, or even a good way, to display a list of lines from a database, such as product descriptions (a link), prices (text) and buy now links.

For example:
Segate Hard Drive 250gb $150.00 Buy Now
Maxtor Hard Drive 300gb $200.00 Buy Now
etc

I thought it would be best to have a <ul> with each line being an <li>. Further to this, I tried having each line as a <li> element, with each column (price, buy now etc) an <li> element, displayed inline. This actually worked well, but I had trouble doing an alternate background color thing, which I think was due to my funny css code. I gave each <li> a class selector, so that different formatting could be applied, and I had each <li> float:left; and a width, to give a column style display.

Would a table be the best way to display the 3 (or more) columns? I've removed tables from the site layout, and can see how they would make sense for this, as it basically is tabular data, repeated over and over again.

Or would having each line as a <p> with say each column having its own <label> possibly be best? Or some variation on of the 3, or something else all together?

I realise everyone would have their preferred style and there is no 'best', 'right or wrong' way etc. I'm trying to find a way that I can work with, one that could be considered 'the norm', or 'best practise'.

I haven't posted any code, but can if people need more of an idea of what I am trying to do.

Cheers
Scott

I was wondering if anyone knows how to get a space between blocks in a list. If you have list that have more that one line in a block it looks better to have gaps greater than the leading to separate them.

I can't figure how to accomplish this, does anyone have any ideas.

I have a repeating background image, that is very much driving me crazy.

There is a line when the image repeats. I cannot figure out what the problem is.

Below is an example, the image in the box is slightly shorter which is where you see the line.

(URL address blocked: See forum rules)
Thanks for any help.

CSS Validator

Two lines of CSS won't validate because they are used to fix a navigation issues in IE. Without those two lines there is a huge height gap between each list element in IE. Anyway I can hide these two lines from the validator?

Hi, I am writing a code for form:
Code:

private name: <input size="10" name="private_name" type="text">
last name: <input size="10" name=last_name" type="text">

I want to increase the space between the two lines
I tried to use the css line-height and it did increase the vertical space between the two lines.
However only in the part of the words.
In the case of the two input boxes instead of more space they become "taller", I can understand the logic behind this, what I don't know is a way to increase the vertical space between the two lines that will work in the case of the input boxes as well.

How can I solve this?

Thank in advance

I need some help. I am a relative beginner with CSS and have a problem that is eluding me.

Specifically in the right-hand sidebar on this page (FriendsAcrossTheWater.org/blog), you will note that all the links are on separate lines by themselves.

I do not want this behavior and I am not sure what is causing it nor what to do to correct it.

Can you help?

Thanks,
Bob Ross

Am I commenting lines incorrectly?

If I prefix a line with two slashes // in the CSS, firefox will ignore it.

IE will recognize it and perform the CSS styling.

For instance: Code:

table.myTable tr td
{
    background-color: red;
    //background-image: url('mypic.jpg');
}

The TD element will not have a background in firefox. It WILL have the background image in IE.

P.S. I am using IE8 on Win7 RC1 (build 7100).
Thank you

I had a webpage where there were rows with three boxes on, that all floated left. After the third there was a line break and then the next line also had three boxes, etc. The boxes all have the same width, but different heights (not dramatically different).

I am now wanting to allow the number of boxes on the line to vary with the width of the browser window. By removing the break every three lines this would work if all the boxes were the same height. As they are not, the box that should go onto the next line down might go down and a bit to the left before being "stopped" by a taller box.

I expected this behaviour, but I'm not sure how to go further and get around it.

Thanks for any ideas,

Thomas