|
CSS - Css Filters Support For Mac Os X Browser ?
I viewed several examples of use of CSS filters like blur wave mask etc with various browsers but none reflected the changes, how come ?
Similar TutorialsI am working on a header for a site and am having trouble with cross-browser support for one element. I have kept all of the CSS in the html page for testing purposes. The problem I'm having is that in FF and IE6, I am having difficulty getting the #menuBar, .filmstripTop, #menuChoices, and .filmstripBottom elements to align on top of each other, despite margins, padding, etc. set to 0. (I have set the background of #menuBar to yellow so you can see what I think is the offending element.) In FF and IE6, I see the yellow running across the screen but in different places. In IE running under Windows Vista, everything appears aligned as intended. (The menu text is just a placeholder for the navbar I will do once the other formatting is fixed.) I'm sure this must be an easy fix and something I've overlooked, but I have been at this for hours and can't seem to figure out how to make this work. Suggestions? Thanks! url: http://www.bonvoyageimagery.com Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<style type="text/css">
body {
border: 0 0 0 0;
margin: 0 0 0 0;
background: #000;
color: #FFF;
}
#header {
background: url(images/LogoBackgroundGradient.jpg) repeat-x;
text-align: center;
margin: 10px 0 0 0;
padding: 0 0 0 0;
}
.imgBorderHeader {
border: 2px solid #888;
}
#menuBar {
clear: both;
border: 0 0 0 0;
padding: 0 0 0 0;
margin: -4px 0 0 0;
background: yellow;
}
.filmstripTop {
border: 0 0 0 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
height: 12px;
width: 100%;
clear: both;
background: url(images/FilmstripTop-8x12.jpg) repeat-x;
}
.filmstripBottom {
border: 0 0 0 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
height: 12px;
width: 100%;
clear: both;
background: url(images/FilmstripBottom-8x12.jpg) repeat-x;
}
#menuChoices {
width: 100%;
clear: both;
border: 0 0 0 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
text-align: center;
background: #362217;
color: white;
}
#menuChoices p {
font-size: .75em;
font-family: Arial;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="header">
<img border="0" src="images/Logo2.jpg" style="padding-right: 70px;" width="280" height="125">
<img class="imgBorderHeader" src="http://armchair-traveler.smugmug.com/photos/random.mg?AlbumID=1035223&Size=Th" width="100" height="100" hspace="10" align="top" style="margin-top: 10px; margin-bottom: 10px" />
<img class="imgBorderHeader" src="http://armchair-traveler.smugmug.com/photos/random.mg?AlbumID=1035171&Size=Th" width="100" height="100" hspace="10" style="margin-top: 10px; margin-bottom: 10px" align="top" />
<img class="imgBorderHeader" src="http://armchair-traveler.smugmug.com/photos/random.mg?AlbumID=1035174&Size=Th" width="100" height="100" hspace="10" style="margin-top: 10px; margin-bottom: 10px" align="top" />
<img class="imgBorderHeader" src="http://armchair-traveler.smugmug.com/photos/random.mg?AlbumID=2645154&Size=Th" width="100" height="100" hspace="10" style="margin-top: 10px; margin-bottom: 10px" align="top" />
</div>
<div id="menuBar">
<div class="filmstripTop"></div>
<div id="menuChoices">
<p>Home Destinations Themes Specialty Calendars Browsing and Ordering Customer Care</p>
</div>
<div class="filmstripBottom"></div>
</div>
</body>
</html>
This is frusteratung me so much... yet again I'm back because IE does not respond properly. Here is the page: tri-m.com/index_jan_newFproduct.html Please don't tell me I should validate first because I know validating is not the problem here and I will be validating after I fix this. The problem is in the Join the Mailing List section. The image behind the form field moves when you restore down from being maximized and you resize the page up and down. In IE the image moves but in FF the image is static. The solution is probally quite simple but I'm so flustered right now that I'm not able to come up with the solution. If someone could help me that would be wonderful and greatly apperciated. - Jacenta I've got the layout I want working in IE. I'd like to know how to make it work in all browsers. Mozilla seems to ignore the overflow setting for the docBody class. I'll happily ditch the table if someone can tell me a better way to achieve the result I want. Here's the code Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style>
body
{
margin: 0;
padding: 0;
background: yellow;
overflow: hidden;
}
div
{
margin: 0;
padding: 0;
}
.pageContainer
{
width: 100%;
height: 100%;
border-collapse: collapse;
margin: 0;
padding: 0;
}
.header
{
height: 100px;
background: orange;
}
.docBody
{
height: 100%;
width: 100%;
overflow: auto;
background: black;
}
.docBodyColumns
{
margin: 0;
padding: 0;
width: 100%;
border-collapse: collapse;
}
.col1
{
width: 33%;
background: green;
padding: 10px;
}
.col2
{
width: 34%;
background: red;
padding: 10px;
}
.col3
{
width: 33%;
background: blue;
padding: 10px;
}
.footer
{
height: 60px;
background: aqua;
}
</style>
</HEAD>
<BODY>
<table class='pageContainer'>
<tr>
<td class='header' valign='top'>Header</td>
</tr>
<tr>
<td>
<div class='docBody'>
<table class='docBodyColumns'>
<tr>
<td class='col1' valign='top'>
Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1
</td>
<td class='col2' valign='top'>
Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2
</td>
<td class='col3' valign='top'>
Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class='footer' valign='top'>Footer</td>
</tr>
</table>
</BODY>
</HTML>
Hey Everyone, I am having trouble getting firefox to behave with a css3 button I have. It's mainly the linking of it but also the style gets out of whack in FireFox. It works perfect in chrome and in safari. Here is the link http://pt11.*******com/index2.php?x=videos.html Hi- I need to know if IE 5, IE 6 or IE7 are considered standards-compliant and do any of them support fully CS2 and strict standards? Thanks in advance- S Hello, im new to this forum ( A pleasure to meet everyone! ) I was browsing through the forum and could not find exactly what my problem is. I am trying to make a filter for my CSS code with the dropshadow effect on text. Eg: .content { color: White; text-align:justify; line-height:12px; font-family:tahoma,arial narrow,arial; font-size:9px; Filter: Alpha(Opacity=70) DropShadow(Color=#8F5A3A, OffX=1, OffY=1, Positive=1); } The problem is its just not working Its hard for me to get the colors correct to begin with because of the BG the text is on. But If I could get the Alpha(Opacity) to work with the DropShadow the text will be significantly more visible and would work fine. Any suggestions? or Solutions? Keep in mind im NOT very knowledgable in a lot of new things yet Help much appreciated- Thanks a lot! This is driving me absolutely insane. I'm trying to figure out WHY this DIV isnt showing up as transparent in IE. I have a DIV with the following style applied to it: Quote: .blocktitle { text-align: center; padding: 3px; font-weight: bold; background-color: black; color: white; filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } I have a table.. at the top I want a title bar thats transparent, and the content below. I need the transparency so if I change the color of the TD the titlebar still stands out and matches with the new color. Problem is.. this doesnt work in IE and I'm losing my mind Mozilla.. works awesome. IE.. the titlebar is black and not transparent at all. If I set the position to absolute it goes transparent just fine! But then the content below invades the spacing for the title bar. Here's the HTML: Quote: <table border="0" cellpadding="0" cellspacing="0"> <tr> <td style="background-color: green;"> <div class="blocktitle"> Test Title </div> <div style="height: 1px; background-color: black;"><img src="/images/spacer.gif" height="1" width="1"/></div> Some content goes down here. </td> </tr> </table> Any help would be greatly appreciated. filter:alpha(Opacity=50); works in IE what can i use to get this same effect for Netscape, and other browswers across the board ? Friends, I have been developing a website in IE, and I've been using the dropshadow filter in CSS from Microsoft on a few of my <DIV>'s. All was well. Today I was introduced to Firefox - I like it, but my CSS filters are not rendered in firefox. Is this an additional that is yet to be made to the new rookie browser? Jonathan Here is some code I've started for a project. It is for IE 5+ and uses filters. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> </head> <body id="bodyid" bgcolor="f3f3f7" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" scroll="no"> <script language="JavaScript1.1"> function resizePage(){ windowHeight = (document.getElementById('bodyid').clientHeight - 60); document.getElementById("bottomTable").style.height = windowHeight ; } </script> <style type="text/css"> .tddrop { filter: progid:DXImageTransform.Microsoft.dropShadow(Color=DDDDDD,offX=3,offY=3,positive=true); border: solid #c0c0c0 1px; background-color: #ffffff; } .spacer{width:15px} </style> <table border="0" bgcolor="#34487E" style="width=100%" cellpadding="0" cellspacing="0" > <tr valign="top"> <td style="height:50" valign="middle" > <!--- Top bar including left image ---> <table border="0" cellpadding="0" cellspacing="0" style="width:100%;height:100%" > <tr> <td> <!---- image here... ----> </td> <td style="width:100%;filter:progid:DXImageTransform.Microsoft.Gradient (GradientType=1, StartColorStr='#34487E', EndColorStr='#C5D1E1')"></td> </tr> </table> </td> </tr> <tr><td style="height:1" bgcolor="#7c7c94"></td></tr> <tr> <td style="height:10;filter:progid:DXImageTransform.Microsoft.Gradient (GradientType=0, StartColorStr='#f3f4fa', EndColorStr='#9997b5')"> </td> </tr> <tr><td style="height:1" bgcolor="#7c7c94"></td></tr> </table> <table id="bottomTable" border="0" style="width:100%;height:300" cellpadding="0" cellspacing="12" > <tr> <td class="tddrop" style="width:180;"> </td> <td class="tddrop"> </td> </tr> <script>resizePage();</script> </body> </html> Notice that between the two colums, the <td>'s are not lining up at the bottom. If you remove the shadow filter they line up fine. Anyone have an idea why this might be so? Thanks I have created a simple css and I notice that when the html page is opened by IE and NN my text-decoration: none seems to have no effect on the links. When I use Opera it works well. Is it my code or do you have to do something else as the text I'm working from says > and + support is not uniform? div.navbar { font-family: Arial, Helvetica, sans-serif; white-space: nowrap; } div.navbar > span.self { font-weight: bold; color: #c80; padding: 3px; } div.navbar > a:link { padding: 3px; color: #300; text-decoration: none; } div.navbar > a:hover { background-color: #eb0; color: #200; padding: 3px; text-decoration: none } Just a small ramble... About 2 or 3 weeks ago I finally installed IE 7 Beta 2 to give it a test drive to see how MS was coming along in their CSS support... Before I go any further, let it be known: I ALWAYS develop in Firefox and correct for IE ... Anywhoo, I was in the middle of this large project for my client and much to my surprise, MS has come a very loooong way in supporting CSS; so much so I couldn't tell ANY difference between Firefox 1.5 and IE7...seriously. I know MS still hasn't given into standards 100% with IE7 and IE7 is still along way off of having the marketshare IE6 has right now, but I was soooo thrilled I just wanted to drop everyone a line here and share my joy! IE7 Beta 2 Download Link just look at my site in firefox, then IE, if you have it. horrible. how do i correct everything? firstly, the main div columns which are floated left end up like normal non-floating divs, so they are stacked vertically. Code:
<div id='leftcolumnmenusouter'><!-- left column menus -->
<div id='leftcolumnmenus'>
<?php include "columnmenus.php"; ?>
</div>
</div>
<div id='maincontentcolumnouter'><!-- middle column -->
<div id='maincontentcolumn'>
<?php
if (is("home")) {
include "home.php";
} else if (is("register")) {
include "register.php";
} else if (is("login")) {
include "login.php";
} else if (is("comment")) {
include "comment.php";
} else if (is("profile")) {
include "profile.php";
} else if (is("category")) {
include "category.php";
} else if (is("game")) {
include "game.php";
} else if (is("links")) {
include "links.php";
} else if (is("rules")) {
include "rules.php";
} else if (is("faq")) {
include "faq.php";
} else if (is("pp")) {
include "pp.php";
} else if (is("links")) {
include "links.php";
} else if (is("page")) {
include "page.php";
} else if (is("news")) {
include "news.php";
} else if (is("users")) {
include "users.php";
} else if (is("search")) {
include "search.php";
} else if (is("taf")) {
include "taf.php";
} /*else if (is("submit")) {
include "submit.php";
} */else if (is("pm")) {
include "pm.php";
} else if (is("play")) {
include "play.php";
} else if (is("request")) {
include "request.php";
} else if (is("contact")) {
include "contact.php";
} else {
include "error.php";
}
?>
</div>
</div>
CSS: Code: #maincontentcolumnouter {
width:75%;
margin:0px;
float:left;
}
#maincontentcolumn {
margin-top:8px;
margin-bottom:0px;
margin-left:4px;
margin-right:8px;
}
#maincontentcolumn .ocontentsection {
margin-bottom:8px;
}
#maincontentcolumn h2 {
text-indent:1em;
}
#leftcolumnmenusouter {
width:25%;
margin:0px;
float:left;
}
#leftcolumnmenusouter #leftcolumnmenus {
margin-top:8px;
margin-bottom:0px;
margin-left:8px;
margin-right:4px;
}
#leftcolumnmenus .ocontentsection{
margin-bottom:8px;
}
#leftcolumnmenus h2{
text-align:center;
}
#footer {
margin:0px;
padding:0px;
clear:both;
}
Just curious if anyone has any resources that explain what type of overflow attributes Opera supports. I'm working on a site right now and see that in Opera "overflow: auto" is not supported. Is there a known work around? I am using Opera 9.25 Thanks! HI; Does the hover not support for the IE browser ? I am using a hover for buttons in IE browser, it does not has any reaction when the cursor is held over the buttons, but it does work in the Firefox, Netscape, and Opera browser. Could any one tell me why ? Thanks. My code as following; Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css" >
body {
font: 80% arial, helvetica, sans-serif;
background: white;
margin:0;
}
#container{
position: relative;
width: 780px;
w\idth: 780px;
border: solid #036;
border-width: 0 3px;
margin: auto;
}
table {
position: absolute;
width: 700px;
margin: auto;
}
table td {
background: url(mybutton1.jpg);
background-repeat: no-repeat;
background-position: center;
width: 150px;
height: 50px;
text-align: center;
font-size: 20px;
color: white;
}
table td:hover {
background: url(mybutton2.jpg);
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<div id="container">
<table>
<tr>
<td> Home </td> <td> About Us </td> <td> Contact Us </td> <td> Help </td>
</tr>
</table>
</div>
</body>
</html>
Please look at this URL http://www.finance.samif.com/Koelkast When I select any check box on left column then one pop up is display on screen. This image shows properly in Fire fox. When I scroll up down then image is fixed in fire fox. Vertically and Horizontal But when I used IE and select check box on bottom left menu then I can't see pop up image. Because this is not display vertically middle or it is not fixed. Please give me idea or suggestion how I can fix it. Thanks I'm looking to make a semi-elastic layout using max- and min-width to keep the main container from dropping below about 750px or stretching above about 950px. I'm hoping that this would allow the layout to work nicely for those with 800x600 displays (I really wish people would stop using 800x600!), stretch out a bit for those with 1024x768 displays and then not stretch out more so as to maintain a decent line length. I know that IE for Windows doesn't support max- and min-width and if these are the only browsers that don't I can use a suitable workaround. However, if there are other browsers that don't support max- and min-width, I'll run into some problems. If anyone knows of any modern browser (i.e. not NS 4.7!) that doesn't support these CSS properties, I'd really appreciate knowing about it. I'd also really appreciate it if people could comment either way - i.e. please also mention if you believe it is only IE that doesn't support these properties. Thanks in advance for any comments! I've tried to insert a horizontal drop down CSS menu in my layout. However, the menu bar displays about 10 pixels lower in Firefox than it does in IE. <a href="(URL address blocked: See forum rules)">Link</a> I checked the margins, padding but can not seem to find a way to get the menu to display at the same position in both browsers. Any guidance is very appreciated. thanks. My first post.... ok... First I would like to say THANK YOU to anyone who has time to bestow some knowledge to me on what I am sure is a highly noob-esqe situation. I would also like to say that I have thoroughly search this and other forums for my issue, unfortunately I dont think I understand CSS or any web design enough to comprehend the solutions given. I think this may require someone with the knowledge I lack to come down to my level... if you can bend that low.. and walk me thru layman term-style. Again thanks in advance for anytime spent helping out. That being said I was recently trying to jazz up my website that is hosted by a certain music community. I do a decent amount of business thru this site so I wanted to step up the interface a little and get away from using the standard page setup they give you. They do offer the option to edit CSS to construct your own for a little more customization. I jumped in, and after a few days of struggling, I got it looking how I wanted it. I was excited until I realized it looked different on almost every computer i visited the site on. My Background is fine, but the links to paypal and other content is all over the place(e.g. song player, twitter link, buttons) I have tweaked and tweaked, but have not been able to remedy this apparently common problem due to my lack of knowledge and experience. My only hope is to post the coding here and have a Smart Guy/Girl guide me in the right direction. I hope Im not asking too much guys... here goes (I know I can post my url here, how can I redirect you guys to veiw my site??) /********* SoundClick CSS Template (based on custom version Mon, Sep 28 2009) ***********/ Quote: /* general */ body {background: url((MyBGJPEGforbackground)); margin:0px;} body,div,tr,td,select,textarea,input,option {font-family:Verdana; font-size:11px;} a, a:link, a:visited {color:white; text-decoration:none;} a:hover {color:#ff0000; text-decoration:underline;} .pageFooter {clear:both; color:gray; padding:1px 0px 50px 20px;} .infoBox {width:650px; margin:50px auto; background:white; color:black; border:silver solid 1px; padding:30px; font-size:14px;} /* hardly used, its for error messages to user */ .infoBox .quotes {margin:20px; border:#4b4b4b dashed 1px; font-style:italic; padding:10px; background:;} /* main containers */ .mainTable {background: url((MainTableBGPicWentHere)) ; color:#999999; width:750px; margin-left:auto; margin-right:auto; text-align:center;} .mainContent {background:url(/images/siteNav/transbgblocks/black/bg_0.png); color:#999999; width:725px; float:left; overflow:hidden; margin:0px 0px 20px 5px;} /* IE6 doesnt support our preferred overflow:visible */ /* left navigation */ .navigation {background:url(/images/siteNav/transbgblocks/black/bg_0.png); color:white; width:300px; float:left; overflow:hidden; margin:10px 0px 20px 0px;} .navigation a:link, .navigation a:visited {color:#999999;} .navigation a:hover {color:#ffffff;} .navigationDivider {height:6px; line-height:6px; border-bottom:#232323 dashed 1px; margin-bottom:6px;} /* general elements */ .headline {background:transparent; color:transparent; font-weight:bold; border-bottom:transparent dashed 0px; border-top:transparent solid 0px; padding:330px 1px 50px 50px;} .headlineBig {font-size:22px; font-weight:normal;} .headlineSuppl {float:right; margin:0px 0px 0px 100px; color:#666666; font-size:11px; font-weight:normal;} /* for text/links on the right side of main headline (e.g. song count on main page) */ .headlineSuppl a:link, .headlineSuppl a:visited {color:#666666; text-decoration:none;} .headlineSuppl a:hover {color:black; text-decoration:underline;} .pageturner {background:; color:#cccccc; border:#4b4b4b solid 1px; text-align:right; padding:10px; font-size:13px; font-weight:normal;} /* pages menu (previous, next..), e.g. on music page, message board */ .pageturner .nonactive {color:#666666;} .pageturner a:link, .pageturner a:visited {color:#cccccc; text-decoration:none;} .pageturner a:hover {color:#ff0000; text-decoration:underline;} .listedPicsBox {border:#4b4b4b solid 1px; width:114px; height:160px; overflow:hidden; padding:2px 1px 4px 1px; margin:0px 4px 10px 4px; float:left; font-size:11px; text-align:center;} .listedPics {width:110px; height:125px; background-position: center center; background-repeat: no-repeat; margin:2px 0px 4px 0px; overflow:hidden} .breaker {height:1px; line-height:1px; clear:both} /* general color and font assets */ .color_supplemental {color:#666666;} /* used e.g. for song pages comments count */ .alternateBG0 {background:none;} /* used as background colors for comments */ .alternateBG1 {background:none;} /* alternate color */ /* main page (the default entry page) */ .mainContent .contHeadline {clear:left; font-size:16px; color:#cccccc; padding:1px 0px 2px 20px;} /* interview questions */ .mainContent .contText {clear:left; padding-left:15px;} .mainContent .contInterview {clear:left; padding-left:30px;} .mainContent .newsBox {clear:both; background:transparent; color:white; border:transparent solid 0px; margin:6px 20px 0px 20px; padding:100px;} /* main page: video box (different from video page) */ .videoBox_mainPage {padding:5px; margin:0px 100px 20px 100px;} .videoBox_mainPage .video {padding:5px; margin-bottom:10px;} .videoBox_mainPage .title {font-size:15px; text-align:center; margin-bottom:3px;} .videoBox_mainPage .shareLinks {float:right; padding:2px; border-bottom:#4b4b4b dashed 1px;} .videoBox_mainPage .labels {color:#666666; width:100px; padding-right:20px; text-align:right; float:left;} .videoBox_mainPage .info {padding-left:120px;} .videoBox_mainPage a:link, .videoBox_mainPage a:visited {font-size:13px; font-weight:normal; text-decoration:none;} .videoBox_mainPage a:hover {text-decoration:underline;} /* main page: upcoming shows */ .liveshowsBox {background:#cccccc; color:#000000; width:300px; margin:15px 2px 15px 10px; float:right; clear:right;} .liveshowsItems {padding:4px 0px 0px 0px; font-size:11px; clear:both;} .liveshowsBox a:link, .liveshowsBox a:visited {color:#000000; text-decoration:none;} .liveshowsBox a:hover {color:#666666; text-decoration:underline; cursorointer;} /* main page: standard song box on artist page (only this song box or the embedded player is used. Never both together) */ .playerBox {float:left; clear:left; padding-left:20px; margin:300px 0px 100px 0px;} .playerBox .playerHead {background:#000000; color:#cccccc; border-top:#4b4b4b solid 1px; border-bottom:#4b4b4b solid 1px; text-align:right; font-size:13px; padding:3px 5px 3px 3px;} .playerBox .playerHead a:link,.playerBox .playerHead a:visited {color:#666666; text-decoration:underline;} .playerBox .playerHead a:hover {color:#ffffff; text-decoration:underline;} .playerBox .songBox {background:#cccccc; border-bottom:#4b4b4b solid 1px; width:330px; padding:100px 0px 0px 1px; overflow:auto;} .playerBox .songBox .singleSong {color:#000000; font-size:13px; padding:1px;} .playerBox .songBox .singleSong:hover {background:#000000; color:#cccccc; cursorointer;} /* main page: VIP embedded player (only this embedded player or the standard song box is used. Never both together) */ .embeddedPlayer {margin:1px auto; width:750px;} /* main page: tabbed content headers (fans,stations) */ .tabbedCont_header li a:link, .tabbedCont_header li a:visited {background:#000000; color:#666666; text-decoration:none; margin:0px 20px 0px 0px; padding:3px 6px 3px 6px; border:#666666 solid 1px; border-bottom:none; } .tabbedCont_header li a:hover {color:white;} .tabbedCont_header li.selected a:link, .tabbedCont_header li.selected a:visited {background:#111111; color:#999999; border:#111111 solid 1px; border-top:#999999 solid 1px; font-weight:bold;} /* main page: fans, stations (tabbed content) */ .fansBox {padding:30px 20px 20px 20px; clear:both;} .fansBox a:link, .fansBox a:visited {} .fansBox a:hover {} .fancount {background:#111111; color:#666666; text-align:right; padding:3px 5px; margin-bottom:8px; font-size:11px; font-weight:normal; border-bottom:#232323 dashed 1px; border-top:#222222 solid 1px; } .fancount a:link, .fancount a:visited {color:#B8B8B8; text-decoration:none;} .fancount a:hover {color:#E6E6E6; text-decoration:none;} .fansBox_content {background:url(/images/siteNav/transbgblocks/black/bg_20.png) important; background:#111111;} .fansBoxLastLine {background:#111111; color:#666666; clear:both; text-align:right; padding:3px 5px; margin-top:8px; font-size:11px; font-weight:normal; border-bottom:#222222 solid 1px; border-top:#232323 dashed 1px;} .fansBoxLastLine a:link, .fansBoxLastLine a:visited {color:#B8B8B8; text-decoration:none;} .fansBoxLastLine a:hover {color:#E6E6E6; text-decoration:none;} .stationItem {clear:both; color:black; border-bottom:#4b4b4b dashed 1px; padding:0px 1px 0px 1px;} .stationPicBox {float:left;} .stationPics {width:70px; height:70px; background-position:center center; background-repeat: no-repeat; margin:0px 0px 1px 0px; overflow:hidden} .stationButtonsBox {float:left; padding:2px 15px 0px 5px; height:60px;} .stationsText {color:#999999; height:80px; overflow:hidden;} .stationlink a:link, .stationlink a:visited {color:#999999; font-size:16px; text-decoration:none;} .stationlink a:hover {color:#ff0000; text-decoration:underline;} /* music page */ .songsBox {border-bottom:#4b4b4b dashed 1px; width:510px; float:left; padding-bottom:2px; margin-bottom:10px;} .songsBox a:link, .songsBox a:visited {text-decoration:none;} .songsBox a:hover {text-decoration:underline;} a.songtitle:link, a.songtitle:visited {color:#999999; text-decoration:none; font-size:16px; font-weight:bold;} a.songtitle:hover {color:#ff0000; text-decoration:underline;} .songsBox .actionlinks {font-size:14px;} /* the links for full song info, add to station, rate this song... */ .songsBox .topSong {color:#666666; float:left; text-align:left; font-size:13px;} /* comments page */ .commentsWelcome {background:; color:#cccccc; margin:0px 20px 20px 20px; padding:20px; border:#4b4b4b solid 1px;} .commentsBox {border-bottom:#4b4b4b dashed 1px; padding-top:5px;} .commentsBox a:link, .commentsBox a:visited {text-decoration:none;} .commentsBox a:hover {text-decoration:underline;} .commentsBox .songComment {border-bottom:#4b4b4b dashed 1px; font-size:11px; padding:1px 3px; margin-bottom:5px;} .commentsBox .postdate {color:#666666; font-size:13px; font-weight:normal; text-align:right; margin:0px 5px 10px 0px;} .commentsBox .postdate a:link, .commentsBox .postdate a:visited {text-decoration:none;} /* for delete/edit links */ .commentsBox .postdate a:hover {text-decoration:underline;} .commentsBox .comment {font-size:14px; padding:0px 5px 0px 140px;} .commentsBox .bandSignature {border-top:#4b4b4b dashed 1px; color:#666666; width:310px; margin-top:15px; line-height:20px;} .commentsBox .ratingsBox {float:right; width:220px; border-left:#4b4b4b dashed 1px; margin-bottom:10px;} .ratingsBox .label {width:115px; text-align:right; float:left; padding-right:20px;} /* also used for .commentsPostBox .ratingsBox */ .commentsPostBox {padding:10px; margin:20px 0px; background:#FFCC99; color:#000000; border-top:black solid 2px; border-bottom:black solid 1px;} .commentsPostBox .ratingsBox {background:#ECECEC; color:#000000; clear:both; padding:7px 0px; margin:0px 250px 20px 30px;} /* video page */ .videoBox {background:black; color:#E0E0E0; padding:5px; line-height:22px;} .videoBox .video {padding:20px; margin-bottom:10px;} .videoBox .title {text-align:center; background:#121212; color:#F3F3F3; font-size:16px; padding:1px;} .videoBox .labels {color:#666666; width:200px; padding-right:20px; text-align:right; float:left;} .videoBox .info {float:left; width:440px;} .videoBox a:link, .videoBox a:visited {color:#0099CC; text-decoration:none; font-size:11px;} .videoBox a:hover {color:red; text-decoration:underline;} .videoListBox {border-top:#4b4b4b dashed 1px;} /* photo pages */ .photopage {background:black;} .selectedPhoto_box {text-align:center;} .selectedPhoto_box .selPhoto_title {background:#111111; color:#cccccc; border-bottom:#666666 solid 1px; font-size:15px; padding:4px;} .photolist {padding:10px 0px 0px 30px;} .photolist .photobox {background:none; float:left; width:118px; height:180px; margin:5px 0px 20px 10px; padding:5px 0px 10px 0px; overflow:hidden; cursorointer; text-align:center;} .photobox .photo {height:150px; width:118px; overflow:hidden;} .photobox .photoComment {color:#444444; font-size:11px;} .photolist .photobox_on {background:#222222; float:left; width:118px; height:180px; margin:5px 0px 20px 10px; padding:5px 0px 10px 0px; overflow:hidden; cursorointer; text-align:center;} .photobox_on .photo {height:150px; width:118px; overflow:hidden;} .photobox_on .photoComment {color:#999999; font-size:11px;} /* reviews page */ .reviewsBox {padding:10px 30px; border-bottom:#4b4b4b dashed 1px;} .reviewsBox .rev_headline {color:#cccccc; font-size:16px; font-weight:bold;} .reviewsBox .rev_text {padding:5px 5px 5px 30px; font-size:14px;} .reviewsBox .rev_source {text-align:right; font-size:13px; color:#666666;} /* licensing page */ .licenseSummary {margin:0px 20px 20px 20px; padding:20px; background:; color:#cccccc; border:#4b4b4b solid 2px;} .licenses {margin-top:70px;} .licenses .headline {font-size:14px;} .lic_tableSongs {border:none;} .lic_tableSongs .columnHeaders td {border-bottom:#4b4b4b solid 1px; font-weight:bold; font-size:11px;} .lic_tableSongs tr td {border-bottom:#4b4b4b dashed 1px; padding:5px 0px;} /* widgets page */ .widgetMargin { padding:8px 0px 8px 35px;} .widgetSpacer {width:100; height:15px; clear:both;} /* tag cloud */ .tagCloud {padding:10px;} .tagCloud .cloudItem {float:left; padding:2px; white-space:nowrap; margin:0 6px 0 0;} .tagCloud .cloudItem:hover {background:#005782; color:white; cursorointer;} .tagCloud .cloudS10 {font-size:10px; color:#aaaaaa;} .tagCloud .cloudS20 {font-size:11px; color:#aaaaaa;} .tagCloud .cloudS30 {font-size:11px; color:#999999;} .tagCloud .cloudS40 {font-size:12px; color:#999999;} .tagCloud .cloudS50 {font-size:14px; color:#666666;} .tagCloud .cloudS60 {font-size:16px; color:#666666;} .tagCloud .cloudS70 {font-size:18px; color:#333333;} .tagCloud .cloudS80 {font-size:22px; color:#333333;} .tagCloud .cloudS90 {font-size:28px; color:#111111; } .tagCloud .cloudS100 {font-size:36px; color:#111111;} .tagCloudMore {padding:6px 0 0 0; margin:0 10px; text-align:center; border-top:#ccc solid 1px; font-size:11px;} .tagCloudMore a, .tagCloudMore a:link, .tagCloudMore a:visited {color:#999; text-decoration:none;} .tagCloudMore a:hover {color:red; text-decoration:underline; cursorointer;} |
|||||||