Jump to content

Ppjini

Members
 View Profile  See their activity

  • Posts

    4

  • Joined

  • Last visited

 Content Type 

Posts posted by Ppjini

    Bootstrap glyphicons are not visible on my chrome!

    in HTML/XHTML

    Posted · Edited by Ppjini

    Hi W3Schoolers.

    I have downloaded Bootstrap 3.1 and after that, my glyphicons are not properly visible as below.

     

    c0048768_5398a685095e7.png

    c0048768_5398a689de4d8.png

     

    They are shown 'x' square box instead of real images.

     

    I followed some advises from internet, and deleted Bootstrap, re-download it, also deleted glyphicon font files from library>fonts folder and re-installed it too. But it is still same.

    My laptop is Macbook air 2011, and OS is Mavericks 10.9.3

    Please help me to find out solution.

     

    Thanks in advance.

    Jin

    Need a help for css: Navigation li affects other Div tags all!

    in CSS

    Posted · Edited by Ppjini

    Hi everyone.

    I have been trying to solve a problem that top navigation css affects other div menus. (margin, background color)

    Here my all source are:

     

    <!doctype html>
    <style>
    @charset "UTF-8";
    body {
    font: 9pt, Helvetica, Arial, sans-serif !important;
    font-family: Sans-Serif;
    margin: 0px;
    padding: 0px;
    border:0px;
    color: #333;
    }
    dl, dt, dd{margin:0px; padding:0px; border:0px;}
    dl, dt, dd a, a:visited, a:hover, a:focus{margin:0px; padding:0px; border:0px;}
    div {border:0;}
    Img {border:0;}
    Img Img a:visited, Img a:hover {border:0; margin:0; padding:0;}
    a {margin:0; padding:0; border:0;}
    ul, li{list-style:none; border:0px; padding:0px; margin:0px;}
    ul, li a, a:visited, a:hover, a:focus{list-style:none; border:0px; padding:0px; margin:0px;}
    #wrapper{width:1000px; *zoom:1; margin:0px; padding:0 10px 0 10px; text-align:center;}
    #wrapper:after{content:""; clear:both; display:block; }
    #top_logo{
    width:1000px;
    height:70px;
    border:#000 1px solid;
    text-align:center;
    }
    #top_logo ul li a, a:visited, a:hover{
    position:relative;
    width:140;
    height:32px;
    padding:19px 430px 19px 431px;
    }
    #top_lang{
    *zoom:1;
    position:absolute;
    width:1000px;
    top:0px;
    padding:0px;
    margin-top:2px;
    float:right;
    }
    #top_lang:after{content:""; clear:both; display:block;}
    #top_lang ul{position:relative;}
    #top_lang ul li{float:right;}
    #top_lang ul li a, a:visited{
    margin:0;
    padding:0 1px 0 0;
    border:0;
    display:block;
    width:17px;
    height:12px;
    }
    #top_menu{width:1000px; height:50px; margin-bottom:20px; clear:both; border:1px #FF0000 solid;}
    #top_menu ul{position:relative;}
    #top_menu ul li{float:left; text-align:center;}
    #top_menu a, a:visited{
    margin:0;
    padding:0;
    border:0;
    display:block;
    width:166px;
    height:32px;
    padding-top:18px;
    background-color:#345a92;
    color:#fff;
    font-size:10pt;
    font-weight:bold;
    text-decoration:none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
    }
    #top_menu a:hover{background-color:#0575b2; font-weight:bold;}
    #top_menu ul li:last-child a, a:visited{
    margin:0;
    border:0px;
    padding:0;
    width:170px;
    height:32px;
    padding-top:18px;
    }
    #top_menu ul li:last-child a:hover{
    background-color:#cf4e56;
    }
    #top_menu ul li:last-child a:after{content:""; clear:both;}
    /* Top Menu CSS end */
    </style>
    <!--[if lt IE 9]>
    <script src="dist/html5shiv.js"></script>
    <![endif]-->
    <!--[if lt IE 9]>
    <script src="dist/iepp.min.js"></script>
    <![endif]-->
    <body>
    <div id="wrapper">
    <!-- top start -->
    <!-- language selection start -->
    <div id="top_logo">
    <ul>
    <li><a href="index.php"><img src="Images/Logo_KFCSED.jpg" title="HOME" alt="to main page"></a></li>
    <!-- <li><img src="Images/main_slogan.jpg" id="slogan"></li> -->
    </ul>
    </div>
    <div id="top_menu">
    <ul>
    <li><a href="about_us.php">About Us</a></li>
    <li><a href="get_involved.php">Get Involved</a></li>
    <li><a href="project.php">Projects</a></li>
    <li><a href="Partners.php">Partners</a></li>
    <li><a href="contact_us.php">Contact Us</a></li>
    <li><a href="#">DONATE</a></li>
    </ul>
    </div>
    <!-- top_navi menu end -->
    <!-- top end -->
    </div>
    </body>
    </html>
    c0048768_538702c9588bb.jpg
    div id "top menu" affect other divs and change all background color - top_logo, and other main contents.
    (I put example preview of IE8)
    Could you explain me why this li a, a:visited affects others? Have no idea.......and it is killing me!
    Thanks in advance.
×
×
  • Create New...