|
CSS - Links Seem To Be Inheriting Css Attributes, Unwanted.
Hi all,
I am recreating some nav links. Instead of having them be text, I am converting them to images. 3 images per link: regular, hover, visited. The test page is here You will see "Home" That is an image. The other 3 haven't been messed with yet and are still text. Here's my problem. As I said, The link itself will just be an image. When hovered over, it will go to the same image, just a different colored one. After clicked, it will display a third image instead, once again a different color. BUT, elsewhere in my CSS I have a section where visited links are set to turn black, and I think THAT'S what causing the home image to disappear after visited. Could ya'll have a look at my source and CSS and tell me what you think I can do to fix this? CSS file is here Thanks! Chris Similar TutorialsHey peeps, my problem is. I have a main table that is 700 px wide and consists of 3 cols and 1 row. Now in the first and last cell i have another table that consists of 1 col and 3 cells. In the Top and bottom cell of both tables i have an image that is 5px wdie * 20px high. In the middle cell i have a 5px wide*1px high background image which tiles in that cell. Now the problem is that the main table will never have a fixed height so i dont know what height to set the cells in the middle. Its sort of a shadow effect i made for my site. I was kind of hoping the there was some way of making the tables height match the height of the cell thats its in. Anyone got any ideas. I figured there would be some css trick i could use? Hope it makes sense. I have the strangest thing going on when I view my site in IE 6. I'm using Drupal and the body tags have classes assigned to it depending on what page you are viewing. Therefore, I can have different content IDs by descending from the body tag. So, I have the following declared in my stylesheet: Code:
body.two-sidebars div#content {
margin: 0em 160px 20px 160px;
padding: 0 10px;
line-height: 1.6em;
text-align: left;
}
body.sidebar-left div#content {
margin: 0em 10px 20px 160px;
padding: 0 10px;
line-height: 1.6em;
text-align: left;
}
In FF and even IE7 my content divs view as they should depending on the class in the body. However, in IE6, my margin declaration is ignored when the page is loaded, but on a refresh, the page usually will display correctly. Are my styles technically declared correctly or is there anything I can do to make the "more correct" and therefore make IE6 happy? Here's my website. For those of you that have IE6 (or even IE7 to double check me), let me know if the margins in the content areas are working or if the text runs over the side bars. http://whirligig.dreamhosters.com/ Hey, I have parent table, with several nested tables within. I'm changing the CSS values on-the-fly using Javascript so I'm using id's instead of classes. The CSS of all the tables is generated using this code: Code:
/* mp_tip_CSS_x_TABLE CSS */
<?
for ($i=1; $i<=12; $i++) {
?>
#mp_tip_CSS_<? echo($i); ?>_table {
border-color: <? echo($mp_tip_CSS_table_border_color[$i]); ?>;
border-style: <? echo($mp_tip_CSS_table_border_style[$i]); ?>;
border-width: <? echo($mp_tip_CSS_table_border_width[$i]."px"); ?>;
border-collapse: collapse;
}
#mp_tip_CSS_<? echo($i); ?>_table td {
border-color: <? echo($mp_tip_CSS_table_border_color[$i]); ?>;
border-style: <? echo($mp_tip_CSS_table_border_style[$i]); ?>;
border-width: <? echo($mp_tip_CSS_table_border_width[$i]."px"); ?>;
border-collapse: collapse;
}
<? } ?>
/* mp_tip_CSS_x_TABLE CSS END */
The parent table is mp_tip_CSS_1_table and the nested tables are mp_tip_CSS_2_table to mp_tip_CSS_12_table. The problem I'm getting is the nested tables seem to inherit the td border values of the parent table, so they have two borders instead of just the single one (the parent border and their own border). Is there any way to make the parent border td value only be applied to the immediate td's of the parent table, and not the td's of the nested tables as well? After browsing some web pages I came across using: Code:
#classname >tr >td {}
But that doesn't seem to work... Thanks for any help, -Ross Currently, my site is setup like this: Code:
#wrapper {
margin: 0 auto 15px auto;
width: 900px;
border: solid 1px #999;
border-width: 0 1px 1px 1px;
overflow: hidden;
background: #fff
#left {
float: left;
width: 200px;
margin: 0;
font-size: 75%;
}
#right {
float: left;
width: 698px;
margin: 0;
font-size: 80%;
}
Now I know that I didn't define a background for the #left or #right div, but that is because that is a direct copy and paste of how I currently have it setup since even if I do insert a background color they don't apply. The wrapper's white background seems to overwrite a defined background for the #left and #right. The issue is that the #left is my navigation to which I've colored dark gray (#999). I don't mind if the #right stays white because that is where I place the content of the site. The issue here is when the navigation ends in #left it shows the white beneath the links, which is ugly. I'd like for the dark gray to extend the length of the page filling in the width of the column. I thought I found a "workaround" but not really. I set the wrapper background to #999 which works great when the content on the #right is longer than the navigation inside the #left, but when the #right is shorter the column ends significantly shorter in length and then shows the #999 color beneath where the content ends. I've even tried defining no background in the wrapper (which wouldn't be good anyhow because my body background is a gradient) and even then the #left and #right divs wouldn't take a background color. Help please! Thanks in advance, Michael I have the following defined in my css file: Code:
table {
border:1px dashed #999;
}
And the following code interspersed throughout other parts of my code: PHP Code: echo "<table nowrap border=\"0\">"; The problem I have is that the border is still appearing around these tables where I have specified no border. As I understand, the inline style should take precedence, right? Is this a php issue? Or am I doing something else wrong? 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. How do you use element attributes as part of your CSS declaration? For instance, I want to display the following into a row of data... Code: <quotes>
<titles>
<column id="c1">Symbol</column>
<column id="c2">Name</column>
<column id="c3">Last Sale</column>
<column id="c4">Net Change</column>
<column id="c5">% Change</column>
<column id="c6">Volume</column>
</titles>
</quotes>
The CSS I am using is .... Code: quotes {display:table}
titles {display: table-row}
column[id="c1"], column[id="c2"], column[id="c3"], column[id="c4"], column[id="c5"], column[id="c6"] {display: table-cell}
so whereever I have an element with an attribute I am using... element[attribute="value"] {declaration} ...but this is not working. It includes the first column "c1" into the row and then nothing else. Any clues? I am trying to create different link attributes for different areas on the same page. For example, I have a banner area that is a dark color and the links need to be a lighter color for contrast, but on the main body of the page the background is white, so I want the links to be darker colors. I also want the hover colors to be different on the different types of links. I have tried using different classes of links, but they all seem to default to one or the other. Any suggestions? CSS dummy reporting in here. This does what i need it to, but how could i make it better...and please point me to a good tutorial on not only using DIV tags with ID and classes, but referencing Code:
/* links for navAlpha menu */
#navAlpha a {
color:#09c;
font-size:13px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:none;
}
#navAlpha A:link {
COLOR: white;
}
#navAlpha A:active {
COLOR: white; TEXT-DECORATION: none
}
#navAlpha A:visited {
COLOR: white; TEXT-DECORATION: none
}
#navAlpha A:hover {
COLOR: blue; TEXT-DECORATION: underline
}
/* links for navAlpha menu */
#navBeta a {
color:#09c;
font-size:13px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:none;
}
#navBeta A:link {
COLOR: white;
}
#navBeta A:active {
COLOR: white; TEXT-DECORATION: none
}
#navBeta A:visited {
COLOR: white; TEXT-DECORATION: none
}
#navBeta A:hover {
COLOR: blue; TEXT-DECORATION: underline
}
Thanks for taking the time to read my question. I am wondering if it is possible to control table attributes with css sheets. For example, center a tabel modify border size modify cellpadding modify cellspacing Thanks again, Brad Okay, so I am having some issues in positioning items with CSS properly. I have this div first: Code:
#main
{
position: relative;
width: 927px;
margin-right: auto;
margin-left: auto;
background-image: url(/planetscuba/images/main.png);
background-repeat: repeat-y;
padding-top: 10px;
padding-left: 35px;
padding-right: 35px;
padding-bottom: 10px;
}
Then inside that tag I have 4 more tags, which are just columns of data. Code:
#navside
{
position: relative;
top: 0px;
left: 0px;
width: 150px;
border-right: #FFFFFF medium dotted;
border-bottom: #FFFFFF medium dotted;
padding-bottom: 10px;
}
#column1
{
position: absolute;
top: 15px;
left: 160px;
width: 222px;
text-align: center;
}
#column2
{
position: absolute;
top: 15px;
left: 397px;
width: 222px;
text-align: center;
}
#column3
{
position: absolute;
top: 15px;
left: 634px;
width: 222px;
text-align: center;
}
Now how I have it right now is the elements are all positioned correctly, but #main does not resize dynamically, which is a problem as I am adding data from a server in these columns, and the amount could change from time to time. In addition the way I am doing is more then likely bloated, but it's the only way I know how to do this. I have a navigation menu on the side which is #navside, then I want to display 3 columns of data, essentially one image and a couple words underneath each image in each column. Now this is all coming from a database, so the easiest way would be just to have the navbar on the side and then content in the rest of the #main div but I don't know how to properly position everything apart from each other without using mass amounts of tags. So to summarize, first problem is to be able to position everything properly so that #main resizes dynamically and then second would be to find some better way to do this. If you can help me on both that would be awesome. Thanks for your help in advance. Thanks for taking the time to read my question. Is is possible to have different link attributes on different sections of a page? For example: I'd like to have all links on the menu section be white font, visited be black font, hover to be green font and active to be yellow font On the rest of the page, I'd like all links to be green font, visited to be blue font, hover to be yellow font, and active to be whtie font. here is my css: Code:
@charset "iso-8859-1";
body {
text-align:center;
margin-top: 10px;
background-color: green;
/*background-color: #d8d8d8;*/
}
#frame {
width: 640px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: white;
}
#header {
width: 640px;
height: 100px;
background-color: blue;
}
#menu {
color: white;
font-weight: bold;
float: left;
width: 100px;
text-align: left;
text-transform: uppercase;
font-size: medium;
background-color: #FD9800;
font-size: 16px;
border: medium solid #E0E0E0;
padding: 4px;
}
#menu a.nav {
width:92px;
/*How can I have different colored links in this section v.s. the rest of the page?*/
}
a:visited {
color:#FFFF00;
font-size: 12px;
}
a:hover {
color:#FFFFFF;
font-weight: bold;
font-size: 12px;
}
a {
color:green;
font-size: 12px;
}
Hello. I'm trying to figure out a way to define link states (link, active, hover, visited) using an inline style or in a manner other than specifying via an imported or embedded style sheet. The project I'm working on involves designing an HTML email (template) with links that have formatting specified. Some webmail providers (particulalrly gmail and hotmail) seem to strip the away all code from the BODY tag on up (I assume to avoid conflicts with their own formatting), making formatting a very creative endeavor. Anyhow, without specifying these attributes in the header, is there any other way of doing this? The best I can figure out is specifying a link color, but without allowing for changes on visited, active, or hovered links. I've been googling for hours, so any help would be appreciated. Thanks. P.S. I know the prevailing attitudes on plain text vs html formatted emails and how it ties into spam, etc. I assure you this isn't being done in the context of spam, but rather, an opt-in newsletter for a client interested in sending fully formatted newsletters. :-) Hi All, I'm having problems getting a couple of CSS rules to render on my page. First, here's the page: http://www.righteousguitar.com/ Here are the rules that aren't rendering properly (or likely at all): Code: #Heading {
text-align: center;
}
#Heading h3 {
margin-top: 14px;
margin-bottom: -5px;
}
This rule should move the logo 5px from the left and top of the header. I've tried increasing the margins to as much as 50px, and it has no effect. (The "logo behind the logo" is part of the header image, which I'll remove once this is resolved.) Code: #Heading {
text-align: center;
}
#Heading h3 {
margin-top: 14px;
margin-bottom: -5px;
}
These rules should center the h1/h3 heading and change the top-margin of h3 from 34px to 14px. I should say that, for the most part, this is not my code - I received a free template with my hosting package. I did, however, create the rules in question. I'd prefer not to make wholesale changes to the code unless absolutely necessary. I've reviewed my notes on inheritance and specificity, but I can't find the problem, so I'm hopeful someone here can. Thanks in advance for any ideas or suggestions. Sam I've been restyling a legacy web app. the old app had height and width attributes for every image. So when you modernize you can create classes that chunk a whole bunch of stuff, one of which is height and width. In order for SEO analysis to like you do you have to keep the old fashioned height and width attributes on every single image tag? Is it OK to have both a style from a class AND height and width attributes? I assume if they conflict the local ones will win, even though strictly speaking they are not styles. Thanks, just curious. I've read many forum replies to help getting rid of indents in li & ul items. None of the solutions are working for me. PLease help! I have a footer divided into 3 columns. The text inside each column is left-aligned with no padding/margin except for my twitter feed, which shows up with a ~41px indent. I've tried every combination of padding & negative margin in the CSS, nothing works. Currently: #twitter_update_list li {padding-left:-41px; text-indent:0px; margin-left:-41px; overflow:hidden; display:inline; text-align:left; list-style-position: inside} #twitter_update_list ul li {padding-left:-41px; text-indent:0px; margin-left:-41px; overflow:hidden; display:inline; text-align:left; list-style-position: inside} #twitter_div {padding:-41px 0 0 0; text-indent:0px; margin-left:0 0 0 0; overflow:hidden; display:inline; text-align:left;} My website is marinaporter.blogspot.com Thanks so much... hello all, I have been working on a web site that is constructed 99% using divs and CSS. I have a unwanted space that is appearing in the main image in Internet Explorer on PC. MAc IE, Safari, Mozilla (PC), etc. work fine. Can someone see what is happening...I hope so! You can see the site at www.obsign.com Here is the code that I am working with: Code: <body>
<script language=JavaScript>
function Navigate() {
var number = NavSelect.selectedIndex;
location.href = NavSelect.options[number].value; }
</script>
<table class="boundaries">
<tr>
<td class="vertical">
<center>
<div id="site">
<div class="padding">
<div class="navigation"><div class="navigation">
<a href="index.php?id=2&sid=5c19320a27327c185d6699bf516e47ea" onmouseover="changeImage('about.jpg','customizations/uploadedmedia/images_navigation/about_over.jpg');" onmouseout="changeImage('about.jpg','customizations/uploadedmedia/images_navigation/about.jpg');"><img name="about.jpg" alt="About Us" src="customizations/uploadedmedia/images_navigation/about.jpg"
width="94" height="30" border="0" /></a><a href="index.php?id=4&sid=5c19320a27327c185d6699bf516e47ea" onmouseover="changeImage('services.jpg','customizations/uploadedmedia/images_navigation/services_over.jpg');" onmouseout="changeImage('services.jpg','customizations/uploadedmedia/images_navigation/services.jpg');"><img name="services.jpg" alt="Services" src="customizations/uploadedmedia/images_navigation/services.jpg"
width="94" height="30" border="0" /></a><a href="index.php?id=6&sid=5c19320a27327c185d6699bf516e47ea" onmouseover="changeImage('resources.jpg','customizations/uploadedmedia/images_navigation/resources_over.jpg');" onmouseout="changeImage('resources.jpg','customizations/uploadedmedia/images_navigation/resources.jpg');"><img name="resources.jpg" alt="Resources" src="customizations/uploadedmedia/images_navigation/resources.jpg"
width="94" height="30" border="0" /></a><a href="index.php?id=8&sid=5c19320a27327c185d6699bf516e47ea" onmouseover="changeImage('contact.jpg','customizations/uploadedmedia/images_navigation/contact_over.jpg');" onmouseout="changeImage('contact.jpg','customizations/uploadedmedia/images_navigation/contact.jpg');"><img name="contact.jpg" alt="Contact" src="customizations/uploadedmedia/images_navigation/contact.jpg"
width="94" height="30" border="0" /></a>
</div>
</div><div class="locations"><img alt="Cincinnati, Ohio - Cleveland, Ohio - Austin, Texas" src="customizations/safeharbor/templates/images/locations.jpg"
width="362" height="30" border="0" /></div><div class="clear"></div><div class="logo"><img src="customizations/safeharbor/templates/images/logo.jpg"
width="195" height="281" border="0" /></div><div class="image"><div class="main_1"><img name="width='533px' height='237px'" alt="The Safe Harbor Group, LLC" src="customizations/safeharbor/templates/images/main_1.jpg"
width="533" height="237" border="0" /><br><img name="width='278px' height='21px'" alt="The Safe Harbor Group, LLC" src="customizations/safeharbor/templates/images/main_2.jpg"
width="278" height="21" border="0" /><select style="vertical-align:top; padding:0px; border:0px; margin:0px; width:189px;" name="NavSelect" onChange="Navigate(this.form)"><option value="" SELECTED>Choose the Solution for You:<option value="#">Option 1<option value="about:blank">Option 2<option value="#">Option 3</select><img name="width='66px' height='21px'" alt="The Safe Harbor Group, LLC" src="customizations/safeharbor/templates/images/main_3.jpg"
width="66" height="21" border="0" /><br><img name="width='533px' height='22px'" alt="The Safe Harbor Group, LLC" src="customizations/safeharbor/templates/images/main_4.jpg"
width="533" height="22" border="0" /></div></div>
<div class=""><h1>HOME BODY</h1>
<p class="general_text">Now that you have installed the system, please proceed to customize and populate with content.</p></div>
</div>
</div>
</center>
</td>
</tr>
</table></body>
</body>
</html>
Code:
html {
width:100%;
height:100%;
}
body {
width:100%;
height:100%;
margin:0px;
padding:0px;
background-image: url('http://www.obsign.com/customizations/safeharbor/templates/images/bg.jpg');
background-repeat:repeat
}
img {
margin-bottom: 0px;
}
#site {
text-align:left;
width:770px;
padding:0px;
border:0px;
margin:0px;
background:#ffffff;
border:1px solid #CFC9C0;
}
table {
font-size: 100%;
}
a.breadcrumb {
color: #444444;
font-family: Verdana, Helvetica, Arial, sans-serif;
text-decoration:none;
}
a.breadcrumb:visited {
color: #888888;
font-family: Verdana, Helvetica, Arial, sans-serif;
text-decoration:none;
}
ul {
margin-bottom:5px;
margin-top:5px;
padding:0px;
border:0px none;
list-style-type:square; list-style-image:url('/uploadedobjects/images/bullet.gif')
}
li {
padding-top:3px;
}
.text_highlight {
background: #FDFD00;
color: #000000;
}
.clear {
clear:both;
}
.gentext {
font: normal 110% Tahoma, Verdana, Arial, Arial Narrow, sans-serif;
color:#666666;
}
.gentext a {
font: normal 110% Tahoma, Verdana, Arial, Arial Narrow, sans-serif;
color:#666666;
}
input.liteoption {
background: #efefef;
font: normal 100% Verdana, Arial, Arial Narrow, sans-serif;
color:#444444;
text-align:center;
padding: 1px;
border: 1px solid #dddddd;
border-bottom: 1px solid #aaaaaa;
border-right: 1px solid #aaaaaa;
}
input.searchoption {
font: bold 100% Verdana, Helvetica, Arial, sans-serif;
background-color : #eeeeee;
color : #000000;
border: 1px solid #000000;
}
input.text {
font: normal 105% Verdana, Helvetica, Arial, sans-serif;
border: 1px solid #dddddd;
border-top: 1px solid #aaaaaa;
border-left: 1px solid #aaaaaa;
}
select {
font: normal 100% Verdana, Helvetica, Arial, sans-serif;
color: #000000;
}
.form_label {
font:bold 100% Verdana, Helvetica, Arial, sans-serif;
display:inline;
color:#000000;
}
.search_text{
font:normal 9px Verdana, Helvetica, Arial, sans-serif;
color:#000000;
border-top:#000000;
border-left:#000000;
}
.boundaries {
width:100%;
height:99%;
}
.vertical {
vertical-align:middle;
}
.padding{
padding:16px;
}
.navigation{
border:0px;
margin:0px;
float:left;
width:376px;
}
.locations{
border:0px;
margin:0px;
float:right;
width:362px;
}
.logo{
padding:10px 10px 10px 0px;
float:left;
border:0px;
margin:0px;
}
.image {
padding:10px 0px 10px 0px;
border:0px;
margin:0px;
}
.main_1{
float:right;
background:#EAE3DB;
border:0px;
white-space:nowrap;
margin:0px;
padding:0px;
}
Hi, everyone. Funny I've never run into this before, but I've got a div with a background colour applied, and within it there's an image I want to appear snug to the top, right where the bgcolour starts. Here's the html/css: Code: <TD style='vertical-align:top; text-align:left;'> <div style='background-color:#DA1B28; padding:0px; vertical-align:top; color:white; height:19px; width:385px; margin-left:20px; margin-top:8px;'> <a href='blah.html' style='margin-top:0px;'><img src='images/viewcart.gif' border='0' alt='View Cart!' style='margin-left: 4px; margin-top:0px;'></a> </div> </TD> </TD> I'm getting a bout 2px of space before the image starts; is the only way around this to use a negative margin-top, or am I missing some parameter in one of the styles? Thanks in advance! Hi everyone. I have a header image and directly below it the div that holds my navigation. In FF it works great, but in IE I get about a 5px space inbetween the header image and the navigation div. The navigation div is colored so it's really easy to tell where it stops and starts in IE. Here's my CSS code: Code:
body {
background-image: url(images/bgshadow.gif);
background-repeat: repeat-y;
background-position: 50% 0;
text-align: center;
margin: 0 0;
padding: 0 0;
}
#content {
width: 738px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0 0;
vertical-align: top;
}
#header {
width: 738px;
margin: 0 0;
padding: 0 0;
}
#nav {
width: 738px;
height: 25px;
margin: 0 0;
padding: 0 0;
background-color: #86462F;
vertical-align: top;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
color: #fff;
}
#nav ul {
width: auto;
float: right;
margin: 5px 0 0 0;
padding: 0 0;
}
#nav ul li {
margin: 0 25px 0 0;
padding: 0 0;
list-style-type: none;
display: inline;
}
and my markup: Code: <div id="content"> <div id="header"> <img src="images/header.jpg" width="738" height="100" /></div> <div id="nav"> <ul> <li>Home</li> <li>Register</li> <li>Go Play!</li> </ul> </div> I've tested the white-space bug in windows IE (taking out all of the white-space in the markup) but that only had a marginal effect on the list. Does anyone have any ideas? Thanks, -Brian |
|||||||