|
CSS - Problem With Handling Class Element .. Pls Help ..
hi all ...
i am trying to hide the link of "Price" and "Broker" from the class "CONTENT" ... however it doesnt work with it . What wrong with my code? i am a new css learner ... sorry for troublesome ... CHEER <html> <head> <title>Stock</title> <meta http-equiv="Content-Type" content="text/html; charset=big5" /> <style> .CONTENT:link {display : none ! important;} </style> </head> <body> <tr class="MarkColor3" valign="top"> <td class="CONTENT" valign="top" width="35"> 1234</td> <td class="CONTENT" valign="top" width="140"> XXX Cop. Limited </td> <td class="CONTENT" valign="top" width="55"> 5.050</td> <td class="CONTENT" valign="top" width="58"> <img src="../images/index_up.gif" />0.075</td> <td class="CONTENT" valign="top" width="58"> <img src="../images/index_up.gif" />1.508%</td> <td class="CONTENT" valign="top" width="69"> 707,730,172</td> <td class="CONTENT" valign="top" width="198"> | <a href="../a.html">Price</a> | <a href="../b.html">Broker</a> | </td> </tr> </body> </html> Similar Tutorialshi all I've got a styled ul+li element, and I've put a new color class in a span tag, for a link li a, li a:active, etc { color: #00FF00; } li a:hover { color: #00AA00; } spanclass a, span a:active, etc { color: #00FF00; } spanclass a:hover, etc { color: #00AA00; } <li>hello, <span class="spanclass"><a href="#">this is a link</a></span></li> Except it's completely ignoring the span class colors... Anyone know why? Hello everyone, l just wanted to know what browsers support the following: Code: <style>
td.test1 {
background-color: pink;
}
td.test2{
border-style: dotted;
border-width: 10;
border-color: orange;
}
</style>
<table>
<tr><td class="test2 test1">
THIS IS A TEST .. YAYA!!
</table>
Which is 1 element, with 2 class names... It seems to work with the latest netscape, IE, and opera, just wanted to know if this is something l should be using on my web pages, or not due to the possible compatibility issues, any help is greatly appreciated, gents Samantha Gram. Hey, I think i just need someone else to look at this for me. I've been coding all day and would probably be able to figure this out if I just went to bed and did it tomorrow. If you roll over an image that's alson an anchor at www.deeperdevotion.com/wp, you'll find that it places a background-color or underline or both on it. The thing is, I can't find the code in my CSS that's causing me the trouble. my css is located at www.deeperdevotion.com/wp/wp-content/themes/dd/styles/101106.css Thanks. Please look at this page http://www.acemarine.biz/gallery2.asp?subject=16 See the links for Thumbnail Sets under the thumbnails. For the life of me I can not figure out why they are not all on one line. When I border them their width is the width of the containing element. When I set the width to say 10px they still do not appear on the same line. For some reason they are "floating" so to speak. I am using IE7 to look at these Hi, any help with this would be very useful? I'm having trouble with a float element on ie. It works fine on firefox, basically I'm wanting an element to be removed from the flow of all the other elements and placed on top... Heres the simple code, the colors are just to show the elements positioning. HTML <body> <div id="wrapper"> <div id="picture"></div> <div id="header">content</div> <div id="content"> content content content content content content content content content content content content.....</div> <div id="footer"></div> </div> </body> CSS body { text-align: center; } #wrapper { width: 750px; text-align: left; } #header { width: 100%; height: 50px; margin-top: 10px; background-color: #009966; } #content { width: 100%; height: auto; background-color: #CCCCCC; min-height: 300px; /*ie ignores this one*/ height: 300px; /*ie treats this as min height*/ } *>#content { height: auto; /* ie ignores child selector, modern browsers replace height declaration */ } #footer { width: 100%; height: 25px; background-color:#FF0000; } #picture { height: 350px; margin: 15px; width: 200px; float: left; background-color:#FFFF99; } Firefox displays fine with the green header, grey content, and red footer with the yellow picture element overlapping. IE puts the three content elements below the picture element.. I tried making the #picture position: absolute and this almost works except the content goes behind the picture! And I tried removing the width 100% from #header, #content, #footer and this almost works - its positioned right but the background does not flow under the #picture?! any thoughts? thanks. John I wish to set a container to have auto height... meaning the height of the container is defined by it's contents. I have had this working in many other designs... but this one baffles me. (Problem is only in good browsers mozila/firebird) Here it is with the height of #main @ auto (attached) Here it is with the height of #main @ 600px (attached) Here is the HTML code: Code: <!-- Code --> <!-- Document --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Ben Gunn</title> <link rel="stylesheet" href="index.css" /> </head> <body> <div id="main"> <img src="images/default_header.gif" id="header" height="120" width="749"/> <div id="content"> <div class="left"> <ul id="nav"> <li><a href="#">News</a></li> <li><a href="#">Music</a></li> <li><a href="#">Media</a></li> <li><a href="#">Bio</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div class="right"> </div> </div> </div> <br /><br /> </body> </html> And here is the code for the CSS: Code:
body {
margin: 0;
padding: 0;
background-color: #666666;
}
#header{
margin-left: 2px;
}
#main {
position: relative;
width: 756px;
height: 600px;
left: 50%;
margin-left: -355px;
margin-top: 20px;
background-image:url("images/background-bezel.gif");
background-repeat: repeat-y;
padding: 0px;
padding-bottom: 20px;
/*border: black 1px solid;*/
}
#content{
padding: 10px;
}
.left{
float: left;
width: 30%;
}
.right{
float: right;
width: 60%;
}
#nav{
list-style: none;
margin: 0;
padding: 0;
border: none;
padding-left: 10px;
font: 10pt Verdana, Geneva, Arial, Helvetica, sans-serif;
color: white;
font-weight: lighter;
}
#nav li {
background-color: #8B0000;
border-bottom: 1px solid #CCCCCC;
margin: 0;
padding: 1px 0 2px 0;
}
#nav li a {
display: block;
text-decoration: none;
width: 100%;
color: white;
padding-left: 5px;
}
html>body #nav li a {
width: auto;
}
#nav li a:hover {
background-color: #191970;
color: #fff;
}
Please notify me of the moronic mistakes I am making... thanks. I am working on a site right now. I have two adjacent divs, one on top of the other. Both are styled with margins and padding set to "0." I want the second div to be directly below the first with no spacing. If I include a single-pixel border on the second div, the elements touch with the border being the only thing between the first and second div. Without the border, there is a space of what I believe to be 20 pixels. I don't want to actually use the border so I'm not sure what to do. I don't understand why the page is behaving this way. Feel free to check it out at kellyshipe.com. I would have linked but forum rules evidently prevent it. I've mocked up a page using 960.gs that has has several elements fixed in a div under which the content of the of the page is to flow. The background of this div is a CSS gradient, and has a height of 100% (if the gradient is applied to to the actual body of the page it doesn't actually extend the whole width of the page). As the user scrolls up, the content is to be viewable behind an opaque menu. bit.ly/f2a4rC The layout works as I want in FF and Chrome, but the content of the page scrolls over the fixed upper area in IE7. I understand that a new stacking context is being created, but I've been unable to resolve this by fiddling with the z-index of the elements in question, or their parents. I know I can consolidate some of the extra divs used by the grid, but I've been unable to do so in a way that keeps the gradient and transparency effects. How can I achieve this look in IE7? hi my page involves having a form element inside of a div. the div is floated left. relevant (seemingly) css from my stylesheet & html code (all simplified for readability) form { margin: 0px; padding: 0px; } .mydiv { float: left; } html looks vaguely like: <div class="mydiv"><form name="blah" action="blahblah"> .... all form controls </form></div> PROBLEM!!!! in mozilla, none of the form elements display. in ie, everything displays as expected. PLEASE HELP ME BEFORE I GO INSANE AND START KILLING INNOCENT PEOPLE. thanks in advance. d Hi, My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner). Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page. I have tried various approaches and read up on positioning but so far have not been able to do it using css. Any help is much appreciated. Jim Hello, I have created a design in photoshop which has been sliced into a number of smaller images. I am then trying to reapply the design as a series of background <td></td> elements, using an external css. The style is: Code: td.tablebackground
{
background-image:url('/media/headerarea/topnav_search.jpg');
background-repeat:no-repeat;
width:40;
height:10
}
This works fine in IE6 but doesn't show in Firefox. Can anybody please suggest a way around this? I have also tried defining a class to attach to an <img> tag but this always places a border around the image even if border=0. The external css for this is: Code: img.tablebackground
{
background-image:url('/media/headerarea_red/topnav_search_red.jpg');
background-repeat:no-repeat;
width:40;
height:10 ;
border-style:none; // also tried border:0;
}
Many Thanks, J i've been searching the web for a couple weeks trying to find a simple way to swap CSS classes onMouseOver, making a simple, and elegant Rollover button. i've found tons of examples with really complex methods, but i really need to do it with CSS classes. so i've read repeatidly that by putting the following code as your TD tag you'll be able to change class names. and it simply doesn't work at all. the code i'm having a problem with reads like this: <td class="out" onMouseOver="this.className='over'" onMouseOut="this.className='out'"> it just doesn't work. anyone at all who can give me a code that does work, i'd be more than appreciative. oh, and by the way i'm using IE 6.0.2600 I have an navigation menu that I am building as an unordered list. What I have is an image rollover that appears at the bottom of the navigation menu when the cursor hovers over one of the first level links by using a span within the link that has its display set to none, and then set to absolute positioned directly below the navigation menu on a:hover. Here is an example: Code:
<ul>
<li>
<a href="link1.html" id="link1">Link<span></span></a>
</li>
</ul>
.link a { some link height }
.link a span { display: none; }
.link a:hover span {
position: abolute;
top: (some link height * the number of links);
background-image: (some image url)
width: (image width)
height: (image height)
}
Appearance: ------ Link1 Link2 Link3 Link4 ------- ------- Rollover Image to appear here ------- The problem that I have is that since the rollover image is positioned absolutely, if the size of the list of links changes (IE with sub-links in the list) it slides under or over where I have the rollover image placed. IE ------ Link1 sublink1 sublink2 Link2 Link3 Link4 ------- will break my scheme. Is there a way to get the span within the link to show up relative to the bottom of the <ul> element, or at the bottom of an element that contains the whole shebang? If I cant get this to work, I'm going to be forced to adopt the existing tables/javascript based template for our site, and I'd hate hate hate to do that. thanks. Hey guys. I'm still learning css so excuse some crude styles. I don't know how to explain this so grap IE 6 and click here. Scroll down the links on the left until you get to the last one "Printable Pics." As you can see for some reason the last two links jump down the page and a big blank spot appears in it's place when you hover your mouse over it. It doesn't do that in firefox or opera so I don't know whats' going on. Heres my CSS: Code: body {
text-align: center;
height: 100%;
background-image: url(images/bg_title.gif);
}
img {
border: none;
}
#wrapper {
width: 780px;
height: 100%;
margin: 0 auto;
text-align: left;
position: relative;
background-color: #FFFF7D;
color: #000000;
border: solid 2px #0000ff;
}
#header {
width: 780px;
height: 143px;
margin-bottom: 3px;
}
#headerImage {
width:200px;
float: left;
margin-right: 2px;
}
#headerImage img {
margin: 0px;
}
#headerLogo {
width: 577px;
float: left;
margin: 0px;
}
#headerLogo img {
margin: 0px;
}
#navagation {
width: 204px;
margin-bottom: 1px;
float: left;
margin-right: 1px;
}
.navIcon {
float: left;
margin-right: 2px;
margin-bottom: 1px;
padding: 0px;
}
.navButton {
float: left;
margin-bottom:1px;
padding: 0px;
}
a.navButton:link {
border: none;
}
a.navButton:visited {
border: none;
}
a.navButton:hover {
border: 1px solid #000000;
}
#mainContentArea {
float: left;
width: 570px;
height: 711px;
border: solid 1px #000000;
background-color: #ffffff;
margin-bottom: 3px;
}
#footer {
height: 1px;
margin-top: -1px;
clear: both;
overflow: hidden;
}
Thanks in advance! -Tim 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 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> </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 have set up a test for several basic CSS-layouts, like 3-column layout, frame-like layout/behaviour etc. and I noticed some strange behaviour in IE. Here is a number of layouts that I have created: http://www.duwgati.nl/csstest In layout samples 1 - 4 the fonts show up smaller than in the samples 5 -7, even though the font-size declaration is identical in all 7 samples. This only happens in IE, in Mozilla/Firefox, the fontsizes are correct in all 7 samples. Anybody got a clue why this is happening? I have a simplistic tab menu. The tabs should stretch to fit the text in it. The blank area after the last tab should fit to the end of the table as well. It was working before, but a change in text-length caused issues so apparently it was not truly dynamic. Here's the coding. If you have a solution using XHTML that is fine but it must work within other tables that are not XHTML-COMPLIANT, else it will screw up. HTML Code: <table class='tab_thin_table'> <tr> <td class='tab_start_on' rowspan='2'></td> <td class='tab_bg_on' rowspan='2'><span class='header_text'><a href='|LINK|'>LINK ONE</a></span></td> <td class='tab_end_on' rowspan='2'></td> <td class='tab_start_off' rowspan='2'></td> <td class='tab_bg_off' rowspan='2'><span class='header_text'><a href='|LINK|'>LINK TWO</a></span></td> <td class='tab_end_off' rowspan='2'></td> <td class='tab_start_off' rowspan='2'></td> <td class='tab_bg_off' rowspan='2'><span class='header_text'><a href='|LINK|>LINK THREE</a></span></td> <td class='tab_end_off' rowspan='2'></td> <td class='tab_start_off' rowspan='2'></td> <td class='tab_bg_off' rowspan='2'><span class='header_text'><a href='|LINK|'>LINK FOUR</a></span></td> <td class='tab_end_off' rowspan='2'></td> <td class='tab_thin_spacer'></td> </tr> <tr> <td class='tab_thin_top'></td> </tr> </table> CSS Code:
.tab_thin_table
{
width: 578px;
vertical-align: top;
}
.tab_thin_top
{
height: 1px;
// DYNAMIC
background-color: #6E7073;
}
.tab_thin_spacer
{
height: 19px;
// DYNAMIC
}
.tab_start_on
{
width: 6px;
height: 20px;
background: url(../../image/site/tab_start_on.gif);
background-repeat: no-repeat;
}
.tab_bg_on
{
background: url(../../image/site/tab_bg_on.gif);
// DYNAMIC
height: 20px;
}
.tab_end_on
{
width: 10px;
height: 20px;
background: url(../../image/site/tab_end_on.gif);
background-repeat: no-repeat;
}
.tab_start_off
{
width: 6px;
height: 20px;
background: url(../../image/site/tab_start_off.gif);
background-repeat: no-repeat;
}
.tab_bg_off
{
background: url(../../image/site/tab_bg_off.gif);
// DYNAMIC
height: 20px;
}
.tab_end_off
{
width: 10px;
height: 20px;
background: url(../../image/site/tab_end_off.gif);
background-repeat: no-repeat;
}
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;
}
Can anyone explain the difference between the two? For example, what is the difference between: this: element element {} div p { } and this: element > element { } div > p { } I don't understand it and have not found an explanation in tireless searching. Thx! |
|||||||