The quirky appeal of rounded edges in CSS3

I am currently working on a page with ellipsis in the bottom left. While Chrome, FF4, and webkit nightly display them nicely, FF3 shows rounded tops and bottoms with straight sides, and Safari 5 displays them as rectangular. Is there a way to make Safari 5 and FF3 cooperate?

Update:

I found that setting the radius using the following code makes Safari 5 look like FF3, with rounded tops and bottoms and straight sides.

-moz-border-radius: 1000px;
-webkit-border-radius: 1000px;

The remaining issue is that the ellipses are not elliptical in FF3 or Safari 5.

Update2:

It appears that FF3 and Safari 5 have issues with borders and how they are calculated, and I have not yet found a solution for this problem.

css

Answer №1

Switch to using pixel radius instead of percentage and the issue disappears (confirmed working for the orbiter in Safari using the development inspector)

It appears that you are constantly recalculating the width and height of the orbit object; consider also updating the radius during this process.

By the way, it's interesting to note that percentage-based radii do not behave consistently across all browsers. Good discovery!

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

Is it possible to create an app apk using jQuery Mobile that pulls its information directly from a website?

Currently in the process of developing a blog app using jQuery Mobile. Once completed, my plan is to host it online as a mobile website under a specific domain. However, I also want users to have the option to download it as an app from the app stores. A ...

javascriptandroidjquerycssjquery-mobile

Utilizing a Dual Column Design for Query Loop within custom-template.php on Wordpress

I've recently designed a custom Wordpress template using PHP. The template fetches all the content and is applied to an empty blog post. The Loop Code I used looks like this: <?php $args = array( 'post_type' => array('produc ...

phpcsswordpress

What is the best way to conceal panels while a bootstrap is being utilized?

I have been working on a bootstrap panel that consists of three panels: Panel 1, Panel 2, and Panel 3. The functionality of this panel is working correctly under normal circumstances. My Approach: Clicking on Panel 1 should display its content while hid ...

javascriptjqueryhtmlcsstwitter-bootstrap

Import the information into a td tag's data-label property

I have implemented a responsive table design that collapses for smaller screens and displays the table header before each cell. body { font-family: "Open Sans", sans-serif; line-height: 1.25; } table { border: 1px solid #ccc; border-collapse: co ...

javascripthtmlcsshtml-tableresponsive

How can I use flexbox to position this footer at the bottom of its parent container?

I'm not an experienced designer and it's been a while since I last worked with CSS. I'm diving into using flexbox layout for the first time and feeling a bit overwhelmed. Here is the existing HTML structure that I need to work with and cann ...

csslayoutflexboxpositionalignment

Excessive white space within a relative block div causing the content to appear smaller in comparison

Currently, I am developing a straightforward form that includes CSS-based help boxes. These help boxes are designed to appear when the user hovers over the corresponding row. After leaving my project untouched for a few days, I encountered some bugs upon ...

htmlcss

utilizing the float property in CSS without specifying a width

Below is the structure of my HTML: <div class="content"> <div class="icon"></div> <div class="text">I have a long message that wraps into two lines.</div> <div style="clear:both"></div> </div> A ...

htmlcsscss-float

Switch the designation to Hover Class

I am working with nested divs and have assigned a CSS class to one of the inner divs. How can I trigger the hover effect of the class (class.hover) when the user hovers over the outer div, even if they are not directly over the inner div? I believe this m ...

javascripthtmlcss

Changing color schemes in bootstrap using class overrides vs. individually editing numerous .css files

I am aiming to customize the nav-pills to appear in a bold red color. After reviewing information on these two pages https://getbootstrap.com/docs/4.4/utilities/colors/#background-color https://getbootstrap.com/docs/4.4/components/buttons/ I gathered t ...

cssbootstrap-4

Accessing information from a database and showcasing it within a tooltip

I have successfully implemented a tooltip feature using JavaScript and integrated it into an HTML page. Check out the code snippet below: $(document).ready(function () { //Tooltips $(".tip_trigger").hover(function (e) { tip = $(this).find('.tip&a ...

phpjavascriptjqueryhtmlcss

Display a <div> element styled using CSS3

Question: I am facing a challenge with CSS3 styling. I have one class and one div. The class is currently set to display:none, but I want it to show when the mouse hovers over it (display:block). I have attempted the following: .1:hover + div#2 { dis ...

css

When the page is zoomed in, the image exceeds the boundaries of the parent div

I attempted to position the div elements but did not achieve the desired outcome. .tab-vertical { border: 1px solid black; } <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" dat ...

htmlcssbootstrap-4cdn

What is the best method for decreasing the space between ordered list elements?

Help with removing unwanted top margin space I have been experiencing an issue where I am getting extra space above the list items when using a ul before an ol. The result is that only the unwanted space appears above the circle and number 1. I attempted ...

htmlcss

Opting for a CSS toggle on a div as opposed to an input field

I was on the hunt for a way to create a toggle button and stumbled upon one that fit my needs perfectly. However, the example I found uses the toggle on an input field whereas I want to implement it on a div element. Despite attempting various modification ...

htmlcsstoggle

Position Element on Top of Input Field

I'm struggling to position the Avatar element over my TextInput to create a traditional search bar appearance. However, the icon isn't overlapping the TextInput. Could you please explain why it's not working or suggest a more effective way t ...

javascriptcssreactjsreact-native

Creating a Visual Presentation with Background Image Transition in HTML, CSS, and JavaScript

Seeking assistance in setting up a basic background image slideshow on my website. I have been unable to locate a suitable tutorial online, so I'm reaching out here for guidance. HTML: <body> <h3>Welcome!</h1> <p>Lorem i ...

javascripthtmlcssbackground-imageslideshow

issue with IE's (Internet Explorer) filter invert function not functioning

Why does the filter invert not work in Internet Explorer (IE)? <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> </script> <sty ...

jqueryhtmlcssangularbootstrap-4

Flashing white when transitioning background images

My website features a div with a blurred image that I want to gradually unblur upon hovering, using transition-property and transition-duration. I have two versions of the image prepared - one blurred and one unblurred. However, when viewing online (desp ...

htmlcss

Struggling to add a line break in my code

class Test extends React.Component{ state={name: "John", numTimes: 2}; render() { let output = "" for (let i = 1; i <= this.state.numTimes; i++) { let evenOdd = i % 2 if (evenOdd === 0) { output += i + ". Hello " + this.state.name + ...

javascripthtmlcssreactjsjsx

How can I display a pointer on a specific table using CSS and the Twitter Bootstrap framework?

[EDIT] I apologize for what may seem like a silly question. I appreciate your time and kindly ask if you could help by voting to close this question. In my website built with Bootstrap, I have multiple tables and on one of them, I would like to display a ...

htmlcsstwitter-bootstrap