Rounded Corners Without Images

Collapse
This is a sticky topic.
X
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    #16
    Oh thanks alot...It is really interesting. I am going to try this too...
    I have been working on some other similar stuff too, I will post it soon too.

    Comment


      #17
      Originally posted by abstract View Post
      Oh thanks alot...It is really interesting. I am going to try this too...
      I have been working on some other similar stuff too, I will post it soon too.
      Try this

      Put this css parameter in any class and you will get round corner

      Code:
      -moz-border-radius: 8px;

      here is example of Round corner Text Input box

      Code:
      .input{
      font-family:Tahoma;
      font-size:13px;
      background-color:#FFFFFF;
      color: #000000;
      width:200px;
      border:1px solid #E3EEF7;
      -moz-border-radius: 8px;
      height:20px;
      }
      || ||
      Toll Free : 0808 262 0255

      __________________________________________________

      Please email vish[at]eukhost.com if you have any questions or need my assistance

      Comment


        #18
        This will only work in Firefox not in IE n others

        Originally posted by Vish View Post
        Try this

        Put this css parameter in any class and you will get round corner

        Code:
        -moz-border-radius: 8px;

        here is example of Round corner Text Input box

        Code:
        .input{
        font-family:Tahoma;
        font-size:13px;
        background-color:#FFFFFF;
        color: #000000;
        width:200px;
        border:1px solid #E3EEF7;
        -moz-border-radius: 8px;
        height:20px;
        }

        Comment


          #19
          @abstract - is there an alternative that can be used in IE & others?

          Comment


            #20
            Rounded corner in IE

            Well for IE you will have to use the strategy described above in start of this thread. By default mozilla supports this rounded corner CSS property. But I think they have introduced a border-radius property for rounded corners, but this will work only in CSS3 compatible browsers which may work for IE (if they start following standards).

            So, for IE I will personally prefer images method to avoid any issues. Also when coming to JS IE always works differently so I think its better to avoid JS version and use images for corners.

            Though there are some really good ways to use images too (using in nested div structures and using class to set background of each div.

            Comment


              #21
              the CSS rounded corners is now useable in most browsers, firefox, opera, safari etc etc APART from , as usual, IE, who insist on ignoring everything everyone else is doing.. again.

              Personally, i just use CSS corners anyway, and sod IE. Yes yes, i know IE accounts for the majority of users, but i'm not bowing down to them any more.. i've had enough of it. I'm usiong rounded CSS on many commercial sites, and if IE users cant see them , tough.

              Comment


                #22
                Many thanks abstract - much appreciated. I'll stick with images from now on.


                Originally posted by abstract View Post
                Well for IE you will have to use the strategy described above in start of this thread. By default mozilla supports this rounded corner CSS property. But I think they have introduced a border-radius property for rounded corners, but this will work only in CSS3 compatible browsers which may work for IE (if they start following standards).

                So, for IE I will personally prefer images method to avoid any issues. Also when coming to JS IE always works differently so I think its better to avoid JS version and use images for corners.

                Though there are some really good ways to use images too (using in nested div structures and using class to set background of each div.

                Comment


                  #23
                  you know all links on this forum are nofollow dont you? And by the way, you cant use two title tags in an attempt to fool the search engines, as it doesnt work. They'll just choose the first one.

                  Comment


                    #24
                    Originally posted by MaFtuk
                    i agree! sod IE... there's just one site though that I really wanted everyone to see the curves so i just used css and png/gif images. as you can see, i think it looks rather nice: Wedding Videographer Hampshire-Wedding DVD Camberley Hampshire

                    MaFt
                    The title tags cock up is the stupid seo rip off company pratting about with code incorrectly. Will fix that when I get home.

                    I also don't like your accusation that I am posting it here to get google ranking up. The discussion is about different ways to create rounded corners so I was showing it can be done effectively without needing JavaScript.

                    MaFt
                    http://maft.co.uk

                    Comment


                      #25
                      Originally posted by MaFtuk
                      i agree! sod IE... there's just one site though that I really wanted everyone to see the curves so i just used css and png/gif images. as you can see, i think it looks rather nice: Wedding Videographer Hampshire-Wedding DVD Camberley Hampshire

                      MaFt
                      The title tags cock up is the stupid seo rip off company pratting about with code incorrectly. Will fix that when I get home.

                      I also don't like your accusation that I am posting it here to get google ranking up. The discussion is about different ways to create rounded corners so I was showing it can be done effectively without needing JavaScript.

                      MaFt
                      http://maft.co.uk

                      Comment


                        #26
                        It looks good. Its using images method.


                        Originally posted by MaFtuk View Post
                        The title tags cock up is the stupid Search Engine Optimization rip off company pratting about with code incorrectly. Will fix that when I get home.

                        I also don't like your accusation that I am posting it here to get google ranking up. The discussion is about different ways to create rounded corners so I was showing it can be done effectively without needing JavaScript.

                        MaFt

                        Comment


                          #27
                          Search Engine Optimising For Derby, Burton on Trent, Lichfield, Tamworth, Nottingham, Leicester

                          Comment


                            #28
                            Originally posted by MaFtuk View Post
                            I also don't like your accusation that I am posting it here to get google ranking up.

                            MaFt
                            okay maybe i was being a bit harsh there.. apologies. you'd be suprised how many do though.

                            Why dont you find yourself a decent Search Engine Optimization company though if your current one is messing up (which they are, clearly). Your site needs work too if its to succeed, you're making a lot of mistakes in the deployment.

                            Thats not a criticism, its just free advice. I can turn it around if you want (as can others i'm sure). Either way i'd get working on it if you're going to be relying on it for new business.

                            Comment


                              #29
                              Originally posted by abstract View Post
                              Oh thanks alot...It is really interesting. I am going to try this too...
                              I have been working on some other similar stuff too, I will post it soon too.
                              Try this. Rounded corners without images & javacript.

                              HTML Code:
                              <style type="text/css">
                              .rndbxg b.trg, .rndbxg b.brg { display: block }
                              .rndbxg b.trg *, .rndbxg b.brg * { display: block; height: 1px; overflow-y: hidden; font-size: 0 !important; border-width: 0 1px; border-style: none solid}
                              .rndbxg b.trg b, .rndbxg b.brg b { margin: 0 4px }
                              .rndbxg b.trg i, .rndbxg b.brg i { margin: 0 2px }
                              .rndbxg b.trg u, .rndbxg b.brg u { margin: 0 1px !important }
                              .rndbxg .rndbxCg { border-width: 0 1px; border-style: none solid; padding: 0; overflow: hidden }
                              .rndbxg b.trg u, .rndbxg b.brg u { height: 2px }
                              .rndbxg b.trg i, .rndbxg b.brg i { border-width: 0 2px }
                              .rndbxg b.trg b, .rndbxg b.brg b { border-width: 0 }
                              .wrndbxg b.trg b, .wrndbxg b.brg b { background: #cccccc }
                              .wrndbxg b.trg i, .wrndbxg b.brg i, .wrndbxg b.trg u, .wrndbxg b.brg u, .wrndbxg .rndbxCg { background: #ffffff; border-color: #cccccc }
                              .grndbxg b.trg *, .grndbxg b.brg *, .grndbxg .rndbxCg { background: #ececec !important; border-color: #ececec !important }
                              </style>
                              HTML Code:
                              <div style="padding: 10px; width: 100%">
                              
                               <div class="rndbxg wrndbxg">
                                <b class="trg"><b></b><i></i><u></u></b>
                                 <div class="rndbxCg">
                              
                                  <div style="padding: 10px">
                                  <div align=center>Rounded Corners Without Images</div>
                                  </div>
                              
                                 </div>
                                <b class="brg"><u></u><i></i><b></b></b>
                               </div>
                              
                              </div>
                              This will work in Firefox - IE - Opera and others
                              Make your website the fastest one - Web Optimizer* web.stakh.com

                              Comment


                                #30
                                Thank you for sharing.
                                web design London,
                                logo design London,
                                print London

                                Comment

                                Working...
                                X