Forgot to take care of different browsers

+1 Yousef Al-Hadhrami · November 9, 2014
Hello all
after the nice tutorials I watched from thenewboston and other sources I feel very profissional  I started my first project developing a hosbital website for a local hosbital, going to use HTML, CSS, JavaScript, Jquery, PHP and mySQL to develop the website, but I faced a problem now in CSS in the beginning of it
I was testing the first page in firefox,opera and chrome, and did not take care of Internet explorer because I hate it.
and when I tried to view it at internet explorer today, it was a total mess
the question now, is what should I do?do a different CSS for IE? or use common CSS methods? I can start from the 0 again no problem because I just designed the navigation bar only

here is the HTML and CSS code
please comment of how is my start, is it good or I am making common mistakes? and what should I do for IE
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/style_screen.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="mainPaegHeader" class="pageHeader"><img src="img/logo.gif" width="318" height="106" alt=""/>
<a href="">???????</a>
</div>
<div class="nav">
  <ul>
    <li><a href="index.htm">Home</a></li>
    <li><a href="index.htm">Second Link</a>
        <ul>
            <li><a href="index.htm">sub Link</a></li>
            <li><a href="index.htm">sub Link</a></li>
            <li><a href="index.htm">sub Link</a></li>
            <li><a href="index.htm">sub Link</a></li>
            <li><a href="index.htm">sub Link</a></li>
            <li><a href="index.htm">sub Link</a></li>
        </ul>
    </li>
    <li><a href="index.htm">Third Link</a>
            <ul>
            <li><a href="index.htm">sub Link</a></li>
            <li><a href="index.htm">sub Link</a></li>
            <li><a href="index.htm">sub Link</a></li>
            <li><a href="index.htm">sub Link</a></li>
            <li><a href="index.htm">sub Link</a></li>
            <li><a href="index.htm">sub Link</a></li>
        </ul>
    </li>
    <li><a href="index.htm">More links</a></li>
    <li><a href="index.htm">More links</a></li>
    <li><a href="index.htm">More links</a></li>
    <li><a href="index.htm">More links</a></li>
  </ul>
</div>
<div class="homeContent" id="pageContent">Content for  class "homeContent" id "pageContent" Goes Here</div>
<p> </p>
</body>
</html>



@charset "utf-8";
/* CSS Document */
/*/////////////////////////////////////////////////////////
// filename: style_screen.css
// author: Yousef Al-Hadhrami
// last modify: Nov 2014
// notes: This css is fully developed by Yousef Al-Hadhrami
//        Any one is free to use, distribute or modify this
//        file with out the need of copy rights
//          mobile number : +967 770484872
/////////////////////////////////////////////////////////*/


body {
    margin: 0px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    width: 100%;
}
.pageHeader {
    position: relative;
    display: block;
    width: 960px;
    padding: 0px;
    /* [disabled]margin-top: auto;
*/
    margin-right: auto;
    margin-left: auto;
    /* [disabled]margin-bottom: auto;
*/
    float: none;
}
.pageHeader a {
    text-decoration: none;
    font-size: 1.4em;
    position: absolute;
    float: right;
    bottom: 50px;
}
.homeContent {
    position:relative;
    background: none repeat scroll 0% 0% #FFF;
    padding: 0px;
    margin: 0px auto;
    width: 960px;
    background-color: green;
    z-index: -1;
}

/* Navigation */
/* the nav div blue background color and cyan border top */
.nav {
    width: 100%;
    height: 50px;
    max-height:50px;
    border-top: 4px solid rgb(0,160,170);
    background: rgb(30,87,153); /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */

    background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(30,87,153,1)), color-stop(99%, rgba(0,110,201,1)), color-stop(100%, rgba(125,185,232,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(30,87,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0 ); /* IE6-8 */
}


.nav ul {
    width: 960px;
    margin: 0px auto;
    border: 0px;
    padding: 0px;
}



.nav ul li {
    margin: 0px;
    border-left: 1px solid gray;
    padding: 0px;
    float: left;
    position: relative;
    list-style: none;
    font-family: amatic-sc;
}


.nav ul li:first-child {
    border-left: 0px;
}


/* buttons/ links */
.nav ul li a {
    height: 20px;
    border: 0px;
    margin: 0px;
    padding: 15px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    display: block;
    text-shadow: 0 1px 1px rgba(251,251,251, .3);
}



.nav ul li a:hover {
    background: rgb(20,155,153); /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: -moz-linear-gradient(top, rgba(20,155,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(20,155,153,1)), color-stop(99%, rgba(0,110,201,1)), color-stop(100%, rgba(125,185,232,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(20,155,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(20,155,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(20,155,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(20,155,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#149b99', endColorstr='#7db9e8', GradientType=0 ); /* IE6-8 */
    color: #fff;
}
.nav ul li a:active {
    color: #D1D1D1;
}



/* Nav 2nd level*/
.nav ul li ul {
    visibility: hidden;
    margin: 0px;
    padding: 0px;
    width: 100px;
    position: absolute;
    top: 50px;
    left: 2px;
    -webkit-transition: all 1s ease-in-out 0s;
    -o-transition: all 1s ease-in-out 0s;
    transition: all 1s ease-in-out 0s;
    max-height: 0px;
}
.nav ul li ul li{
    float: none;
    margin: 0px;
    padding: 0px;
    font-size: 0.8em;
    border: 0px;
    font-color: black;
    -webkit-transition: all 1s ease-in-out 0s;
    -o-transition: all 1s ease-in-out 0s;
    transition: all 1s ease-in-out 0s;
    max-height: 0px;
    border-width: 0px;
}

.nav ul li ul li a {
    height: 12px;
    border-left: 1px solid rgb(0,160,170);
    border-right: 1px solid rgb(0,160,170);
    border-collapse:collapse;
    background-color: rgba(255,255,255,0.80);
    margin: 0px;
    padding: 5px;
    color: #000000;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0,0,0, .3);
    z-index: 100;
}
.nav ul li ul li:last-child a{
    border-bottom: 1px solid rgb(0,160,170);}

.nav ul li:hover ul {
    max-height:999px;
    visibility:visible;
}

.nav ul li:hover ul li{
    max-height:999px;}




Post a Reply

Replies

Oldest  Newest  Rating
+1 Ron Butcher · November 10, 2014
There are a few ways to handle this.  I would start with using a Modernizr script.
http://modernizr.com/

This is a Java file that you include in your website similar to the CSS files.  You declare it as a Javascript file in the head section.  For older browsers (not just IE) that do not support HTML5, it will take the new HTML5 styles and will display them properly on the screen.

I am willing to bet that this will take care of 99% of your problem.

There are some elements that IE will still have a difficult time with.  For those, you can include a stylesheet specifically for IE.  The problem is that you need to figure out what version of IE is having the issue.  If it is IE 9 and lower, that is cake.  Just throw a conditional statement in the "head" section of your HTML file like this:


<!--[if lte IE 9]>
<script src="/_source/js/modernizr-1.5.js"></script>
<![endif]-->


This will only include the stylesheet if the user is running IE version less than or equal to 9.

If your problem shows up in IE10 or IE11, that is another problem.  Internet Explorer got rid of the conditional statements starting with IE10.  You will have to identify the browser with PHP or Javascript.



I can't tell you how many times I have said, "everything was going fine, until I opened Internet Explorer."
0 Yousef Al-Hadhrami · November 10, 2014
Thank you for the help, it seems because of IE we are all forced to use JavaScript even for the small problems, they are big problem when rendreing the page on IE, I have made a page navigator using JQuery and it's as same as Modernizr and it works fine with IE6-11


I can't tell you how many times I have said, "everything was going fine, until I opened Internet Explorer."


 :P lol, it is a big pain in the world of Internet, hehehe
  • 1

HTML / CSS / Web Design

107,066 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators