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

What causes the inconsistency between Chrome's print CSS emulation and the Print Preview feature?

My website is based on Bootstrap 3 and ensuring that certain pages print properly is crucial for our customers. While most of the site prints fine, we are having issues with modal dialogs. I have been experimenting with Chrome's (v42.0.2311.135 m) CS ...

cssgoogle-chromeprinting

Adjusting the size and adding ellipsis to the <td> component within a table

How can I set a fixed width for td elements in a table and use text-overflow: ellipsis to truncate the text inside the cells? I have attempted various methods without success. Can someone provide guidance on how to achieve this? <table> <tr& ...

htmlcsshtml-table

What is the best way to center CSS slider switches without causing any damage to them?

Does anyone have ideas on how to align CSS Slider Switches? I tried using position: absolute; margin-left: 15em, but the sliders need to remain non-absolute for visual effects. A flex grid was considered, but I don't want the switches to wrap. Usin ...

htmlcss

Utilize JQuery to identify and select every parent element, then retrieve the height of the first child element and adjust the height of the

Recently, I developed a PHP script that pulls news and case posts from a database. The HTML structure used for displaying these posts is as follows: <a href='/post/placeholder'> <div class='col nopadding col12-12 counter'> ...

javascriptjqueryhtmlheightresponsive

How can one guide a glTF model in the direction it is pointed using A-frame?

I have a 3D model of my customized robot loaded in an A-frame scene using version 1.0.4. Currently, I am able to rotate the robot along its x, y, z axes, but I am facing an issue where it continues to move in its original direction rather than the one it i ...

javascripthtmlaframe

Troubles with CSS drop down alignment in Internet Explorer 7

I've been racking my brain all morning trying to solve this issue. My current project involves creating a website for a client, and I'm having trouble getting the dropdown menu to position correctly in IE7. It's working fine in all other br ...

htmlcssxhtmlinternet-explorer-7

PHP sending only a single space in an email

My HTML form works perfectly fine, except for one field! The issue arises with a particular text field that I fill out using a button and a short JavaScript function. Could this be causing a conflict with the PHP code? The problematic text field is: inpu ...

javascriptphphtml

Embed an HTML element within a DIV container

How can I add an HTML tag such as <p> to wrap around the text "Search"? <button id="ihf-quicksearch-submit2" class="btn btn-lg btn-block btn-primary btn-form-submit ihf-main-search-form-submit" type="submit"> Search </button> I am looki ...

jqueryhtmlcss

Eliminating border styles alters the overall appearance of the page

I'm encountering an issue with my HTML/CSS code here: CSS * { padding: 0; margin: 0; border: none; outline: none; } #container { margin: 10px auto 10px auto; width: 960px; background-color: #dddddd; border: solid 1px black; } #contai ...

htmlcss

Ways to conceal HTML tags within a text box

Currently, I am utilizing PHP to extract content from a text file and display it in a textbox. However, I am interested in finding a way to conceal the HTML tags within the textbox (as shown in the image) without deleting them, making them invisible to use ...

phphtmlcsstextboxtags

Ensure that the tooltip remains visible within the confines of the page

In my Angular application, I have successfully implemented a versatile tooltip feature that goes beyond just displaying text. The tooltip is a div element that has the ability to contain various contents: .tooltip-master { position: relative; .tooltip ...

cssangular

Implementing dynamic title insertion into a popover element using jQuery

My goal is to assign a title to my popover object in a local project. I have already included the following files: bootstrap.css v4.2.1 jquery.min.js v2.2.0 bootstrap.min.js v4.2.1 popper.min.js v1.11.0 Initially, there was a basic button present. <i ...

javascriptjqueryhtmlbootstrap-4popover

Tips for resolving the issue of the symbol ' displaying as &#39 in an Angular 2 application

I am currently working on an Angular application that makes API calls when a name displayed in a grid table is clicked. However, I have encountered an issue where names containing an apostrophe are being displayed incorrectly as &#39 instead. I managed ...

javascripthtmlangularkendo-gridjql

What is the best way to showcase several divs, along with their respective child elements, in an inline format?

I am struggling to get 4 div sections to display side by side by using the following CSS for the parent div: .parent { display: inline; } <div class="parent"> <div class="child"> <ul> <li>t ...

htmlcss

Tips for aligning two divs of varying sizes side by side

Imagine having two div elements: <div id="container"> <div id="left">line one</div> <div id="right">line one<br/>line two</div> </div> Is there a way to have the left and right divs align at the bottom li ...

htmlcss

Place the division at the bottom of the screen

I'm facing an issue where I am trying to place a div at the bottom of the viewport but it's not working as expected. Here is how my current setup looks like: html <div class="parent"> <div class="bottom"> </div> </div&g ...

jqueryhtmlcss

List application now includes the capability of adding three items in one go, rather than just one

Furthermore, when the script is placed in the same file as the html, it results in the addition of two items simultaneously instead of three. var itemNum = 1; $("document").ready(function() { $("#addCL").click(function() { var itemId ...

javascripthtmllistcheckbox

Is there a way to adjust the input type date format to show mm/dd/yy?

My input type is set to "date" with the default format of mm/dd/yyyy. However, I would like to change it to mm/dd/yy. Is there a way to adjust the format of a date input? Date: <input type="date" id="date" name="date" value="mm/dd/yy" required/> ...

htmldateformat

Disable the ability to select text when double-clicking

Is there a way to prevent text selection on double click while still allowing selection on mouse drag? Whenever I try to remove selection on dblclick or mouseup, it flashes, which is not the desired outcome as shown in this jsfiddle. UPD: I am not lookin ...

javascripthtmlcsstextselection

What steps do I need to take in order to show the present value using a range input?

Hey there! I'm working on a code in HTML that includes an input of type range. Here's what it looks like: This is my input: <input type="range" min="1" max="100" value="50" class="slider" id="myRange"> Unfortunately, I'm unable to s ...

javascriptphphtml