View unanswered posts | View active topics It is currently Wed Oct 17, 2018 6:53 am

Reply to topic  [ 1 post ] 
 Rounded Corners on Span issue in IE7 and IE8 
Author Message

Joined: Fri Feb 11, 2011 1:54 pm
Posts: 1
Post Rounded Corners on Span issue in IE7 and IE8

Just found CSS3PIE and was excited to give it a go to make a site look the same across all browsers. I ran into some issues, however. For the page in question, I display a table that has been designed to be editable inline using jQuery hooks. The elements are all present on page load but some of them are hidden until they are triggered by a user action. Two links (which are anchor elements) appear for each row: Edit and Delete. Clicking Edit shows another link "Cancel" and underneath all the links is a span that acts as the save button (styled using the class: .button). This button has been styled with a border-radius of .4em and also has the transition property applied, though that part is unnecessary to be displayed in IE. My real concern was the rounded corners.

Anyway, in IE 8 only the text would appear for the save button. The background would be erased in preparation for the object replacement, but nothing ever replaced it. I checked the Known Issues page and adding position:relative to the class applied to the button allowed the button's background style to show appropriately with the rounded corners. However, the hover pseudo class(.button:hover) implements a different text color, background color, and cursor. All of these styles still get ignored when I hover over the element.

In IE7, the same background issue still applies for some reason. Perusing the DOM, the object replacement actually is created with a width of 5000px and height of 2000px!! The absolute positioning is also far off as the left rule is set to 720px (though the button is inside a p element which has a rendered width of about 100px). I applied position:relative to almost every anscestor of this button but nothing seems to work. In addition, I have striped the table rows (tr elements) using two classes, .odd-row and .even-row, and these styles show up in the DOM but are not rendered! THAT is frustrating as they render fine in IE8. The classes only specify a background-color so I have no idea why they would get ignored.

I should also mention that there are pages where the same button class is applied to a span that is never hidden and everything works as expected, even the hover states. I would provide a link but the page is within a password-protected area and changing any of the content inside this area will actually affect other users. I might be able to wrangle up a screen shot but hopefully the info I provided will be enough. Any ideas?

Fri Feb 11, 2011 2:17 pm
Display posts from previous:  Sort by  
Reply to topic   [ 1 post ] 

Who is online

Users browsing this forum: No registered users and 4 guests

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.