CSS - Rounded Corner On Rollover - Css Problem

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

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!!!!!!!!!!!!!

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>

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>&nbsp;</p>
    <p>&nbsp;</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>&nbsp; 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?

Hi

I'm trying to match the overhead menu element of a Coppermine theme to a phpBB style. I've just run into a few problems and I was wonding if anyone could help please?

Coppermine here - http://www.brummiesfans.com/coppermine
phpBB3 here - http://www.brummiesfans.com/main/

Where I would like some help please is in getting the menu bar to have the same rounded corners as in phpBB3. What I have tried to do is to use the CSS from phpBB3, but on this occasion, it has
not worked. The code is shown below. I don't have a problem in Firefox, Safari or Chrome, as there is code in place to sort the rounded corners out in CSS, however I need the missing piece put into place for IE, and this is where I need help.

In phpBB3 the div classes are called "corners-top" and "corners-bottom".

The relevant graphics files have also been copied across. (e.g. www.brummiesfans.com/coppermine/themes/brummies/images/corners_right.png)

If someone can suggest how the matter can be fixed then I'd be very grateful.

The relevant bits of the template.html and style.css file wordings follow, which hopefully will be of help.

TEMPLATE.HTML
Code:

		<div class="navbar">

			<span class="corners-top"><span></span></span>

            <div id="main_menu">
                    {SYS_MENU}
                    {SUB_MENU}
                    {ADMIN_MENU}
                <!-- Begin IE7 support --><img src="images/spacer.gif" class="menuheight" alt="" /><!-- End IE7 support -->
            <div class="clearer"></div>

			<span class="corners-bottom"><span></span></span>	
		</div>

STYLE.CSS
Code:

.post span.corners-top, .post span.corners-bottom, .panel span.corners-top, .panel span.corners-bottom, .navbar span.corners-top, .navbar span.corners-bottom {
	margin: 0 -10px;
}


span.corners-top {
	background-image: url("images/corners_left.png");
}

span.corners-top span {
	background-image: url("images/corners_right.png");
}

span.corners-bottom {
	background-image: url("images/corners_left.png");
}

span.corners-bottom span {
	background-image: url("images/corners_right.png");
}

div.headerbar span.corners-top {
    background-image: url("images/corners_left2.png");
}

div.headerbar span.corners-top span {
    background-image: url("images/corners_right2.png");
}


span.corners-top, span.corners-bottom, span.corners-top span, span.corners-bottom span {
	font-size: 1px;
	line-height: 1px;
	display: block;
	height: 5px;
	background-repeat: no-repeat;
}

span.corners-top {
	background-image: none;
	background-position: 0 0;
	margin: 0 -5px;
}

span.corners-top span {
	background-image: none;
	background-position: 100% 0;
}

span.corners-bottom {
	background-image: none;
	background-position: 0 100%;
	margin: 0 -5px;
	clear: both;
}

span.corners-bottom span {
	background-image: none;
	background-position: 100% 100%;
}

.headbg span.corners-bottom {
	margin-bottom: -1px;
}

.post span.corners-top, .post span.corners-bottom, .panel span.corners-top, .panel span.corners-bottom, .navbar span.corners-top, .navbar span.corners-bottom {
	margin: 0 -10px;
}

.rules span.corners-top {
	margin: 0 -10px 5px -10px;
}

.rules span.corners-bottom {
	margin: 5px -10px 0 -10px;
}

Thanks in advance for any assistance.

Martin

Hi guys
I've succeeded doing rounded boxes (modules) in Joomla ( www.joomla.org ) and well, I'm having a little problem now

I've tested these modules by putting only text with them, but when I tried putting only 1 image, the module got "corrupted" and broken

Look:



And here is the code:

Code:

div.module-round h3, div.moduletable-round h3 {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1em;
	font-weight: bold;
	color: #333;
	margin: -2px -8px 0 -8px;
	border-bottom: 1px solid #cdcdcd;
	padding-left: 10px;
	padding-bottom: 2px;
	background-color: white;
}
div.module-round, div.moduletable-round {
	background: url(../images/tl.jpg) 0 0 no-repeat;
	margin: 0;
	padding: 0;
	margin-bottom: 5px;
	margin-left: 2px;
	width: 120px;
	background-color: white;
	height: 100%;
}
div.module-round div, div.moduletable-round div {
	background: url(../images/tr.jpg) 100% 0 no-repeat;
}
div.module-round div div, div.moduletable-round div div {
	background: url(../images/bl.jpg) 0 100% no-repeat;
}
div.module-round div div div, div.moduletable-round div div div {
	background: url(../images/br.jpg) 100% 100% no-repeat;
	padding: 8px;
	width: auto !important;
	width: 100%;
}
div.module-round ul, div.moduletable-round ul {
	margin: 10px 0;
	padding-left: 20px;
}

Does any1 know how to make the module to adjust automatically if I put an image (only) on it ?

I don't have problem with text or text+images, but when I put only an image, it shows bad

Thanks a lot in advance

i have a problem with my rollovers. they work fine in ff and safari, and shockingly do not work in ie6. i've been at it for a couple of days now, and can't seem to make headway on it.

i'm also new to this forum, so im hoping i do this right:

html:

<div id="banner"><img src="assets/banner.png" alt="xxx" width="450" height="145" border="0" />
<ol>
<li><a href="index.html" id="home">home</a></li>
<li><a href="about.html" id="about">Aboutx</a></li>
<li><a href="portfolio.html" id="portfolio">xPortfolio</a></li>
<li><a href="services.html" id="services">Servicesx</a></li>
<li><a href="news.html" id="news">Latest News</a></li>
<li><a href="contact.html" id="contact">Contact </a></li>
</ol>
</div>

css:

@charset "utf-8";
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
}
body {
background-color: #000000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-repeat: repeat-y;
}
div {
background-position: center;
}

#container {
width: 100%;
background-color: #0000000;
}
#containertopout {
width: 100%;
background-image: url(topbg.png);
background-repeat: repeat-x;
height: 300px;
}
#containertopin {
width: 900px;
margin-right: auto;
margin-left: auto;
}
#banner {
height: 245px;
width: 450px;
float: left;

}
#flash {
width: 450px;
float: left;
padding: 0px;
top: auto;
height: 228px;
margin-top: -0.7em;
margin-right: auto;
margin-bottom: -20px;
margin-left: auto;
}
#flashcontent {
margin: 0px;
padding: 0px;
height: 228px;
width: 450px;
}
#footer {
display: inline;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width: 850px;
}


#containermiddle {
width: 850px;
margin-right: auto;
margin-left: auto;
background-repeat: repeat-y;
background-color: #000000;
float: none;
padding: 0px;
}
#body {
background-repeat: repeat-y;
background-color: #000000;
}
#containerbottomout {
width: 100%;
background-image: url(botbg.png);
background-repeat: repeat-x;
height: 120px;
clear: both;
overflow: auto;
}
#containerbottomin {
width: 850px;
margin-right: auto;
margin-left: auto;
clear: both;
float: none;
}


.col1 {
border-right-width: 2px;
border-right-style: ridge;
border-top-color: #071E3C;
border-right-color: #071E3C;
border-bottom-color: #071E3C;
border-left-color: #071E3C;
}
#navlinks li {
display: inline;
list-style-type: none;
margin-left: 0.25em;
padding-left: 0.5em;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #18457B;
}
#navlinks .first {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
margin-left: -0.75em;
}
#navlinks a {
font-size: 10px;
}


p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.5;
color: #4480d5;
}
#navlinks p {
margin-top: -1.5em;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#navigation {
padding-top: 1em;
text-align: center;
}


.style1 {
font-size: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF9B21;
}
.style2 {font-size: 16px}

.style3 {
color: #4480d5;
font-size: 12px;
line-height: 20px;
}
.style4 {
color: #FF9B21;
font-size: 12px;
line-height: 20px;
}

a:link {
color: #4480D5;
font-size: 12px;
line-height: 20px;
text-decoration: none;
}
a:hover {
color: #FFC51B;
text-decoration: underline;
}
a:active {
color: #4480d5;
}
a:visited {
color: #FF9B21;
text-decoration: none;
}

#banner li{
float:left;
margin-top: -0.6em;
list-style-type: none;
}

#banner a{
text-decoration: none;
display: block;
float: left;
text-indent: -5000px;
}

#banner #home {
background-image: url(navbut/home.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 75px;
height: 95px;
margin-left: -3.35em;
}

#banner #home:hover {
background-position: 0 -95px;
}

#banner #about {
background-image: url(navbut/aboutus.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 75px;
height: 95px;
}

#banner #about:hover {
background-position: 0 -95px;
}

#banner #portfolio {
background-image: url(navbut/portfolio.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 75px;
height: 95px;
}

#banner #portfolio:hover {
background-position: 0 -95px;
}

#banner #services {
background-image: url(navbut/services.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 75px;
height: 95px;
}

#banner #services:hover {
background-position: 0 -95px;
}

#banner #news {
background-image: url(navbut/news.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 75px;
height: 95px;
}

#banner #news:hover {
background-position: 0 -95px;
}

#banner #contact {
background-image: url(navbut/contact.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 75px;
height: 95px;
}

#banner #contact:hover {
background-position: 0 -95px;
}

free happy thoughts from me for whoever can help me out!

i have set up my navigation menu like so:
PHP Code:
<style type='text/css'>
   div#nav {
      border:1px solid #000000;
      background-color:#F2F2F2;
      height:auto;
   }
   div#nav a {
      display:block;
      color:black;
      border:1px solid #FFFFFF;
   }
   div#nav a:hover {
      color:red;
      border:1px solid #000000;
      background-color:white;
   }
</style>

<div class='nav'>
   <a href='page1.html'>Page 1</a>
   <a href='page2.html'>Page 2</a>
   <a href='page3.html'>Page 3</a>
   <a href='page4.html'>Page 4</a>
</div> 




the above works perfectly in Firefox, but doesnt in IE.
IE seems to keep around the fact that the <a> tag only encapsulates the text: Page 1, so the rollover effect only works in IE when the user hovers over the text and not anywhere in the row.
Does IE not understand the display:block? as i think this is whats causing it...

I have a menu with several links each of which has a span tag connected, when you hover over the link the span tag is revealed as a roll over text.

However I have also made the whole page (the page size is controlled by JavaScript) an anchor tag and placed a span for that, so there is a default text which is replaced by the other roll over text. This works fine in Firefox.

However, I'm having problems getting this to work properly in IE6. It doesn't reveal the span for the whole page, although the other links are ok, it also reveals the text if I hover over where the rollover text appears. I have validated the CSS and XHTML.

Is there a way to fix this or am I going to have to go back to JavaScript?

[code]
css:
body {
background: url(images/sips_menu.gif) no-repeat;
}

a.con {
z-index: 1;
}

a.menu {
z-index: 2;
}

/*set whole page as an invisible link*/

a.con:link,a.con:visited,a.con:hover,a.con:active {
background-color: transparent;
display: block;
border: none;
position: absolute;
top: 0px;
left: 0px;
width: 790px;
height: 540px;
text-decoration: none;
cursor: default;
}

/*set span for whole page as visible only when hovering over page*/

a.con span {
display:none;
}

a.con:hover span {
color: black;
font-weight: normal;
display: block;
text-decoration: none;
font-size: 11px;
font-family: arial, sans-serif;
text-align: left;
position: absolute;
top: 125px;
left: 580px;
width: 170px;
height: 150px;
}

/*menu links - when mouse is over these it is not over general page anchor*/

a.menu:link,a.menu:visited,a.menu:hover,a.menu:active {
background-color: white;
border: 1px solid black;
color: #617AB2;
font-size: 12px;
font-weight: bolder;
font-family: arial, sans-serif;
text-decoration: none;
text-align: left;
padding: 4px 6px 4px 6px;
}

a.menu:hover {
color: red;
}

/*menu link rollover text visible when mouse over*/

a.menu span {
display: none;
}

a.menu:hover span {
color: black;
font-weight: normal;
display: block;
}

/* Ids to position each of the menu links */

#one {
position: absolute;
top: 180px;
left: 20px;
}

#two {
position: absolute;
top: 250px;
left: 250px;
}

#three {
position: absolute;
top: 380px;
left: 220px;
}

#four {
position: absolute;
top: 320px;
left: 420px;
}

#five {
position: absolute;
top: 450px;
left: 565px;
}

/* Ids to position the span tags*/
#a {
position: absolute;
top: -55px;
left: 560px;
width: 170px;
}

#b {
position: absolute;
top: -125px;
left: 330px;
width: 170px;
}

#c {
position: absolute;
top: -255px;
left: 360px;
width: 170px;
}

#d {
position: absolute;
top: -195px;
left: 160px;
width: 170px;
}

#e {
position: absolute;
top: -325px;
left: 15px;
width: 170px;
}

xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title>title</title>
<link rel="stylesheet" href="menu.css" type="text/css" />
</head>
<body>
<p><a class="con" href="#"><span>text</span></a></p>
<p><a class="menu" id="one" href="#">link<span id="a">rollover text</span></a><br /></p>
<p><a class="menu" id="two" href="#">link<span id="b">rollover text</span></a><br /></p>
<p><a class="menu" id="three" href="#">link<span id="c">rollover text</span></a><br /></p>
<p><a class="menu" id="four" href="#">link <span id="d">rollover text</span></a><br /></p>
<p><a class="menu" id="five" href="#">link<span id="e">rollover text</span></a><br /></p>
</body>
</html>

I am just learning CSS and I found this site and they have a step through example, but I am having problem where they use

body.about dt#about,
body.about dt#about a,
body.services dt#services,
body.services dt#services a,
body.portfolio dt#portfolio,
body.portfolio dt#portfolio a,
body.contact dt#contact,
body.contact dt#contact a {
background-position: 0 -100px;
}

to select different parts of an image to display. Also, supposedly, you put in the body tag of the index.html file
<body class="about">

and it is supposed to use the about image, but I am unsure how to enable the others. Anyone have an idea. The code is too much to post here, but I could possibly email it if anyone needs it.

Does anyone have have an idea of why the problem I am about to describe is happening?

View this link in IE 6:
paintingshiva.com / 2006rd / www / template / gallery.html

can't post url.. take out spaces between slashes
URL


This site is a prototype for my website that I am redesigning. The page above will be one of the gallery pages. Right now, I ma using colored circles as placeholder content.

Rollover the right side ART navigational elements (colored circles).

The weird circumstance:
When I rollover, two different nav elements one after another (except for the first one), the div where the title elements are, fold up into the main content area (where the large colored circle is). But if you rollover the first one after this happens, everything goes back to normal.

I can not figure out why this is happening.

I built the ART navigational elements by adding a background image to the style of the anchor tags. There is also a JavaScript at the top of the page that is changing the style of each element to make the rollover effect.

Hi there, well as i said i need some help from any CSS gurus.

I've been using the Trifecta rollever code ever since i found it in almost every page i've done. Just this week i found out that for some reason in IE when i use the vertical version of it, there's a 3px margin above the menu. I've tried changing every setting and resetting most elements margins, padding, and borders to 0 to no avail. I keep getting that ugly 3px margin.

Here's the latest example:

Example

You'll see the problem in the left and right hand menus, under Bussiness and under Client Zone, in both, the distance between the image and the first menu item should be zero. But IE shows an ugly 3 px margin ( btw, in the Bussiness side there's a bigger margin because i set it like that, but still there's an extra 3px..).

Here's the code used which is the exact code i took from the web and i just adapt it whenever.
This is from the menu on the right ( CLient Zone ), if you check it under IE, be it version 6 or 7 you'll see a 3 px margin on top of the menu...


Code:

#menu2{
			margin-bottom:6px;
			padding:0;
			border:0;
		}
		
		
		/* NAVIGATION BUTTONS 2*/
			.cssnav2	{
						position:relative;
						font-family: arial, helvetica, sans-serif;
						background-image:  url(../images/menus/menu2_on_1.gif);
						background-repeat: no-repeat;
						white-space: nowrap;
						display: block;
						width: 165px;
						height: 28px;
						margin: 0; 
						padding: 0; 
			}
			.cssnav2 a {
						display: block;
						color: #000000;
						font-size: 11px;
						width: 165px;
						height: 28px;
						display: block;
						float: left;
						color: black; 
						text-decoration: none;
			}

			.cssnav2 img {width: 165px; height: 28px; border: 0; }
			* html a:hover {visibility:visible}
			.cssnav2 a:hover img{visibility:hidden}

			.cssnav2 span {
						position: absolute;
						left: 40px;
						top: 0;
						line-height:28px;
						margin: 0px;
						padding: 0px;
						cursor: pointer;
						width: 118px;
						height: 28px;
						text-align: left;
						color:#646565;
						font-family:Arial, Helvetica, sans-serif;
			}

Thanks for any help.

Edit: I found something about a 3px bug with IE and floats, but i dont know if it applies in this case because first im not using floats and secondly that bug is supposed to be gone in IE 7.

Hi all,
I'm sure this is an easy fix, but I can't get it.
I have a javascript rollover image swap, and can only get it to validate if I don't use the border="0" attribute.
The site is to be pure css, but the course requires me to use some javascript to show understanding.
So it works fine, but showing a blue border in ie, and a red border in mozilla.
My question is, if you can help, how to hide/get rid of the border, and have validate at the same time. Cheers Solar.

html link http://darkspeed.atspace.com/Javascript.htm

css link http://darkspeed.atspace.com/speedstyle.css

the div is #roll, hope this makes sense.. thanks.

And if I'm doing it all wrong any advice would be appreciated..
Thanks again.