Nuv Posted March 22, 2011 Share Posted March 22, 2011 My CSS works fine with IE and firefox, however it fails with chrome.In chrome below 'sponsor' nothing comes up. Can someone please point me how to make it chrome compatible. HTML code <h2><span>Sponsors</span></h2> <ul class="sponsors"> <li class="sponsors"><a href="http://www.xxx.com">Send </a><br /> send it</li> <li class="sponsors"><a href="http://www.xxx.com"> Delivery</a><br /> Filler text </li> <li class="sponsors"><a href="http://www.xxx.com">Buy online</a><br /> filler text</li> </ul> CSS @charset "utf-8"; body { margin:0; padding:0; width:100%; background:top center; } html { padding:0; margin:0; } li.bg, .bg { clear:both; border-bottom:1px dashed #818181; padding:0; margin:10px 0; background:none; list-style:none; } p.clr, .clr { clear:both; padding:0; margin:0; } .main { margin:0 auto; padding:0; } .header_resize { margin:0 auto; padding:0; width:920px; } .header { margin:0; padding:0; background:url(images/header_bg.jpg) top center repeat-x; } .rss { width:280px; float:left; margin:5px 0; padding:0; } .rss p { font:normal 10px Arial, Helvetica, sans-serif; color:#9f9f9f; padding:10px 0 0 30px; margin:0; } .rss img { float:left; margin:0; padding:15px 0 0 0; } .rss a { font:bold 11px Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; } .logo { width:400px; margin:0 auto; padding:13px 0 0 0; float:left; } h1 { margin:0; padding:49px 0 60px 40px; color:#fff; font:normal 40px/1.2em Arial, Helvetica, sans-serif; letter-spacing:-2px; } h1 a, h1 a:hover { color:#fff; text-decoration:none; } h1 span { font-weight:bold; } h1 small { font:normal 12px/1.2em Arial, Helvetica, sans-serif; letter-spacing:normal; } .menu { padding:20px 0 0 0; margin:0; width:410px; float:right; } .menu ul { padding:0; margin:0; list-style:none; border:0; float:right; } .menu ul li { float:left; margin:0; padding:0; border:0; } .menu ul li a { border-right:1px dashed #fff; float:left; margin:0; padding:2px 15px; color:#fff; font:normal 14px Arial, Helvetica, sans-serif; text-decoration:none; } .menu ul li a:hover { color:#bb3008; } .menu ul li a.active { color:#bb3008; } .header_text { width:400px; float:right; border:1px solid #df650e; padding:10px; margin:60px 0 0 0; } .header_text p { font:normal 12px Arial, Helvetica, sans-serif; color:#fff; padding:0; margin:0; line-height:1.8em; } .body_resize { margin:0 auto; padding:30px 0 0 0; width:920px; } .body { margin:0; padding:0; background:#e3e1ce; border-bottom:1px solid #c7c39d; } .body h2 { font:normal 30px Arial, Helvetica, sans-serif; color:#464646; padding:5px; margin:0 0 10px 0; } .body h2 span { color:#bd3008; } .body p { font:normal 12px Arial, Helvetica, sans-serif; color:#464646; padding:5px; margin:0; line-height:1.8em; } .body p span { font:bold 14px Arial, Helvetica, sans-serif; color:#bd3008; padding:0; margin:0; } .body img { float:left; margin:5px; padding:0; } .body img.floated { float:right; margin:15px 0 5px 15px; padding:0; } .body a { color:#bd3008; text-decoration:underline; } .left { float:left; width:630px; margin:0; padding:0 0 20px 0; } .right { float:right; width:240px; margin:0; padding:0 0 20px 0; } .right ul { list-style:none; margin:5px 10px; padding:0; } .right li { border-bottom:1px dashed #818181; background:url(images/ul_li.gif) 10px 10px no-repeat; font:normal 14px Arial, Helvetica, sans-serif; color:#464646; padding:5px 0; margin:3px 0; } .right li a { padding:0 0 0 25px; margin:0; font:normal 14px Arial, Helvetica, sans-serif; color:#404a52; text-decoration:none; } .right li a:hover { color:#bd3008; text-decoration:none; } .right ul.sponsors { list-style:none; margin:5px 10px; padding:0; } .right li.sponsors { background:none; font:normal 11px Arial, Helvetica, sans-serif; color:#404a52; border:0; padding:5px 0; } .right li.sponsors a { padding:0 0 0 0px; margin:0; font:normal 14px Arial, Helvetica, sans-serif; color:#000000; text-decoration:none; } .right li.sponsors strong { color:#bd3008; } .search { padding:13px 0 0 0; margin:0 auto; } .search form { float:right; padding:0; margin:0; } .search span { display:block; float:left; background:url(images/search_bg.gif) top left no-repeat; width:195px; padding:1px 5px; height:31px; border-left:1px solid #d7d7d7; } .search form .keywords { line-height:14px; height:14px; float:left; background:none; border:0; padding:6px 2px; margin:0; font:bold 12px Arial, Helvetica, sans-serif; color:#464646; } .search form .button { float:left; margin:0; padding:0; } .FBG_resize { margin:0 auto; padding:0; width:920px; } .FBG { margin:0; padding:0; border-top:1px solid #fff; background:#cccab9; border-bottom:1px solid #9a9782; } .FBG img { float:left; margin:5px 10px 5px 0; padding:0; } .FBG h2 { font:normal 30px Arial, Helvetica, sans-serif; color:#464646; padding:5px; margin:0 0 10px 0; } .FBG h2 span { color:#bd3008; } .FBG p { color:#4b4b4b; font:normal 12px Arial, Helvetica, sans-serif; padding:5px 0; margin:0; line-height:1.8em; } .FBG a { color:#9eaf06; text-decoration:none; font:bold 12px Arial, Helvetica, sans-serif; } .FBG ul { list-style:none; width:120px; float:left; padding:0;send padding:0; margin:10px 5px; } .FBG li { padding:2px 1px; margin:0; } .FBG li a { color:#bd3008; font:normal 12px Arial, Helvetica, sans-serif; text-decoration:underline; } .FBG li a:hover { color:#4b4b4b; text-decoration:none; } .FBG .blok { width:280px; float:left; padding:15px 13px; margin:0; } .footer_resize { margin:0 auto; padding:25px 0; width:920px; } .footer { padding:0; margin:0 auto; background:#b7b5a6; border-top:1px solid #d4d3ca; color:#4b4b4b; font:normal 12px Arial, Helvetica, sans-serif; } .footer p { margin:0; padding:4px 0; line-height:normal; color:#4b4b4b; } .footer a { color:#4b4b4b; padding:inherit; text-decoration:underline; } .footer a:hover { text-decoration:none; } .footer .lf { float:left; } .footer .rf { float:right; } #contactform { margin:0; padding:5px; } #contactform * { color:#F00; } #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; } #contactform label { margin:0; width:110px; display:block; padding:10px 0; color:#666; font:normal 12px Arial, Helvetica, sans-serif; text-transform:capitalize; float:left; } #contactform label span { color:#F00; } #contactform input.text { width:480px; border:1px solid #c0c0c0; margin:2px 0; padding:5px 2px; height:16px; background:#fff; float:left; } #contactform input.boxtext { width:250px; border:1px solid #c0c0c0; margin:2px 0; padding:5px 2px; height:16px; background:#fff; float:left; } #contactform textarea { width:480px; border:1px solid #c0c0c0; margin:2px 0; padding:2px; background:#fff; float:left; } #contactform li.buttons input { border:1px solid #000; background:#ea7d1b; padding:10px; margin:10px 0 0 110px; color:#fff; float:left; font:normal 12px Arial, Helvetica, sans-serif; } p.response { text-align:center; color:#F00; font:normal 11px Georgia, "Times New Roman", Times, serif; line-height:1.8em; width:auto; } #tnt_pagination { display:block; text-align:center; height:22px; line-height:21px; clear:both; padding-top:3px; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; } #tnt_pagination a:link, #tnt_pagination a:visited{ padding:7px; padding-top:2px; padding-bottom:2px; border:1px solid #EBEBEB; margin-left:10px; text-decoration:none; background-color:#F5F5F5; color:#bd3008; width:22px; font-weight:normal; } #tnt_pagination a:hover { background-color:#DDEEFF; border:1px solid #BBDDFF; color:#bd3008; } #tnt_pagination .active_tnt_link { padding:7px; padding-top:2px; padding-bottom:2px; border:1px solid #BBDDFF; margin-left:10px; text-decoration:none; background-color:#DDEEFF; color:#bd3008; cursor:default; } Image Quote Link to comment https://forums.phpfreaks.com/topic/231395-my-css-not-compatible-with-chrome/ Share on other sites More sharing options...
cssfreakie Posted March 22, 2011 Share Posted March 22, 2011 as far as i can tell the stuff below already is wrong. Don't assign properties like that. p.clr, .clr { clear:both; padding:0; margin:0; } do either .clear or p.clear you do the same with quite some other elements. maybe got a live example, saves me reading through hundreds of lines of irrelevant css. Quote Link to comment https://forums.phpfreaks.com/topic/231395-my-css-not-compatible-with-chrome/#findComment-1190849 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.