|
CSS - Css: Rounded Edges, Text To Close To Edge Of Border
I am using the code shown he http://webdesign.about.com/od/css/a/aa072406.htm
Code:
.container {background:#ccc; color:#fff; margin:0 15px;}
.rtop, .rbottom{
display:block;
background:#fff;
}
.rtop *, .rbottom *{
display: block;
height: 1px;
overflow: hidden;
background:#ccc;
}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{
margin: 0 1px;
height: 2px
}
Code: <div class="container"> <b class="rtop"><b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b></b> CONTENTS GOES HERE <b class="rbottom"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b> </div> the code works ok, but i would like it tweaked so the text is not so close the the egdes, the top and bottom seems ok but it is the left and right margins that are too close to the edges, can these inner margins be increased so the text is not so close? thanks in advance for your help Similar Tutorialsstyles.css Code:
.allRoundedCorners {
border-radius-topleft: 18px; -moz-border-radius-topleft: 18px; -webkit-border-top-left-radius: 18px;
border-radius-topright: 18px; -moz-border-radius-topright: 18px; -webkit-border-top-right-radius: 18px;
border-radius-bottomleft: 18px; -moz-border-radius-bottomleft: 18px; -webkit-border-bottom-left-radius: 18px;
border-radius-bottomright: 18px; -moz-border-radius-bottomright: 18px; -webkit-border-bottom-right-radius: 18px;
}
index.php Code: <div class="allRoundedCorners"> my text </div> This works ok in Firefox, Google Chrome and Safari. But fails to work in IE 9, Avant Browser 2012 build 8 and Opera 11.60 Can anyone suggest a possible fix or know how I can code it so the rounded edges of the DIV's have the rounded edge and not a boxed area. Hi, I'm trying to make a table that will hold a bunch of thumbnail images - three columns and however many rows are necessary. I would like this table to have a border on of the cells EXCEPT for any border on the outside of the table, so it should look like this: Code:
| |
----------------------
| |
----------------------
| |
Is there some nice little CSS code that will do this for me? I know that I can set the top right box's left and top border to 0, top right box's right and top border to 0 etc but I will be generating the table dynamically so it makes it harder to do the bottom three cells (still possible though, so I'll do it if I have to). Thanks www . gameyin . com It shows as the border image twice. Er...I mean the image is showing twice and no matter what I do I can't seem to get the bottom part to stretch more to meet the content. I don't want to try pixels though because that wouldn't be fluid : \. Any help? Hi, I am trying to do a rounded corner box with 2 different colour halfs but using little images instead of big images. Here is my code so far: CSS: Code:
#box {
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 3em;
padding: 0;
text-align: left;
width:150px;
background-color: #eeeeee;
}
#content{height:180px;}
#tlc, #trc, #blc, #brc { background-color: transparent; background-repeat: no-repeat; }
#tlc { background-image:url(images/tlc.gif); background-position: 0% 0%; }
#trc { background-image:url(images/trc.gif); background-position: 100% 0%; }
#blc { background-image:url(images/blc.gif); background-position: 0% 100%; }
#brc { background-image:url(images/brc.gif); background-position: 100% 100%; }
#tb, #bb { background-color: transparent; background-repeat: repeat-x; }
#tb { background-image:url(images/tb.gif); background-position: 0% 0%; }
#bb { background-image:url(images/bb.gif); background-position: 50% 100%;}
#rb { background-image:url(images/r.gif); background-position: 100% 0%; background-repeat: repeat-y;}
#lb { background-color: #; background-image:url(images/l.gif); background-position: 0% 100%; background-repeat: repeat-y;}
HTML: Code: <div id="box"> <!--- box border --> <div id="lb"> <div id="rb"> <div id="bb"><div id="blc"><div id="brc"> <div id="tb"><div id="tlc"><div id="trc"> <!-- --> <div id="content"> <p>2 colour box.</p> </div> <!--- end of box border --> </div></div></div></div> </div></div></div></div> <!-- --> </div> The lb "left border image" and rb "right border image" needs to change half way down vertically to a different image. hope some one can help me?!? Thanks I have a form design that i've been working on and I've got the border to appear correctly in FF, but not in IE. In IE the sides of the border don't meet the top pieces. I've heard about something similar before and solution involved negative margins. This did work to correct IE but then FF was messed up. The form is contained in the #wrapper div. I would really appreciate anybody's help. I'll warn you though, I'm pretty new to web design. Here's the HTML & PHP (The first 2/3 is php): Code: <?php require_once('Connections/getBiz.php'); ?>
<?php
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////DREAMWEAVER FUNCTION - USED TO STRIP OUT COMMAS ETC.
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
{
$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
switch ($theType) {
case "text":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "long":
case "int":
$theValue = ($theValue != "") ? intval($theValue) : "NULL";
break;
case "double":
$theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";
break;
case "date":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "defined":
$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
break;
}
return $theValue;
}
}//end DreamWeaver Function
//USED CHECK IF FORM FIELD IS EMPTY
function notEmpty($variable){
if($variable == NULL || $variable == ''){
$ntEmpty = false;
}
else {
$ntEmpty = true;
}
return($ntEmpty);
} //end notEmpty function
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//BEGIN HTML CODE CREATION
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
session_start();
$currentPage = $_SERVER["PHP_SELF"];
$num_fields = 0; //Initiate counter for filled fields
//Set form field variables to 'missing'
$name = "-1";
$city = "-1";
$zip = "-1";
$begDate = "-1";
$endDate = "-1";
$maxRows_Biz = 10;
$pageNum_Biz = 0;
if (isset($_GET['pageNum_Biz'])) {
$pageNum_Biz = $_GET['pageNum_Biz'];
}
$startrow_Biz = $pageNum_Biz * $maxRows_Biz;
//CHECK EACH FORM FIELD TO SEE IF IT'S EMPTY
if (isset($_GET['Name']) && notEmpty($_GET['Name'])) {
$name = $_GET['Name'];
$num_fields++;
}
if (isset($_GET['City']) && notEmpty($_GET['City'])) {
$city = $_GET['City'];
$num_fields++;
}
if (isset($_GET['zp']) && notEmpty($_GET['zp'])) {
$zip = $_GET['zp'];
$num_fields++;
}
if (isset($_GET['Beginning_Date']) && notEmpty($_GET['Beginning_Date'])) {
$begDate = date("Y-m-d", strtotime($_GET['Beginning_Date']));
$num_fields++;
}
if (isset($_GET['Ending_Date']) && notEmpty($_GET['Ending_Date'])) {
$endDate = date("Y-m-d", strtotime($_GET['Ending_Date']));
$num_fields++;
}
if (isset($_GET['Submit']) && notEmpty($_GET['Submit'])) {
$submit = true;
}
//print ($begDate);
mysql_select_db($database_getBiz, $getBiz);
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//IF FORM FIELDS WERE SUBMITTED, CREATE QUERY BASED ON NUMBER OF FILLED FIELDS
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//print (str_replace(' ','',GetSQLValueString($zip, "defined")));
//print ("Here is the zip" . $zip . "<br>");
//print ("Here is the zip" . GetSQLValueString($zip, "defined"));
if ($num_fields > 0) {
$query_Biz = "SELECT * FROM biz WHERE ";
if ($name != "-1") {
$query_Biz .= "bizName LIKE '%" . $name . "%'";
$num_fields--;
if ($num_fields > 0) {
$query_Biz .= " AND ";
}
}
if ($city != "-1") {
$query_Biz .= "city LIKE " . GetSQLValueString($city, "text") ;
$num_fields--;
if ($num_fields > 0) {
$query_Biz .= " AND ";
}
}
if ($zip != "-1") {
$query_Biz .= "zip IN ( " . $zip . " ) ";
$num_fields--;
if ($num_fields > 0) {
$query_Biz .= " AND ";
}
}
if ($begDate != "-1") {
$query_Biz .= "incDate > " . GetSQLValueString($begDate, "date");
$num_fields--;
if ($num_fields > 0) {
$query_Biz .= " AND ";
}
}
if ($endDate != "-1") {
$query_Biz .= "incDate < " . GetSQLValueString($endDate, "date");
$num_fields--;
}
/// PUT A LIMIT ON THE QUERY ////////////////////////////////////////////////////////////
$query_limit_Biz = sprintf("%s LIMIT %d, %d", $query_Biz, $startrow_Biz, $maxRows_Biz); //add limit
// print($query_limit_Biz);
$Biz = mysql_query($query_limit_Biz, $getBiz) or die(mysql_error());
$row_Biz = mysql_fetch_assoc($Biz);
if (isset($_GET['totalRows_Biz'])) { //get total # rows from clicked link....
$totalRows_Biz = $_GET['totalRows_Biz'];
} else {
$all_Biz = mysql_query($query_Biz, $getBiz); //or from adjunct query
$totalRows_Biz = mysql_num_rows($all_Biz);
}
$totalPages_Biz = ceil($totalRows_Biz/$maxRows_Biz)-1;
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//CHECK FOR NEW PARAMETERS AND INCORPORATE THEM
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
$queryString_Biz = "";
if (!empty($_SERVER['QUERY_STRING'])) { //get the query parameters from clicked link
$params = explode("&", $_SERVER['QUERY_STRING']);
$newParams = array();
foreach ($params as $param) {
if (stristr($param, "pageNum_Biz") == false &&
stristr($param, "totalRows_Biz") == false) {
// print($param);
array_push($newParams, $param);
}
}
if (count($newParams) != 0) { //add new parameters, if any, to queryString
$queryString_Biz = "&" . htmlentities(implode("&", $newParams));
}
}
$queryString_Biz = sprintf("&totalRows_Biz=%d%s", $totalRows_Biz, $queryString_Biz);
//print ($currentPage);
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//BEGIN HTML
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>NewBizFL - The only site devoted exclusively to free business listings</title>
<link href="css/hilite.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div id="logo">
<h1>newbizFL</h1>
</div>
<div id="menu">
<ul>
<li class="active"><a href="#">homepage</a></li>
<li><a href="#">search</a></li>
<li><a href="#">about us</a></li>
<li><a href="#"> faq</a></li>
<li><a href="#">contact us</a></li>
</ul>
</div>
<p> </p>
<p> </p>
</div>
<div id="wrapper">
<div class="top"></div>
<div class="rside">
<div class="content">
<div id="srchForm">
<form name="form1" method="get" action=<?php $currentPage ?> >
<fieldset id="location">
<ol>
<li>
<label for="Name">Business Name:</label>
<input type="text" name="Name" id="Name">
</li>
<li>
<label for="City">City:</label>
<input type="text" name="City" id="City">
</li>
<li>
<label for="Zip Code">Zip Code:</label>
<input type="text" name="zp" id="Zip Code">
</li>
</ol>
</fieldset>
<fieldset id="dateRange">
<ol>
<li>
<label for="Beginning Date">Beginning Date</label>
<input type="text" name="Beginning_Date" id="Beginning Date">
</li>
<li>
<label for="Ending Date">Ending Date</label>
<input type="text" name="Ending_Date" id="Ending Date">
</li>
</ol>
</fieldset>
<input type="submit" name="Submit" id="Submit" value="Submit" />
</form>
</div>
<div id="dataTable">
<?php
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//IF NO RECORDS, SHOW 'NO RECORDS' MESSAGE. ELSE, SHOW TABLE WITH RECORDS
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
if ($totalRows_Biz == 0 ) {
echo '<td>No Records to Display' . ' Sorry </td>'; }
else {
echo '<p> Records' . ($startrow_Biz + 1) . ' to ' . min($startrow_Biz + $maxRows_Biz, $totalRows_Biz) . ' of ' . $totalRows_Biz . '</p>'; // Result Page Heading: 'Records 1 to 10 of 40'
echo '<table border="1">';
echo "<thead>";
echo " <tr>";
echo " <th scope=\"col\">Business Name</th>";
echo " <th scope=\"col\">Address</th>";
echo " <th scope=\"col\">City</th>";
echo " <th scope=\"col\">Zip</th>";
echo " <th scope=\"col\">Filing</th>";
echo " <th scope=\"col\">Date</th>";
echo " <th scope=\"col\">President</th>";
echo " </tr>";
echo "</thead>";
$counter = 0; // counter to highlite rows
do { //do loop till all records are printed
if ($counter++ % 2) {
echo '<tr class="hilite">'; }
else {
echo '<tr>'; }
echo '<td>' . $row_Biz['bizName'] . '</td>';
echo '<td>' . $row_Biz['Address'] . '</td>';
echo '<td>' . $row_Biz['city'] . '</td>';
echo '<td>' . $row_Biz['zip'] . '</td>';
echo '<td>' . $row_Biz['incDate'] . '</td>';
echo '<td>' . $row_Biz['type'] . '</td>';
echo '<td>' . $row_Biz['pres'] . '</td>';
echo '</tr>';
} while ($row_Biz = mysql_fetch_assoc($Biz));
echo '</table>';
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//LINKS FOR 'PREVIOUS', 'NEXT', ETC..
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
echo '<table border="0">';
echo '<tr>';
////FIRST LINK
echo '<td>';
if ($pageNum_Biz > 0) { // Show if not first page
echo '<a href="' . sprintf("%s?pageNum_Biz=%d%s", $currentPage, 0, $queryString_Biz) . '">First</a>'; }
echo '</td>';
////PREVIOUS LINK
echo '<td>';
if ($pageNum_Biz > 0) { // Show if not first page
echo '<a href="' . sprintf("%s?pageNum_Biz=%d%s", $currentPage, max(0, $pageNum_Biz - 1), $queryString_Biz) . '">Previous</a>';}
echo '</td>';
////NEXT LINK
// print ("This is querystringbiz = " . $queryString_Biz);
// print ('%s?pageNum_Biz=%d', $currentPage, 23) ;
// print ("total pages = " . $totalPages_Biz);
// print ("current page = " . $pageNum_Biz);
// print (printf("%s?pageNum_Biz=%d", $currentPage, 2));
echo '<td>';
// Show if not last page
if ($pageNum_Biz < $totalPages_Biz) {
echo '<a href="' ;
echo $currentPage . '?pageNum_Biz=' . ($pageNum_Biz + 1). $queryString_Biz;
echo '">Next</a>' ;
}
echo '</td>';
////LAST LINK
echo '<td>';
if ($pageNum_Biz < $totalPages_Biz) { // Show if not last page
echo '<a href="' . sprintf("%s?pageNum_Biz=%d%s", $currentPage, $totalPages_Biz, $queryString_Biz) . '">Last</a>';}
echo '</td>';
echo '</tr>';
echo '</table>';
}
?>
</div>
</div>
</div>
<div class="bottom"></div>
</div>
</body>
</html>
<?php if (isset($totalRows_Biz)) {
mysql_free_result($Biz);} ?>
And here's the CSS: Code: @charset "utf-8";
.hilite {
background-color: #CCCCFF;
}
body {
font-family : "Trebuchet MS", Arial, sans-serif;
padding: 0;
text-align: center;
background-image: url(../images/gradient.png);
background-repeat: repeat-x;
background-color: #ecffec;
}
#wrapper {
width: 920px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
text-align: left;
background-color: #FFFFFF;
}
#wrapper .bottom {
background-image: url(../images/bottom.png);
background-repeat: no-repeat;
background-position: left bottom;
height: 21px;
}
table, th, td {
border : 1px solid #d4e0ee;
border-collapse : collapse;
font-family : "Trebuchet MS", Arial, sans-serif;
color : #555;
}
#wrapper .rside {
background-image: url(../images/right.png);
background-repeat: repeat-y;
background-position: right top;
}
#header {
width: 900px;
height: 40px;
margin: 0 auto 20px auto;
padding-top: 10px;
}
#menu {
float: right;
padding-top: 10px;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
margin-left: 5px;
padding: 1px 10px;
text-decoration: none;
font-size: 12px;
color: #FFFFFF;
background-color: #A6A6FF;
}
#menu .active a {
}
#menu a:hover {
text-decoration: underline;
}
#logo {
float: left;
}
#logo h1 {
float: left;
margin: 0;
font-size: 38px;
color: #8484FF;
}
#logo h1 sup {
vertical-align: text-top;
font-size: 24px;
}
#logo h1 a {
color: #0099E8;
}
#wrapper #dataTable {
text-align: left;
clear: both;
}
legend {
margin-left: 1em;
color: #000000;
font-weight: bold;
padding: 0;
}
fieldset ol {
list-style: none;
margin: 0;
padding: 0.5em 0em 0em .5em;
}
fieldset li {
padding-bottom: 1em;
}
label {
float: left;
width: 7em;
margin-right: 1em;
}
#wrapper #location {
float: left;
width: 40%;
margin-right: 15px;
margin-left: 5px;
}
#wrapper #dateRange {
margin-right: 20px;
}
input {
background: #F3F4EC !important;
}
#wrapper .top {
background-image: url(../images/top.png);
background-repeat: no-repeat;
background-position: left top;
height: 18px;
margin: 0;
}
#wrapper .top span {
background-image: url(../images/leftside.png);
background-repeat: repeat-y;
background-position: left top;
}
#wrapper .content {
background-image: url(../images/leftside.png);
background-repeat: repeat-y;
background-position: left top;
padding-top: 0px;
padding-right: 20;
padding-bottom: 0;
padding-left: 20;
}
#wrapper .content span {
background-image: url(../images/right.png);
background-repeat: repeat-y;
background-position: right top;
}
Sorry, I know my code is probably a mess. I really appreciate anyone's help with this, though. Oh, and by the way, does anyone know how to attach things to a post? For example, a screen capture (jpeg) or the images I used? Greetings, I'm trying to create a fieldset that has rounded corners and a solid border. From what I gather IE displays rounded corners by default, Firefox does not. The code below makes Firefox display rounded corners, but when a border is applied rounded corners won't display on IE. Is there anything I can do to enable rounded borders? Thanks, fieldset { border:3px solid #000000; -moz-border-radius: 8px; border-radius: px; background: #C4FC02; margin: 0 0 1em 0; position: relative; } I'm trying to make a basic 'business card' website for a family friend and I want to add a custom dotted border (alternating colours) around the inside of my container, but I'm not sure of the best way to achieve what this without lots of extra markup. Image of Current look Image of Desired look Here's the actual site. http://www.thenewsite.com/thelolmaster/ I want to place a styled box with rounded corners around text in a heading. The problem is that the the heading may have one, two or three lines and I can't seem to get my box to adjust. Here is my code: I appreciate any help you can provide! Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<style type="text/css" media="all">
.specialHeader {
background: #F4F1F1 url(http://d9qjx79zqpo3.googlepages.com/specialHeadingA.gif) no-repeat scroll 0 0;
padding: 1px 0 0 0;
}
.specialHeader h2 {
display: block;
margin: 10px 0 0 0;
padding: 0 0 0 10px;
background: transparent url(http://d9qjx79zqpo3.googlepages.com/specialHeadingA.gif) no-repeat scroll 0 100%;
}
.specialHeader span {
display: block;
margin: 0;
width: 100%;
padding: 1px;
background: transparent url(http://d9qjx79zqpo3.googlepages.com/specialHeadingB.gif) no-repeat scroll 100% 0;
}
.specialHeader em {
text-transform: uppercase;
display: block;
text-style: normal;
margin: 10px 0 0 10px;
padding: 0;
font-size: 18px;
font-family: 'Trebuchet MS', Tahoma, sans-serif;
color: #98002E;
font-weight: 300;
background: transparent url(http://d9qjx79zqpo3.googlepages.com/specialHeadingB.gif) no-repeat scroll 100% 100%;
}
</style>
</head>
<body>
<div class="specialHeader"><h2><span><em>Hello World</em></span></h2></div>
<div style="margin: 50px; width: 600px;">
<div class="specialHeader"><h2><span><em>Two<br />Lines</em></span></h2></div>
</div>
<div style="margin: 50px; width: 300px;">
<div class="specialHeader"><h2><span><em>This Has<br />Three<br />Lines</em></span></h2></div>
</div>
</body>
</html>
i have my CSS and it wont fit to the very edges of the page - i have tried using Position:absolution, but that screws my alignment - any ideas? http://wakefieldfhs.co.uk/stu/ - The location of the page CSS Location I'm making a menu with buttons that have curved edges. I can make the edges and everything fine, but how can I make it so if I hover over the whole <li>, it changes the background of the 3 <span> tags underneath it? You'll understand when you see the demo. The menu I'm talking about is the orange bar. It won't work in IE, check it in Firefox, Safari, Opera, or Chrome. Try hovering over the menu items that aren't highlighted, and they don't light up. itsjareds.leadhoster.com/spogg/phoenix.html Sorry about the non-clickable link, user restrictions.. Post if you need any clarification (I know it's not clear). Is there anyway on CSS or javascript to do "smooth edges on screen fonts" for every user to view my web? Hello, I'm using css to display a list using a unordered list. I want to put a border around the whole thing and I want to have some text that sits on top of the border (and indented a little). Can someone tell me how I could do this without making a specific absolute position style to do it? This is a mockup of what I'm trying to do - Where you see "i want text here" is where I want to put text: This is the css I have for the box so far: Code:
#main_content ul.cfcheader {
border-style:solid;
border-width:12px;
border-color:#d9e7f2;
}
#main_content ul.cfcheader li {
position: relative;
list-style: none;
width: 548px;
padding-left: 48px;
text-align: left;
margin-bottom: 20px;
}
I'm a wicked css noob so any help you could give would be helpful!1 TIA! I'm a noob when it comes to CSS, so please go easy on me . I want to display a border to enclose text - like this: Code: <h4 style="border: solid">Some text</h4> The result, however, is that the border ends up extending to the end of the line enclosing a bunch of whitespace after the text. If I enclose the text in a table I get the result I want, but that's a very verbose solution. Is there a way to do it with just CSS? Thanks, David For some reason the bottom border on my text in SPAN.standard_field_type_info works fine in firefox but on IE7 (I don't have IE6 anymore to test) it is not shown. I am pretty sure it is a margin/padding thing hiding the border but I can't remember how to fix it. Anyone got the rather simple solution? Cheers. PHP Code: DIV.standard_field_container { width: 98%; padding: 0.4em; border: 1px solid #8B8B8B; background-color: #E2E2E2; overflow: hidden; } DIV.standard_field_left { width: 10em; float: left; margin-right: 1.5em; font: bold 0.8em Verdana, Arial, Helvetica, sans-serif; } DIV.standard_field_right { font: normal 0.8em Verdana, Arial, Helvetica, sans-serif; } SPAN.standard_field_type_info { font-weight: normal; color: #ff0000; border-bottom: 1px dashed #ff0000; cursor: help; } Hi all, I have a div relatively positioned & floated left in a wrapper, with a php-generated list inside. css for the column: #leftcolumn { width:200px; position:relative; float:left; background:#F0F0F0; border:solid 1px #CCC; padding:2px; margin-top:10px; overflow: none; } and for the list: ul.list { font-family:Verdana, Arial, Helvetica, sans-serif; color:#000; font-size:11px; } and lastly, the html/php: <div id="leftcolumn"> <? echo "$db_list"; ?> </div> the problem: the list text is overrunning the right border of the div in safari and firefox. (i'm running the app locally on a mac so i can't test in IE, but that probably works). how come the list is not wrapping? it's like the text of the list is sitting on top of the containing div, or something. anyone? bueller? Hi, I am making a website for my friend that lost her myspace acount becuase of here small uncle. So I want to make a website for her that is simmular to myspace. So my question is: How do I add in text up the top in the border that is 15xp? Thank you. Hi. This is template I copied just for fun in joomla http://www.worldoffashion.info/test/. I wonder how to move text from border as you can see in gray boxes text is near border. I tried padding but then it makes whole box larger When I allow scripts and active x to run in IE I get a dotted border around each letter of hyperlinked text. It looks fine in other browsers and also in IE if I block scripts. Does anybody have any ideas how to fix this or if it really is a CSS problem? Thanks I'm going round and round without getting any head way so hopefully someone can give me a hand... I'm creating a mail form using a background image for the input fields. What I don't want is a border. If I don't add a border: solid black, for instance, I get a default white. Is there a way to have no border? Code: INPUT.email {
background-image: url(images/bg_email.jpg);
width:206px;
height:21px;
font-family: Verdana, sans-serif;
font-size: 14px;
color: #ffffff;
border: 1px solid black;
margin: 0 0 0 10px;
padding: 0 0 0 6px;
}
Thanks in advance! |
|||||||