CODEWITHSUNDEEP
htmlcssinternet-explorer
Pradyut Bhattacharya
Pradyut Bhattacharya

Reputation: 5748

No CSS borders in IE

i have a page which displays a border around the divs #call and #courses

i m using the css: 

border: 3px solid #afd4a9;

this is not properly in ie

see it here

thanks

Upvotes: 0

Views: 251

Answers (4)

Sam
Sam

Reputation: 1243

Your CSS is being overwritten by inline styles, it appears, by this function. $('#courses').corner(); in your index.js file, which is rounding its corners like it's supposed to.

Upvotes: 0

Ken Pespisa
Ken Pespisa

Reputation: 22284

The problem is that you have a bit of javascript adding a style attribute to your DIVs:

style="border-bottom: medium none; position: relative; border-left: medium none; zoom: 1; border-top: medium none; border-right: medium none;"

You'll have to selectively remove that code for IE, or fix how it works.

Note, you ought to install the Developer Tools for IE (or if you have IE 8, just press F12 to see if they come up). The tool will let you see the HTML code after javascript has run, and it is invaluable in troubleshooting these types of problems.

Upvotes: 0

Xhalent
Xhalent

Reputation: 3954

corners.js removes the borders in ie - see the inline styles for the relavent divs. To have borders in IE, you need to have an outer div wrapping the inner div and use corners on both divs to get a border like effect. Check out the demo page about half way down, under adjornments: Jquery corners demo page

The way corners works in ff and IE is totally different - it simply uses the built in mozilla css styles which keeps the border styling. In IE corners does div insertion.

Upvotes: 0

thirtydot
thirtydot

Reputation: 228302

There's nothing wrong with your CSS.

When I disable JavaScript in Internet Explorer, the border is there (but not rounded).

Looking more closely, I see you're using jquery.corner.js for rounding the corners.

I'm not sure why that isn't working for you (I can't see what you're doing wrong), but I recommend switching to CSS3PIE instead for the rounded corners.

In short, you simply download the PIE.htc file, and add a single rule to your CSS for each element:

#myElement {
    ...
    behavior: url(PIE.htc);
}

Upvotes: 2

Related Questions