What steps can be taken to ensure this CSS is compatible with all web browsers?

On my Google App Engine application, there is a page that shows search results.

While the design and font size look good on my laptop (using Chrome), they appear differently on a larger desktop display with IE. The title seems too large and the text beneath it is appearing grayed out, which shouldn't be the case. Below, you can see the CSS I am using. Any help with the design or any identified problems would be greatly appreciated. Thank you.

CSS for the body (text under the title):

body { font-size: small; font-family: Verdana, Helvetica, sans-serif; }

CSS for the title:

#large {color: #0066CC; font-size: large; }

CSS for "comment"

#small {color: #808080; font-size: x-small; }

EDIT

In IE, I have also noticed that the text under the title is appearing as grayed out. Could someone explain why this is happening? Here is the code snippet in question:

        self.response.out.write("""<p>
        <a href="%s"><span id=large>%s</span></a> 
        <a href="/comment?main_id=%s"><span id="small">comments</span></a><br />  
        %s 
        </p>
        """ %           
        (item.url, item.title, main_id, 
        item.pitch))               

Answer №1

Consider using percentages or pixel values for font-size instead of keywords. Browsers may interpret keywords differently, causing discrepancies in display.

Answer №2

Although it may not be the exact root cause of the issue, one thing that stands out is your use of IDs instead of classes for styling multiple elements.

For example:

<span id="small">

should be changed to:

<span class="small">

Additionally, your #small selector should be updated to .small. The same correction applies to large.

Zach Rattner should have pinpointed the actual problem though.

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

Attempting to showcase two lines within a single row on an html page

Currently, I am working on a project involving ASP MVC and Bootstrap where I need to display the regulation of a transformer in a specific format. This representation can be seen in the image below: https://i.sstatic.net/VzVcA.png My attempt to achieve t ...

Struggling to Align NAV buttons to the Right in React Framework

My current Mobile Header view can be seen here: https://i.stack.imgur.com/CcspN.png I am looking to achieve a layout similar to this, https://i.stack.imgur.com/pH15p.png. So far, I have only been able to accomplish this by setting specific left margins, ...

When you hit a certain point on the website, the scrolling momentarily pauses

Upon refreshing the page and scrolling down, I notice that the website experiences a brief lag for a few milliseconds before continuing as normal. Oddly enough, this issue only occurs after refreshing the page. Any suggestions on how to resolve this? Th ...

li experiencing a background width problem due to extended text

Check out this code snippet with a problem In the image below, you can see that the background of the li element with more text is larger compared to the others. It's important to note that the <ul> is scrollable. I've experimented with va ...

What could be causing the issue with absolute positioning not functioning correctly?

I'm having trouble keeping my footer at the bottom of the page: body, html{position:relative;} footer{position:absolute;} Even when I use bottom: 0;, the footer doesn't seem to go all the way to the bottom. Is there anyone who can help me troub ...

Complete guide on modifying CSS with Selenium (Includes downloadable Source Code)

I am looking to switch the css styling of a website using Python and Selenium. My initial step was to retrieve the current CSS value. Now, I aim to alter this css value. The Python code output is as follows: 0px 0px 0px 270px How can I change it from 0 ...

What is the best way to incorporate CSS into an Angular 4 project?

I'm struggling to figure out how to import CSS into my app component. All the information I find on Google seems to lead me in different directions... Within my component, I have defined: @Component({ styleUrls: ['../css/bootstrap.min.css&ap ...

excess white space appears in the mobile version

I recently completed a website using both materializecss and bootstrap platforms. While I know this may not be the best practice, it worked for my needs. However, I am facing an issue with the mobile view. When I reduce the viewport size, a margin appear ...

Create a layout consisting of two rows, each containing three blocks. Ensure that the layout is responsive by using only HTML and CSS, without relying

Hello there! I am looking to create a responsive layout without using bootstrap or any other framework..... I want to build it from scratch. https://i.stack.imgur.com/GAOkh.png I am aiming for responsive blocks that collapse into one column when the page ...

What is the best way to synchronize MultiView and TreeView in ASP.NET web forms?

I'm looking to set up a tree view on the left side of my screen, along with a multiview showing content based on the selected tree item on the right. However, I'm having trouble aligning the multiview properly next to the tree view - it seems to ...

Highly suggested CDN for Bootstrap Tab styling

I'm encountering an issue with bootstrap.min.css and tabs. Using: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> The page format looks correct, but switching tabs doesn't display the c ...

Experiencing an unusual gap following the menu on mobile view for my WordPress website?

I recently launched a WordPress website dedicated to education. In order to make some adjustments, I added subheaders to each page with a simple display:none setting. Surprisingly, while everything looked perfect on desktop view, I noticed some extra spa ...

Adaptable Collection of 4 Images

I am facing a challenge in replicating eBay's 'Today' featured seller layout with 4 square images creating one box (refer to the image). I am using Bootstrap for this task, and I am finding it difficult to comprehend how to achieve this. I h ...

The CSS property col visibility:collapse is ineffective on the Chrome browser

I am attempting to conceal some columns in my HTML code by using MDN colgroup and col elements, and manipulating the styles of the columns. The <td> containing the text 'visible' is visible in all browsers (which is good), but the one with ...

Creating a Pixelated Dot Background with CSS3

Is there a way to achieve a pixelated background effect similar to the attached image? I have been using a background image, but it doesn't scale properly and flashes when the page is scrolled. Thanks to vlcekmi3, I now have this CSS: background-co ...

ChakraUI failing to display on the screen

Exploring Chakra UI in my latest project has been an exciting journey for me. I made sure to install all the necessary dependencies and started importing components from the ChakraUI Docs. Initially, I successfully imported and rendered the button feature ...

Issue with Fancybox's close button not being displayed when using a different template

On one of my pages, I'm trying to use two different FancyBox styles for different elements. To accomplish this, I have included the tpl option and made adjustments to the stylesheet. Here is what I currently have: $(document).ready(function() { $(".l ...

Add a new class to an element located in a separate div using JavaScript

$(document).ready(function() { $('.btn').click(function() { $(this).parent().addClass('show'); }); }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div clas ...

Creating Dynamic Height for Div Based on Another Element's Height Using ReactJS and CSS

I'm attempting to set a fixed height for a div in order to enable overflow scrolling. However, I am encountering issues as I am using JavaScript within a useEffect hook to accomplish this task. The problem is inconsistent as sometimes the height is se ...

Reveal or conceal the footer section as you reach the end of the webpage

My webpage layout consists of a fixed nav-bar at the top, a drop down sidebar, a <div> element with an id of content, some content inside the <div>, and a bottom <div> with a fixed position. I am trying to hide the bottom <div> whe ...