|
CSS - Doctype Fixes Div Height But Kills My Rollovers
Hi, I have added the following doctype to my XHTML document:
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" xml:lang="en" lang="en">
This fixes several design problems, but my rollovers don't work anymore. Am I using the right doctype? here's the site, if you'd like to have a look: http://www.caillouette.com/Utilitrek/eight/services.php How should I trouble shoot this? thanks -S Similar TutorialsFirst, the site is, http://www.silver-dawn.net Now, my problem is that when I do not have an XHTML 1.0 Transitional doctype in, the page stretches perfectly to the bottom, as it should. But when I add this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> It doesn't stretch the way it should. Now, I'm assuming there's something messed up with my CSS, but I'm still new at it, so I can't figure out what is causing this. Here is my CSS: Code:
html body
{
margin:0px;
background: url(http://www.silver-dawn.net/images/sdr/bgbig.jpg) repeat-x;
background-color:#222239;
width:100%;
height:auto!important;
height:100%;
text-align:center;
}
#expand
{
width:764px;
height:auto!important;
height:100%;
min-height:100%;
color: #FFF;
background: url(http://www.silver-dawn.net/images/sdr/centertile2.jpg);
margin-left:auto;
margin-right:auto;
text-align:left;
}
html>body #menubuttons li{padding-top:6px;}
#content
{
width:750px;
padding:0px;
margin-left:7px;
margin-top:0px;
margin-bottom:0px;
}
#menu
{
width:752px;
height:25px;
background: #242449;
margin-left:7px;
margin-top:0px;
padding-top:0px;
font-size:70%;
}
#content p
{
padding-left:20px;
padding-right:10px;
padding-top:10px;
font-family:arial;
font-size:70%;
margin:0px;
}
#step
{
font-size:110%;
font-family:arial;
margin-bottom:0px;
padding-bottom:5px;
padding-left:10px;
margin-top:0px;
}
#expandbottom
{
width:764px;
color: #FFF;
background: url(http://www.silver-dawn.net/images/sdr/bottombg2.jpg);
margin-top:0px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
text-align:center;
font-size:70%;
font-family:arial;
}
#menuButtons ul
{
margin:0;
margin-left:7px;
padding: 0;
list-style-type: none;
}
#menuButtons li
{
height:15px;
width: 107.4px;
/*margin-right: 1em;*/
font-family: verdana;
font-size:8pt;
background: #222239;
text-align: center;
margin:0px;
margin-left:0%;
padding-top:0px;
float: Left;
border-right: 0px solid #000;
border-bottom: 2px solid #222239;
}
#menuButtons li:hover
{
background: #222c4a;
border-bottom: 2px solid #FFF;
}
If anyone can help me with this problem, I would greatly appreciate it. On my page, within the <DIV> that contains some text inside <P> tags, I have a <DIV> floated right that has some links to functions such as Print and Email and so forth. But while the links work without the float, when I apply the float, the links are not links. What could this be? I do not have the ability to attach files or images, so here's the code: Quote: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Test</title> <style> .floatright { float: right; margin: 10px; padding: 10px; border: 1px solid #666; } body, html { margin:0; padding:0; background:url("../images/IT_bg.gif") repeat-y center top; } body { min-width:900px; } #wrap { background:#FFF6CA; margin:0 auto; width:900px; } #header { background:white; } #nav { background: url(../images/nav_bg3.gif); text-align: center; overflow: hidden; height: 50px; margin: auto 0; } #main { background: white; float:left; width:690px; } #sidebar { background:#FFF6CA; float:right; width:200px; } #sidebar p { padding:0 10px 0 0; } #footer { background: url(../images/nav_bg3.gif); text-align: center; overflow: hidden; height: 50px; margin: auto 0; clear: both; } /* This controls the font for the main column */ #main_inner_wrap p { font-family: Geneva, Verdana, Arial, Helvetica, sans-serif; font-size: .9em; line-height: 1.4em; padding:0 10px; position: relative; min-height: 100%; } #main_col_left { float:left; width:150px; color: #330; line-height: 1.5em; } #main_col_right { margin-top: 0; float:right; width:540px; color: #330; background:url("../images/news_bg.gif"); background-repeat: repeat-y; } /* Top Nav Bar */ a.nav_bar { font-family: Geneva, Verdana, Arial, Helvetica, sans-serif; color: #006683; font-weight: bold; font-size: 0.75em; text-decoration: none; } a.nav_bar:visited { font-family: Geneva, Verdana, Arial, Helvetica, sans-serif; color: #006683; font-weight: bold; font-size: 0.75em; text-decoration: none; } a.nav_bar:hover { font-family: Geneva, Verdana, Arial, Helvetica, sans-serif; color: #006683; font-weight: bold; font-size: 0.75em; text-decoration: none; } a.nav_bar:focus { font-family: Geneva, Verdana, Arial, Helvetica, sans-serif; color: #006683; font-weight: bold; font-size: 0.75em; text-decoration: none; } a.nav_bar:active { font-family: Geneva, Verdana, Arial, Helvetica, sans-serif; color: #006683; font-weight: bold; font-size: 0.75em; text-decoration: none; } </style> </head> <body> <div id="wrap"> <div id="header"> </div> <div id="nav"> </div> <div id="main"> <div id="main_inner_wrap"> <div id="main_col_left"> </div> <div id="main_col_right"> <!-- Main Col Content --> <span class="story_headline">Test Story Headline</span> <div class="floatright"> <img border="0" src="./images/Blue_Print.gif" alt=""> <a href="#">Print</a><br /> <img border="0" src="./images/Blue_Email.gif" alt=""> <a href="#">Email</a><br /> <img border="0" src="./images/Blue_Discuss.gif" alt=""> <a href="#">Discuss</a><br /> <img border="0" src="./images/Blue_Share.gif" alt=""> <a href="#">Share</a> </div> <p> Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse viverra, orci venenatis consectetuer faucibus, purus nibh feugiat libero, nec pulvinar nulla orci ut lectus. Ut pellentesque pharetra erat. Proin quis lacus ut sapien ullamcorper consectetuer. </p> <p> Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse viverra, orci venenatis consectetuer faucibus, purus nibh feugiat libero, nec pulvinar nulla orci ut lectus. Ut pellentesque pharetra erat. Proin quis lacus ut sapien ullamcorper consectetuer. </p> <p> Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse viverra, orci venenatis consectetuer faucibus, purus nibh feugiat libero, nec pulvinar nulla orci ut lectus. Ut pellentesque pharetra erat. Proin quis lacus ut sapien ullamcorper consectetuer. </p> <p> Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse viverra, orci venenatis consectetuer faucibus, purus nibh feugiat libero, nec pulvinar nulla orci ut lectus. Ut pellentesque pharetra erat. Proin quis lacus ut sapien ullamcorper consectetuer. </p> <p> Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse viverra, orci venenatis consectetuer faucibus, purus nibh feugiat libero, nec pulvinar nulla orci ut lectus. Ut pellentesque pharetra erat. Proin quis lacus ut sapien ullamcorper consectetuer. </p> <p> Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse viverra, orci venenatis consectetuer faucibus, purus nibh feugiat libero, nec pulvinar nulla orci ut lectus. Ut pellentesque pharetra erat. Proin quis lacus ut sapien ullamcorper consectetuer. </p> </div> </div> </div> <div id="sidebar"> </div> <div id="footer"> </div> </div> </body> </html> Hey all, I am creating a very simple website with stylesheets. My style works perfectly in firefox, and very close in IE and Safari. Also, I havn't worked with stylesheets much so I'm no master and was looking for any critiques on my method of doing things so I might get better. It felt like I had to use far too many negative margins to get things to sit where I wanted, and I am a bit worried if the page is going to break down when resized or on mobile phones. The URL Is h t t p : / / s c h e d u l e r . f p i t e s t e r s . com / s i m p l e s t y l e (no spaces) If you load it in firefox (3.5.9) it looks just like I want it to. If you load in Internet explorer, the text in the body area is far to the right. I do not know why that is happening. If you load in safari, the yellow bar (the breadcrumbs navigation) floats all the way to the left. I don't know why it is doing that. If anyone could provide some tips on how to fix those issues, and also feel free to offer any other advice to a CSS newb, I would really appreciate it. thank you. Okay, i was just messing around with (X)HTML and CSS and was wondering if there was an easy way to do this. When viewed in Internet Explorer (6 sp1) it shows fine, the floating "menu" to the left extends the "body" division. But if I view it in FF (1.0.4) then the floating menu doesnt expand the "body" division like it does in IE. I usually fix this with (if a page doesnt have a lot of content) a lot of breaks to even it out. But is there an easier way? URL for the website so you can see it is below. (There's really almost nothing on it, just messing around with layout) http://www.omnimist.com [edit] looked at it via opera and netscape and they're the same as FireFox, but i want it to look like it does with IE...[/edit] This is where I always run into trouble. I don't know if I'm taking from the right approach but this is what I usually do and I always end up getting frustrated and taking it out of those poor IE users and just removing IE fixes completely. I usually tackle completely design a site using Firefox and then apply patches as I get around to it ( a round tuit ), but sometimes, a fix will cause other errors and it just ends up in a domino effect until my IE CSS file is bigger than my Firefox CSS and there are still problems. How should I go about this? Should I go to the ghetto with $100 and go around shooting IE users .... or better yet IE development decision makers....? I found the solution to my IE browser issues. There seems to be a new guide out there with a lot of great comments about it. The last guide I followed had a bunch of people asking for help. Hope this works. Good Day all, I've tried a few different hacks/fixes now to fix my PNG problem in IE6 but none seem to have any effect. I'm starting to wonder if this is fixable. Can anyone provide some insight as to what the problem could be? I seem to be ok in all browsers except IE6... 029c92a.netsolhost.com/brushes.html Best, Colin Hi all, a few quick q's: 1. What is best way to set-up a style-sheet for NN4 CSS? I am using @import, and I want to serve-up a NN4 CSS with link a "link rel"... 2. Can I reley upon Dreamweaver's CSS syntax checking to create my alternative/NN4 CSS? (i.e. DW will tell you if a particular attribute or style is or is-not supported by a certain browser.) 3. What is the best/fastest/your technique for building alternative style sheets (by alternative, I mean a style-sheet to feed to browsers like NN4)? 4. Should I be using the TAN hack for height also? Example: Code:
* html div { /* This is the Tan hack */
height: 130px;
hei\ght: 100px; }
/* the backslash cannot appear before the letters a to f, and A to F, and numerals 0 to 9 since doing so will turn those letters or numerals into hexadecimal numbers. */
5. (Last q) I am using an image replacement technique for my navigation (using one background sprite to create off/over/active states: INKNOISE)... It works great, except this: In Mozilla FF on PC when page loads, the background images do not ussually load... Anyone got a fix for that? Because I can't seem to find a fix, my best answer would be to create a PHP sniffer and force a page refresh. Thanks in advance! Cheers! Micky Hello, i have a very strange problem with css. I want to build a horizontal menu, like tabs. Here is the link of my site. (sorry, its in russian) http://eai.w2o.ru/default.aspx Now you can see red border around the header div. When in layout.css, I remove the border, the header div changes its position (goes down). (in IE and FF (in FF is a little better)) Can you tell me what is my mistake? How can I do the same without that border? Thank you very much! Hello, I have a problem appearing only in IE8, but I don't seem to find the exact bug and solution. In this page http://www.cracowflats.com/index.php/search/show/id/181 there is a Details area (bottom left) where titles have a green background. For some reason this green background appears in other parts of the page. In other browsers, the whole page has a white background, as it should. 1) With this code in theme.css a {color:#62860b; } h3, h4 { color: #70af1d;} .color_title { background: #76a637;color:#fff;} .logo h1 a { color: #62860b !important;} it appers everywhere and the whole background of the page is green (should be white). 2) when I add an "overflow: hidden;" here .color_title { background: #76a637;color:#fff; overflow: hidden;} it gets better, as the main area is white. But I still have a lot of green on the footer (and tabs). If I could find out to which bug it refers, it would be easier to find a solution. Any hint would be appreciated! Thanks! Luca I have noticed that sites I make is out of whack on different browsers. Like the divs using absolute positions would line up on different positions, pop up windows that open to a certain size, open smaller and scrollbars appear when I asked it not to. Is there like something a person can add, to make sure that a site you build and tested on one platform and one browser, works and looks properly on all browsers? What are the common bugs that appear and the common hack or fix for it? Thanks. I want to create a menu where when you rollover and option it changes color ... this I've done. The next thing I want is for the active page to stay the rollover color ... how do I do this? Code:
<html>
<head>
<style type="text/css">
#navcontainer { width: 200px; }
#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
#navcontainer a
{
display: block;
padding: 3px;
width: 160px;
background-color: #329CAA;
border-bottom: 1px solid #eee;
}
#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}
#navcontainer a:hover
{
background-color: #99D041;
color: #fff;
}
</style>
</head>
<body>
<table width="100%" border="0">
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td width="200"> <div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div></td>
<td> </td>
</tr>
</table>
</body>
</html>
I got most of this code from: http://css.maxdesign.com.au/listamatic/vertical08.htm how can I do a CSS rollover like the rollover that is on amazon.com? for example when you rollover an image and a box shows up with links and a search box. how is that done? is that with CSS layers? if so, how do you go about doing something like that? link: amazon example I recently found out that you can use CSS to do rollover images. And I thought, thats much better than DHTML/javascript/whichever your preference to call it is for rollovers, but my question is, if there is a way to use CSS for a transition out image. Like, say for example the image is of outlined text by default, the user mouses over the image and the text will slowly fill with orange, and then when the user mouses off of the image, the orage in the outlined text fades out. That's easily done with javascript, but I'm not sure if its possible to do with CSS. Is it? Thanks in advance. Ok, Here what I need to figure out. I have a set of images on my main page. My Site and then I have a set of images to be over put on top of them with some kind of roll over/over lay. these images look like this Rollover images. on my main page if you hit refresh the photo gallery image is random from a directory. This removes the posablity of static images for that. my current css is at http://www.guthnur.net/style.css. Can anyone tell me how to put my transparent image over a image in the same div? delete Hi, Now that the Information bar in IE blocks script from running, my usual Fireworks rollovers always produce the error. I have heard CSS is a good alternative. The code below shows how i have 5 images with links. These are what i would like to be rollovers. Could anyone give me some help on this? Cheers. Code:
<tr>
<td><img name="index_r2_c1" src="images/index_r2_c1.gif" width="7" height="30" border="0" alt=""></td>
<td><a href="index.htm"><img src="images/index_r2_c2.gif" width="82" height="30" border="0" class="rollover"></a></td>
<td><img name="index_r2_c3" src="images/index_r2_c3.gif" width="22" height="30" border="0" alt=""></td>
<td><a href="about.htm"><img name="index_r2_c4" src="images/index_r2_c4.gif" width="128" height="30" border="0" alt=""></a></td>
<td><img name="index_r2_c5" src="images/index_r2_c5.gif" width="24" height="30" border="0" alt=""></td>
<td><a href="catalogue.htm"><img name="index_r2_c6" src="images/index_r2_c6.gif" width="150" height="30" border="0" alt=""></a></td>
<td><img name="index_r2_c7" src="images/index_r2_c7.gif" width="15" height="30" border="0" alt=""></td>
<td><a href="order.htm"><img name="index_r2_c8" src="images/index_r2_c8.gif" width="92" height="30" border="0" alt=""></a></td>
<td><img name="index_r2_c9" src="images/index_r2_c9.gif" width="15" height="30" border="0" alt=""></td>
<td><a href="contact.htm"><img name="index_r2_c10" src="images/index_r2_c10.gif" width="121" height="30" border="0" alt=""></a></td>
<td rowspan="2" colspan="2"><img name="index_r2_c11" src="images/index_r2_c11.gif" width="144" height="44" border="0" alt=""></td>
</tr>
I have been trying various things all night but I cannot figure it out.... Here is the link to the page in question: http://www.atlantahrd.com/index_new.htm In Safari and IE6 it looks right - horizontal navigaiton bar across the top. In IE/Mac (5.2) the navigation bar just centers itself on the screen and shows up as a vertical list. It is driving me crazy! Can anyone point me in the right direction? Thank you so much! Also, the CSS file is as follows: Code: .Name {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
color: #990000;
}
.Address {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
color: #990000;
}
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #990000;
background-color: #FFFFFF;
padding: 0px;
margin-top: 0px;
margin-right: 10%;
margin-bottom: 0px;
margin-left: 10%;
}
#logotext {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 32px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: capitalize;
color: #000000;
letter-spacing: 2px;
}
#logotextCaps {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 50px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: capitalize;
color: #000000;
}
#navlist {
font-size: .9em;
position: absolute;
left: 0px;
top: 87px;
margin: 0;
width: 750px;
}
#navlist li {
float: left;
list-style-type: none;
margin: 0;
padding: 0;
white-space: nowrap;
text-align: center;
}
#navlist ul {
margin: 0;
padding: 0;
}
#navlist a {
padding: 0px 15px 0px 16px;
border: 1px solid;
border-color: #000000;
background-color: #000000;
text-decoration: none;
}
#navlist a:link, #navlist a:visited {
color: #ffffff;
}
#navlist a:hover, #navlist a:active,
#uberlink a:link, #uberlink a:visited,
#uberlink a:hover, #uberlink a:active {
background-color: #ffffff;
color: #000000;
}
#logostripetop {
background-color: #990000;
position:absolute;
left:0;
top:3px;
width:750px;
height:17px;
z-index:1;
visibility: visible;
}
#logostripebottom {
background-color: #990000;
position:absolute;
left:0;
top:60px;
width:750px;
height:17px;
z-index:2;
visibility: visible;
}
#homeresourcebox {
position:absolute;
left:4px;
top:10px;
width:364px;
height:30px;
z-index:3;
visibility: visible;
}
#atlantabox {
position:absolute;
left:45px;
top:7px;
width:85px;
height:24px;
z-index:4;
background-image: url(images/atlanta.gif);
layer-background-image: url(images/atlanta.gif);
border: 1px none #000000;
visibility: visible;
background-color: #FFFFFF;
layer-background-color: #FFFFFF;
}
#directorybox {
position:absolute;
left:226px;
top:58px;
width:85px;
height:24px;
z-index:5;
background-image: url(images/directory.gif);
layer-background-image: url(images/directory.gif);
border: 1px none #000000;
background-color: #FFFFFF;
layer-background-color: #FFFFFF;
visibility: visible;
}
#leftbox {
position:absolute;
left:0px;
top:125px;
width:150px;
height:300px;
z-index:8;
overflow: visible;
visibility: visible;
}
#centerbox {
position:absolute;
left:160px;
top:125px;
width:460px;
min-height:300px;
z-index:7;
overflow: visible;
visibility: visible;
}
#rightbox {
position:absolute;
left:630px;
top:125px;
width:120px;
text-align:center;
height:300px;
z-index:6;
overflow: visible;
visibility: visible;
}
#copyright {
position:relative;
width:250px;
text-align:center;
height:20px;
margin-top:0;
z-index:9;
visibility: visible;
}
Been toying with this for awhile now and looking at different tutorials but no such luck. What I have so far: http://www.archanix.com/root/ http://www.archanix.com/root/root.css What I need it to look like: It should turn pink when rolled over. Hello all I'm putting together a site and would like to make my HTML pages use an external style sheet (the site's pages will have exactly the same content and button links at the top 1/4 of the page). I am unsure how to get my rollovers to work using a style sheet. Currently, my HTML has an internal script that does the job... Is it possible to set my rollovers in the external style sheet, thus allowing me to have that content easily updated for all pages on the site? I know this is a fundamental CSS question but bear with me, I'm still learning the code, thanks! Even if I can code one of the buttons to have the rollover in CSS, I could do the rest. Here is my code that works for HTML; it needs to be transferred to CSS as a base style sheet... can it be done? Thanks in advance! Code: <html>
<head>
<title>MY SITE EXAMPLE</title>
<SCRIPT language="JavaScript">
<!--
if (document.images)
{
homeon= new Image(98,40);
homeon.src="images/b-home-on.jpg";
aboutuson= new Image(98,40);
aboutuson.src="images/b-aboutus-on.jpg";
productson= new Image(98,40);
productson.src="images/b-products-on.jpg";
servsuppon= new Image(98,40);
servsuppon.src="images/b-servsupp-on.jpg";
downloadson= new Image(98,40);
downloadson.src="images/b-downloads-on.jpg";
custinqon= new Image(98,40);
custinqon.src="images/b-custinq-on.jpg";
dealerinqon= new Image(98,40);
dealerinqon.src="images/b-dealerinq-on.jpg";
contacton= new Image(98,40);
contacton.src="images/b-contact-on.jpg";
homeoff= new Image(98,40);
homeoff.src="images/b-home.jpg";
aboutusoff= new Image(98,40);
aboutusoff.src="images/b-aboutus.jpg";
productsoff= new Image(98,40);
productsoff.src="images/b-products.jpg";
servsuppoff= new Image(98,40);
servsuppoff.src="images/b-servsupp.jpg";
downloadsoff= new Image(98,40);
downloadsoff.src="images/b-downloads.jpg";
custinqoff= new Image(98,40);
custinqoff.src="images/b-custinq.jpg";
dealerinqoff= new Image(98,40);
dealerinqoff.src="images/b-dealerinq.jpg";
contactoff= new Image(98,40);
contactoff.src="images/b-contact.jpg";
}
function lightup(imgName)
{
if (document.images)
{
imgOn=eval(imgName + "on.src");
document[imgName].src= imgOn;
}
}
function turnoff(imgName)
{
if (document.images)
{
imgOff=eval(imgName + "off.src");
document[imgName].src= imgOff;
}
}
//-->
</SCRIPT>
</head>
<body bgcolor="#000000" background="images/bglines.jpg" text="000000" topmargin="0">
<font face="Arial, Helvetica, Sans-Serif">
<center>
<table border="0" cellspacing="0" cellpadding="0" width="784">
<tr>
<td bgcolor="FFFFFF">
<table border="0" bgcolor="FFFFFF" cellspacing="0" cellpadding="0">
<tr>
<td width="784" height="150" background="images/gb-top-bar.jpg">
</td>
</tr>
<tr>
<td width="784" height="40" border="0" cellspacing="0" cellpadding="0">
<a href="index.htm" onMouseover="lightup('home')" onMouseout="turnoff('home')"><img src="images/b-home.jpg" name="home" width="98" height="40" border="0"></a><a href="aboutus.htm" onMouseover="lightup('aboutus')" onMouseout="turnoff('aboutus')"><img src="images/b-aboutus.jpg" name="aboutus" width="98" height="40" border="0"></a><a href="products.htm" onMouseover="lightup('products')" onMouseout="turnoff('products')"><img src="images/b-products.jpg" name="products" width="98" height="40" border="0"></a><a href="support.htm" onMouseover="lightup('servsupp')" onMouseout="turnoff('servsupp')"><img src="images/b-servsupp.jpg" name="servsupp" width="98" height="40" border="0"></a><a href="downloads.htm" onMouseover="lightup('downloads')" onMouseout="turnoff('downloads')"><img src="images/b-downloads.jpg" name="downloads" width="98" height="40" border="0"></a><a href="custinq.htm" onMouseover="lightup('custinq')" onMouseout="turnoff('custinq')"><img src="images/b-custinq.jpg" name="custinq" width="98" height="40" border="0"></a><a href="dealerinq.htm" onMouseover="lightup('dealerinq')" onMouseout="turnoff('dealerinq')"><img src="images/b-dealerinq.jpg" name="dealerinq" width="98" height="40" border="0"></a><a href="contact.htm" onMouseover="lightup('contact')" onMouseout="turnoff('contact')"><img src="images/b-contact.jpg" name="contact" width="98" height="40" border="0"></a>
</td>
</tr>
<tr>
</table>
<table>
<tr width="784">
<td width="392"><font size="1"><a href="dealerlocator.htm">Find a dealer near you!</a>
</td>
<td width="392" align="right"><font size="1">
<font size="2">
<SCRIPT>
document.write(Date())
</SCRIPT>
</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>
Hi, I have the following CSS code:
Code: a.HomeBN{
background: url('../images/common/nav/btn_home.gif');
width:62px;
height:42px;
}
a.HomeBN:hover{
background: url('../images/common/nav/btn_home_hover.gif');
width:62px;
height:42px;
}
then on my page, I have the following: Code: <a class="HomeBn" href="index.php"></a> The problem is that the home button does not appear at all. what am I doing wrong? thanks |
|||||||