...

View Full Version : Having trouble with rounded corners



moss2076
12-28-2007, 03:49 PM
I am in the middle of giving my layout some rounded corners for effect. I just cannot get the bottom corners to display correctly in both Mozilla FF and IE7. I can only make it look right in either, not both.

Could someone tell me how to fix it so it displays correctly in both browsers (and in Opera, Safari etc!)?

http://www.siteoftom.com/testroundedcontent.html

effpeetee
12-28-2007, 04:30 PM
I am in the middle of giving my layout some rounded corners for effect. I need about 15px of space below the text so there is a gap between the bottom of the text and the bottom of the rounded images, but I just cannot work out which element to add some bottom-padding to without breaking up the layout of the images.

Could someone tell me?

http://www.siteoftom.com/testroundedcontent.html
Try this.


.box-inner {
background: url(/images/top-left.gif) no-repeat left top;
margin: 0 0 0 0;
padding-bottom: 15px;} adjust as necessary.

Frank

moss2076
12-28-2007, 04:42 PM
Hi effpeetee I think I just edited my post as you replied! Sorry I have re-written it with a different question, my appologies!

effpeetee
12-28-2007, 04:48 PM
You might like to try CSSVista. It's totally free and will let you alter your css and watch the result on IE and FFox together.

http://litmusapp.com/labs

Frank

moss2076
12-28-2007, 04:57 PM
Thanks, I will download it in a mo.

Here is the question/problem I currently am expreriencing -

I am in the middle of giving my layout some rounded corners for effect. I just cannot get the bottom corners to display correctly in both Mozilla FF and IE7. I can only make it look right in either, not both.

Could someone tell me how to fix it so it displays correctly in both browsers (and in Opera, Safari etc!)?

http://www.siteoftom.com/testroundedcontent.html

effpeetee
12-28-2007, 04:58 PM
.cbb {
background: url(/images/bottom-left.gif) no-repeat left bottom;
margin: 0px 10px 5px 10px;
padding: 0px 0px 0px 0px;
border: 1px solid #666666;

Try this.

I used cssvista.

Frank

moss2076
12-28-2007, 05:13 PM
.cbb {
background: url(/images/bottom-left.gif) no-repeat left bottom;
margin: 0px 10px 5px 10px;
padding: 0px 0px 0px 0px;
border: 1px solid #666666;

Try this.

I used cssvista.

Frank

In IE7 the extra suggested border in cbb div does not appear under the bottom-right corner image. It is fine in Mozilla.

effpeetee
12-28-2007, 05:23 PM
This is from my PC screen. WEindows XP Pro.

I can see no difference. What am I missing?:confused:

Frank

moss2076
12-28-2007, 05:28 PM
I think I have got it to work in IE7 and Mozilla with the use of the suggested border and a slight adjustment of padding.

Can I ask (and this may sound stupid) how does adding a border make IE display the div the same as Mozilla?

effpeetee
12-28-2007, 05:35 PM
The only reply to that is that IE7 has many faults with borders etc. FFox is much more accurate.

Using

*{
margin:0;
padding:0;
Border:0;
}

at the start of your css code will often help with seemingly odd results. Different browsers have different default values. This resets them all to zero to start your programming. Not a bad idea. It may mean checking these values in your divs etc.

Frank

Visit the "Sources url in my signature." There is a wealth of advice there.

Frank

jlhaslip
12-28-2007, 05:43 PM
might be a haslayout issue with IE?

http://www.brunildo.org/test/BackgroundBorderLayout.html

moss2076
12-28-2007, 10:30 PM
I have fixed the issue in 15 out of 17 browsers using browsershots.org, the exceptions being IE6 and IE5.5.

I used 'overflow:auto' for the div called "box" and this sorted it out for IE7.

But IE6 and IE5.5 are still not displaying properly. :confused:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum