|
CSS - Css Element Inheritance Problem
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 Similar TutorialsI have this CSS: .navcontainer li { margin:0; height:26px; } .navcontainer li#2row { height:52px; } Applying to this HTML: <div class="navcontainer"> <ul id="navlist"> <li id="active"><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Printable Menus</a></li> <li><a href="#">Catering</a></li> <li><a href="#">Gift Certificates</a></li> <li><a href="#">Contact</a></li> <li id="2row"><a href="#">Franchise</a></li> </ul> </div> It seems like the id="2row" on the last link should make the second selector overwrite the first and display a different height for it. But for some reason it doesn't. This combination makes the most sense but i've tried moving thigns around and switching classes to ids, etc. to no avail. Any Ideas? P.S. I can get it to work if i use an inline style instead, but that would prohibit me from using a psuedo class i need later. Everything else in this same css file works, so it doesn't seem like it could be a problem with importing the external file or anything. Hi all, I might be having a moment, but I am having a problem with a CSS inheritance of a property. I have a sidebar "left_float_column", which normally has a few divs inside it and hence i have a CSS property "left_float_column div" as below. Code: .left_float_column div {
min-height:200%;
border:solid #000 1px;
text-align:center;
background-color:#CADDEE;
margin-top:1%;
padding:2%;
}
Inside this I now want to place another div with a different color background, so i created another class selector: Code: .pdfdownload {
background-color: white;
}
When a div is nested as follows: Code: <div class='left_float_column'> <div class='pdfdownload'>Hello</div> </div> The background color of the pdfdownload is #CADDEE, not white? Is that right? Why is it right? never had this problem before. I can correct it by renaming the '.pdfdownload' line '.left_float_column .pdfdownload', but its not ideal as I wanted to use the pdfdownload multiple times on some pages in different places. I have checked using opera "inspect element" and it shows it is using the parents color, instead of the childs. I just don't understand 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 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> 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'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? 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. 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 I am wondering if it is possible to use previously defined CSS variables in later css definitions? I currently have a font type css variable called "texto1" that I would like to use in conjuction with an "input" variable that defines positioning and the size of my input types. Is this possible?? Code:
--both of the following need the previously specified font called "texto1"--
input.addRemoveButton {width:75px;}
input.inputBox {width:150px;}
Thanks for any help Hi, Okej I searched on the internet about this, and did not find what I was really searching for. What I found on the net is that the css code set for one div is inherited by the div's inside it. This is not what I mean by this. I come from the Object Oriented programming world, a place where inheritance allows to remove a lot of duplicated code. I was wondering wheather there is something like that in CSS. For example imagine I have a CSS block that just defines the color of the text, is there a way where I can make another block inherit from the previos CSS block? example: Code: .parent {
color: #cc0000;
}
.child {
/* This would extend the parent block. */
}
That means if I have a div and set the class as being child then the text of that class would be #000000. Is this somehow possible in CSS? thanks and regards, sim085 Here's the page: www.rodenator.com/index2.html Theoretically, I need all of the links on the entire site (save for the ones in the left hand nav bar (i.e. navlinks) to be similar EXCEPT in the horizontal top and footer bars where I need the <a>'s need to be white. Code:
a {color:blue;}
#navbar a {color:white;}
#footer a {color:white;}
a:hover {color:orange;}
a:active {color:grey;}
The trouble I'm running into is inheritance. I would like to set all a{}, a:hover{}, and a:active{} the same, and then simply change a{} on #navbar and #footer. But when I specify #navbar a{} and #footer a{}, those rules override the a:hover{} and a:active{}. (even if I put those rules higher in the ss) ?!?!?! TIA (and I hope I was clear enough in the explanation) 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. I'm working with a portal system where-in various different modules can be applied to the main system. The problem I'm running into is when I want a module to have complete reign over it's appearance, completely ignoring the pre-set design of the surrounding system. Is there a CSS tag hiding somewhere that can disable all inheritance from the parent on up? I understand that styles declared closer to the output will take precidence, but I also don't feel like modifying the current and very complex stylesheet of a module I'm porting to make sure every attribute of every tag is being set to something compatible. Surely there must be a way to disable inheritance for a block...? Hi all, wondering if anyone can help. I'm trying to add multiple backgrounds to a table header, but using two separate elements. Below is the code I have Code: <style>
table.blockListing tr.header{
text-align:left;
background-color:#dad2c9;
padding:10px;
background-image:url(images/blockTop.gif);
background-position:top;
background-repeat:repeat-x;
}
table.blockListing tr.header th {
background-color:transparent;
background-image:url(images/blockBottom.gif);
background-repeat:repeat-x;
background-position:bottom;
}
</style>
<table cellpadding="0" cellspacing="0" class="blockListing">
<tr class="header">
<th colspan="2">Tagging<br /><br /><br /></th>
</tr>
<tr>
<td>Meta title</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Description</td>
<td><textarea cols="10" rows="4"></textarea></td>
</tr>
<tr>
<td>Other Text</td>
<td>Test test test test</td>
</tr>
</table>
Now in Firefox I receive the expected result. An image appears at the top of the TR and another images appears at the bottom of the TH. However in IE only the bottom image is shown. The top image is removed. If I remove the styling for the bottom image, then the top appears. Any anyone encountered this? Please look at this page - http://swansonre.tmhdesign.com In the top right of the header I have this code Code: <table id="call2action" cellpadding="0" cellspacing="0"> <tr><td><a href="" title="">Search MLS Listings</a></td></tr> <tr><td><a href="" title="">FREE Property Evaluation</a></td></tr> <tr><td style="height:51px;"><a href="" title="">Sign Up For Email Property Updates</a></td></tr> </table> Here is my styles for that code Code:
table#call2action{
z-index:10000;
margin:0;
padding:0;
position:absolute;
top:40px;
right:20px;
border-collapse: collapse;
}
table#call2action td{
filter:alpha(opacity=30); /* Internet Explorer */
-moz-opacity:0.5; /* Mozilla 1.6 and below */
opacity: 0.5; /* newer Mozilla and CSS-3 */
border:2px solid #edf7e3;
line-height:1 !important;
margin:-1px 0 0 0;
background-color:#000;
width:148px;
text-align:center;
vertical-align:middle;
height:53px;
}
table#call2action td a{
color:#fff !important;
font-weight:bold;
filter:alpha(opacity=1 !important); /* Internet Explorer */
-moz-opacity:1 !important; /* Mozilla 1.6 and below */
opacity: 1 !important; /* newer Mozilla and CSS-3 */
font-size:12px !important;
padding:0;
margin:0;
}
I tried doing this in a <ul> element but was not able to get the desired size and alignment so I went to a table. I am having two issues. First is that I do not want the text in the <a> element to inherit the opacity from the td element. I want the text to be solid white. Next is there seems to be an issue with the height of the table or cells. I have it so it looks "almost" the same in IE7 and FF but not exactly. Any help sure would be appreciated. Tom Greetings, I'm encountering a challenge I can't seem to figure though... could someone kindly assist? I'm writing a page with the following structu =====HTML==== <div id=#boxClear> <table> <tr> <td>somedata</td> </tr> </table> </div> ====== CSS===== #boxClear { settings } #boxClear table { settings } #boxClear tr.heading { settings } For some reason, the following seem to be true: A) Styling set at the DIV level don't carry down to the TD level. B) Styling set at the table level doesn't carry down to the TD level B) Classes set at the TR level don't work; only settings within the TD actually work. What's up with my structure?? It seems like it should all work? Thanks for your suggestions! --Dave Hi There - Am having some confusion with CSS inheritance. I'm working with a Drupal where I don't have control over the html output and everything seems to have extra layers of divs generated by the cms. I have a large container div with id=forum. Nested inside a table inside that div are more divs. Inside of that I have links inside a div that has class=name. Like this: Code: <div id="forum"> <ul> </ul> <table> <thead> </thead> <tbody> <tr class="odd"> <td class="container" colspan="4"> <div style="margin-left: 0px;"> <div class="name"> </div> <div class="description">Containers that will look OK as and when we decide to use forum Containers.</div> </div> </td> </tr> <tr class="even"> <td class="forum"> <div style="margin-left: 30px;"> <div class="name"> <a href="/forums/samplecontainer/sample-forum-for-sample-container">Sample forum for sample container</a> </div> How do I address these so that only the links within the forum are affected by this rule? The following rule is affecting all of the links in the whole site, no matter what the id or class. I thought I understood how to address these, but it's clear to me now that I don't. I'd appreciate any help I can get with this. Just to be clear, I'm trying to address the text that says 'Sample forum for sample container' in the very last div in the code above. Here's what I was trying to use: Code:
#forum .name a:link, a:visited, a:hover {
color:#F79239;
}
I've also tried permutations; #forum.name a:link etc. I don't want to be 'lucking' into something that sorta works. I really want to nail this. I'm trying to override an invisible <hr /> tag that I'm using to stretch my overall container to fit whatever content goes in. It works fine, but I want to also use a visible <hr /> within the content. I've tried giving it it's own class, but no dice. How can I override my container hr so I can see the hr in the content? First, my CSS: Code:
div#container hr {
display: block;
clear: both;
padding: 20px 0 0 0;
visibility: hidden;
}
.show hr {
display: block;
clear: both;
padding: 5px 0 0 0;
}
And now my HTML: Code: <div id="container"> <p>Some text</p> <hr class="show" /> <hr /> </div> I might have asked this before, but I can't remember. I have my base class .baseClass { width: 100% } how can I inherit that into other classes? Like maybe: .childClass#baseClass { height: 200px; } .biggerChild#baseClass { height: 400px; } now all three classes would have a width of 100% If I google this all I get are pages telling me <p> will inherit from <html> Also, I know I could do like this: .childClass, .biggerChild { width: 100%; } but I have a pretty big .css file, and it really bugs me to find the base class and add the derived class to it. Also, my base class can have a short name, and my derived class can have a long name, so this saves me some typing. ^^. Thanks for your time, CJB |
|||||||