Jump to content

Recommended Posts

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

 

sponsor.PNG

 

Link to comment
https://forums.phpfreaks.com/topic/231395-my-css-not-compatible-with-chrome/
Share on other sites

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.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.