CSS - Google Adsense Screw My Forumlayout In Ie

Hello All,

I'm not too savvy with CSS, so please pardon if this seems uber easy.

I have started to use Google AdSense on my web pages ( I wish I could show you an example on my website, but I am not allowed to post a URL on the forum), In Firefox, it shows the main content on the left hand side and the Ads on the right hand side in a columnar format, however, there is no word wrapping going on. In Internet Explorer, the AdSense shows at the top right and then below that my content starts.

Here is what I have in my HTML in a single TD Cell:

[div class="google120rightbanner"]

[script type="text/javascript"][!--
google_ad_client = "myAdSenseID";
google_alternate_ad_url = "(Alternate Adsense URL)";
google_ad_width = 120;
google_ad_height = 240;
google_ad_format = "120x240_as";
google_ad_type = "text";
google_ad_channel = "";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "0000FF";
google_color_text = "000000";
google_color_url = "008000";
//--]
[/script]
[script type="text/javascript"
src="(Javascript URL Location)"]
[/script]

[/div]

[!-- Show my main content --]

[div id="ContentPane" runat="server" style="padding-left:2px;"][/div]
[!-- End my main content --]

[div class="clear"][/div]


This is what I have in my CSS:

.google120rightbanner [
width: 122px;
margin: 15px 10px 5px 10px;
float: right; /*allows main content to wrap around the google ad */
/*note: after this we need to use the clear class to clear the float at end of container */
]

.clear [
clear: both;
]


NOTE: I have changed the brackets so I can display this message on the forums.

Does anyone have any idea what I am doing wrong here in getting the display I want using this CSS? Again, I'm not very savvy about this, so a good explanation would be helpful.

Thank you all very much!

Mark Gordon

Hi,
I've tried adding AdSense to my site, but it always messes up my page.
This seems to happen only in Chrome and in Safari, but it works fine with IE & Firefox

Here's a sample page I created to show the problem:
http://www.deutsched.com/adsense.php

Try displaying it with Chrome & Firefox, and you'll notice the difference

I've tried tracking down the source of the error, and it seems to be that part of the CSS file, however I'm not that good at programming, so I'm unsure of how to fix it:

Code:

#header {
position: relative;
height: 85px;
}

Any help would be greatly appreciated.
Thanks !

I am new to adsense. I was wondering if I should specify the size of each ad in css (via the div I have around each ad). Or is this unnecessary? (I am not asking if I can change the designated size of the ads in css, but just if I should put in the width and height of the standard ad sizes I have chosen). Any insight would be greatly appreciated. Thanks.

Hello, Im having a particular problem with my website (freemyblackberry).

I need to add adsense to my site but have had issues with editing the CSS form.

I wish to add 2 120X600 tiles directly beside the main body (on opposite sides of the main body), though when I do so and resize the browser, the ads go under the main body or go to the outside edges. I need to them to stay stationary in regards to the body. Are you able to help me?

A copy of the CSS is pasted below:


@charset "utf-8";
body { margin:0; padding:0; width:100%; background: #282828 url(images/main_bg.gif) top center no-repeat;}
html { padding:0; margin:0;}

.main { margin:0 auto; padding:0;}
.main1 { margin:0 auto; padding:121012012;}
/********** header **********/
.header_resize {background: #110f0b url(images/header_bg1.gif) top center no-repeat; margin:0; padding:0; height:490px;}
.header_resize2 {background: #110f0b url(images/header_bg1.gif) top center no-repeat; margin:0; padding:0; height:200px;}
.header { width:960px; padding:0; margin:0 auto; }
.header h2 { font: bold 36px Arial, Helvetica, sans-serif; color:#fff; padding:25px 0 0 0; margin:0; width:370px; float:left;}
.header p { width:320px; float:right; font: normal 12px Arial, Helvetica, sans-serif; color:#fff; line-height:1.8em; padding:25px 0 0 0; margin:0;}
/* logo */
.logo {padding:0; margin:0; width:148px; float:left;}
.logo_text { text-align:right; width:700px; float:right; padding:20px 0 14px 0; margin:0; font: italic 11px Arial, Helvetica, sans-serif; color:#815e67;}
.logo_text a { text-decoration:none; color:#815e67;}
/*menu*/
.menu_resize {width:410px; background:url(images/menu_bg.gif) top no-repeat; float:right;}
.menu { padding:0; margin:0 auto; }
.menu ul { text-align: left; padding:0; margin:0; list-style:none; border:0; float:left;}
.menu ul li { float:left; margin:0; padding:0 5px; border:0;}
.menu ul li a { float:left; margin:0; padding:12px 0; color:#fff; font:normal 12px Arial, Helvetica, sans-serif; text-decoration:none;}
.menu ul li a span { padding:12px 9px; background:none;}
.menu ul li a:hover { background: url(images/r_menu.gif) no-repeat right;}
.menu ul li a:hover span { background:url(images/l_menu.gif) no-repeat left;}
.menu ul li a.active { background:url(images/r_menu.gif) no-repeat right;}
.menu ul li a.active span { background:url(images/l_menu.gif) no-repeat left;}
/* body */
.body_resize { background: url(images/body_bg.gif) top repeat-y; padding:0; width:963px; margin:0 auto;}
.body_resize_top { background: url(images/body_top_bg.gif) top no-repeat; margin:0px auto; padding:10px 0px;}
.body_resize_top_resize { margin:10px auto; padding:0 10px;}
.body_resize_bottom { height:13px; margin:0; padding:0; width:963px; background:url(images/body_bottom_bg.gif) bottom no-repeat;}
.body { padding:20px 0; margin:0 auto; background:#e6e6e6; border-top:1px solid #f5f5f5; border-bottom:1px solid #ececec;}
.body h2 { font:normal 20px Arial, Helvetica, sans-serif; color:#000; padding:10px 5px; margin:0;}
.body h3 { font:bold 14px Arial, Helvetica, sans-serif; color:#2a2a2a; padding:10px 5px; margin:0; text-transform:uppercase;}
.body p { font:normal 12px Arial, Helvetica, sans-serif; color:#000; line-height:1.8em; padding:5px 5px; margin:0;}
.body p span { color:#5e5e5e; font: normal 11px Arial, Helvetica, sans-serif; line-height:1.8em; padding:5px 0; margin:0;}
.body p strong { color:#974960;}
.body p.small { text-transform:uppercase; font: normal 12px Arial, Helvetica, sans-serif; color:#868686; line-height:1.8em; padding:0 0 0 80px; margin:0;}
.body a { color:#141414; text-decoration:none; font: bold 11px Arial, Helvetica, sans-serif;}
.body img { float:left; margin:5px 15px 5px 5px; padding:0;}
.body img.floated { float:right; margin:5px 20px; padding:0;}
.right { width:325px; margin:10px 8px 10px 0; padding:0 10px; float:right;}
.left {width:560px; margin:10px 8px 10px 0; padding:0 10px; float:left;}
.left_blog {width:250px; margin:10px 8px 10px 0; padding:0 10px; float:left;}
.port { background: url(images/port_bg.gif) top repeat-y; padding:0; width:259px; margin:10px 10px 10px 20px; float:left;}
.port_top { background: url(images/port_bg_top.gif) top no-repeat; margin:0px auto; padding:10px 0px;}
.port_bottom { height:11px; margin:0; padding:0; width:259px; background: url(images/port_bg_bottom.gif) bottom no-repeat;}
/* FBG */
.FBG_resize { background: #dcdcdc; margin:0; padding:0; border-top:1px solid #d0d0d0;}
.FBG { margin:0 auto; padding:20px 0; width:960px;}
.FBG h2 { font:bold 14px Arial, Helvetica, sans-serif; color:#2a2a2a; padding:10px 5px; margin:0; text-transform:uppercase;}
.FBG p { font:normal 11px Arial, Helvetica, sans-serif; color:#5f5f5f; line-height:1.8em; padding:5px 5px; margin:0;}
.FBG img { float:left; margin:5px 10px 15px 5px; padding:0;}
.FBG .blog { width:290px; float:left; margin:10px 0 10px 15px; padding:5px;}
/********** contact form **********/
#contactform { margin:0; padding:5px 10px; }
#contactform * { color:#2a2a2a; }
#contactform ol { margin:0; padding:0; list-style:none; }
#contactform li { margin:0; padding:0; background:none; border:none; display:block; clear:both; }
#contactform li.buttons { margin:5px 0 5px 0; clear:both; }
#contactform label { margin:0; width:150px; display:block; padding:10px 0; color:#2a2a2a; font: normal 12px Arial, Helvetica, sans-serif; text-transform:capitalize; float:left; }
#contactform label span { color:#F00; }
#contactform input.text { width:380px; border:1px solid #d8d8d8; margin:2px 0; padding:5px 2px; height:16px; background:#f9f9f9; float:right; }
#contactform textarea { width:380px; border:1px solid #d8d8d8; margin:2px 0; padding:2px; background:#f9f9f9; float:right; }
#contactform li.buttons input { padding:3px 0 3px 460px; margin:10px 0 0 0; border:0; color:#FFF; float:left; }

/*************footer**********/
.footer_resize { width:960px; margin:0 auto; padding:10px 0;}
.footer p { font:normal 11px Arial, Helvetica, sans-serif; color:#737373;}
.footer a { font:normal 11px Arial, Helvetica, sans-serif; color:#737373; text-decoration:none; padding:5px; margin:0;}
.footer p.leftt { text-align:left; width:50%; margin:0; padding:10px 0 0 20px; float:left;}
.footer p.rightt { text-align:right; width:30%; margin:0; padding:15px 20px 0 0; float:right;}
.footer {padding:0; margin:0 auto; background:#1c1c1c; border-top:1px solid #2a2a2a; }

p.clr, .clr { clear:both; padding:0; margin:0; background:none;}
li.bg, .bg { float:right; clear:both; border-top:1px solid #e1e1e1; width:100%; padding:0; margin:5px 0; background:none; line-height:0;}

/* Slider */
#slider { width:960px; padding:0 0 0 0; margin:0 auto;}
div#slideshow { float: left; width: 100%; height: 318px; }
.slider-item { width: 100% !important; height: 318px; }
.slider_content_inner img { border: none; }
.controls-center { width: 960px; margin-left: auto; margin-right: auto; }
#slider_controls { float: right; position: relative; background:url(images/pag_bg.gif) no-repeat top center; margin:0; z-index: 1000; width:960px; height:23px;}
#slider_controls ul { margin:0 auto; padding:2px 0; width:54px;}
#slider_controls ul li { margin: 0; padding: 0; list-style: none; }
#slider_controls ul li { float: left; display: block; }
#slider_controls ul li a { width: 10px; height: 10px; background:url('images/tabs_2.gif') no-repeat center center; display: block; float: left; padding:2px; margin:2px !important; margin:1px 1px; outline: none; }
#slider_controls ul li a:focus { outline: none; }
#slider_controls ul li a:hover,
#slider_controls ul li a.activeSlide { background:url('images/tabs_1.gif') no-repeat center center; }


#leftcontent {
position:absolute;
margin: 30px auto;
width:120px;
top:200px;
left:300px;
background-color:#eee;
padding:10px;
width:120px;
}

#rightcontent {
position:absolute;
margin: 30px auto;
width:120px;
top:200px;
right:300px;
background-color:#eee;
padding:10px;
width:120px;
}

http://nj-asap.com/directions.php

I am trying to change the font on the directions part of this page, but nothing seems to effect it.

Here is the table:
Code:

 <table border="1px" align="center" cellpadding="0" cellspacing="0" bordercolor="#6A9EB4" bgcolor="#BFD6DF" class="content">
    <tr><td align="center"><strong>Directions</strong></td>
      <td align="center"><strong>Map</strong></td></tr>

    <tr>
    <td valign="top" bgcolor="#FFFFFF"><div class="maps" id="directions" style="width: 280px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;"></div></td>
    <td valign="top" bgcolor="#FFFFFF"><div class="maps" id="map_canvas" style="width: 340px; height: 400px; margin:5px; border: 1px solid #000000;"></div></td>
    </tr>
    </table>      

I have tried setting the class on the table tag, the tr tag, and the td tag. Currently it is on the div tag, I have even tried putting the font-size on the style of the div tag, but nothing seems to change it. I also tried setting the font size in the body tag.