www.webdeveloper.com
Results 1 to 5 of 5

Thread: White thick border with IE & Chrome to fix

  1. #1
    Join Date
    Nov 2011
    Posts
    13

    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
    Mar 2011
    Posts
    1,141
    Your HTML lacks a <!DOCTYPE> statement, so browsers are rendering the page in what's called "Quirks Mode" where every browser works differently. You need to use a complete <!DOCTYPE> statement to set browsers to "Standards Compliance Mode" so that they're all at least trying to render the page using W3C standards. Search on "doctype switch" and you'll find some good advice.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Nov 2011
    Posts
    13
    If I add <!DOCTYPE html> then with IE8, my pages go in mess like this below:

    http://www.aymavisi.org/psikoloji/Me...r%20Pazar.html

    I don't know much about web design, if I'd remove that thick border everything will be fine on all browsers.
    Last edited by seamoon; 12-26-2012 at 02:55 PM.

  4. #4
    Join Date
    Mar 2011
    Posts
    1,141
    The point is that if you add a proper <!DOCTYPE> and your pages don't display properly, then there are errors in your CSS that you should repair. Otherwise, you'll face a never-ending stream of problems where your pages don't work in all browsers because they'll all be using their own Quirks Mode rendering methods. So you need to learn how CSS is supposed to work. Try running your CSS through the W3C validator at http://jigsaw.w3.org/css-validator/. That will point out any syntax errors. You may still need to add some settings to get browsers to behave, like resetting the margin and padding on all elements to 0 by adding:
    Code:
    * { margin:0; padding:0; }
    to the start of your stylesheet. The default margin or padding is different for some elements, and even a <!DOCTYPE> statement won't overcome that difference. So setting everything to 0 overrides those defaults on all browsers.
    Rick Trethewey
    Rainbo Design

  5. #5
    Join Date
    Nov 2011
    Posts
    13
    I created css includes * { margin:0; padding:0; } also added margin:0; padding:0; to every line but no help. Adding <!DOCTYPE> solves border problem but this messed my pages (1000+) pages I have I can't fix them one by one.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles