Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts

    Having trouble with rounded corners

    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
    Last edited by moss2076; 12-28-2007 at 04:37 PM.

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by moss2076 View Post
    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
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts
    Hi effpeetee I think I just edited my post as you replied! Sorry I have re-written it with a different question, my appologies!

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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
    Last edited by effpeetee; 12-28-2007 at 04:50 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts
    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

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Code:
    .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
    Last edited by effpeetee; 12-28-2007 at 05:05 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by effpeetee View Post
    Code:
    .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.

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    This is from my PC screen. WEindows XP Pro.

    I can see no difference. What am I missing?

    Frank
    Attached Thumbnails Attached Thumbnails Having trouble with rounded corners-screenhunter_01-dec.-28-17.20.jpg   Having trouble with rounded corners-screenhunter_02-dec.-28-17.20.jpg  
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    moss2076 (12-28-2007)

  • #9
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts
    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?

  • #10
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #11
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    might be a haslayout issue with IE?

    http://www.brunildo.org/test/Backgro...derLayout.html

  • #12
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •