CSS - Css Tags Getting Lost?

Please refer to the web site: h*t*t*p://alturl.com/yhba

Please look at the web site mentioned above and pay close attention to the "|" dividing the menu links (About, Events, Teams, Shop).

Problem: This "|" should not appear at the end of the menu (after the "Shop" link). However it seems that it is showing up in the Windows Firefox & Safari but not in Firefox when being run under the Apple operating system.

Please see if it is visible for you and if so, pleassee suggest how I may go about fixing the issue.

HTML:
Code:

<div id="navigation">
<a href="/about" class="navigation-about">About</a>
<a href="/events" class="navigation-events">Events</a>
<a href="/teams" class="navigation-teams">Teams</a>
<a href="/shop" class="navigation-shop last">Shop</a>
</div>

CSS:
Code:

#navigation {
    background:url(../_images/menu_bg.png) repeat-x;
	height:68px;
	width:100%;
	padding:10px 0 10px 0;
	margin:0 0 20px 0;
	}
/*#navigation a { color:#666; padding: 0 10px 0 10px; text-decoration:none; }*/


.navigation-about, .navigation-events, .navigation-teams, .navigation-shop {
    float: left;
    display: block;
    padding: 0 0 0 12px;
    font-size: 105%;
}

#navigation a.last{
background-image: url();
}

#navigation-logo {
	display:block;
	float:left;
	margin:3px 0 0 10px;
	padding-right:25px;
	}

#navigation a, #navigation a:visited {
	display:block;
	text-decoration:none;
	color:#666;
	padding:0 10px 0 10px; 
	background-image:url(../_images/nav_divider.png);
	background-repeat:no-repeat;
	background-position:right;
	font-weight:bold;
	}

Thank you!

I moved internal css to an external file and then linked the page to that file and lost my hand cursor on links. How do i get it back. Right now the arrow cursor remains when links are rolled over. Can be viewed at.

kopertone.com/newsite/index1.html

Also, in fire fox, I want dotted lines under my text links when rolled over, but not image links; how do I remove the dotted lines under my image links? Thanks!

APPEARS TO BE HASLAYOUT ISSUE IMAGE WITHIN ANCHOR NOT CLICKABLE.

Hi Guys looking for a spot of help please.

IE is driving me up the wall.

Ive wrote a jQuery script for scrolling a list horizontally upon user clicking left or right. The list has anchors within it which are blocks which I want to be clickable with an image inside (fine in FF etc) but in IE the image within the anchor loses its ability to be clicked the rest if fine apart from I manually have to set the cursor to pointer to show the user its clickable still.

Just when they click the item image within the anchor it does nothing.

Here is a slim version of the HTML :

Code:

<ul>
<li><a href="/page1.html"><span class="box_wrap"><span class="img"><img src="1.jpg" border="0" height="75" /></span><span>Item 1</span></span></a></li>
		<li><a href="/page2.html"><span class="box_wrap"><span class="img"><img src="2.jpg" border="0" height="75" /></span><span>Item 2</span></span></a></li>
		<li><a href="/page3.html"><span class="box_wrap"><span class="img"><img src="3.jpg" border="0" height="75" /></span><span>Item 3</span></span></a></li>
		<li><a href="/page4.html"><span class="box_wrap"><span class="img"><img src="4.jpg" border="0" height="75" /></span><span>Item 4</span></span></a></li>
		<li><a href="/page5.html"><span class="box_wrap"><span class="img"><img src="5.jpg" border="0" height="75" /></span><span>Item 5</span></span></a></li>
		<li><a href="/page6.html"><span class="box_wrap"><span class="img"><img src="6.jpg" border="0" height="75" /></span><span>Item 6</span></span></a></li>
		<li><a href="/page7.html"><span class="box_wrap"><span class="img"><img src="7.jpg" border="0" height="75" /></span><span>Item 7</span></span></a></li>
		<li><a href="/page8.html"><span class="box_wrap"><span class="img"><img src="8.jpg" border="0" height="75" /></span><span>Item 8</span></span></a></li>
		<li><a href="/page9.html"><span class="box_wrap"><span class="img"><img src="9.jpg" border="0" height="75" /></span><span>Item 9</span></span></a></li>
		<li><a href="/page10.html"><span class="box_wrap"><span class="img"><img src="10.jpg" border="0" height="75" /></span><span>Item 10</span></span></a></li>
		<li><a href="/page11.html"><span class="box_wrap"><span class="img"><img src="11.jpg" border="0" height="75" /></span><span>Item 11</span></span></a></li>
		<li><a href="/page12.html"><span class="box_wrap"><span class="img"><img src="12.jpg" border="0" height="75" /></span><span>Item 12</span></span></a></li>
		<li><a href="/page13.html"><span class="box_wrap"><span class="img"><img src="13.jpg" border="0" height="75" /></span><span>Item 13</span></span></a></li>
		<li><a href="/page14.html"><span class="box_wrap"><span class="img"><img src="14.jpg" border="0" height="75" /></span><span>Item 14</span></span></a></li>
		                  
        </ul>  

CSS Code:

Code:

ul {
  width: 9999px;
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
  margin:0;
  padding:0;
  position: absolute;
  top: 0;
}

ul li {

  	display:block;
	list-style:none; 
	margin:0; 
	padding:0; 
	border:0; 
	text-align:center;
	float:left;
	width:118px;
	height:133px;  
}

ul li a{
	display:block;
	border-right:1px solid #e2f5fe;
	outline:none;
	text-decoration:none;
	background:#FFF;
	padding:3px 2px 3px 2px;
	line-height:15px;
}

ul li a:hover{
	background:#e2f5fe;
	color:#fe0084;
}

ul li span.box_wrap { 
	display:block;
	background:#FFF;
	height:127px;
}

ul li span.box_wrap span{
	padding:0px 3px;
	font-size:12px;
} 

ul li span.img { 
	padding:2px 0px 2px 0px;
	display:block;
}

Just when you try to click any of the images within the boxes its not clickable. Really stumped.

Any help or pointers would be greatly appreciated. Thanks in advance!

I have a menu bar made up of <a href> elements that have a hover style of: PHP Code:
#mainMenu a:hover {
    color:#000000;
    background-color: #66c74c;
    padding: 1px 4px 1px 4px;
    margin: 1px 1px 1px 1px;
} 



This will provide a green colored rollover visual as the user moves their mouse over the menu bar.

I just added some JS today that will highlight the clicked (selected) menu so there is visual feedback of the section the user is in. For some reason, after setting the background color of the <a href> and color attributes, the HOVER: no longer functions. Here is the code to do the hilite where I pass the ID of the <a href> menu selection in the variable "menu": PHP Code:
//--- Simplify setup by creating an array of the menus and hilight ID's ---
    var menus = ["menu1","menu2","menu3","menu4","menu5",
                "menu6","menu7","menu8","menu9","menu10"];
    
    function J_hiliteMenu(menu) {
        //--- first make sure all the menu are hidden and unhilited ---
        for(i=0; i < menus.length; i++) {
            if (menus[i] == menu) theIndex = i; // Hold on to the chosen index position
            var obj = document.getElementById(menus[i]);
            if (obj == null) continue;             // if menu is not available skip it
            obj.style.color = "#ffffff";
            obj.style.backgroundColor = "#234fd7";
        }
        //--- hilite the menu we're interested in ---
        var obj = document.getElementById(menu);
        obj.style.color = "#000000";
        obj.style.backgroundColor = "#f8f400";
    } 



Prior to hiliting the menu I un-hilite all the menus (since we may be switching from another). I think this is where the problem is. Maybe I need to redefine the rollover "hover" attribute for all elements during the un-hilite loop? Does anyone know how to set a HOVER: attribute using JavaScript?

Thanks!

I've used css to change my alt tag text to be consistent in size and font to the rest of the site, however, a couple of my images are relatively thin, but are tall.

It seems that the alt tags get centered to the image, so you only see the middle of the tag, not the beginning and the end. Is there a way to wrap the text within the confines of the image.

Thanks.

Hi,

I have some code that looks like this .
#nav,#nav ul
which puts all the listed elements in a vertical list.
Now if I do ths
#nav ul..
this changes all the elemnts to a horizontal list.

What does the ',' do for the id css tags exactly as i thought it refered to nested <ul> lists but is doesn't.

I have some listing text that comes from a database, displayed in a column. Each block of text is enclosed in a DIV tag. I use the following to cause the area of the text to change background color when there is a mouseover:

Quote:
div.list {
padding: 5px 5px 5px 5px;
}
div.list:hover {
background-color: #FFFACD;
}



Works fine for Firefox, but doesn't do anything in IE. How can I fix this so it works in IE as well?

I just can't figure out what to define so that IE doesnt screw up my coding... here is a link to my project... if you look in IE, there is a gap above "Account Info"... it is caused because that is where my <form> tag starts, then at the bottom there is another gap, which is there my </form> tag ends.

Sign Up Page Error

Im trying to control how the text formats within a div tag, that sits inside a menu.

The text appears when you rollover the items in the submenu and I want extra information to appear but when it does, it doesnt wrap 'correctly'

I have the menu sitting he http://www.electronical.org/tmp/playsongs/

If you rollover 'Products > playsong titles', you will see some blue text appears at the bottom of the submenu.

How do I format this so it is the width of the submenu and wraps to the length of it?

Thanks for any help.

Hello!

Can anyone help me with this one... I'm trying to figure out how to change the following css/html (or if it's even possible) so it still works after removing the surrounding <span> tag. (There is additional javascript which shows/hides the div but I've removed it so it's simpler to read).

So the current html below would be shortened to:

Code:

<a href="javascript:void(0);" class="sddm"><u>Settings</u>
<div id="m1" class="alignl">
<a href="#">HTML Drop Down</a>
<a href="#">DHTML Menu</a>
<a href="#">JavaScript DropDown</a>
<a href="#">Cascading Menu</a>
<a href="#">CSS Horizontal Menu</a>
</div>
</a>

ORIGINAL CSS/HTML:

Code:

<style type="text/css">

/* Drop Down Menu */

span.sddm {
	z-index: 30;
	white-space: nowrap;
	position: relative;
}

span.sddm a {
	text-decoration: none;
}

span.sddm a:hover {
	text-decoration: none;
	color: blue;
}

span.sddm div {
	position: absolute;
	display: none;
	margin: 0;
	padding: 0;
	background: #fff;
	border: 1px solid #3366cc;
	border-top: 1px solid #c9d7f1;
	border-left: 1px solid #c9d7f1;
	top: 18px;
}

span.sddm div a {
	position: relative;
	display: block;
	margin: 0px;
	padding: 2px 5px;
	width: auto;
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
}

span.sddm div a:hover {
	background: #3366cc;
	color: #fff;
}

span.sddm .alignl {
	left: 0px;
}

span.sddm .alignr {
	right: 3px;
}

</style>

<span class="sddm">
<a href="javascript:void(0);"><u>Settings</u> <small>▼</small></a>
<div id="m1" class="alignl">
<a href="#">HTML Drop Down</a>
<a href="#">DHTML Menu</a>
<a href="#">JavaScript DropDown</a>
<a href="#">Cascading Menu</a>
<a href="#">CSS Horizontal Menu</a>
</div>
</span>

This must be a common problem but I have no way to look it up in the forum.

In Firefox and IE7 you can define CSS for successive tags with the larger sign:

div>span {
...
}

Does anyone know of anything similar for IE6 ?

Hello,

I've been messin with this all night but just can't get the result i'm after. The bit of code which follows, almost works - except the fields on the right hand side don't align to the top (to be in line with the top of each text on the left).

What am I doing wrong? Can anyone please help me?

Thanks,
JT

EDIT: Screenshot of the current output is attached too for information

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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Document</title>

<style type="text/css">

    div.configset label {
        font-weight: bold;
    }
    
    div.configset fieldset {
        background-color:#FFE391;
        border:1px solid;
        margin:0.5em 0.5em 0.5em 0.5em;
    }
    
    
    div.configset dl {
        font-size: 0.85em;
        width:100%;
    }
    
    div.configset dt {
        float:left;
        border-right: 1px solid #FFCC6F;
        width:45%;
        padding:0.5em 0.5em 0.5em 0.5em;
    }
    
    div.configset dd {
        clear:both;
        margin: 0 0 0 46%;
        padding:0.5em 0.5em 0.5em 0.5em;
    }

</style>

</head>

<body>

<form id="form1" method="post" action="">

<div class="configset">

<fieldset>
    <legend>General Options</legend>
    <dl>
        <dt>
            <label for="conf_13">Website Enabled</label><br /><span>Toggle the website on and off. Note that no part of the website (except admin functions) will work if this is set to False.</span>
        </dt>
        <dd>
            <input type="checkbox" name="conf_13" id="conf_13" checked="checked" tabindex="1" />
        </dd>
    </dl>
    <dl>
        <dt>
            <label for="conf_1">Website Name</label><br /><span>Name of the website. Appears in title of browser and some links</span>
        </dt>
        <dd>
            <input type="text" name="conf_1" id="conf_1" size="40" maxlength="50" tabindex="2" value="Kinetic" />
        </dd>
    </dl>
</fieldset>

<fieldset>
    <legend>Login Options</legend>
    <dl>
        <dt>
            <label for="conf_7">Login Attempts</label><br /><span>Amount of login attempts before time delays  start occurring to prevent forced access</span>
        </dt>
        <dd>
            <input type="text" name="conf_7" id="conf_7" size="2" maxlength="2" tabindex="6" value="3" />
        </dd>
    </dl>
    <dl>
        <dt>
            <label for="conf_8">Login Failure Delay</label><br /><span>Amount of time (in minutes) to delay a member from logging in with the failed account details</span>
        </dt>
        <dd>
            <input type="text" name="conf_8" id="conf_8" size="2" maxlength="2" tabindex="7" value="5" />
        </dd>
    </dl>
</fieldset>

</div>

</form>

</body>
</html>

Hi, i have to display a list of links horizontally, wrapped in a <ul> tag. For seo reasons now these links have to be wrapped in <h2> tags. In IE6 + IE7 this causes a linebreak and the links are displayed in a vertical list.
sth like

#myId LI {
display:inline-block;
}
#myId LI H2{
display:inline-block;
}

solves the problem for Firefox but not for IEs. Do you know a solution? Would be highly appreciated!

here the html

<ul id='myId'>
<li><h2><a htref=...>somewhere</a></h2></li>
<li><h2><a htref=...>somewhere</a></h2></li>
</ul>


OK Found out a
float:left in the li
was missing

Hi there,

this is concerning 'id' tags...i've got a style set for my <a> tags, and i wish to create a second <a> style, to be applied to a small set of the <a>'s in my site.

I know the #blah should be used to set an id for it, but here's my concern;
1. where do i state the id for the <a>? (ie. <div id="blah"> or <a href="http:///////" id="blah">).
2. do i need to define an id for the existing style? or can i just leave it the way it is and apply the id to the one i want different?

thanks in advance.