|
CSS - Class Wont Change Background In Ie. Urgent Help Needed.
Hello everyone. I have a site that uses a PHP command to pull the PHP modifier from the URL and use that as a class for a header. Those classes each have their own BG image in my external stylesheet. On any browser other than IE win it works fine, headers change as the class changes. On IE win though only the first one (my "about" class) works, the rest default to the standard header. I have re-typed the rest to see if it was just a text problem but nope. Everything validates fine.
The page is http://holiday.mrpunkin.com/about.php My classes are as follows: they all modify the "mid" div as you can see: Code: #mid.about {background: transparent url("/img/headers/mid_about.gif");}
#mid.activities {background: transparent url("/img/headers/mid_activities.gif");}
#mid.food {background: transparent url("/img/headers/mid_food.gif");}
#mid.travel {background: transparent url("/img/headers/mid_travel.gif");}
#mid.resident {background: transparent url("/img/headers/mid_res_rel.gif");}
#mid.health {background: transparent url("/img/headers/mid_health.gif");}
#mid.fitness {background: transparent url("/img/headers/mid_fitness.gif");}
#mid.maintenance {background: transparent url("/img/headers/mid_bg.gif");}
#mid.construction {background: transparent url("/img/headers/mid_construction.gif");}
#mid.employment {background: transparent url("/img/headers/mid_employment.gif");}
Does anyone know why IE Win won't recognize the different BG images and use those? When I view the source I can tell that its outputting the class name correctly, so thats not the issue. Please get back to me asap. Thanks. Similar TutorialsI really need help for my wordpress blog I need it to have a front page.. and i want to link images from it to the new categories... but the problem is that I want it to be like a grid and don't want all the images in the same sizes.. so here goes this is how it is.. each color is a separate picture to of the exact size.. I need them to be like how this image shows and linked too pls can someone provide me the CSS code for it ??? but the forum is not allowing to post links here it is without the brackets http://tinypic(.)com/r/32zjjpd/4 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 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;
}
Im using this to make an onscroll effect Code:
table.left {border-collapse:collapse;
float:left;
margin-left:10px;
margin-right:10px;
background:#8f8f8f;
padding:5px;
color:#000000;
font-family:Verdana;
text-decoration:none;
}
td {padding-right:10px;
padding-left:10px;
padding-top:8px;
padding-bottom:8px;}
td.bg:hover {
background:url(images/yellow.png);
padding-right:10px;
padding-left:10px;
padding-top:8px;
padding-bottom:8px;
}
And the links don't format with the typical css markup Code:
a:active {color:#000000;
font-family:Verdana;
text-decoration:none;}
a:link {color:#000000;
font-family:Verdana;
text-decoration:none;}
a:hover {color:#000000;
font-family:Verdana;
text-decoration:none;}
Ive tried a couple different things like making td.bg:link, td.bg:active with the specifications->no luck Note:this is in IE Nevermind...I just figured it out..used a link class and set the visited attribute I have a button which is drawn using css background-image and it has a hover effect using css a:hover. I also need to have a click state for this button, so that each time the button is clicked it switches between two different states (4 states total). Is this possible? I'm assuming this will probably require JavaScript which I have little experience. Thanks in advance for any help! I have a layout made up of divs, and held together by another div. That holder div is supposed to have a background image, but it wont show on every browser that I've tried, except IE7. Here's the id: #holder { background-image: url(/files/images/CSS/header.png); width: 750px; margin-left:auto; margin-right:auto; margin-bottom: 10px; margin-top: 10px; } Backgrounds show on other divs, so why not this one? Hi folks, my website section "www(dot)mail(dot)tssma(dot)net" has an extra blue bar at the bottom of the page even though i specifically set it to 900 with the following css. I actually dont know why its blue either. Code:
body
{
background-image: url('http://www.tssma.net/templates/renrentemplate/images/Page-BgSimpleGradient.jpg');
top:0;
width: 100%;
height: 900px;
Not only that i cant seem to change the Username and Password input which is currently grey, to black using the css. Help will be greatly appreciated EDIT: Hahah yay, i somehow got rid of the bar on the bottom just need help with the grey input fonts. Is there a fix? Hello, Im using a separate style.css file to define everything through the site... ive put in this code: Code: .sideheadline {font-family:Verdana,Sans-serif; font-weight:bold; color:#FFFFFF; background-color: #003366;
background-image: url(images/bg.gif); background-repeat:repeat; background-attachment:fixed; font-size:10px; }
and connected to this line: Code: print "<tr class='sideheadline'><td>Look at the rest too</td></tr>"; But nomatter what i try the image wont show, i tried several images and theyre loadable from the urlbar... so the image works Now i went to w3schools and tested with the online editor... there this exact code works, but then when i copy it to my site it wont! Im using dreamweaver for a editor... Hi all, I am trying to do something that I think is trivial, but just cannot seem to get this to work in IE! I am trying to draw an IFRAME that contains a gray background that contains a document that has a white background. The result is supposed to make the scrolling document in the IFRAME look like a white piece of paper with a gray border of 8 pixels. This works perfectly in Safari and Firefox, but no matter what I try, I cannot figure out how to get this to work in IE (IE8 specifically). Here is the code: PHP Code: <iframe name='monkey' src='poopy.html' scrolling='auto' frameborder='0' style='background-color:gray;width:500px;height:150px;'></iframe> And the document in the IFRAME is trivial PHP Code: <div style='padding:8px;border:1px solid black;background-color:white;'> This is a bunch of txt THis is a bunch of txt ... (repeat this text a bunch so you have a scrollbar) </div> As far as I can tell, IE implements the background-color attribute for IFRAMES, but it seems to ignore the color - either that or its whacked-out box model requires some kinda bizarre workaround that I cannot find. Thanks in advance for the help. -- Jon I have a form with a list of things. The number of things in the list is variable, depending on certain factor, different things, different numbers of things. Next to each thing is a radio button. There is a question with two radio buttons, "yes" and "no". When "no" is selected, I want the radio buttons to be disabled, and the color of the text to change to gray. For the radio buttons, I have a simple JS function: javascript Code: Original - javascript Code function enableCFFID() { document.cartform.cffid.disabled=false; } function disableCFFID() { document.cartform.cffid.disabled=true; }
For the test that goes with each thing, obviously I don't want to have to assign unique ID (perhaps in a span tag that encloses the text). I would want a common name for all of them. But this would mean I can't use getElementById. What other method can I use to change the class for a group of span tags who's number is variable? I believe the importance of css styling is external, internal head, internal tag (from least to most) problem i have is that there is a tag that looks like so.. <div style="width:420; height:120; overflow: hidden;"> </div> I need to put stuff inside this box that defies those commands... and since the tag doesnt have a class or id, it is difficult to do anything like add the !important tag or anything... I know there is inherit, is there a opposite of inherit, so i can force that tag to do what i want? Hello All, I have issues with the repeating background on IE only. In firefox,it works fine. Please find the attached ZIP file for all the content with its assets. I am trying to have a curved images on the TOP LEFT & TOP RIGHT only and a image background on the content. In Firefox, the content background is not repeating after the TOP RIGHT and fits correctly. But in IE, the content background is extended after the TOP RIGHT. Please advice. Thanks in advance. John Hey guys, I'm hoping what I need to do involves only CSS (though, it wouldn't shock me if I needed a lot more!) Anyways, the basic thing I'm doing is a table that hold lots of numbers. I'm creating a "times table" - which looks roughly something like this: ......1 2 3 //top row (multiples) 1.....1 2 3 2.....2 4 6 3.....3 6 9 Now, when you rollover, let's say, the '6' - the TD background color for the '6', left '2' and top '3' would change to a different color (bolded in this example). This would work the same way for every other number as well, which involves overlapping classes. I can only get one rollover working, with simple 'hover' commands. I've search for an answer for hours, to no avail. any suggestions? And here's a more "code specific" example of the table: <table> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>1</td><td>1</td><td>2</td><td>3</td> </tr> <tr> <td>2</td><td>2</td><td>4</td><td>6</td> </tr> <tr> <td>3</td><td>3</td><td>6</td><td>9</td> </tr> </table> Thanks so much guys! I would like to know the background color of a text element which is desigend by a class which has a background color set, but when I alert the color a blank is displayed. This is what I do Code: <input type="text" size=30 name="kfirma" class="requirebox" onfocus="alert(this.style.backgroundColor)"> Thanks Don't know if I got the language right on the headline? I've got the following css for my forms: .form table { border-collapse: collapse; color: black; border: 1px solid black;} and the markup looks like this <table class="form" width="100%" cellspacing="0"> however when I link a different page to the same sheet I'm getting a table that has been styled with the above scc even though i haven't marked up the class... any ideas... good http://www.rickweston.com/my_ucwdc/membership/register.php bad http://www.rickweston.com/judge/about_judge/index.php thnks for any help Please let me apologise if this this the dumbest question ever but I know almost nothing about CSS. I want to make the white section of my page, the text area, wider but I have no clue how to do it, (a friend did the page originally and she is no longer around). And if I do extend the white section can I just add more to the header image to make that fit the new text area? Thank you I am using a Wordpress template called Arthemia Premium. I want to change the background color in the headline section, but nothing "sticks" when I change the hex color codes in the style.css. Tell me what to post here and I will. Thanks BTW I have very basic knowledge of CSS I have a list of things, and i would like it to change the entire background of the item scrolled over... I don't want it to be a link, just change the background of the div when it is scrolled over. |
|||||||