|
CSS - Rounded Corner Border Broken In Ie
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? Similar TutorialsAm having a problem with turning a design into a tableless layout. I've attached the part of the layout I'm trying to code and this is the code I'm using: xhtml Code: Original - xhtml Code <div class="content"> <div class="bar">Devshed Rocks the socks of oneself</div> <div class="leftcon">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent lu ptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div> <div class="rightcon">Hey</div> </div> <div class="content"> <div class="bar">Devshed Rocks the socks of oneself</div> <div class="leftcon">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent lu ptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div> <div class="rightcon">Hey</div> </div> And here is the css: css Code: Original - css Code .content { width:570px; float:right; margin-top:20px; background-color:#CCCCCC; font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif; } .leftcon { width:450px; padding:5px; float:left; border-right:1px solid black; background-color:#FFFFFF; padding-left:15px; background-image:url(images/cornerbot.jpg); background-repeat:no-repeat; } .bar { background-color:#66CC00; font-size:12pt; padding:10px; padding-left:15px; background-image:url(images/corner.jpg); background-repeat:repeat-y; }
.content {
The corner image simply won't line up with the bottom half of the corner which I have as the left floated background image. Anyone able to point out what I'm doing wrong or perhaps offer another solution? Thanks I copy code to make a rounded corner and test it with my images It is a mess as I get 1 image out of 4 displaying and i did get the names correct. How do I assemble cut my image sizes for this? I create a rounded corner in Gimp and cut it up. I am ANNOYED at the time spent doing this. Images enclosed and here is code i use from http://www.vertexwerks.com/tests/sidebox/ Code:
<html>
<head>
<style type="text/css">
/* Show only to IE PC \*/
* html .boxhead h2 {height: 1%;} /* For IE 5 PC */
body { background-color:Green }
.sidebox {
margin: 0 10; /* center for now */
width: 27em; /* ems so it will grow */
background: url(wbright2.png) no-repeat bottom right;
font-size: 100%;
}
.boxhead {
background: url(whright2.gif) no-repeat top right;
margin: 0;
padding: 0;
text-align: center;
}
.boxhead h2 {
background: url(whleft2.png) no-repeat top left;
margin: 0;
padding: 22px 30px 5px;
color: white;
font-weight: bold;
font-size: 1.2em;
line-height: 1em;
}
.boxbody {
background: url(wbleft2.png) no-repeat bottom left;
margin: 0;
padding: 5px 30px 31px;
}
</style >
<title>
</title>
</head>
<body><h1>It works!</h1>
<div class="sidebox">
<div class="boxhead"><h2>Test Headline</h2></div>
<div class="boxbody">
<p>This is a short sample paragraph.</p>
<p>And another onsdasdadsadsadsadsadsadsad
asdsadadsaffffffffffffffffffffffffffffff dsdsf sdfdsf sdfdsf sdfsdf sdfsd
sdfffffe.</p>
</div>
</div>
<br />
asSADSADSAD
<img src="whleft2.png" />
</body></html>
I am trying to attach 4 rounded images to a box, I have read hundreds of guides but non that seem to help. The problem I think is that I have set the size of the box rather than letting the amount of text written in it define the size. The idea is that the white box (mainarea) will have 3 different colour boxes inside it, but herein lies another problem. They are not inside the box they are merely on top of it, is this a problem. At the moment I have one corner (bottom left) positioned perfectly. My problem is the other 3. As you can see I have removed all the previous attempts to do this. Please someone help I think my hair is falling out! CSS Code: body {
background-image: url(bg2.png);
background-repeat: repeat;
}
#image1 {
position:relative;
width:650px;
height:125px;
background-image: url(banner.png);
margin-left: auto;
margin-right: auto;
}
#navi {
position:relative;
top:20px;
margin-left: auto;
margin-right: auto;
width:650px;
height:50px;
background-image: url(navibg.png);
/*background : #ffcc66 url(bg_navPrimaryShadow.gif) repeat-x 0 100% */
}
#mainarea {
position:relative;
top:40px;
margin-left: auto;
margin-right: auto;
width:650px;
height:480px;
background:#ffffff url(cornerbtlft.png) 0 100% no-repeat;
}
#box1 {
position:absolute;
top:250px;
left:200px;
width:600px;
height:150px;
background-color:#ffcc66;
}
#box2 {
position:absolute;
top:420px;
left:200px;
width:280px;
height:275px;
background-color:#ffcc66;
}
#box3 {
position:absolute;
top:420px;
right:200px;
width:280px;
height:275px;
background-color:#ffcc66;
}
#leftlg {
position:absolute;
top:230px;
left:17px;
width:140px;
height:500px;
background-color:#ffffff;
}
#rightlg {
position:absolute;
top:230px;
right:17px;
width:140px;
height:500px;
background-color:#ffffff;
}
#footer {
position:relative;
height:70px;
}
HTML Code: <body> <div id="image1"></div> <div id="navi"></div> <div id="mainarea"></div> <div id="topleft"></div> <div id="box1"></div> <div id="box2"></div> <div id="box3"></div> <div id="leftlg"></div> <div id="rightlg"></div> <div id="footer"></div> </body> Hi, I'm still trying to learn CSS. Using CSS instead of tables really increases the versatility of the page, but, don't the graphics suffer? I'm trying to make a 3column layout which resizes according to the resolution. I've made it, but IMO it would look more appealing if I could make the corners curved as in... the menu box corners and the content space corners. Is there anyway to do this? Thanks so much for taking the time to read my question. I have a rounded corner that isn't working. For now, I have a red corner, so that it stands out and I know it's position. I would like the right side to look the same as the left side of the contentheaderbox (this is where the page title goes like Home, or Contacts, or Site Map). Not sure how to do this, I've run out of ideas. I have no where to post it, so I've attached the files. Thanks for the help. Brad Hello, Quick Q: How would I go about getting this effect (drop-shadow/rounded corners around the main container div - here are a couple examples): http://urlgreyhot.com/personal/ http://www.fiftyfoureleven.com/sandbox/weblog/ I am aware of the tutorials found on ALA site... but those tuts do not use .png's to achieve the drop-shadow/rounded-corner effect. Can someone point me to a nice tutorial? I have tried viewing the CSS of above sites, but I have found it a bit confusing, and I would prefer a simplified version of the code. Anyone feel like sharing techniques? Thanks in advance! Cheers M I am developing a site that requires the navigation menu to have one rounded corner at the end on the home button. The default button state is created using a background image but I need it to also have a rollover effect on hover and also on focus (for the home page item only). I have tried to use CSS and curvy corners Javascript code to create the effect as I don't want to use images. However, I don't think the curvy corners script is picking up the div item that I want to apply the corner to. The trouble is I have a number of div boxes on the site that also have rounded corners (3 rounded and 1 square). The CSS is working fine for these in all browsers apart from Opera but when it comes to the navigation it doesn't work properly in IE. Here's the HTML for the menu: Code: <div id="menu"> <ul> <li><a href="index.htm" class="home">Home</a></li><li><a href="#">Mortgages</a></li><li><a href="#">Life Assurance</a></li><li><a href="#">General Insurance</a></li><li><a href="#">Partnership Services</a></li><li><a href="#">About Us</a></li><li><a href="#">Contact Us</a></li> </ul> </div> <br class="clearfloat" /> and here's the CSS: Code:
#menu {
background-image:url(images/menubg.png);
height:24px;
width: 100%;
overflow: hidden;
position:relative;
float:left;
}
#menu ul {font-size:11px; font-weight:bold; list-style:none;}
#menu li{ display: inline; margin: 0;}
#menu ul li a {float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 6px 15px 5px 15px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: white;
}
#menu li a:hover, #menu li a.focus {display: block; text-decoration:none; color:#445671; background-color:#d9e021;} /*background of tabs for hover state, plus tab with "focus" class assigned */
#menu li a.home:hover, #menu li a.homefocus { width:auto; text-decoration:none; color:#445671; background-color:#d9e021; border-right: 1px solid white;
/* Do rounding (native in Firefox and Safari) */
-moz-border-radius-topleft:12px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:0;
-moz-border-radius-bottomright:0px;
-webkit-border-top-left-radius:12px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:0px;
}
The CSS is in an external stylesheet, although I have also added the CSS for the rounded corner items to the header code. The class 'homefocus' seems to work when applied to the a tag on the home page but the other class 'home' which should work on hover won't work in IE. I'm sure it's something to do with the hover. Any ideas how I can make it work? I am very new to CSS, but I am trying to use it to make a tabbed rounded-corner centered menu bar for my webpage. I've gone through a number of iterations, and I feel like I'm close, but it's not quite right. The left rounded-corner image appears to be just slightly too high compared to the middle/right part of the tab. The css and html codes are below. Thank you for any help. Kate CSS CODE: #tabs8 { float:left; width:100%; background:#FCF1F6; border-bottom:4px solid #E276A7; overflow:hidden; position:relative; } #tabs8 ul { clear:left; float:left; list-style:none; margin:0; padding:0; position:relative; left:50%; text-align:center; } #tabs8 ul li { display:block; float:left; list-style:none; margin:0 0 0 1px; padding:0px 3px; position:relative; right:50%; } #tabs8 ul li a { display:block; margin:0 0 0 1px; padding:3px 0px; background:url("tableft8.gif") no-repeat left top; text-decoration:none; line-height:1.3em;} #tabs8 a span { background:url("tabright8.gif") no-repeat right top; padding:3px 10px; color:#333; line-height:1.3em;} #tabs8 ul li a:hover { background:#369; color:#fff; } #tabs8 ul li a.active, #tabs8 ul li a.active:hover { color:#fff; background:#000; font-weight:bold; }--> HTML CODE: <div id="tabs8"><ul> <li id="current"> <div align="center"><a href="index.html"><span>Home</span></a></div> </li> <li> <div align="center"><a href="cake-shaping.html"><span>Cake Shaping</span></a></div> </li> <li> <div align="center"><a href="decorations.html"><span>Edible Decorations</span></a></div> </li> <li> <div align="center"><a href="gallery.html"><span>Gallery</span></a></div> </li> <li> <div align="center"><a href="blog.html"><span>Blog</span></a></div> </li> <li> <div align="center"><a href="subscribe.html"><span>Subscribe</span></a></div> </li></ul></div> Hey, I'm trying to figure out how to make a table area have rounded corners that will change color dynamically on different page backgrounds. I know how to set rounded corners on just 1 color, but is there code, css/html/java/php that would allow the corners to take the color of whatever the background looks like, even if its a picture? All the ways I try make the rounded corner image transparent which turns the table back into a square. Let me know if my question wasn't clear! Thanks!!!!!!!!!!!!! If you open this page; w w w.ctuchicago.com/parties/contact-us.html If you open this page on IE you won`t see any input, but if you open it with chrome or firefox you will see there is input. I found way to make rounded corner input but it doesn`t work with IE7 & IE8. I tried to resolve this problem with z-index and i saw the input area it was looking like working until i tried to type something in input area. Hi everyone, Help please. I'm relatively new to CSS. I've coded the following application form and when opened in Chrome and IE9 the formatting and layout is shown as expected. IE8 doesnt seem as friendly and the 2nd page 'Questionnaire' has broken borders. Can anyone help? Here is the CSS behind the 'Job Application Form' @charset "UTF-8"; /* CSS Document */ body{ background-image: url(xxxxxx); background-repeat: no-repeat; background-position: top left; background-color: #CBCBCB} form{ background-color:#FFFFFF; width:800px; margin:90px auto; border:2px solid #A9A9A9; padding: 20px; } #header_content * {font-family:Arial,Helvetica,sans-serif!important} #content {margin-bottom:20px;} #sectionCandInf, .sectionContent, #content div *{background-color:#FFF} #aq523 {width:650px;} #aq515 {width:650px;} #aq516 {width:650px;} #aq517 {width:650px;} #aq519 {width:650px;} #aq522 {width:650px;} #aq524 {width:650px;} #aq521 {width:650px;} #aq525 {width:650px;} #aq518 {width:650px;} #aq520 {width:650px;} #aq2922 {width:650px;margin-bottom:10px;} #aq2924 {width:650px;margin-bottom:10px;} #aq2916 {width:650px;margin-bottom:10px;} #aq2917 {width:650px;margin-bottom:10px;} #aq2918 {width:650px;margin-bottom:10px;} #aq2919 {width:650px;margin-bottom:10px;} #aq2920 {width:650px;margin-bottom:10px;} #aq2923 {width:650px;margin-bottom:10px;} #aq2926 {width:650px;margin-bottom:10px;} #aq2925 {width:650px;margin-bottom:10px;} #chpLoginSection{margin-top:20px; border:2px dotted #0092B5} #chpCreateSection {margin-top:20px;border:2px dotted #0092B5} h5 { font-size: 110%; font-weight: bold; margin: 0; padding: 20 20px; background-color: #fff!important; color: #FFFFFF; width: 25em; float: left; color: #000; } #reqstar{margin-bottom: 20px; margin-right: 80px} .section fieldset { clear: left; width:100%; padding: 5px 0; color: inherit; background-color: #CCCCFF; border:1px solid #A9A9A9; } #sectionDocument {padding-right:0px;padding-top:8px;margin-left: 30px;margin-right:30px; border:1px solid #A9A9A9}} #sectionDocument, .sectionContent #sectionDocument select, #sectionDocument input {margin-bottom:10px;} #sectionDocument #aq2822, #sectionDocument #aq2824 {width:400px;} #sectionDocument #aq2822 label, #sectionDocument #aq2824 label {width:40px;} .submit input, #footersubmitbav div input, input.chpbutton, input.footerbutton {font-size:12px; font-family:Arial,Helvetica,sans-serif; border: 1px solid #7F7F7F!important; background-color:#547EA8!important; text-align:center; cursorointer; text-decoration:bold !important; font-weight:normal; color:#ffffff;padding:4px 6px 4px 6px !important; } /*Job summary headers*/ .headerlabel1, .headerlabel2, .headerlabel3 {font-weight:bold;color:#A32425;} .headerlabel1, .headerlabel2 {padding-left:0px;} .headervalue1, .headervalue2, .headervalue3, .headerlabel1, .headerlabel2, .headerlabel3 {font-size: 14px;} .headerlabel3 {padding-left:0px;} .bodyAppProc h4 {font-size: 17px; font-weight:bold; color:#A32425;} .bodyAppProc h5, .bodyAppProc h6 {font-size: 14px; font-weight:bold;color:#A32425;} .bodyAppProc input, .bodyAppProc textarea, .bodyAppProc select{font-size: 11px;} #saveApp {margin-top:20px; margin-bottom: 20px;} #step_navigation_content, #content h4{margin-left:00px;} #headertable{padding: 10px 0px 10px 0px; line-height:1.7em; } .section h5{padding-left:0;} #chpCreateSection {border-left:1px dotted #C8B08BF!important} #step1input input, #step2input input,#step2input input,#step3input input, a.currentStep {font-size: 14px!important} /* migration 28B -> 28C */ #sMobilePhoneNumber {width:220px;} #tem {border:none;} #sectionWelcome {background-color: #fff} /*MedusaTech Additions*/ #aq6783 {margin-bottom:10px} #aq6696 {margin-bottom:10px} #aq6700 {margin-bottom:10px} #navbarValue a, #navbarValue input {font-size:14px;color:#4F6DB6;text-decoration:none;padding-top:1px;} #navbarValue a:hover, #navbarValue input:hover {text-decoration:underline;} #navbarValue .disabledLink a, #navbarValue .disabledLink input {color:#000000;} #navbarValue .disabledLink a:hover, #navbarValue .disabledLink input:hover {text-decoration:none;} #navbarLabel {font-size:14px;} .navbarLine {padding:0;margin:0;} #sectionAttachContent {border: 1px solid #A9A9A9;} .label {width:242px;} #sectionAttachContent .value {} 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? 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/ 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; } 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 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 Hello all i have this site here -> http://forum.prxa.info/index.php I am trying to create a box to the right of the logo right up near the end of the page to contain some text, can anyone help me out? Thanks! friends i have table.. that table corner must be in the curve form.. i dont know to do.. plz send the links for my problem curve edge is my output.. for that related css link plz thanks in advance Hi, you would have already seen one of my newbie topics here today, and here is another one. I need to put a image in the corner of an absolutly positioned div. I don't know how to do that. It would be in the upper left-hand corner. Any suggestions? Perhaps I should pick up a CSS book, is there one that you reccomend. Thanks, -Sam |
|||||||