CSS Forum

**zomex** · 06-19-2009, 09:38 PM

Hi everyone,

Not quite as dramatic as my title but something in my CSS is causing the right side of my Ad Sense not to show. Any ideas?

Below is my new layout im working on.

http://www.conceptskateboarding.com/...rtal/index.php

Here is my CSS

Code:

body {
  text-align: center;
  margin-top:10px;
  margin-bottom:10px;
  color:#666666;
  background-color: #E0E0E0;
}

A:link {
	COLOR: #0000FF; text-decoration: underline;
}
A:visited {
	COLOR: #0000FF; text-decoration: underline;
}
A:active {
	COLOR: #0000FF; text-decoration: underline;
}
A:hover {
	COLOR: #FF0000; text-decoration: none;
}

#page_wrapper {
  margin-left: auto; 
  margin-right: auto;
  width: 98%;
  text-align: left;
  background: #FFFFFF;
  border: 8px solid #FFFFFF;
}

#header_wrapper {
  background: #4E7DD1 url('../images/layout/menu_bg.gif') bottom left repeat-x;
  margin:0px; padding:0px;
}

#header {
  height: 120px;
  padding:15px;
  background: url('../images/layout/header_bg.gif') top right no-repeat;
  margin:0px;
}

#header h1 {
  margin:0px;
  font-family: verdana, arial, sans-serif;
  font-size: 28px;
  color:#FFFFFF;
  letter-spacing: -1px;
}

#header h2 {
  margin:0px;
  font-family: verdana, arial, sans-serif;
  font-size: 14px;
  color:#B1C6EB;
  letter-spacing: 1px;
}

#left_navigation {
  margin-top: 10px;
  float: left;
  width: 200px;
  background: #4E7DD1;
  margin-bottom: 10px;
}

#right_navigation {
  margin-top: 10px;
  float: right;
  width: 160px;
  
}

.right_navigation_header {
  background-color: #4E7DD1;
  text-align: center;
  font-weight: 900;
  font-size: 15px;
  font-family: tahoma;
  color: #FFFFFF;
}

.right_navigation_content {
  border-bottom: 2px solid #4E7DD1;
  border-left: 2px solid #4E7DD1;
  border-right: 2px solid #4E7DD1;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-top: 10px;
  margin-bottom: 10px;
}

#content {
  margin-top: 20px;
  margin-bottom: 10px;
  margin-left: 220px;
  margin-right: 180px;
  padding-left: 0px;
}

#footer {
  height: 50px;
  background-color: #4E7DD1;
  clear: both;
  text-align: center;
  padding-top:12px;
  color: #B6CEF9;
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  line-height: 18px;
}

#footer A:link {
	COLOR: #FFFFFF; text-decoration: none;
}
#footer A:visited {
	COLOR: #FFFFFF; text-decoration: none;
}
#footer A:active {
	COLOR: #FFFFFF; text-decoration: none;
}
#footer A:hover {
	COLOR: #FFFFFF; text-decoration: underline;
}

#left_navigation p {
  padding-left: 10px;
  padding-right: 10px;
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  line-height: 16px;
  color: #333333;
}

#right_navigation p { 
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  line-height: 16px;
  color: #333333;
  padding-left: 5px;
  padding-right: 5px;
}

#left_navigation h3 {
  margin-top:5px; margin-bottom:10px; margin-left:5px; margin-right:5px;
  padding:4px;
  font-family: verdana, arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  line-height: 14px;
  color: #FFFFFF;
  border:1px solid #0F3974;
  background-color: #2153AA;
}

#left_navigation h4 {
  margin-top:0px;margin-bottom:0px;margin-left:10px;
  font-family: verdana, arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  line-height: 12px;
  color: #2153AA;
}

#content p {
  margin-top:15px; margin-bottom: 15px;
  font-family: verdana, arial, sans-serif;
  font-size: 12px;
  line-height: 18px;
  color: #333333;
}

#content h3 {
  margin-top:5px; margin-bottom: 10px;
  font-family: verdana, arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  line-height: 18px;
  color: #2153AA;
}

#content h4 {
  margin-top:0px;margin-bottom:0px;
  font-family: verdana, arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  line-height: 12px;
  color: #2153AA;
}

#navlist
{
  margin-top:1px;
  margin-bottom:0px;
  text-align:center;
  padding: 5px 0;
  margin-left: 0;
  border-bottom: 1px solid #0F3974;
  font: bold 14px Verdana, sans-serif;
}

#navlist li
{
  list-style: none;
  margin: 0;
  display: inline;
  min-height: 0;
  padding: 0 0 5px 0;
}

#navlist li a
{
  color: #F1F6FE;
  padding: 5px 15px;
  margin-left: 3px;
  border: 1px solid #0F3974;
  border-bottom: none;
  background: #2153AA url('../images/layout/tab_bg.gif') bottom left repeat-x;
  text-decoration: none;
  min-height: 0;
}

#navlist li a:link { color: #F1F6FE; }
#navlist li a:visited { color: #F1F6FE; }

#navlist li a:hover
{
  color: #FFFFFF;
  background: #3364BB;
  border-color: #0F3974;
}

#navlist li a#current
{
  color: #000;
  background: #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
}

.float_left {
  float: left;
  margin-right: 10px;
}

.float_right {
  float: right;
  margin-left: 10px;
}

.featurebox_center {
  background-color: #FFFFF6;
  margin:0px;
  padding:10px;
  border: 1px solid #DFE8F7;
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  line-height: 18px;
  color: #333333;
}

.featurebox_side {
  background-color: #FFFFF6;
  margin:0px;margin-left:10px;margin-right:10px;margin-bottom:15px;
  padding:10px;
  border: 1px solid #DFE8F7;
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  line-height: 18px;
  color: #333333;
}

Thanks for any help with this.

Jack

**EricReese** · 06-20-2009, 12:46 AM

Uhm, what browser does this occur in? I see the adsense in my browser (FF).

Cheers

**zomex** · 06-20-2009, 07:04 AM

Quote:

Originally Posted by EricReese

Uhm, what browser does this occur in? I see the adsense in my browser (FF).

Cheers

Thanks for your reply.

Its only slightly, if you look on the right side of Ad Sense you can see it. Im sure this is breaking Ad Sense TOS a bit so i need to get it fixed hehe.

I have just looked in IE and FF. You have to look at the right side of the green URL.

Thanks

Jack

**EricReese** · 06-20-2009, 12:11 PM

There is not enough width for it to show. Add/edit this in your stylesheet

Code:

#ads ul li{width:155px;}

Cheers

**zomex** · 06-20-2009, 12:20 PM

Quote:

Originally Posted by EricReese

There is not enough width for it to show. Add/edit this in your stylesheet

Code:

#ads ul li{width:155px;}

Cheers

Thanks dude but no luck with that. Do you think its something to do with padding?

**EricReese** · 12:41 PM

Are you sure it didn't work for you? It is working locally for me....try editing that value to your liking. That is definately the source of your error.

**zomex** · 06-20-2009, 12:40 PM

Quote:

Originally Posted by EricReese

Are you sure it didn't work for you? It is working locally for me....

May I ask where abouts you put the code on the css?

Thanks

**EricReese** · 06-20-2009, 12:49 PM

When testing locally I put it at the very end of the <head> section so it would be the last CSS rule rendered. It improved it but for very long URL's that is only part of the solution. The problem is that there is an overflow hidden somewhere I think and there isn't enough width to accomodate the URL. But for some reason I just can't find the exact selector that is causing this. Maybe LadynRed can find it.. I heard she rarely misses anything

Well at least I kinow what is causing your problem..

Cheers

**zomex** · 06-20-2009, 12:51 PM

Well thanks mate, your right there must be something not right. I just hope Ladynred finds this thread and can spot the problem I have been trying to figure it out for a while now.

Thanks

**EricReese** · 06-23-2009, 11:43 AM

Ah, on .adu I found the overflow:hidden

I think I fixed your problem. I changed many values. To prove this code works, try going to your site and in firebug change the values on the page to the values I have in the <style> tags. For some reason I can't get the specifity to be what I want. It works though..

Code:

<style type="text/css">
div.adu{overflow:visible !important;}
#ads ul li{overflow:visible;}
iframe#google_ads_frame1{width:200}
ins{width:200px;}
.right_navigation_content{width:206px;}
#right_navigation{width:220px;}
#aus{width:200px;}
#aubg{width:200px;}
#ads{width:200px;}
#ads ul li{
    overflow:visible;
    width:200px;
}

</style>

:/. Well there is the answer

**zomex** · 06-23-2009, 11:54 AM

Quote:

Originally Posted by EricReese

Ah, on .adu I found the overflow:hidden

I think I fixed your problem. I changed many values. To prove this code works, try going to your site and in firebug change the values on the page to the values I have in the <style> tags. For some reason I can't get the specifity to be what I want. It works though..

Code:

<style type="text/css">
div.adu{overflow:visible !important;}
#ads ul li{overflow:visible;}
iframe#google_ads_frame1{width:200}
ins{width:200px;}
.right_navigation_content{width:206px;}
#right_navigation{width:220px;}
#aus{width:200px;}
#aubg{width:200px;}
#ads{width:200px;}
#ads ul li{
    overflow:visible;
    width:200px;
}

</style>

:/. Well there is the answer

Thanks a lot for your reply! No one else has come up with a solution. I never even heard of Firebug untill you mentioned it. I just installed it and its great! Although im not too shore how it works yet.

So would you be able to post the code for the whole stylesheet with these changes? Then I will swap the one with yours in firebug and see how it looks.

Thanks mate!

**EricReese** · 06-23-2009, 12:32 PM

The problem is, in firebug, it is reloading the stylesheet next to the ads so I can't get the specifity I want. But go in firebug and find each of those elements selectors and edit the properties. The main thing was there wasn't enough width and there was overflow:hidden in there TWICE actually

Just play around with Firebug, you'll see it.