|
CSS - Styles Not Applying To Certain Elements
I have a few styles that I was to apply to anything that has a class="title". These work fine when I say, for example:
Code: <div class="title">This is my title</div> but, for some reason, they don't work when I use them like so: Code: <table border="0" cellspacing="0" cellpadding="5" class="maintable">
<tr>
<td>
<div class="title">News Updates:</div>
</td>
</tr>
</table>
Can anyone explain to me why this is? If so, how should I go about getting around it? Similar Tutorialsi have a table that i'm using within a div. here is the style #content { float: left; padding: 0 20em 4em 3em; } #content table .content { border: 1; bordercolor: #fff; width: 100%; cellspacing: 0; cellpadding: 0; } when i reference the style for the table within the div, nothing is applying. not sure what im doing wrong here. <div id="content"> <table class="content"> please advise.. i'm guessing its syntax I have a div with a set id and style matching the id. It's very simple, straight forward, but the style is not being applied. When I inspect the element using FireBug it also does not see the style...however when I view the stylesheet in the browser I can see that the style exists within the stylesheet. I'm perplexed...my guess is I'm tired and missing something HTML Code: <div id="event_photos"> <a href="images/events/cce/cce_lowenthal.jpg" rel="lightbox[CCE]" title="People"> <img src="images/events/cce/thumbs/cce_lowenthal.jpg" alt='CCE Lowenthal' width="100" height="67"/></a> </div> CSS Code:
#event_photos {
width: 100%;
text-align: center;
margin: 0 auto;
background-color: red;
}
#event_photos a:link, #event_photos a:visited {
color: #f7f7f7;
}
#event_photos a:hover {
color: #0CB2E8;
}
hello. i have a button that pops up to a floating div. this div gets applied html from a source called by ajax. in the html that is being called, i added <style></style> tags to embed specific css for that html. i do this because this html will be used globally across the site it works fine in every browser except safari. safari doesn't seem to render the css. any suggestions? IE5 doesn't support this (trying to apply padding-left to links). Has anyone found a good workaround - Don't really want to put each one inside a DIV Hi! Let's say I have this Code: <form id="some_form" ...> <div> <label> Some text <input .... /> </label> <label> Some text 2 <input .... /> </label> <input type="submit ... /> </div> </form> In CSS I have this: Code: #some_form label {margin-button:10px}
This does work in NO browsers! Very strange... If one replaces the label with a div, everything works fine again. I really want to use the labels... I just figured out how to make a cool navigation bar with css, but adjusting the links in the bar also changes the style of all my other links on the page. Is it possible to have two sets of link styles, one that only applies on the navigation bar and one that only applies on my other text? The navigation bar and text each have their own div, if that helps at all. How would you go about this? Hi all I really like the standard form styles in Safari, and until v2 (I guess) Safari didn't react on any custom CSS styling yet. But now with Safari 3 it begins to interpret some of the custom stuff, e.g. background color etc. I really don't like that because I think it's ugly - Mac has cool forms design, and I'd like my websites to have the standard Aqua look. But what's the easiest way to prevent Safari from using my custom CSS (which is quite cool in browsers like IE and FF, but not in Safari)? I'd like best to have some sort of @import rule or conditional comment for Safari that is not interpreted ONLY by safari... Not too much dirty hacks, please. ;-) Thanks for help Josh Hi folks, I guess this is a fairly straightforward question, so apologies if it has been asked before (I couldn't find anything while searching). I'm trying to implement this excellent tabbing interface however I'm running into problems attempting to display a Google maps image in one of the tabs, where the map will no cover the area it is supposed to. If you can see the images below you'll that the map does not extend over the grey area. I think the issue is down to the style applied, but of course removing it means the tabs will not work. The map is contained within its own div inside the tab, is there any method can I use to remove the inherited style of a nested element that specifically displays the map? Any help appreciated. The CSS in this file:
Code: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <title>Comments on 2005-02-09: February 9, 2005 - Final Game</title> <meta http-equiv="Content-Type" content="application/xhtml+xml; encoding=UTF-8;" /> <link rel="stylesheet" type="text/css" href="comments.css" /> </head> <body> <h2>Posting on 2005-02-09: February 9, 2005 - Final Game in <a href="refresh.php" id="title">XMLBlog</a></h2> <div class="entry"> <p class="normal">I woke up like usual. <em class="entry">My mom couldn't find my lunch bag, so I had to show her.</em></p> <p class="happy">On the way to school, I nearly fell asleep on the bus. <em class="entry">Surprisingly, I felt more rested than before.</em></p> <p class="normal">We had a sub in Physics, along with homework. <span class="happy"><em class="entry">While doing my homework, I talked to this guy that sits nearby.</em></span></p> <p class="happy"><span class="sad">At the beginning of class, I tried to switch with someone to sit near a friend, but our sensei didn't allow it.</span> We just did reading in Japanese, <em class="entry">where I was better than a majority of the class as far as Katakana is concerned</em>. Also, we looked at pizza menus and added up our cost in <ruby><rb>円</rb><rt>エン</rt></ruby>. <em class="entry">some of them looked so delicious, which made me hungry.</em></p> <p class="normal">We watched a video in health, and nothing else.</p> <p class="happy">I basically had English off, since I already finished all of my work. <em class="entry">I also found out that my pre-write can count as a rough draft, since I didn't really do one. Along with that, I get to turn in my completed vocabulary in a day late, since I proved to her that I had it done.</em> For the most part, I just read while listening to music.</p> <p class="sad">Lunch alone, again.</p> <p class="normal">Math was comprised mainly of continuing work on our investigations. <em class="entry">This one didn't have proofs, which made it easier.</em> Due to our teacher talking about homework, we didn't move onto the next one.</p> <p class="normal">We started off with playing our warm-ups for Solo & Ensemble, then went to free time. <em class="entry">For the most part, I goofed off.</em> <span class="hider">Also, someone was trying to lift a stand up, but the top flew off and hit them in the chin, hard.</span></p> <p class="sad">Once home, I found that the euphonium I was waiting for didn't arrive yet.</p> <p class="normal">I had a normal trombone lesson this time. <em class="entry">I made somewhat considerable progress, and was taught better hand positions.</em></p> <p class="happy"><strong class="entry">The euphonium came!</strong> It took a while, but it finally arrived. <em class="entry">The nice <strong class="entry">Bach 5GS</strong> my mom bought was too small, since we thought the instrument would be a small-shank. Still, the instrument came with a 6 1/2 AL from Jupiter, which I shall use for the time being.</em></p> <p class="happy">Later on, I found out that there was a 5GS there. <em class="entry">Earlier, I had called Mills about it, and they eventually replied saying there was one.</em> My dad and I went there and bought it.</p> <div class="story"> <div class="title">Final Game (Bothell Lost N/A)</div> <div class="storybody"> <p class="normal">After a quick lyre readjustment for my new euphonium, my dad and I dashed off to the school...</p> <h>Enter: Eighth Graders</h> <p class="normal">When I got there, I found out how <em class="entry">huge</em> the band was. <em class="entry">There even was another baritone player from my old school!</em> My section commented on how good my instrument looked. <em class="entry">When we warmed up, he also commented on the great tone it had.</em></p> <p class="normal"><span class="sad">We had trouble cramming into the stands, so we had to cover a full section and around 1/3 of another.</span> Throughout the entire game, I told the eighth grader some things to remember, and cracked a few jokes with him.</p> <p class="normal">When the game actually started, we got into our final setup. <span class="sad"><em class="entry">I was near someone that annoyed me.</em></span> <em class="entry">Also, I talked to the 'leader' of the trumpets a bit, as well.</em> The game for our team was going decently. </p> <p class="sad">The guy in front of me got more annoying. He also hit my section where it hurts most. <em class="entry">I kind of got back at him when he snuck my cell phone away from me.</em> Still, he cracked jokes no matter what. <span class="normal"><em class="entry">Also, the group thrusts were a little messy, but decent to say the least. It <strong class="entry">may</strong> be that the eighth graders haven't gotten used to them yet.</em></normal></p> <p class="normal">At half-time, the little girls danced up with the cheerleaders. <em class="entry">Someone made an insightful comment about how their parents paid them to be sluts.</em> <span class="happy"><em class="entry">Also, the trumpet leader danced and sang with them, and a few of us joined in.</em></span> Of course, we played a few songs. The percussion played, and we did our thing.</p> <p class="happy">Rest came with the third quarter. <span class="sad">Though, when I went to buy drinks, they only had <strong class="entry">Powerade</strong>, which was <em class="entry">okay</em></span> Once back in the stands, I shared the candy I bought with a couple of friends while we chatted. Also, I performed the <strong class="entry">Baritone Test</strong> on the eighth grader's instrument, which proved it as a euphonium. <em class="entry">Though, it still seems too light and small to be a real euphonium. It's the same brand as mine, but a lower-end model.</em></p> <p class="normal"><span class="sad">Our team was losing badly.</span> Still, we kept up our little spirit through it all. It all ended as usual.</p> <p class="happy">My section and I talked on the way back from our last game as sophomores. Also, we played us some <strong class="entry">Oompa</strong>!</p> </div> </div> <p class="normal">After the game, I wondered if there was a Denny's party. My dad and I checked twice, most likely finding it as false; so I went home.</p> </div><p>No comments</p><hr /><form action="postcomments.php?ie=&title=February 9, 2005 - Final Game&date=2005-02-09" method="post" name="comment" id="main"> <div class="right"> <img src="comments_files/right_main_bar.png" alt="right_side" /> </div> <div class="left"> <img src="comments_files/left_main_bar.png" alt="left_side" /> </div> <div class="center"> Date: <input type="textarea" class="upper" name="date" value="2005-02-09" readonly="readonly" /> Title: <input type="textarea" class="upper" name="title" value="February 9, 2005 - Final Game" readonly="readonly" /> <br /> Name: <input type="textarea" name="name" class="lower" /> E-mail: <input type="textarea" name="e-mail" class="lower" /> </div> <div class="comment"> <input type="textarea" name="comment" class="text" /> <input type="submit" value="Post!" class="click" /> </div> </form> </body> </html> Applied this as a div id and a div class, neither of which apply css to the links and text properly. Also hashed all selectors. Some of these are to be followed by regular text/explanations. What am I missing here? Code: .cont { /*container*/
position: relative;
background: #FBFBFB;
float:left;
border: 1px solid #D3D3D3;
width: 195px;
color:#999;
text-decoration: none;
}
#vt-r {
color:#999999;
text-decoration: none;
font-size: 0.90em;
font-weight: 400;
margin: 10px 0px 7px 15px;
}
.vt-r:link {
color:#3366CC;
text-decoration: none !important;
font-size: 0.70em;
font-weight: 400;
padding: 15px 5px 0 0;
margin: 10px 0px 7px 15px;
}
.vt-r:hover {
color:#333;
text-decoration: underline;
}
<div class="cont">
<div id="vt-r">
<a href="/urladdress.htm">LINK1</a><br>
Example text.<br>
<a href="/urladdress.htm">LINK2</a><br>
<a href="/urladdress.htm">LINK3</a><br>
</div>
</div>
Hello all, I'm having a bit of trouble with a list of relative, floated <li> elements, each containing a single absolutely positioned div that appears on hover. I'm using the :hover pseudo-class currently but I will use JavaScript for IE6 once it displays correctly. The code is below. The problem is that the <div> appears on top of it's parent element but behind all other elements. Code:
#wrapper-body ul.staff-list{
list-style-type:none;
padding-top:10px;
position:relative;
}
#wrapper-body ul.staff-list-team{ width:313px; padding-top:0; padding-bottom:15px; margin-bottom:20px; border-bottom:1px solid #d7e3a9; }
#wrapper-body ul.staff-list li{
float:left;
width:230px;
position:relative;
padding:8px 0 8px 15px;
z-index:1;
}
#wrapper-body ul.staff-list-team li{ width:151px; padding-left:0; padding-left:5px; }
#wrapper-body ul.staff-list-team li.right{ padding-left:5px; }
#wrapper-body ul.staff-list-clerks li{ float:none; width:310px; padding-left:5px; }
#wrapper-body ul li.highlight{ background-color:#f4f6ec; }
#wrapper-body ul.staff-list li p{
padding:0 0 9px 0;
margin-left:91px;
}
#wrapper-body ul.staff-list li small{
padding:0 0 5px 0;
margin-left:91px;
}
#wrapper-body ul.staff-list-clerks li span{
color:#A6302B;
display:block;
float:left;
}
#wrapper-body ul.staff-list-clerks li span.clerk-name{ width:140px; }
#wrapper-body ul.staff-list-clerks li span.clerk-phone{ width:120px; background:url(../img/structure/clerks-phone.gif) 0 2px no-repeat; padding-left:23px; }
#wrapper-body ul.staff-list-clerks li a.clerk-email{ display:block; float:left; height:16px; width:16px; background:url(../img/structure/clerks-mail.gif) 0 3px no-repeat; }
#wrapper-body ul.staff-list li div.staff-list-detail{
display:none;
background:url(../img/structure/staff-list-bottom.gif) left bottom repeat-x;
padding-bottom:3px;
margin-top:-15px;
left:4px;
z-index:10;
top:15px;
position:absolute;
}
#wrapper-body ul.staff-list li div.staff-list-detail a{ background:url(../img/structure/staff-list-bullet.gif) no-repeat 0 4px; padding-left:8px; }
#wrapper-body ul.staff-list li:hover div.staff-list-detail{
display:block;
}
An image of what is happening below: Thanks for reading! Greetings Not sure about the best way to go about this. I have an Unordered List that has a set height for the List Items. Like so: Code:
#left ul {
padding: 0px;
list-style-type: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#left ul li {
text-align: center;
float: left;
margin-right: 20px;
height: 200px;
margin-bottom: 20px;
}
This works fine for most of the pages, but there is one where I really need the height of the <li>'s to be 350px. I tried just adding a class like Code:
.comics {
height: 350px;
}
I tried adding this to the <li> Code:
<li class="comics"><a href="#"><img src="images/comics/thumbnails/HeldvsHeldin3_sm.jpg" alt="" width="250" height="350">
</a></li>
and also just a <span> Code:
<li><span class="comics"><a href="#"><img src="images/comics/thumbnails/HeldvsHeldin3_sm.jpg" alt="" width="250" height="350">
</a></span></li>
but it still kept the 200px height. Do I need to make a whole new <li> code or am I missing something? Hi , I have writen an advertising script that basicly lists my text link advertisers , this works everywhere on my site except for on my portal page where i have to use an iframe to insert the content instead of an include. the links come up fine however they are the default blue / purple not the colours defined in the style sheet I tried to make a few changes to the style sheet and iframe however nothing seemed to work , so I am hopign somoen can tell me where i am goin wrong first lets start with the example list of links all located on a page called New3.html Code: <a href="this is a test"> test.com</a> <a href="this is a test"> test.com</a> <a href="this is a test"> test.com</a> <a href="this is a test"> test.com</a> <a href="this is a test"> test.com</a> The page with the iframe is called New2.html and contains the following Code: <html>
<head>
<style type="text/css">
<!--
#main_iframe a:link{
color:purple;
}
#main_iframea:visited{
color:red;
}
#main_iframe a:hover {
color:black;
}
#main_iframe a:active{
color: green;
}
-->
</style>
<title></title>
</head>
<body>
<iframe id="main_iframe" name="main_iframe" src="New3.html" frameborder="0" scrolling="NO">
</iframe>
</body>
</html>
what I basicly want is for the css in the page New2.html to effect the links that are imported from New3.html unfortunately it's not as easy as just putting the css into New3.html though because the css file used will depends on the skin of the users cms The logic with my above examplkes is that I tried to set the iframe with the id or main_iframe and then i tried to set the link variables for that id , but as you can see it didn't work thankyou so much in advance to anyone that can help Fallen Angel I have a css stylesheet and an xslt stylesheet. In my xml doc i apply the xslt stylesheet, but how do i also apply the css? thanks This is a bit puzzling for me. I read that I can apply css to something based on id, which I have been doing, thats how my template is made, USING CSS :S. I need to apply css to an H2 that already has css applied to it but has a different id. Here is the page I need to do it to, view it and see why I need to. http://www.coldfusionzone.com/index.php?p=7 Look down towards where the comments are and youll see Leave a comment I need to change that to where it expands up to 40 pixels from the side, and has a black background without the stinkin date pic next to is . Now that Im talking about it im confused again. Ha ha I had it down pat but now that I need help im confused thats strange. But I need to apply a css style to it when it already has a css it.... Here the css style that controls it is on top and the css style im trying to use is on the bottom. PHP Code: div#content h2 { background: #000 url(images/date.jpg) no-repeat left center; background-color: #232323; color: #5F5F5F; padding: 2px 15px 2px 85px; border: 1px solid #494949; margin-left: 40px; margin-right: 220px; margin-bottom: 10px; margin-top: 0; font-size: 95%; font-weight: normal; } div#content#postcomment h2 { background: #000; background-color: #000000; color: #5F5F5F; padding: 2px 15px 2px 85px; border: 1px solid #494949; margin-left: 40px; margin-right: 220px; margin-bottom: 10px; margin-top: 0; font-size: 95%; font-weight: normal; } hey guys i have this so far
Code: div#navbar2 {
height: 30px;
width: 100%;
border-top: solid #000 1px;
border-bottom: solid #000 1px;
background-color: #99b3b4;
text-align:center;
}
div#navbar2 ul {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #FFF;
line-height: 30px;
white-space: nowrap;
}
div#navbar2 li {
list-style-type: none;
display: inline;
}
div#navbar2 li a {
text-decoration: none;
padding: 7px 10px;
color: #FFF;
}
div#navbar2 li a:link {
color: #FFF:
}
div#navbar2 li a:hover {
font-weight: bold;
color: #000000;
background-color: #e4ebeb;
}
but what i can figure out is how to show the link they are on as a selected button so having the button be red if they are on that link... Code: <div id="navbar2"> <ul> <li><a href="index.php?page=update">Basic</a></li> <li><a href="link2.html%20">Button 2</a></li> <li><a href="link3.html%20">Button 3</a></li> </ul> </div> Please can anyone tell me why my style sheet is not applying to this page http://www.on-line-biz.com ? This is killing me! The border of a DIV top is working perfectly on FF but not applying on top in IE 6+7. Here are the class attributes: {padding:1px 7px 3px; font-size:16px; border-color:#555555; border-style:solid; border-width:1px 1px 0px; text-decoration:none; color:#425366; background-color: #abd3ff; font-weight:bold;} Not sure if the problem is on this class or in anything that affecting it. Any suggestions will be great. Ehud How do I apply margins to the outside of all of my frames? Just the outside, treating my frames together as one page and adding blank space to the outside of that page rather than adding margins to each frame separately. |
|||||||