Advanced Search

Results 1 to 10 of 10

Thread: White thick border with IE & Chrome to fix

  1. #1
    Join Date
    Sep 2008
    Posts
    18
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default White thick border with IE & Chrome to fix

    With IE & Chrome my menu has white thick border. With FF & Opera there's no such border. How to fix it?

    Picture of my menu:
    http://6g6.eu/sih0-menu0.gif

    Example url:
    http://www.aymavisi.org/hikaye/Dostu...%20Cibran.html


    Code:
    <div style="border-style:solid; border-width:0; position: absolute; width: 98px; height: 21px; z-index: 9; left: 0px; top: 71px" id="layer105" align="left">
    	<form action="../dummyvalue" style="border:0px solid #000000; padding:0; text-align: center; background-color:#444577
    ">
    <select name="newurl" onchange="menu_goto(this.form)" style="border:1px solid #444577; color: #FFFFFF; text-decoration: none; font-family: Tahoma; font-weight: bold; text-align: center; padding: 0; background-color: #444577; font-size:9pt; width:130" size="1" id="menu">
    <option>Menü</option>
    <option value="index.html">Ana Sayfa</option>
    <option value="8 Felsefe.htm">Felsefe</option>
    <option value="9 Siir.htm">Şiir</option>
    <option value="2 Makale.htm">Makale</option>
    <option value="4 Hikaye.htm">Hikaye</option>
    <option value="3 Psikoloji.htm">Psikoloji</option>
    <option value="5 Guncel.htm">Güncel</option>
    <option value="6 Kitap.htm">Kitap</option>
    <option value="7 Muzik.htm">Müzik</option>
    <option value="999 Benden.htm">Benden</option>
    <option value="99 Egzersiz.htm">Egzersiz</option>
    <option value="hata raporu.html">Hataları bildirin</option>
    <option value="1 yeniler.html">Yeni eklenenler</option>
    <option value="../ziyareci defteri/index.php?&amp;mots_search=&amp;lang=english&amp;skin">
    Ziyaretçi defteri</option>
    </select></form></div>

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,883
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    It's notoriously difficult to style select and option elements consistently across browsers. You can try styling the option elements too (border:0; padding:0; margin:0; background:#000; ) but you probably won't get exactly the same thing across the board.

    There's another technique where you style the select transparent but wrap it in a div that you then style instead - that might offer a more pleasing visual for you. More info here : http://dev.bergqvi.st/styling-a-select-box-with-css
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Sep 2008
    Posts
    18
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    I added it to each line
    Code:
    border:0; padding:0; margin:0; background:#000;
    but no help. How can I do this: select transparent but wrap it in a div? I inspected and tried to imply the code but nothing changed.

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,883
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    Code:
     
    select {  
        border: none;  
        background:  
        none; outline:  
        none; opacity: 0;  
        -webkit-appearance: none;  
        filter: alpha(opacity=0);  
    }
    It's covered in the tutorial (the code above is a bit neater and comes from the link at the end of this post) - give the select elements transparent styling to allow your custom styling of the surrounding div to show through. You would need to play around with the div styling (and possibly create an image) yourself though to get the look you want. I'm not at a computer so I can't test anything or elaborate further.

    As I said before though, its notoriously difficult to get select dropdowns looking consistent across all browsers with CSS alone, and what works in one won't work in another because differing default browser styling takes over. If the styling is not absolutely critical it might just be easier to go with the flow and accept what you already have.

    If you absolutely must make the select dropdowns look the same on all browsers, there are JavaScript and Flash alternatives out there but they are quite complicated and bloated. Here's an example of one of the more lightweight versions I've seen (if youre already using jQuery) but its still not 100% on all browsers and devices : http://thephuse.com/development/cust...-select-menus/
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  5. The Following User Says Thank You to Beverleyh For This Useful Post:

    nizamo (12-27-2012)

  6. #5
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,883
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    Just something to add - remember that you have inline styling on your select element already so whatever you add to an external CSS file for the select element will be overridden by the inline style. You will need to remove the inline style or also add the transparent CSS references inline to make them effective.

    BTW, is there a script on your page that is deactivating the right-click menu action? I'm on iPhone so I don't have a mouse as such, but I tried to view your source code with my usual code-viewing app and it wouldn't work - that usually happens with one of those right-click prevention scripts - can you temporarily disable that script while you're seeking help? It would just make things a heck of a lot easier for us and then you can apply it again, if you need to, afterwards.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  7. #6
    Join Date
    Sep 2008
    Posts
    18
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    I added it to my styles also tried this:

    Code:
     select {  
        border: 1px;  
    background-color: #444577
        none; outline:  
        none; opacity: 0;  
        -webkit-appearance: none;  
        filter: alpha(opacity=0);  
    }
    But now it turned to completely black, no border no menü text nor drop down arrow.

  8. #7
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,883
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    Well, with "background-color:transparent" in your CSS it would be transparent, but you've set it to "background:#444577", which is defeating the transparency and causing everything to go black(ish) - with this technique, the full transparency is what's supposed to happen

    Now you would apply your styling and background image (that's where you'd recreate the downwards arrow) to the div that is surrounding the select. The custom div styling will show through the select because its 'invisible'.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  9. #8
    Join Date
    Sep 2008
    Posts
    18
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    I tried your code now nasty white borders gone but Menü text & drop-down arrow is invisible. Very close to success one last touch needed.

    Code:
    select {  
        border: none;  
        background:  
        none; outline:  
        none; opacity: 0;  
        -webkit-appearance: none;  
        filter: alpha(opacity=0);  
    }
    Last edited by nizamo; 12-27-2012 at 02:57 PM.

  10. #9
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,883
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    I don't think you're understanding the concept if the technique described in both tutorials - you need to wrap the now invisible select element in a div, which you will style to look like a dropdown menu again with the help of a background image that you create yourself (whatever look you want to achieve)

    Please refer to both tutorials again so you understand what it is they're trying to accomplish.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  11. The Following User Says Thank You to Beverleyh For This Useful Post:

    nizamo (12-27-2012)

  12. #10
    Join Date
    Sep 2008
    Posts
    18
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    I got it, now menu is transparent and I added a background image of Menü. Thanks for your patience and help Beverleyh!

Similar Threads

  1. White border on the top and left side of images in Ultimate Fade-in slideshow
    By pagan11460 in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 09-15-2010, 06:31 PM
  2. Replies: 1
    Last Post: 05-07-2009, 03:52 AM
  3. White bottom border FF only DD Script Thumbnail Viewer
    By Girard Ibanez in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 05-23-2007, 03:20 PM
  4. Unwanted white border on ultimate slide show
    By ccrrar in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 04-26-2007, 06:46 AM
  5. iframe white border wont go away
    By rmagnes in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 08-20-2005, 08:53 PM

Bookmarks

Posting Permissions

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