0

Any one able to help me identify this cross browser CSS issue

http://bit.ly/HC1c2u

In firefox the "get connected" area shows as intended, in others it isn't any help appreciated

Effected HTML

 <div style="font-size:14px; width:1000px;" id="yjsg3">
    <div style="width:100%;" class="yjsgxhtml" id="user1">
    <div class="yjsquare">
<div class="yjsquare_in"><div class="on-youevents ltr" id="community-wrap"><!-- js_top --> <!-- begin: #cFrontpageWrapper -->
 <div id="cFrontpageWrapper">
 <div class="greybox">
 <div>
 <div>
 <div class="cFrontpageSignup"><!-- Start the Intro text -->
 <div class="cFrontPageLeft">
 <div class="introduction">
 <h1>Get Connected!</h1>
 <ul id="featurelist">
 <li>Connect and expand your network</li>
 <li>View profiles and add new friends</li>
 <li>Share your photos and videos</li>
 <li>Create your own group or join others</li>
 </ul>
 <div class="joinbutton"><a title="JOIN US NOW, IT'S FREE!" href="/rhythm365/social/register.html" id="joinButton"> JOIN US NOW, IT'S FREE! </a></div>
 </div>
 </div>
 <!-- End Intro text --> <!-- Start the Login Form -->
 <div class="cFrontPageRight">
 <div class="loginform"><form name="login" method="post" action="/rhythm365/social.html" id="form-login">
 <h2>Members Login</h2>
 <label> Username<br> <input type="text" name="username" class="inputbox frontlogin" id="username"> </label> <label> Password<br> <input type="password" name="password" class="inputbox frontlogin" id="password"> </label> <label for="remember"> <input type="checkbox" alt="Remember me" value="yes" name="remember" id="remember"> Remember me      </label>
 <div style="text-align: center; padding: 10px 0 5px;"><input type="submit" value="Login" name="submit" class="button" id="submit"> <input type="hidden" value="com_users" name="option"> <input type="hidden" value="user.login" name="task"> <input type="hidden" value="L3JoeXRobTM2NS9zb2NpYWwvcHJvZmlsZS5odG1s" name="return"> <input type="hidden" value="1" name="b8f1cd79c6f1e95ecd9c177eec53d705"></div>
 <span> <a href="/rhythm365/component/users/?view=reset" class="login-forgot-password">          <span>Forgot your Password?</span></a><br> <a href="/rhythm365/component/users/?view=remind" class="login-forgot-username"><span>Forgot your Username?</span></a> </span>      <br> <a href="/rhythm365/social/register/activation.html" class="login-forgot-username">      <span>Resend activation code?</span> </a></form></div>
 </div>
 <!-- End the Login form -->
 <div class="jsClr">&nbsp;</div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div></div>
 </div>

</div>
</div>
1

2 Answers 2

1

There is semicolon missing after the import rule in file '/templates/youevents/css/custom.css'

0
0

This is because of your reset.css, you have font-family: inherit;

Delete this and you should be good to go...

#community-wrap h1, #community-wrap h2, #community-wrap h3, #community-wrap h4, #community-wrap h5, #community-wrap h6 {
border: 0 none;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0 none;
padding: 0;
vertical-align: baseline;

}

You could probably just delete this whole chunk

Firebug is an invaluable tool for web development, I suggest you add this to firefox and you'll be able to debug far more quickly

1
  • I deleted that code block but it made no difference, im not to sure why a inherited font would make that much of a difference Apr 11, 2012 at 17:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.