I was a little rough on my CSS, I agree... I need to work on taking my time with that
Thanks again
Michael Wilson wrote:
Rebecca Citroni wrote:
http://www.imagebazaar.net/index.php?content=landscapes
If you hover over any link on the right hand side (navigation or firefox button) you'll see a quick flash of the google ad on the left side of the page, it doesnt stay there, but pops up for a second then disappears.
This doesnt happen in IE.
Anyone got an idea why its happening?
Hi Rebecca,
It looks like you've made a few mistakes in your CSS; some of your specificity seems a bit odd. For example:
At one point you have:
#col1, #col2 a, a:hover { text-decoration: none; color: #EFF386; font-size: 0.9em; }
This rule would be applied to all of #col1, to all links in #col2, and to all hovered links in #col2.
What I think you meant to specify is:
#col1 a, #col1 a a:hover, #col2 a, #col2 a a:hover { text-decoration: none; color: #EFF386; font-size: 0.9em; }
This rule would apply to all links and hovered links in #col1 and #col2.
If you are targeting an element within a specific id or element, you need to make sure you state proper specificity.
I don't know exactly which rule or what combination of rules was causing the problem, but after I cleaned up your CSS a bit and made sure the specificity was properly stated, all seems to be working well.
I would suggest that you adopt some sort of system for formatting your CSS so it is as readable as possible. You don't have to use the same formatting as I have, but something similar will make it easier for you to spot mistakes. You can always strip whitespace for your 'live version', if you feel that is necessary, but also keep a well formatted version for development and maintenance tasks. You should also consider using CSS shorthand as often as possible, which will help reduce file size as well as improve readability. Both of the measures will help you work more effectively and as an added bonus, it makes it a bit easier for others to help you spot issues you may have overlooked.
body {
background:#000;
color:#FFF;
font: 0.9em/normal arial, helvetica, sans-serif;
margin: 0;
padding: 0;
}
#header {
background: #000 url("header.gif") no-repeat;
height: 123px;
margin: 0 0 1em 0;
padding: 10px 0 0 0;
text-align: right;
width: 97%;
}
#gutter {
float: left;
height: 1px;
width: 7px;
}
#col1 {
border:1px solid #2EC035;
float: left;
margin: 0 0 1em 0;
padding: 10px;
width: 79%;
}
#col2 {
border:1px solid #2EC035;
float: left;
width: 14%;
margin: 0 0 1.0em 1%;
padding: 10px;
}
#col3 {
float: left;
margin: 0 0 1.0em 0;
width: 0%;
/**
* If you are going to use a 0% width here,
* you may as well remove the markup from
* your documents or hide it with display: none;.
*/
}
#footer {
border-top: 1px solid #2EC035;
clear: both;
height: 50px;
padding: .5em;
text-align: center;
}
/** * Note that even though I've used multiple * lines for the selectors in this rule, you * still need to separate the selectors with * a comma and specify proper selectors. */
#footer a,
#footer a:hover {
color: #FFF;
font-size: 10px;
}
h1 {
font-size: 1.1em;
margin: 0;
padding: .5em;
}
h2 {
color: #FFF;
font-size: 1.0em;
font-weight: normal;
margin-top: 0;
}
#col1 p { color: #FFF; line-height: 130%; margin-left: 6px; }
#col1 a, #col1 a:hover, #col2 a, #col2 a:hover { color: #EFF386; text-decoration: none; font-size: 0.9em; }
#col2 a:hover {color:#FFF;}
#col1 img { border: 1px solid #CCC; margin: 1.9px; }
#nav { display: inline; background: #2EC035; padding: 5px 5px 3px 8px; }
#nav a, #nav a:hover { font-family: arial; font-size: 0.9em; color: #000; text-decoration: none; }
#nav a:hover { color:#FFF; }
______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
