CSS - Problems Using Css Class In Html With Javascript

Question: If I assign an image a particular class (in this case, "photography", which I also use to align and add a border to the photo), can I have it display a bit of code as well. I'd like to be able to print a hyperlink to a script that will return EXIF data (which I have and works) to elements marked with that class?

Example:

Code:

  .photography {
    border: 5px solid #333333;
	text-align: center;
    }

.....

<img class="photography" src="whatever.jpg" />

would display whatever.jpg in a centered 5px box with a link that says "click here for EXIF data", which, on the backend, looks like this:

Code:

<a href="java script:exifWindow('exif/readexif.php?path=whatever.jpg')">click here for EXIF data</a>

How are you supposed to use the class="someCssStyle" attribute format inside of an struts html tag?
I tried just putting it in, but the jsp page won't compile:

<html:text property="ssn" class="textfield2" />

where textfield2 is a valid style attribute in my included css file.
Surely there is a way to specify this so that the taglib will render the proper output.
I'm not having any luck googling for an answer.

Hi everyone!

I've been struggling with a few problems with a new site I have just developed in HTML5 and CSS3...

These problems only occur in IE8 (and compatibility mode of)...I have IE9 installed and I can't reproduce any of the problems when I use compatibilty mode, however when I use IE Tester I can view the issues...which are....

1. When I click on a link in the footer or in the top of the header (home/contact) they are assigned 'visited' class but this makes them higher than the other links in the list... could this be anything to do with the 'nav' styling?

2. I can't produce bottom borders in the sub menus of the main navigation - I have tried removing padding, setting relative/absolute positioning and z-index values as has been suggested in other resources and nothing works!!!

If anyone can give me any help at all...or if you need any further information or access to my style sheets etc please let me know - I will really appreciate it!

Thanks in advance...Rachel

Can anyone give me a hint on why the css/javascript controlled dropdowns don't appear right on this page in Safari:
http://spa.american.edu
As you can see in the view source the script is very basic and not embedded in an external file. Safari cuts off a portion of the final link.

Thanks,
Jeremy

hey,

I got a table, every <td> in the table got the css class .regular.
(<td class='regular'>).
When the user moves their mouse over a row, that row should change color. This works with the following code:
<tr onmouseover='this.className=\"hoverRow\"'>
However, this only works if the td's in that row have no class set yet. And since all td's in my table have a class set allready, i cant use this.

How can i overwrite the class of the td's by the class for the whole row?

thanks in advance

it's best to get a visual of this one: www.viportals.com

i'm talking about the buttons under the top banner. if you hover "Games", a drop down list appears.

there is a 1pixel line between the "Games" button and its dropdown list (when you hover the "Games" button) which i want to get rid of, but can't.

in IE, there are many horrible problems, probably due to the display:inline-block of the li a. the buttons are too tall and hang down below the bottom line of the horizontal bar, and the dropdown menu appears beside the "Games" button.

i tried
css Code:
Original - css Code #sddm ul li a { padding-top: 0; padding-bottom: 0; margin-top:0; margin-bottom:0; }

  

 #sddm ul li a {


             padding-top: 0;


             padding-bottom: 0;


             margin-top:0;


             margin-bottom:0;


         } 

in my separate ie css file, but its the same here is all the code if you need it to gain a better understanding (css, html, and js).

css Code:
Original - css Code /* DROP-DOWN NAVIGATION MENU */ #sddm { margin: 0; padding: 0; z-index: 30; } #sddm li { margin: 0; padding: 0; list-style: none; float: left; } #sddm li a { display: inline-block; text-decoration: none; color:#495B20; background-color:#BAD36B; border-left: 2px solid #fff; border-top: 2px solid #fff; border-right: 2px solid #000; border-bottom: 2px solid #000; } #sddm li a:hover { background-color:#495B20; color:#BAD36B; border-left: 2px solid #000; border-top: 2px solid #000; border-right: 2px solid #fff; border-bottom: 2px solid #fff; text-decoration:none; } #sddm li:hover div { position: absolute; visibility: hidden; margin: 0; padding: 0; background: #BAD36B; border-left: 2px solid #fff; border-top: 2px solid #fff; border-right: 2px solid #000; border-bottom: 2px solid #000; } #sddm li div { position: absolute; visibility: hidden; margin: 0; padding: 0; background: #BAD36B; border-left: 2px solid #fff; border-top: 2px solid #fff; border-right: 2px solid #000; border-bottom: 2px solid #000; } #sddm li div:hover { background-color:#495B20; color:#BAD36B; border-left: 2px solid #000; border-top: 2px solid #000; border-right: 2px solid #fff; border-bottom: 2px solid #fff; } #sddm li div:hover a{ background: #495B20; color: #BAD36B; } #sddm li div a { position: relative; display: block; margin: 0; padding: 5px 10px; width: auto; white-space: nowrap; text-align: left; text-decoration: none; border:none; font: 11px arial; } #sddm li div a:hover { text-shadow:#000; text-decoration:underline; border:none; }

  

 /* DROP-DOWN NAVIGATION MENU */


  


 #sddm {


     margin: 0;


     padding: 0;


     z-index: 30;


 }


  


     #sddm li {


         margin: 0;


         padding: 0;


         list-style: none;


         float: left;


     }


     


         #sddm li a {


             display: inline-block;    


             text-decoration: none;


             color:#495B20;


             background-color:#BAD36B;


             border-left: 2px solid #fff;


             border-top: 2px solid #fff;


             border-right: 2px solid #000;


             border-bottom: 2px solid #000;


         }


         


             #sddm li a:hover {


                 background-color:#495B20;


                 color:#BAD36B;


                 border-left: 2px solid #000;


                 border-top: 2px solid #000;


                 border-right: 2px solid #fff;


                 border-bottom: 2px solid #fff;


                 text-decoration:none;


             }


         


         #sddm li:hover div {


             position: absolute;


             visibility: hidden;


             margin: 0;


             padding: 0;


             background: #BAD36B;


             border-left: 2px solid #fff;


             border-top: 2px solid #fff;


             border-right: 2px solid #000;


             border-bottom: 2px solid #000;


         }


         


         #sddm li div {


             position: absolute;


             visibility: hidden;


             margin: 0;


             padding: 0;


             background: #BAD36B;


             border-left: 2px solid #fff;


             border-top: 2px solid #fff;


             border-right: 2px solid #000;


             border-bottom: 2px solid #000;


         }


         


         #sddm li div:hover {


             background-color:#495B20;


             color:#BAD36B;


             border-left: 2px solid #000;


             border-top: 2px solid #000;


             border-right: 2px solid #fff;


             border-bottom: 2px solid #fff;


         }


             #sddm li div:hover a{


                 background: #495B20;


                 color: #BAD36B;


             }


         


             #sddm li div a


             {   position: relative;


                 display: block;


                 margin: 0;


                 padding: 5px 10px;


                 width: auto;


                 white-space: nowrap;


                 text-align: left;


                 text-decoration: none;


                 border:none;


                 font: 11px arial;


             }


         


             #sddm li div a:hover {


                 text-shadow:#000;


                 text-decoration:underline;    


                 border:none;


             } 

html Code:
Original - html Code <div id='navbar'> <ul id="sddm"> <?php echo " <li> <a href='".get_home_link()."'> Home</a> </li> <li> <a href='".get_category_link("name=all&page=1")."'"; ?> onmouseover='mopen("m1")' <?php echo " onmouseout='mclosetime()'> Games</a> <div id='m1' onmouseover='mcancelclosetime()' onmouseout='mclosetime()'> "; $categories = get_categories("htmlize=true&order=order&sort=ASC"); foreach ($categories as $category) { $link=get_category_link("name="._sp($category['name'])."&page=1"); echo "<a href='".$link."'>".$category['name']; $category['gamenum'] = count(get_games("thecat="._sp($category['name']))); echo " (".$category['gamenum'].")"; echo "</a>"; } echo " </div> </li> <li> <a href='".get_users_link()."'> Members</a> </li> <li> <a href='".get_news_link()."'> News</a> </li> <li> <a href='".get_submit_link()."'> Submit</a> </li> <li> <a href='".get_links_link()."'> Links</a> </li> <li> <a href='".get_rules_link()."'> Rules</a> </li> <li> <a href='".get_faq_link()."'> FAQ</a> </li> <li> <a href='".get_contact_link()."'> Contact</a> </li>"; ?> </ul> <div style="clear:both"></div> </div>

  
<div id='navbar'>
        <ul id="sddm">
        <?php
        echo "
            <li>
                <a href='".get_home_link()."'>
                    Home</a>
            </li>
            <li>
                <a href='".get_category_link("name=all&page=1")."'"; 
                ?>
                    onmouseover='mopen("m1")' <?php echo "
                    onmouseout='mclosetime()'>
                    Games</a>
                <div id='m1' 
                    onmouseover='mcancelclosetime()'
                    onmouseout='mclosetime()'>
                    ";
                    $categories = get_categories("htmlize=true&order=order&sort=ASC");
                    foreach ($categories as $category) {
                        $link=get_category_link("name="._sp($category['name'])."&page=1");
                    
                        echo "<a href='".$link."'>".$category['name'];
                    
                        $category['gamenum'] = count(get_games("thecat="._sp($category['name'])));
                        echo " (".$category['gamenum'].")";
                    
                    
                        echo "</a>";
                    }
                    echo "
                </div>
            </li>
            <li>
                <a href='".get_users_link()."'>
                    Members</a>
            </li>
            <li>
                <a href='".get_news_link()."'>
                    News</a>
            </li>
            <li>
                <a href='".get_submit_link()."'>
                    Submit</a>
            </li>
            <li>
                <a href='".get_links_link()."'>
                    Links</a>
            </li>
            <li>
                <a href='".get_rules_link()."'>
                    Rules</a>
            </li>
            <li>
                <a href='".get_faq_link()."'>
                    FAQ</a>
            </li>
            <li>
                <a href='".get_contact_link()."'>
                    Contact</a>
            </li>";
        ?>
        </ul>
        <div style="clear:both"></div>
    </div>

Using the following example:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">

a
{
	display: block;
}

a.one.on, a:hover.one, a:hover.one.on
{
	color: red;
}

a.two.on, a:hover.two, a:hover.two.on
{
	color: orange;
}

a.three.on, a:hover.three, a:hover.three.on
{
	color: green;
}


</style>
</head>

<body>

<a href="#" class="one">one</a>
<a href="#" class="two">two</a>
<a href="#" class="three">three</a>

<p>&nbsp;</p>

<a href="#" class="one on">one</a>
<a href="#" class="two on">two</a>
<a href="#" class="three on">three</a>


</body>
</html>

Notice how, in IE6 (works fine in FF), when the secondary style named 'on' is added, all 3 links in the 2nd set display the properties of the style:

Code:

a.three.on, a:hover.three, a:hover.three.on
{
	color: green;
}

(since it is last in the list) rather than the style specified by their respective numbers (i.e. 'one', 'two' or 'three'). Is there a way to overcome this in IE.

I've read several forums and know that the technique I'm trying to achieve is possible, however I can't seem to get it to work. Basically I'm trying to shift the background positions of both the list item I'm hovering over and the next list item. I'm sure its just a syntax error and not a logic error, anyways the code is below - any help would be greatly appreciated!

Code:

HTML Code

<div class="menu">
    <ul>
        <li><a href="#" class="search"></a></li>
        <li><a href="#" class="battery"></a></li>
        <li><a href="#" class="cart"></a></li>
        <li><a href="#" class="contact"></a></li>
    </ul>
</div>

CSS

.search, .contact, .cart, .battery
{
    width:100px;
    height:30px;
    margin-left:-1px;
    display:block;
}

.search
{
    background-image:url(Images/search.png);
}
.contact
{
    background-image:url(Images/contact.png);
}
.cart
{
    background-image:url(Images/cart.png);
}
.battery
{
    background-image:url(Images/battery.png);
}

ul li a.search:hover
{
    background-position:0px 60px;
}


ul li a.search:hover ul li a[class=battery]
{
    background-position:0px 60px;
}

Sorry for the lousy title, can't come up with better wording....

What I'm trying to say is can someone give me an example code of a css syntax that accept one css classname and add a few more properties to it under a different class name. Sort of like merging two classname into one.

Thanks...

I am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container.

Anyone know why there is a shift, and what I can do about it?



Style sheet code pasted below:

Code:

body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3; 
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
}

h1,h2,h3,h4,h5,h6 {
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
color:#e9df55;
background-color:#000;
}

h2 {
font-size:2em;
}

h3 {
font-size:1.5em;
}

h4 {
font-size:1.25em;
}





a:link {
color:#8090AC;
text-decoration:none;
}

a:visited {
color:#B17F6C;
text-decoration:none;
}

a:hover {
color:#E9DF55;
text-decoration:underline;
}

a:active {
color:#E9DF55;
text-decoration:none;
}
#container {
width:760px;
margin:0 auto;
}

#header {
height:200px;
width:760px;
margin:0;
padding:0;
}

#banner {
height:100%;
width:100%;
color:#cbd4e3;
background:#000 url(images/header_bg.jpg) no-repeat top left;
margin:0 auto;
padding:0;
}
#banner h1 {
font-size:400%;
color:#CBD4E3;
background-color:transparent;
float:left;
display:inline;
margin:0;
padding:70px 0 70px 280px;
}
#banner h2 {
	font-size: 12pt;
	color: #e9df55;
	background-color:transparent;
	text-indent: 200pt;
	vertical-align: text-bottom;
}
navigate{
	color : #105BAC;
	background-color : transparent;
	height : 20px;
	font-size: 100%;
	border-top : 1px solid #999999;
}

#navigate ul {
	list-style-type: none;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 150px;
	margin-right: 0px;
	padding: 2px 0 0 0;
}
#navigate ul li {
	display: inline;
}
td {
	font-family: Arial, Helvetica, sans-serif;
}

th {
	font-family: Arial, Helvetica, sans-serif;
}
p {
	font-size: 14px;
	color: #FFFFFF;
	left: 50px;
	right: 50px;
}



#main {
	width: 660px;
	padding-right: 50px;
	padding-left: 50px;
}
#footer {
	font-family: "Times New Roman", Times, serif;
	font-size: 9px;
	color: #666666;
	height: 100px;
	width: 760px;
	vertical-align: text-bottom;
	text-align: center;
	
}

#SplashImage {
	float: left;
}
.image-left {
	clear: none;
	margin-bottom: 10px;
	float: left;
	margin-right: 20px;
	margin-left: 10px;
}
.image-right {
	clear: none;
	margin-bottom: 10px;
	margin-left: 10px;
	float: right;
}

In CSS, which would be more appropriate (or I suppose semantically correct) to use, p.text or .text p ? P representing the <p> tag, and "text" representing the class "text".

Any info or links to pages with info on this matter would be greatly appreciated!

I am new to CSS and confused about when to use id # and when to use class .

Some enlightenment on the benefits/purpose of each would be helpful. I have read several tutorials - but the same pretty much the same to me so I must be missing something

Thanks!

I'm using ASP.NET 2.0 for my site. I already have a CSS that is working for the site; however, because an ASP.NET lable requires CSS Class, how do I convert my current CSS to a CSS Class? I know that a CSS class start with a period then a unique name. The problem is how do I implement the li, ul, a, and so on. Here is what I have that I want to convert to a CSS Class.

#nav {
padding: 0;
clear: both;
}
body.main #nav, body.blogger #nav {
float:right;
width: 220px;
\width: 250px;
w\idth: 220px;
margin: 10px 10px 0 0;
padding: 0;
}
body.second #nav {
float:left;
width: 200px;
\width: 210px;
w\idth: 200px;
padding:0 0 20px;
margin: 0;
}
body.second #nav img {
padding-bottom: 10px;
}
#nav a { color: #006; }
body.second #nav ul {
list-style: none;
padding: 0 0 0 5px;
margin: 0;
}
body.second #nav ul li {
margin: 0 0 7px 0;
font-size: 11px;
}
body.second #nav ul li ul li { margin: 0 0 5px 15px; }
.skip { display:none; }
/* end #nav */

#content p, #nav p {
padding: 0;
margin-top: 0;
margin-bottom: 10px;
line-height: 140%;
}
#content li, #content ol {
margin-top: 0;
line-height: 140%;
}
code, pre { font-family:"Courier New", Courier, mono, monospace; }

/* definition lists, all that and a bag of chips! */
#content dl {
margin:0px;
padding:0;
}
#content dt { font-weight: bold; }
#content dd {
margin-top: 0;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
padding: 0 5px 0 0;
}
/* end definition list*/

Any help is appreciated.

The book i am reading does not clear this up. When would you use class vs id to put elements in different catagories? why not use all id? It seems to make more sense.. ie. make all headers id="header"
and divs also class.

thank you in advance

Problem solved.