|
CSS - Form Item Size With Css
I understand enough CSS to get things done, but there is one issue that I can not seem to get my head around.
All the tutorials I have seen on styling forms with CSS leave the form items a set width. The problem is that this is not very flexible. A text input field for example may need to be short in one usage for entry of things like 6 digit numbers or long for example a URL. A text area might be used for something small like a comment or for editing a large HTML. Can you give me a idea on how you make sure that the "Text input" and "text area" elements of your forms match the length of the data the user needs to input? How do you manage it? Similar TutorialsHi I am creating a navigation bar using unsorted list and CSS. I have given my CSS and HTML code here Code: #navcontainer
{
width: 200px;
margin-top:150px;
}
#navcontainer ul#navlist
{
width:200px;
clear:left;
text-align:left;
margin-left:0;
padding-left:0;
list-style:none;
font-size: 12px;
font-weight:bold;
line-height: 14px;
}
#navcontainer ul#navlist li
{
margin-left:0;
padding: 0px;
display: block;
list-style:none;
border-bottom: 1px solid gray;
}
#navcontainer ul#navlist li.last
{
border-right: 0;
background:none;
}
a.linkText {
padding: 10px;
display: block;
color : #444444;
font-family : arial;
font-size : 11px;
font-weight : bold;
text-decoration : none;
height:25px;
}
a.linkText:link {
color : Aqua;
/* you can define other styles if necessary */
}
a.linkText:visited {
color : Maroon;
/* you can define other styles if necessary */
}
a.linkText:hover {
color : Blue;
}
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li><a class="linkText" href="#">Item One</a></li>
<li><a class="linkText" href="#">Item two</a></li>
<li><a class="linkText" href="#">Item three</a></li>
<li><a class="linkText" href="#">Item four</a></li>
<li><a class="linkText" href="#">Item five</a></li>
</ul>
</div>
The problem is, when I select the next list item, previously selected list item should come to the original color. Is there any way I can achieve this? Your guidence will be appreciated. Many thanks I'm trying to reduce the amount of real estate that a form and button are taking up in my table. They are expanding the whole row and lining them up with the other contents isn't working in the CSS methods I've tried. Finally I tried reduce the font-size of the cell containing the form and button (all the way down to 1px) which gives the desired result... but I'm a bit concerned about implementing it into all the tables in the site because it seems a bit 'hacky'. Is there a better way to do this? My Webpage You'll see in the first table, final column containing the button, that the button and form and pushed up against the top of the cell and the other cells now have more padding. In the second table, my "font-size:1px" has been applied and gives the desired result. Just curious if there is a better way to do this or if this is will be fine. Hi there, I'm completely new to CSS. I'm trying to do this more than one hour but can't get it right. Code: <font color='white'><font size='1' face=verdana size=1> I couldn't find the equivalent of this in CSS This is my last experiment but it doesn't seem to work either Code: fontstyle { color : #FFFFFF; font-family : verdana ; font-size :1;}
Thanks So when using Netscape 7.2 & Opera 7.5 and MSIE 6.0, How do you get a simple tag like body { font-size:small; } to be equal in all browsers? Setting IE Text Size to Medium, and Opera's Zoom to 100% (both defaults) and Netscape 7.2 to 120% (not the default) is one way, but is there a CSS way? By the way, the child element hack "body>div {property}" wasn't working no matter what I tried, by not working I mean to say Netscape never would read it or apply it. It appeared to be that Opera & IE need to read the same value while Netscape needs to apply a larger size to be equal to IE's and Opera's rendering. B I could see this as potentially being really easy to do or really hard to do. I'm hoping for the former. Suppose I have 3 divs, A, B, C and that I want the total width of A + B + C to equal the width of the screen. Suppose also that I want them to be inline. How can I have B to be a fixed width while A and C expand depending on the screen width (such that the width of A = the width of C)? I'm trying to use a simple background image to dress up my navigation tabs. When I set the <li> to a fixed with and height, both FF and IE ignore this; thus my graphic gets chopped off when the navigation tab is shorter than the graphic. I'm scratching my head and have tried just about everything. Here's How it is Presenting-Link to my Website Here's my css: Code: li.navbg {
width: 75px;
height: 20px;
display: inline;
margin-right: 5px;
padding-top: 5px;
padding-bottom: 3px;
padding-left: 7px;
padding-right: 5px;
background-image: url(/images/navbg.png);
background-attachment: scroll;
background-position: bottom center;
background-repeat: no-repeat;
list-style: none;
background-color: #000;
}
My xhtml is a simple: Code: <li class="navbg">Navigation Title</li> My gratitude ahead of time! I swear this question gets asked every other day but I cannot find any thread that has a solution for me. I need to center the following: 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>Search Home</title>
<style type="text/css">
#search_items{ margin: 0 auto; }
</style>
</head>
<body>
<div id="search_items">
<form method="get" action="#" id="advanced_search">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table cellpadding="4" cellspacing="0">
<tr>
<td><!--trh2-->
<strong>Appliance</strong>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="search_input">
<tr>
<td valign="middle">
<input type="text" name="q" size="32" maxlength="256" value=""/>
</td>
<td valign="middle">
<input type="submit" name="btnG" value="Search"/>
</td>
<td class="more_options">
<a href="#">Advanced Search</a>
<br/>
<a href="#">Search Tips</a>
<br/>
</td>
</tr>
<tr>
<td colspan="2"/>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
</body></html>
And I thought that the margin: 0 auto did it but it is not quite working. Kravvitz to preempt what I know will be a question from you, I am using tables because this is HTML generated by a Google search appliance so I'm just trying to work with what they give me :-) this is my CSS only tooltip, how to make that tooltip to bi on top of every item it is used for Code:
<style>
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:230px; ;}
a.tooltip:hover span{display:block; position: absolute;top:; border:1px solid #cccccc; background:#ffffff; color:#6c6c6c; font-size:12px;}
a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/
</style>
<table width="768" border="1" align="center">
<tr>
<td>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<a href="{url_download}" class="tooltip">
<div class="progress-bar" style="width:300px; float:left;">
--------------------------------------------
</div>
<span>
<div>
<strong>File Size:</strong> {filesize_value} (KB)<br>
<strong>Downloads:</strong> {hits_value}<br>
<strong>Added:</strong> {created_date_value}<br>
{description}
{screenshot_begin}<img src="{screenshot}" align="right" />{screenshot_end}
</div>
</span>
</a>
<div class="seperate" style="float:left;"></div>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href="{url_download}" class="tooltip">
<div class="progress-bar" style="width:300px; float:left;">
--------------------------------------------
</div>
<span>
<div>
<strong>File Size:</strong> {filesize_value} (KB)<br>
<strong>Downloads:</strong> {hits_value}<br>
<strong>Added:</strong> {created_date_value}<br>
{description}
{screenshot_begin}<img src="{screenshot}" align="right" />{screenshot_end}
</div>
</span>
</a>
<div class="seperate" style="float:left;"></div>
</td>
</tr>
</table>
I've been struggling with this a bit. I would rather not use a container div for my lists, but it seems that it's not possible to assign the lists themselves a width. When I assign a width to the <ol> element, I lose the numbers under the margin on the left, which I can sort-of understand. If I assign a width to the <li> elements, it works fine in Firefox, but IE drops the number on the first <li> and changes the numbers on each following <li> to "1". I have a navigation menu that uses ul and li for its headings. I also have a javascript that gets called on hover of the menu items. I would like a different script called for hovering over each menu item (so a different action happens for each item). What is the best way to achieve this? Can I have different styles for the menu items? Code:
<html>
<head>
<title>Hi</title>
<script type="text/javascript" src="jquery.js"></script>
<script src="hoverIntent.js" type="text/javascript.</script>
<script type="text/javascript">
$(document).ready(function () {
$("#nav a").append("<em></em>");
$("#nav a").hoverIntent(function () {
$(this).find("em").animate({ opacity: "show", top: "-34" }, "fast");
var hoverText = $(this).attr("title");
$(this).find("em").text(hoverText);
}, function () {
$(this).find("em").animate({ opacity: "hide", top: "-43" }, "fast");
});
});
</script>
<style type="text/css">
body {
margin: 0px;
}
#nav {
border-top: 2px solid #000;
border-bottom:2px solid #000;
width: 100%;
height: 36px;
line-height: 36px;
float: left;
background:url("images/OFF2.gif") repeat-x top left;
}
#nav ul {
list-style: none;
width: 900px;
margin: 0 auto;
padding: 0;
position:relative;
}
#nav li {
float: left;
}
#nav li em {
background: url(images/home.png) no-repeat;
width: 180px;
height: 45px;
position: absolute;
top: -43px;
left: 160px;
padding: 20px 12px 10px;
z-index: 1; display: none;
}
#nav li a {
font-family:"Georgia", "Sans-Serif";
display: inline-block;
text-decoration: none;
font-size:medium;
padding: 0px 5px;
text-align:center;
color: #000;
width:110px;
height: 36px;
line-height: 36px;
background:transparent url("images/off.gif") no-repeat top right;
}
#nav li a:hover {
font-family:"Georgia", "Sans-Serif";
display: inline-block;
text-decoration: none;
font-weight:bold;
font-size:medium;
padding: 0px 5px;
width:110px;
height: 36px;
line-height: 36px;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">Option1</a></li>
<li><a href="#">Option2</a></li>
<li><a href="#">Option3</a></li>
<li><a href="#">Option4</a></li>
<li><a href="#">Option5</a></li>
<li><a href="#">Option6</a></li>
</ul>
</div>
</body>
</html>
Is there a clean way to display an element right next to a floated div that will have a changing width? I have an element I'm floating left, with max-width set (using an IE hack for IE). What I want is for my right floated div to display immediately after the left floated one. It's displaying a headline and a date. The reason they are not in teh same container is that if the headline is rather long I'm letting the text wrap. Thanks! Hi Guys, I have what i think is a rather odd problem and i have not seen it before. I have just finished creating a wordpress template for my blog which can be found at http://www.mobileshop.com/blog i have pretty much got everything sorted (except Safari pushing the RSS info down) but i have one strange problem in IE. If you look on the right hand bar in a non IE browser you can see that the lists all have a little icon of a phone as the bullet points. Now if you switch to IE then you will see that the first item of each list is missing the phone icon. Even if i swap it back to normal bullets it still misses the first one off. The <li>'s all seem structured fine in the html and my css is as follows... Code:
#rightbar ul li ul {
background: #fff url(images/cat-bg.gif);
background-repeat: repeat-y;
color: #03036a;
padding: 8px;
margin: 0;
margin-top: 0;
}
#rightbar ul li ul li {
margin: 0;
margin-left: 20px;
padding: 0;
line-height: 20px;
list-style-image: url(images/phone-bullet.png);
background: none;
font-size: 120%;
width: 210px;
}
I know its probably not the best code but i cannot for the life of me work out why IE does not display the icon for the first <li> item, anyone have any ideas? Thanx Hi all, and thanks for reading. The following code looks fine in Firefox, but has huge spaces between the images in IE 6. CSS: Code:
#menu {float:left; width:157px; background-color:#FFFFFF;}
#menu IMG {display:block; margin:0; padding:0;}
#menu UL {list-style-type:none; margin:0; padding:0; background-color:#FFFFFF;}
#menu UL LI {margin:0; padding:0;}
HTML: Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
...
<div id="menu">
<ul>
<li><a href="../balloons/" title="Balloons"><img src="../images/menu-balloons.gif" alt="Balloons" width="157" height="37" border="0" /></a></li>
<li><a href="../centerpieces/" title="Centerpieces"><img src="../images/menu-centerpieces.gif" alt="Centerpieces" width="157" height="37" border="0" /></a></li>
<li><a href="../supplies/" title="Supplies"><img src="../images/menu-supplies.gif" alt="Suppliers" width="157" height="37" border="0" /></a></li>
<li><a href="../contact/" title="Contact Us"><img src="../images/menu-contact.gif" alt="Contact Us" width="157" height="37" border="0" /></a></li>
<li><a href="../" title="Home"><img src="../images/menu-home.gif" alt="Home" width="157" height="37" border="0" /></a></li>
</ul>
</div>
Thanks in advance. -colin Please look at the bottom of this page in FF - http://certified.tmhdesign.com The li elements have a margin-left or the ul a padding left. Can someone help me out? Here is my css ul#hp_offers{ width:600px; margin:0 0 0 10px; border:1px solid #e0e0e0; } ul#hp_offers li{ padding:3px 5px 3px 25px; border-bottom:1px solid #e0e0e0; list-style:none; list-style-type:none; margin:0; } li.even{ background: #f1efef url(../images/offer_even_bullet.gif) no-repeat 10px 7px; } li.odd{ background: #e0e0e0 url(../images/offer_odd_bullet.gif) no-repeat 10px 7px; } Hey everyone, After doing some reprogramming of the site I was making I'm having troubles with lists. I can't set the width of the li or a so that the size takes shape. I can't figure out why, or how to do it. I know I've done it before but the code i used there just doesn't seem to want to work. The LI and A tags take the size of the text within. I've checked the resources I could find in the sticky and that kravitz gave me and they seem to be able to set width but it's just not working. here is my css Code:
#menu{
width:750px;
border:thin solid #000000;
}
#menu ul{
margin:0;
padding:0;
width:750px;
display:inline;
}
#menu li{
width:150px;
display:inline;
border:thin solid #000000;
list-style-type:none;
background-color:#550210;
}
#menu a{
width:150px;
}
If I take out the display:inline the width takes shape but when I put it back in it resizes to the size of the text within. Hey Guys, was hoping someone could look at my code and tell me what is wrong. My website (http://www.ecbsa.co.za/) refuses to show what page i am on in the menu by highlighting it etc. Here is the CSS: Code:
/* - - - BASIC styles [ MANDATORY ] - - - */
.menu, .menu ul {
margin: 0;
padding: 0;
border: 0;
font-family: arial, Calibri, "Trebuchet MS", sans-serif;
font-size: 11px;
line-height:1.3em;
list-style-type: none;
display: block;
height:44px;
}
.menu li {
margin: 0;
padding: 0;
border: 0;
display: block;
float: left; /* move all main list items into one row, by floating them */
position: relative; /* position each LI, thus creating potential IE.win overlap problem */
z-index: 5; /* thus we need to apply explicit z-index here... */
}
.menu li:hover {
z-index: 10000; /* ...and here. this makes sure active item is always above anything else in the menu */
white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)
see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */
}
.menu li li {
float: none;/* items of the nested menus are kept on separate lines */
}
.menu ul {
visibility: hidden; /* initially hide all submenus. */
position: absolute;
z-index: 10;
left: 0; /* while hidden, always keep them at the top left corner, */
top: 0; /* to avoid scrollbars as much as possible */
}
.menu li:hover>ul {
visibility: visible; /* display submenu them on hover */
top: 100%; /* 1st level go below their parent item */
}
.menu li li:hover>ul { /* 2nd+ levels go on the right side of the parent item */
top: 0;
left: 100%;
}
/* -- float.clear --
force containment of floated LIs inside of UL */
.menu:after, .menu ul:after {
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
.menu, .menu ul { /* IE7 float clear: */
min-height: 0;
}
/* -- float.clear.END -- */
/* -- sticky.submenu -- */
.menu ul {
background-image: url(empty.html); /* required for sticky to work in IE6 and IE7 - due to their (different) hover bugs */
padding: 10px 20px 20px 20px;
margin: -10px 0 0 -20px;
/* background: #fcfcfc;*/ /* uncomment this if you want to see the "safe" area.
you can also use to adjust the safe area to your requirement */
}
.menu ul ul {
padding: 20px 20px 20px 10px;
margin: -30px 0 0 0px;
}
/* -- sticky.submenu.END -- */
/* - - - DESIGN styles - - - */
/* main upper bar */
#main-nav {
background: url(img/_ui/main_nav.jpg) left top no-repeat;
width:967px;
height:44px;
text-align: center;
}
.menu {
width:967px;
}
/* main upper bar */
.menu, .menu ul li {
color: #ff6600;
}
.menu ul {
width: 45em;
}
.menu a:active{
text-shadow: #006699 1px 1px 2px;
color: #ff6600;
padding: .5em 3.5em;
display: block;
position: relative;
}
.menu a {
text-shadow: #006699 1px 1px 2px;
color: #fff;
padding: .5em 3.5em;
display: block;
position: relative;
}
.top-level {
width:59px;
margin-top: 5px;
/*padding-top:2.0em;*/
line-height: 1.1em;
font-size:11px;
}
.menu ul li a ul li {
text-align: left;
}
.menu a:hover, .menu li:hover {
text-shadow: #006699 1px 1px 2px;
display: block;
color: #FAA93B;
}
.menu a:active {
text-shadow: #006699 1px 1px 2px;
color: #ff6600;
padding: .5em 3.5em;
display: block;
position: relative;
}
/* submenu hover colours */
.menu li li a:hover {
display: block;
color: #F89624;
background-color:#D9D4CE;
}
.menu ul>li + li { /* and remove the top border on all but first item in the list */
border-top: 0;
}
.menu li li:hover>ul { /* inset 2nd+ submenus, to show off overlapping */
top: 5px;
left: 90%;
}
#lhs {
background-image: url(img/_ui/lhs_bg_20080401.jpg);
background-position: right top;
background-repeat: repeat-y;
}
.lhs_div {
height:1px;
text-align:right;
background-image: url(img/_ui/lhs_dotted_div_333.png);
background-position: right middle;
background-repeat: no-repeat;
}
And here is the HTML: Code: <!-- menu updated 20091218 -->
<div id="main-nav">
<ul class="adxm menu">
<li><a class="top-level" a href="<%=getCurrentAttribute('site','homepageurl')%>"><b>Home<br>Page</b></a>
</li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#506169; "></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#82A2B1; "></li>
<li><a class="top-level" href="http://www.ecbsa.co.za/FAQ"><b>FAQ<br>(Questions)</b></a></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#506169; "></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#82A2B1; "></li>
<li><a class="top-level" href="http://www.ecbsa.co.za/Information"><b>Info<br>(Information)</b></a></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#506169; "></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#82A2B1; "></li>
<li><a class="top-level" href="http://www.ecbsa.co.za/New-Contractors"><b>New<br>Contractors</b></a>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#506169; "></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#82A2B1; "></li>
<li><a class="top-level" href="http://www.ecbsa.co.za/Contact-Us"><b>Contact<br>Us</b></a></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#506169; "></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#82A2B1; "></li>
<li><a class="top-level"><b><br></b></a></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#506169; "></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#82A2B1; "></li>
<li><a class="top-level" href="https://checkout.netsuite.com/app/center/nlvisitor.nl/c.1123442/n.1/sc.6/.f"><b>My<br>Account</a></b></li>
</ul>
</div>
<!-- menu updated 20091218 -->
<br><br>
</td></tr>
<!-- LOGOS AND TABS -->
</table>
</div>
Hi, I have asp menu in my aspx page. There are 3 menu items. If the user clicks on a menu item, I want to highlight the menu with a different color and by default the other menu items should have another color. So only the currently selected menu, should have the different color, and the other menu items should have the default color. How to achieve this? Thank you I'm working on a Shopping Cart, and when I go to view_cart.php to view the shopping cart within the browser, everything is great Quote: Item Name Qty Price However, when I click the Order button, the order gets emailed, and it's not correct. For example, there's an item named Money Paddle. In the email, it shows like: Quote: Money Pa! ddle The item that gets messed up, is the item after an item that takes up 2 lines. (The item that shows up on 2 lines, is: The Vanishing Box- Make small objects disappear...) So, the items will show up as: Quote: Silk Shoes 1 x $19.99 The Vanishing Box- Make small objects 2 x $9.99 disappear... Mega Bal! l & Vase 1 x $4.99 Amazing Magic Set 1 x $4.44 I checked the database to verify there are no special characters or anything, and it all seems fine. So not sure what I'm missing to have it display correctly, but here's the code to email the message: PHP Code: $recipient = "orders@domain.com"; $subject = "Order"; $mailheaders = 'From: <mailing@domain.com>'."\r\n"; $mailheaders .= 'Reply-To: mailing@domain.com'."\r\n"; $mailheaders .= 'Return-Path: <mailing@domain.com>'."\r\n"; $mailheaders .= 'Content-type: text/html; charset="ISO-8859-1"'."\r\n"; $sent = mail($recipient, $subject, $display, $mailheaders); I have tried several times, and it always shows up the same way in the email only. The browser is fine when displaying the cart. I'm assuming, it may have to do with the php code itself, as this only happens with the item after the 2 liner (regardless of the next item) PHP Code: $sql_view = "SELECT `id`, `user_string`, `item_code`, `quantity` FROM `cart` WHERE user_string = '$user_string'"; $result_view = mysql_query($sql_view, $conn) or die(mysql_error()); if (mysql_num_rows($result_view) > 0) { $subtotal == 0; $display .= "<div style=\"width:250px; float:left;\">Item Name</div><div style=\"width:50px; float:left;\">Qty</div><div style=\"width:100px; float:left;\">Price</div><br />"; $display .= "<div style=\"clear:both;\"> </div>"; while($row = mysql_fetch_array($result_view)) { $id = $row['id']; $item_code = $row['item_code']; $quantity = $row['quantity']; $sql_item = "SELECT `item_name`, `msrp`, `image` FROM `products` WHERE item_code = '$item_code'"; $result_item = mysql_query($sql_item, $conn) or die(mysql_error()); while($row = mysql_fetch_array($result_item)) { $item_name = $row['item_name']; $msrp = $row['msrp']; $image = $row['image']; $subtotal = ($quantity * $msrp) + $subtotal; $display .= "<div style=\"width:250px; float:left;\">" .$item_name . "</div><div style=\"width:50px; float:left;\">" . $quantity . " x </div><div style=\"width:100px; float:left;\">$" . $msrp . "</div>"; $display .= "<div style=\"clear:both;\"></div>"; } } $display .= "<div style=\"width:340px; text-align:right; padding-right:10px; padding-top:10px; border-top:1px solid black;\">$".$subtotal."</div>"; } $recipient = "orders@domain.com"; $subject = "Order"; $mailheaders = 'From: <mailing@domain.com>'."\r\n"; $mailheaders .= 'Reply-To: mailing@domain.com'."\r\n"; $mailheaders .= 'Return-Path: <mailing@domain.com>'."\r\n"; $mailheaders .= 'Content-type: text/html; charset="ISO-8859-1"'."\r\n"; $sent = mail($recipient, $subject, $display, $mailheaders); if ($sent) { // $sql_delete = "DELETE FROM `cart` WHERE `user_string` = '$user_string'"; // $result_delete = mysql_query($sql_delete, $conn) or die(mysql_error()); header("Location:view_cart.php?error=no"); exit; } else { header("Location:view_cart.php?error=yes"); exit; } (I know I have inline CSS right now... will correctly place them in CSS file or whatnot after I get things working properly.) Thanks for any help. If you need further info, let me know. (If this belongs in PHP, move it accordingly.) Hi, I need to adjust only the 1st link(for 1st menu item) of my main menu. I have used pat pat template and have managed to apply a background image for the first item. Here is the css: Code: #first-suckerfish-vertical{
background:url(../images/menutop.jpg) no-repeat;
height:75px;
margin-top:-2.5px !important;
margin-top:-3px;
position:relative;
}
Now to apply style on the main menu item, i use a.mainlevel. but i cant use the a.mainlevel..coz it will adjust all the links. I need to apply style only to the first link of my menu. I am wondering if there's a way in css to access a class from another class or id. I already have this style(#first-suckerfish-vertical) for the 1st menu item. is it possible now to access the a.mainlevel from it.. Thx I am having trouble with my navigation. it works fine in safari and firefox, but when i try it in IE for the PC the main navigational elements don't move. does anyone know why? www.iconiqdesigner.com thanks! |
|||||||