CSS problem causing minor cross-browser compatibility issue

Can anyone assist me in resolving this cross-browser CSS issue?

The "get connected" section appears correctly in Firefox, but not in other browsers. Any help is appreciated.

Affected 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>

Answer №1

The import rule in file '/templates/youevents/css/custom.css' is missing a semicolon at the end

Answer №2

Having issues with your font display? It may be due to the reset.css file, specifically the font-family: inherit; property.

To fix this, simply remove that line of code 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;

}

If you're feeling bold, you could consider deleting this entire section

For smoother web development troubleshooting, I highly recommend installing Firebug on Firefox – it's a game-changer for debugging!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Different body background color changes every second

I have a function called makeRandColor that generates a random color using RGB and template string literals. However, I am struggling to figure out how to make it work every second. I tried using setInterval but it doesn't seem to be functioning prope ...

Retrieve variables from an external JavaScript file

I need to fetch the currentID variable from renderermain.js and utilize it in renderermem.js. However, I am looking for a way to achieve this without modifying mem.html: <script src="renderermain.js"></script> <script src="renderermem.js"& ...

Issues with Forms Affecting my Footer

One of the best methods to understand this issue is to view it live. The footer on the homepage looks great at www.fishingreports.com. However, there seems to be a problem with the footer at www.fishingreports.com/users/register. Whenever I copy the cod ...

Conflict with choosing options identified when using Select Box on IOS iPad mini

I am currently attempting to display a select box with scrolling on an iOS iPad mini. Issue: The options are not appearing inside the select box, instead they are overflowing outside of it in the popover. CSS .indicators_geography { font-size: 12px; ...

Incorporate content from HTML into various sections

Is there a way to dynamically extract the h4 headers and the first sentence from each section of this HTML, and then add them to a new div? function summarize() { let headings = document.getElementsByTagName("h4"); // Get all H4 elements let newsText = do ...

"Implementing a full page refresh when interacting with a map using

Here is an example of how I display a map on the entire page: <div id="map_canvas"> </div> UPDATE 2: I have successfully displayed a menu on the map, but there is a problem. When I click on the button, the menu appears briefly and then disapp ...

Enhance Your Vue.js 2.0 Experience: Implementing Vue Components Generated with v-html and Compiling the Markup

Currently Utilizing VueJS 2.0 I am looking to transform the following into a clickable link. Is this possible? This is my vue component: <template> <div v-html="markup"></div> </template> <script> new Vue({ data() { ...

css issue with focus on ie11

<style type="text/css"> .main { position: absolute; border-radius: 8px; border: none; height: 54%; top: 35%; /*33%*/ color: #FFFFFF; font-size: 0.7em; o ...

I am looking for a way to add some color to the text within a div on my HTML page. Can you help me

Is there a way to apply background color only to the text content within this div, without styling the entire element? ...

How can we create a touch and mouse-friendly horizontal scrolling navigation pattern?

I am trying to implement horizontal scrolling for video testimonials in a single row on a responsive website, but I am encountering an issue. The width of the container class is larger than col-12, which leaves space and causes horizontal scroll on the pag ...

Tips on utilizing jQuery or JavaScript to efficiently filter out outcomes exceeding a specified range

<input type="range" name="rangeInput" min="100000" max="750000" onchange="updateTextInput(this.value);"> Displayed above is the slider code that provides a value output below. <div id="sliderValue"> <p>Max Value £</p> <input t ...

Utilizing Google Chrome Developer Tools for JQuery console debugging

Just started using jQuery and was expecting to see [<li>my name</li>, in the Google Chrome console but got: [li, prevObject: r.fn.init(1)] 0 : li length : 1 prevObject : r.fn.init(1) proto : Object(0) <html> ...

Why is my CSS not recognizing the animation I specified for it to play?

I can't seem to get the simple animation I added to my code working properly. <div class="phone-center"> <div class="phone"> </div> </div> .phone-center { display: flex; justify-content: ce ...

How can I arrange images vertically instead of placing them side by side?

I need help figuring out how to display multiple images in a vertical format instead of horizontally in the code below. The images are wide and take up too much space if shown side by side. My coding skills are basic, so specific guidance on where to mak ...

Generate a table containing information organized by category

I am looking to create a component Table that groups countries together. Here is my mockup: enter image description here I am struggling to find a solution for this issue. Can someone please assist me? ...

Multiple CSS styles are being employed simultaneously to render the webpage

Currently, I am utilizing JavaScript to choose different CSS styles for various accessibility options such as black on white text and larger text. The issue I am facing arises when switching the CSS sheet, as elements from previously selected sheets are st ...

Sort through categories using PHP and MySQL for an organized search

Hello, I have a search code that I am using: <form action="search.php" method="get"> <input type="text" name="query"> <select name='category'> <option value="all">All categories</option> <? while ($cat = mys ...

The header of my website requires adjustment to correct the horizontal line at the top

I am having an issue with a horizontal line separating my header from the body content. I want it to stay in place when scrolling, but when I try to set it to a 'fixed' position, it behaves strangely. Can someone please assist me with this proble ...

Finding the variance in the given situation is as simple as following these steps

To find the variance between the "Total Marks" in a question and the input texts for each answer, we need to consider specific scenarios. Firstly, if a question has only one answer, the text input should be displayed as readonly with the same value as the ...

ng-class in Angular seems to be functioning properly on <td> elements, but is not

When using this HTML inside an ng-repeat, there is a difference in behavior: This part works fine: <tr> <td ng-class="info.lastInMonth">{{ info.date_formatted }}</td> ... But this section does not work as expected: <tr ng ...