Issue with CSS in Internet Explorer 7

CSS CODE:

.search { 
float: left;
width: 100%; 
display: block;
}

.search ul.tabs { 
height: 23px; 
margin-top: 50px;
padding: 0px; 
} 

/* FF ONLY */
.search ul.tabs, x:-moz-any-link { 
height: 26px; 
margin-top: 50px;
padding: 0px; 
} 

.search ul.tabs li { 
float: left; 
display: inline; 
margin: 0; 
padding: 0; 
border-top-left-radius: 3px;
border-top-right-radius: 3px;
-moz-border-top-left-radius: 3px;
-moz-border-top-right-radius: 3px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
} 

.search ul.tabs li.second { 
padding-left: 2px; 
} 

.search ul.tabs li a { 
padding: 7px 10px; 
background-color: #ffa63c; 
font-family: "Arial", Helvetica, sans-serif; 
text-decoration: none; 
color: #fdf9f1;  
font-weight: bold;
}

.search ul.tabs li a:hover { 
color: #fff; 
}

HTML CODE:

<div style="float:left">
            <ul class="tabs">
                 <li id="ctl00_ctl00_cplMPBody_liRestaurnat" class="first">
                <a title="Poišči po imenu" class="activeRestaurant" href="x">Poišči restavracijo</a>
            </li>
            <li id="ctl00_ctl00_cplMPBody_liAddress" class="second">
                <a title="Poišči po imenu kraja" href="x">Poišči po krajih</a>
            </li>          
            </ul>    
        </div>

And i am facing an issue with IE:

FF

IE 7

how can I resolve this in IE 7?

htmlcss

Answer №1

If you're using IE7, you may have noticed that rounded corners are not supported (as they are a feature of CSS3). Fortunately, there are alternatives like css3pie, jquery ui, or the jquery rounded corner plugin:

http://jqueryui.com/

http://jquery.malsup.com/corner/

Answer №2

This solution resolved the issue of tab height for me in IE7 (technically IE8 in IE7 standards mode):

.search ul.tabs li a {
   display: inline-block;
}

Interestingly, this also fixed the problem in quirks mode. It seems that older versions of IE have trouble expanding the background with padding on an inline element.

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

Swapping images when hovering over a list item or anchor tag

I recently came across an intriguing issue with changing the img src on a:hover. Check out this SCREENSHOT When hovering over the <a> sector, it's not showing the white image as expected. I have black and white icons, and I want the img src to ...

htmlcsstags

Is there a way to smoothly navigate back to the top of the page after the fragment identifier causes the page to scroll down?

I do not want to disable the functionality of the fragment identifier. My goal is for the page to automatically scroll back to the top after navigating to a specific section. This inquiry pertains to utilizing jQuery's UI tabs. It is crucial to have ...

javascriptjqueryhtml

Having trouble applying styles to a component using forwardRef

I'm relatively new to React and still trying to wrap my head around the component's lifecycle. However, the issue at hand is proving to be quite perplexing. One thing that confuses me is why adding "setState(10);" causes the style of the "Test" ...

javascripthtmlcssreactjs

Prevent a <span> element from affecting the linking functionality of an <a> tag

Is it possible to make a hyperlink clickable without including the <span> tags within it and instead attaching a jQuery event to those tags? This is the code I'm using. It utilizes bootstrap's list-group for a navigation element: <ul cl ...

javascripthtmlhyperlink

Enhance the numerical worth of the variable through the implementation of the function

I'm working on a JavaScript timer but I'm struggling with assigning the value of a parameter to a global variable. Currently, I can achieve this without using parameters, but I really want to streamline my code and reduce the number of lines. He ...

javascripthtmlfunction

Quantify the Proportion of Affirmative/Negative Responses and

I am attempting to calculate the percentage of "Yes" or "No" responses in an HTML table based on user input for each month's questions. Then, I want to display the average percentage in the "average" column for each month. For example, if the user sel ...

javascripthtmljquerycss

Is there a way to store image URLs in a fashionable manner?

Hey there! I've been working on creating a HTML page that showcases multiple images. Everything is running smoothly on my localhost, but when I try to access it online, the images take forever to load. Any suggestions on how I can cache image URLs in ...

javascriptjqueryhtmlcss

What is the best way to generate script code dynamically on an HTML page depending on the environment?

I am facing a challenge with my asp.net application. I need to insert a dynamic script into the html section, and this script's value must change depending on the environment (TEST, QA, etc.). To illustrate, here is the script where DisplayValue is th ...

javascripthtmlasp.net

Skip ahead button for fast forwarding html5 video

One of the features in my video player is a skip button that allows users to jump to the end of the video. Below is the HTML code for the video player: <video id="video1" style="height: 100%" class="video-js vjs-default-skin" controls muted autoplay=" ...

javascriptjqueryhtml

Is it feasible to verify for vacant dates with a single click?

Is there a way to determine if a date value is empty, and if it is, display a popup indicating so? After some research, I stumbled upon a similar issue where the date value was always filled with a default "mm/dd/yyyy" value. The solution provided involv ...

javascripthtml

How can I implement socket.io with multiple files?

I'm encountering an issue with Socket.io in my Express application. I am trying to have two .html files that can send messages to the server, but one of the files is throwing an error: Failed to load resource: net::ERR_FILE_NOT_FOUND add.html:26 Uncau ...

javascripthtmlnode.jssocket.io

Employing PHP conditions alongside JavaScript to conceal the div elements

I have been struggling with a problem for the past few hours and still haven't found a solution. I am new to php. What I am trying to achieve is to display and hide a div based on a PHP condition. Here is the scenario: Please note: By default, the DI ...

phpjqueryhtml

The feature of Switch css does not appear to function properly when used in conjunction with input type

Why does the switch button not work with the input type radio but works with a checkbox button? How can I maintain the radio input and solve this issue? @charset "utf-8"; /* CSS Document */ /* ---------- GENERAL ---------- */ body { background: #4a4a4 ...

htmlcssinputchecked

Press the Concealed Button Enclosed in a div Using Selenium with Python

Currently, I am in the process of automating the login on the Workday portal by utilizing Chrome WebDriver in Selenium. My main challenge lies in figuring out how to click on a hidden sign-in button with the following properties: <div class="css-1s ...

pythonhtmlselenium-webdriverwai-ariahidden-field

Incorporating Scatter Dots into a Horizontal Stacked Bar Chart using Chart.js

My horizontal stacked bar chart is not displaying pink scatter dots based on the right y axis numbers. I need help figuring out what I am doing wrong. When I change the chart to a normal bar instead of horizontal, the dots appear. However, I require them ...

javascripthtmlangularchart.js

Wrapbootstrap offers dynamic design options for Java-based web applications

I recently obtained a bootstrap theme from the website wrapbootstrap to use in my Java web application. However, I am unsure of where to begin with it. Despite having already added the bootstrap css to my application, I now wish to remove it and replace it ...

cssjsptwitter-bootstrapsass

What is the best way to serialize form data while also including a child collection?

Currently, I have a webpage within my web application where I am in the process of creating a Person object using an AJAX POST request. The required JSON format that needs to be sent to the API endpoint is as follows: { "categoryId": "string", "na ...

jqueryhtmljsonajaxserialization

Ensuring the validity of an HTML form by including onClick functionalities for additional form elements

I am working on a form that I put together using various pieces of code that I found online. My knowledge of HTML and JavaScript is very basic. The form includes a button that, when clicked, will add another set of the same form fields. Initially, I added ...

javascriptjqueryhtmlvalidationforms

Utilizing jQuery AJAX to efficiently handle branching based on the result received

I've successfully set up my first AJAX call with jQuery. The only thing left to do is to check the result from the PHP page for any database errors and display an error message if necessary. Here's the current Javascript code: <script type=" ...

javascriptphpjqueryhtmlajax

How to center a span using Twitter Bootstrap

As a newcomer to Twitter Bootstrap, I'm wondering how I can center a span within a parent row. Currently, I am working with Twitter Bootstrap Version 2.3 instead of 3.1. In version 3.1, there is a center-block feature that I cannot utilize in 2.3. Th ...

csstwitter-bootstrapresponsive-designcss-frameworks