CSS - Adsense Conflicting With My Css
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 ! Similar TutorialsI 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; } Hello, I am having an issue with positioning my drop-down menu properly on a test site I am making for a relative...which he told me last night needs to be done tomorrow. I am not really CSS-savvy, my CSS skills consist of copy and paste from open-source pages and editing them through trial and error and lots of page refreshing. I am trying to combine a CSS drop down menu with a CSS gallery template -- lyteforms.com/galtest.html THE PROBLEM: I can't get that drop down menu to be centered on the page -- I've tried html <center> tags, CSS position tags, and div align tags in every manner and place possible, but it doesn't seem to work. Could any kind soul view source the stubborn thing and tell me why I am failing miserably? Hi, Ok I have a slight problem. I am using two different styles for my <ul>/<li> tags. This is how it works: Code: <td class="contentmain"> <p>This is some example text - here is a list: <ul> <li>Link 1</li> <li>Link 2</li> </ul> </p> <div id="menu"> <ul> <li><a href="../link/" class="linkmenu">Link 1</a></li> <li><a href="../link/" class="linkmenu">Link 2</a></li> </ul> </div> </td> Now, I need to use two different styles for the td "contentmain" cell and the div "menu". Now, I know I could just put a class to the list, but I am creating this site for someone who doesn't know too much about HTML so I need to make it simple. These are my two styles: Code: td.contentmain ul { color: #CCCCCC; list-style-type: none; padding: 20px; margin: 0px; } td.contentmain li { background: url(../_img/img_dot.gif); background-repeat: no-repeat; padding-left: 3em; padding-bottom: 3em; font-size: 0.95em; } Code: div#menu ul { margin-left: 0px; padding-left: 0px; font-size: 0.95em; } div#menu li { list-style: none; margin-left: 0px; padding-left: 0px; font-size: 0.95em; text-decoration : none; border-bottom: 1px solid #999999; line-height: 2em; } Unfortunately, the list in the div "menu" seems to take some of the td.contentmain style - any idea how to say, don't use it...if you know what I mean. I know it's because the div is inside td.contentmain but I have no idea how to sort it out. Cheers, Chris http://www.deltatango5.com/TESTER6b.html this is the link to reference ....... once you select a menu item: SERVICES and chose a link it of course populates the paired windows ... BUT when you go to GIFT IDEAS for instance, the menu appears until you mouse over ..... there is some kind of conflict with the "content" window/div and the submenu ..... I for the life of me cannot find the issue--assistance is greatly appreciated. NOTE: it works fine with IE ... FIREFOX is the issue ... thanks in advance and happy new year! In Internet Explorer googleadsense does weird things with my forumlayout, the banner will make my table with more width. You can see it on http://www.helpen.be/forum.php As you can see when you collapse the part with the banner it works like it has to be but i like to get it work also when the banner is visible. Thx for the help! Hi, Hope you can help. I'm having trouble trying to figure out why the links in my twitter feed have the same Background color thats applyed to my navbar. (#9933CC. I'm certain I isolated the CSS to affect only the navbar. For some reason its affecting the twitter feed and I can work out why. Can you help?? My site is below. www. smartbod co.uk (Delete spaces in url as I cant post link as im new) Thanks in advance David 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 www.l33tmonkey.com/sun/index.html completely ignoring the image issues, which are next on the list to sort out, I have a problem. I've gotten hold of two seperate scripts with permission from the author, and they wouldn't wrk together so I linked them externally as two seperate files. Both scripts cater to IE and other common browsers using conditional comments and are reasonably tidy even after I've been playing with them So here's the problem, the horozontal menu, with the two drop down sub menus, needs to float to the right, the float attribute is already present within the menu script, however, the float attribute will only work when set to the left. I altered it to the right and the menu went haywire. the scripts and index source can be viewed freely. Any help on this would be really appreciated, I'm no expert on CSS |