|
CSS - Specific Rules Just Get Overridden Why?
I have a site www.carrie-anne.co.nz just refer to index.asp
It has 3 css. I have a problem with main.css The problem is minor, but annoying. It is to do with the lhs menu called menucontainer. The menu is a list and the rules applied to it are quite specific. Below menucontainer is contactcontainer and that too has specific rules. What happens is that I am getting the menu text underlined when I state that decoration:none; On further testing by commenting out rules ( so they don't render ) I find that rules for contactcontainer are over-riding menucontainers. Can anyone shed any light? It is driving me spare.. Here is the css file. Code:
body {
background-color: black;
background-image: url(web_images/layout/carriebackground.jpg);
background-repeat: no-repeat;
background-position: left top;
padding: 0px;
margin-left: 80px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-attachment: fixed;
}
#container {
width: 800px;
}
#taglinecontainer {
width: 410px;
padding: 0px;
margin-left: 380px;
}
h1#carrieheadingmodelling {
background-image: url(web_images/layout/modelling.jpg);
background-color: transparent;
background-repeat: no-repeat;
background-position: right top;
margin: 0px;
padding: 30px 0px 0px;
overflow: hidden;
height: 0px;
}
h1#carrieheadingacting {
background-image: url(web_images/layout/acting.jpg);
background-color: transparent;
background-repeat: no-repeat;
background-position: right top;
margin: 0px;
padding: 32px 0px 0px;
overflow: hidden;
height: 0px;
}
h1#carrieheadingpromotional {
background-image: url(web_images/layout/promotional.jpg);
background-color: transparent;
background-repeat: no-repeat;
background-position: right top;
margin: 0px;
padding: 39px 0px 0px;
overflow: hidden;
height: 0px;
}
h1#carrieheadingtop {
background-image: url(web_images/layout/carrie_anne_freeman.gif);
height: 0px;
background-color: transparent;
background-repeat: no-repeat;
margin: 0px;
overflow: hidden;
padding-top: 61px;
background-position: right top;
}
/*------------------------------Menu stuff----------------------------------------------------*/
#_____________________________{}
#menucontainer {
width: 220px;
margin-top: 50px;
border-right: #330099;
border-bottom: #333399;
border-left: #336699;
padding: 0px;
margin-bottom: 30px;
height: 325px;
background-image: url(web_images/layout/menubackgroundtrans.png);
text-decoration: none;
}
h1#selectacatergory {
background-image: url(web_images/layout/menu.gif);
background-color: transparent;
background-repeat: no-repeat;
background-position: left top;
margin: 0px;
padding: 38px 0px 0px;
overflow: hidden;
height: 0px;
position: absolute;
width: 222px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
/* if ie- filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='web_images/layout/selectacatergory.png');*/
}
#container #menucontainer ul {
width: 222px;
margin: 39px 0px 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
height: 240px;
position: absolute;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
text-decoration: none;
}
#container #menucontainer li {
margin: -10px 0px -12px;
padding: 20px 0px 6px 34px;
display: block;
height: 20px;
background-image: url(web_images/layout/butterfly.gif);
background-repeat: no-repeat;
background-position: 0px 11px;
border-bottom: 1px dotted #000000;
text-decoration: none;
}
#container #menucontainer ul li a:link, a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: #FF6633;
font-weight: bold;
text-decoration: none;
margin-left: 3px;
}
#container #menucontainer ul li a:hover {
color: #FFFFFF;
text-decoration: none;
}
#container #menucontainer ul li a:active {
color: #FF6633;
text-decoration: none;
}
#container #menucontainer ul li#current {
margin: -10px 0px -12px;
padding: 20px 0px 6px 34px;
height: 20px;
background-image: url(web_images/layout/butterfly_current.gif);
background-position: 0px 11px;
border-bottom: 1px dotted #000000;
display: block;
text-decoration: none;
}
/*Contact Section*/
#________________________________________{}
#contactcontainer {
width: 225px;
position: absolute;
margin-top: 47px;
background-image: url(web_images/layout/menubackgroundtrans.png);
padding: 0px;
}
h1#contactme {
background-image: url(web_images/layout/contactme.gif);
background-color: #000000;
background-repeat: no-repeat;
background-position: left top;
margin: 0px;
padding: 42px 0px 0px;
overflow: hidden;
height: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
width: 225px;
}
#contactcontainer ul {
margin-top: 10px;
margin-bottom: 20px;
list-style-type: none;
padding: 0px;
width: 182px;
margin-left: 42px;
z-index: 1;
}
#contactcontainer li {
list-style-type: none;
color: #FF6633;
line-height: 2.5em;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .85em;
margin: 0px;
padding: 0px;
}
#contactcontainer li a:link, a:visited {
list-style-type: none;
color: #FF6633;
line-height: 2.5em;
text-decoration: underline;
margin: 0px;
padding: 0px;
position: relative;
}
#contactcontainer li a:hover {
list-style-type: none;
color: #FFFFFF;
line-height: 2.5em;
text-decoration: none;
margin: 0px;
padding: 0px;
position: relative;
}
.photoholder {
display: block;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
margin: 0px;
width: 222px;
height: 207px;
border-top-width: 0px;
border-top-style: none;
}*/
#______________________rightcontent________________________{}
#rightcontent_holder {
width: 545px;
position: absolute;
margin-left: 250px;
margin-top: -324px;
margin-right: 0px;
margin-bottom: 0px;
padding: 0px;
background-image: url(web_images/layout/large_blackbutterfly.gif);
background-repeat: no-repeat;
background-position: right top;
}
#rightcontent_homepage {
}
#flow01, #flow02, #flow03, #flow04, #flow05, #flow06, #flow07{
float: right;
clear: right;
margin: 0 0.5em 0 0;
}
#flow01 {width:250px; height:80px;}
#flow02 {width:275px; height:60px;}
#flow03 {width:285px; height:42px;}
#flow04 {width:300px; height:80px;}
#flow05 {width:200px; height:50px;}
#flow06 {width:150px; height:45px;}
.hidecap {
display: none;
}
.homepagewelcometext {
background-image: url(web_images/layout/Welcome_w.gif);
background-repeat: no-repeat;
text-indent: 53px;
font-size: .75em;
line-height: 2em;
color: #CCCCCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding-top: 10px;
}
.signature {
background-image: url(web_images/layout/carrie_sig.gif);
height: 75px;
width: 200px;
margin-left: 21px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding-top: 50px;
background-repeat: no-repeat;
}
#-----------------------footer---------------------{}
#footer {
background-color: #00264C;
border: 1px solid #166286;
margin-bottom: 5px;
margin-top: 35px;
position: relative;
width: 550px;
}
#footer p {
color: #FF6600;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .6em;
text-align: center;
margin-bottom: 8px;
margin-top: 8px;
}
#crediting {
color:#000000;
margin: 0px;
padding: 0px;
display: block;
width: 500px;
}
.footerimages {
background-color: #000000;
margin-left: 48px;
}
.credittext {
color: #E17717;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 0.6em;
margin: 0px;
padding: 0px;
}
.standardcopy {
font-size: .75em;
line-height: 2em;
color: #CCCCCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding-top: 10px;
}
#confirmation_holder {
width: 500px;
position: absolute;
margin-left: 275px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding: 0px;
}
div#crediting a#link, img {
text-decoration: none;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
}
Similar TutorialsEdit - The classes in my CSS and the classes required to sort the columns were in conflict; had to create custome th tags and what not to get it working, but it's all set now I'm testing out a javascript to sort table data; however it seems that the javascript is somehow interfering with my CSS. Basically it's turned the appearance of my table-headers so they look like href links and more noticeabe is that the height and width of the cells within the table have completely lost their designated size. I'd like to note that nowhere in the script can I find anything that specifies any of these things. Any thoughts on how to reestablish the settings of my internal CSS for the table that the script has visually hijacked? (I would like to note that the script works like a champ however). Here's what the code looks like at the begining of the table in question. PHP Code: <table width="564" border="0" cellpadding="0" cellspacing="0" class="sr_archiveborders"> <tr> <td colspan="5" align="left" valign="top"><table id="theTable" width="100%" border="0" cellspacing="0" cellpadding="0" rowstyle-alternative no-arrow"> <tr> <th class="sortable" width="100%" align="left" valign="top" class="sr_game_name">Game Name</th> <td align="left" valign="top" class="sr_archive_divider"><img src="../images/reviews/archive_dividers.gif" alt="divider" width="1" height="19" /></td> <th class="sortable" align="center" valign="top" class="sr_platform">Platform</th> <td align="left" valign="top" class="sr_archive_divider"><img src="../images/reviews/archive_dividers.gif" alt="divider" width="1" height="19" /></td> <td align="left" valign="top" class="sr_archive_divider"><img src="../images/reviews/archive_dividers.gif" alt="divider" width="1" height="19" /></td> <th class="sortable" align="center" valign="top" class="sr_date">Date</td> <td align="left" valign="top" class="sr_archive_divider"><img src="../images/reviews/archive_dividers.gif" alt="divider" width="1" height="19" /></td> </tr> <tr> <td colspan="2" align="left" valign="middle" class="sr_gametd"><a href="#" class="sr_gametext">Tony Hawk's Pro Skater 3</a></td> <td colspan="2" align="center" valign="middle" class="sr_platformtd">PS2</td> <td colspan="2" align="right" valign="middle" class="sr_datetd">Oct 29, 2004</td> </tr> .... .... .... class="sortable" is the required code for the TH tags so that they can be, you guessed it, sortable. class="sr_game_name" is an example of a class established by my CSS to format the colum titles (in this case the games' title). The background of the cells that contain the data are defined by class="sr_platformtd" where they make a call to an image file; their formatting is likewise getting screwed sideways PHP Code: .sr_platformtd { background-image: url(../images/reviews/archive_cellbg.gif); background-repeat: repeat-x; padding-top: 4px; padding-bottom: 4px; padding-left: 0px; border-left-width: 1px; border-left-style: solid; border-left-color: #989898; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; } Here's what the table looked like before the javascript. Here's what the table looked like after the javascript. And incase anyone's curious I've included the script itself. Thanks for your time everyone! Hi all Is there a way to set a value, that has been overridden by a specific value before, to the browser's default value again? Code: div.specific {
font-size: 10px;
}
div.specific div.browser_default {
font-size: default;
}
Is there anything like that? Thanks for help, Josh What are the naming rules for CSS? No numbers in class names? Any other char not OK? I'm using this for a horizontal rule, I'm after a 1 pixel blue line... Code:
hr {
border: 0;
width: 98%;
height: 1px;
color: #003366;
}
But while I get what I'm after in IE, in Firefox there is nothing, zip, no line at all. What's wrong? Hello I have defined the following rules for anchors: Code:
a:link {
color: green;
text-decoration: none;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
a:hover {
color: blue;
text-decoration: underline;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
a:visited {
color: orange;
text-decoration: none;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
a:active {
color: red;
text-decoration: none;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
I have 2 links in the site: Code: <a href="1.html">1</a> <a href="javascript: void test();">Test</a> The first link obeys the rules defined above The second link doesn't obey the hover rule for some reason. My only guess is that triggering JavaScript code from links may cause this problem. I am testing this on IE6 On Mozilla and Opera both links work fine I would appreciate any help Hey all, What are your techniques for making unique horizontal rules? At the moment I am using this code to separate content: Code:
/* CSS */
.line {
height: 5px;
background-image: url(../img/bg_3x7.gif);
background-repeat: repeat-x;
background-position: left top;
margin-top: 0px;
margin-right: auto;
margin-bottom: 5px;
margin-left: auto;
padding: 0px;
}
Html: Code: <div class="line"></div> The above code works great for all non IE-PC browsers... when I view on PC with IE, there appears to be 5px of padding added to top and bottom... is very annoying... IE is a POS, I hate IE... Anyway, does anyone have any suggestions for a more universal way to get a unique <hr /> on a page? I would prefer something that will be an exact height in any browser/platform. Cool cool cool, Thanks! Cheers Micky Hi guys and gals. Right does any one know any CSS specfic Internet Explorer 8 rules that I can run in the CSS sheet. Something like -ie- -msie- would be nice. Also for those of you who have not tried IE8 beta download it , it's really good, ok still bugs to work out fair enough but what I'm really fond of is the built in dev bar that comes as standard, if there is an add-on like Yslow I think I'm going to convert. So the basic rules a 1) Author style sheets 2) User style sheets 3) Default browser sheets Now when you get into Author style sheets... You have: inline styles, header style information (<style type="text/css"> </style>), external style sheets and imported style sheets. I created a little example for myself to figure out the precedence. So that if all of these methods controled the same element, which method's style would come out the winner. To my suprise, the order in which you include them in the HTML document has an impact on the precedence. How so? Up until now I thought that the order of precedence was: inline styles, imported styles, external style sheets (<link />), and header style information. Code:
<html>
<head>
<link href="link.css" rel="stylesheet" type="text/css" />
<style type="text/css">
@import url(import.css);
p {
color: blue;
}
</style>
</head>
<body>
<p style="color: green;">What am I?</p>
</body>
</html>
As expected, the inline style wins. Code:
<html>
<head>
<link href="link.css" rel="stylesheet" type="text/css" />
<style type="text/css">
@import url(import.css);
p {
color: blue;
}
</style>
</head>
<body>
<p>What am I?</p>
</body>
</html>
The header style information wins. (regardless of position of @import) Code:
<html>
<head>
<style type="text/css">
@import url(import.css);
p {
color: blue;
}
</style>
<link href="link.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>What am I?</p>
</body>
</html>
External style sheet wins (<link />). How does position influence precedence of: external style sheets (Both @import and <link />) and header style information? I was reading that if you wanted to apply the same style to more than one rule, you can use a comma, but I'm having a weird quirk happen when I do that. for example: h1, h2 {color:olive;} For some reason, it's only applying to h2. Even when I place it so that there are no parent elements. I've validated the xhtml and the css. What's the deal? I'm a total newbie to CSS and web design in general. Sorry if I'm using the wrong terms for things. I've just been given the assignment to write a script that given a set of form elements by the user it will create a page with those form elements displayed and a submit button on the bottom. The form elements the user defines can be text fields, text areas, dropdown boxes, option groups, and checkboxes. The user also gives me a title for each form element. He can give me these form elements in any order and I need to display them in that order on the page. My question is, how do I arrange these form elements so they always look good together and I don't have funny gaps or unprofessional looking design? It would be easy if it was just text fields and area, but then I have to throw in option groups and checkboxes that can be any number in a row. Does anyone have some good form organization rules that could help me? Thanks!! Quote: Dan Cederholm of SimpleBits: It's important to note that the cascading effect of CSS still applies, and alternate style sheets work just like any other style sheet, in that only common rules are overridden when the alternate styles are active. So if we had layout, positioning, and other site-wide rules in default.css that weren't repeated in the alternate style sheets, those default rules would still work. I'm making a site that has a default stylesheet with a fixed layout and an alternative one with a fluid layout. The problem I'm having is the alternative sheet not inheriting css from the default stylesheet even though the rules are not overridden. At the moment, my alternative stylesheet is an exact copy of the original (everything included) with only 3 width values changed to percentages. Theoretically, I should be able to only include these three rules alone in the alt sheet, as rules are carried over from the default sheet unless overridden. However, when I do try to reduce the alt sheet to just: Code: #container { width: auto; }
#main { width: 65%; }
#navbar { width: 30%; }
all unincluded formatting is lost. Am I doing something wrong? Cheers, Sam. I just realized tonight that CSS I have been using with my XHTML 1.1 documents does NOT work with HTML 4 documents. Is this common? I never knew there was a difference in CSS functionality between doctypes. Hi, I'm trying to create a CSS for a specific table, not all tables, the following code uses the code I need: PHP Code: table { border-collapse:collapse; } table, th, td { border: 1px solid grey; padding:15px; } How can assign/rename this to say mytable, if I change the top 'table' to .mytable still all tables on my page are changed Thanks for any help. Sanj Hey guys, I am taking a computer science class at the moment and haven't received much direction on what to do. I had to design an HTML website from scratch which wasn't hard but now I have to incorporate CSS into the website using an external stylesheet to edit the entire website. I need to recreate these things and am wondering what I should be doing, any help is extremely appreciated. It's a mock-business type website. Here I have to have the picture on the left, a vertical line, and a paragraph on the other side, all within a border. s1224.photobucket.com/albums/ee361/millihax/?action=view¤t=staff-outline.gif And here I have to make a table that looks exactly like this but without the "colour" column. s1224.photobucket.com/albums/ee361/millihax/?action=view¤t=staff-outline.gif#!oZZ1QQcurrentZZhttp%3A%2F%2Fs1224.photobucket.com%2Falbums%2Fee361%2Fmillihax%2F%3Facti on%3Dview%26current%3Dtable-outline.gif Again, anything anyone can do for me is greatly appreciated as I am completely lost with this section of the assignment. For example lets say I have this line of code and I want to select the userid in order to style a particular user on a site/forum. <div class='username'>Test <span class='userid'>(223647)</span></div> How do I go about selecting the 223647 ID so I can assign it a specific style? Thank you in advance for any help. Hi, I need to make colored boxes a specific height. Also, the box must stretch to fit the text within it. The text will be updated when a user clicks different nav buttons. Here's my code:: Code: .category{
background-color:#8CC63F;
color:#000000;
font size:21pt;
height:36px;
}
the problem is that the box isn't 36 pixels tall. you can see my example he link Look at the box with the text description, and the box that says "cam tu dao". Any ideas. I've been trying everything I could think of. thanks Hello Gents, I am trying to get ride of the white space above the menu and above the big sliding banner...Any pointers would be great. getyoursongsmixed.com/wordpress is my site You guys rock thanks If I want to have all of my <td> flags to look a certain way within a <div> tag but not anywhere else how do I define the style to do this? |
|||||||