5 Replies - 543 Views - Last Post: 24 June 2013 - 01:59 PM

#1 judemalar  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 24-June 13

css tags are not working in IE

Posted 24 June 2013 - 04:32 AM

Hello Everyone,

I am new to the website creation . I tried to include horizontal navigation bar in my website .
The code is working in Chrome and firefox , but the same code is displaying the navigation bar in the bottom .
Try to move the bar in the top through CSS conditional tag it is not working .
Can someone help me .

Thanks,
kavitha jude

Here is the CSS code for navigation bar

<!--[if gt EQ 8]>

.navbar	{
        width: 960px;
	height: 50px;
        top:-400em;
        padding-left=30px;padding-right=35px;
        margin-top:-6em;margin-left:0px;margin-right:5px; 
	position:absolute; /* Ensures that the menu doesn’t affect other elements */
/*	border-right: 1px solid #54879d; */
	}

.navbar li 	{
             height: auto;
             width: 105.99px;  /*105px Each menu item is 150px wide */
	     text-align: center;  /* All text is placed in the center of the box */
       	     list-style: none;  /* Removes the default styling (bullets) for the list */
	     font: normal bold 12px/1.2em Arial, Verdana, Helvetica;  
	      top:-100px;
	     padding-left:0px; 
              margin: -14px -5px -20px 0px;
 /*            margin-left:0;margin-right:0px;  */                      			

 /*            float: left;  This lines up the menu items horizontally */
               display:inline;

	     background-color: #003366;
              }
<![endif]-->

.navbar	{
        width: 960px;
	height: 50px;
padding-top=30px;
        padding-left=30px;padding-right=35px;
        margin-top:6em;margin-left:0px;margin-right:6px; 
	position:absolute; /* Ensures that the menu doesn’t affect other elements */
/*	border-right: 1px solid #54879d; */
	}

.navbar li 	{
             height: auto;
             width: 105.99px;  /*105px Each menu item is 150px wide */
	     text-align: center;  /* All text is placed in the center of the box */
       	     list-style: none;  /* Removes the default styling (bullets) for the list */
	     font: normal bold 12px/1.2em Arial, Verdana, Helvetica;  
	      
	     padding-left:0px; 
             margin: -6px -3px -15px 0px;
 /*          margin-left:0;margin-right:0px;  */                      			     

        float: left;  /* This lines up the menu items horizontally */

	     background-color: #003366;
                        }

.navbar a	{							
		padding: 18px 0;  /* Adds a padding on the top and bottom so the text 

appears centered vertically */
		border-left: 1px solid #54879d;  /*  Creates a border in a slightly lighter 

shade of blue than the background.  Combined with the right border, this creates a nice 

effect. */
/*		border-right: 1px solid #1f5065; Creates a border in a slightly darker shade 

of blue than the background.  Combined with the left border, this creates a nice effect. */
		text-decoration: none;  /* Removes the default hyperlink styling. */
		color: white; /* Text color is white */
		display: block;
		}

.navbar li:hover, a:hover {background-color: #54879d;} 

.navbar li ul 	{
		display: none;  /* Hides the drop-down menu */
		height: auto;									
		margin: 0; /* Aligns drop-down box underneath the menu item */
		padding: 0; /* Aligns drop-down box underneath the menu item */			
		}				

.navbar li:hover ul 	{
                        display: block; /* Displays the drop-down box when the menu item is 

hovered over */
                        }

This post has been edited by Dormilich: 24 June 2013 - 04:34 AM
Reason for edit:: please use [code] [/code] tags when posting code


Is This A Good Question/Topic? 0
  • +

Replies To: css tags are not working in IE

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,226
  • Joined: 08-June 10

Re: css tags are not working in IE

Posted 24 June 2013 - 04:37 AM

hm, what is EQ 8 supposed to be for a condition? usually you use "IE" (e.g. gt IE 8)
Was This Post Helpful? 0
  • +
  • -

#3 judemalar  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 24-June 13

Re: css tags are not working in IE

Posted 24 June 2013 - 05:16 AM

I have corrected the condition but still the horizontal navbar is displayed at the bottom of the page in IE .
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3460
  • View blog
  • Posts: 11,727
  • Joined: 12-December 12

Re: css tags are not working in IE

Posted 24 June 2013 - 07:57 AM

Your css is very hard to read. I recommend you indent it consistently. I generally prefer single rules per line, but I do group some together (as long as they don't extend too far to the right).

div {
    position: relative;
    margin: 0; padding: 0;
    color: blue;
    /* rules and their values are separated by a colon */
}

The following is incorrect and occurs in more than one place.

padding-left=30px;padding-right=35px;

Your navbar is positioned absolutely. (Why are you using absolute-positioning? It is a common mistake to use AP where it is not necessary.) Unless the navbar is contained within another positioned element then top, left, etc., will be measured with respect to the browser-window.

BTW Why top:-400em; ? This just looks like a hack to me.

This post has been edited by andrewsw: 24 June 2013 - 08:00 AM

Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3460
  • View blog
  • Posts: 11,727
  • Joined: 12-December 12

Re: css tags are not working in IE

Posted 24 June 2013 - 08:06 AM

BTWW I would only add IE conditionals if I had explored all other options. In particular, using GTE IE 8 is unusual; normally, if conditionals are used, they tend to be for LTE IE 7 (or 8).
Was This Post Helpful? 0
  • +
  • -

#6 judemalar  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 24-June 13

Re: css tags are not working in IE

Posted 24 June 2013 - 01:59 PM

Thank you everyone . I am completely new to this area . I am learning and writing the code . Sometime not getting
time to read completely .
I have no clear understanding about the position properties.


Currently i have adjusted the css file and i am using one for IE and
the other one for other browsers. But always IE is giving issue .
Currently i stuck with one more issue . I have created a div container , now the div container is displayed
at the bottom of the screen in IE . Any tips are appreciated.

Thanks,
kavitha jude

This post has been edited by Dormilich: 24 June 2013 - 04:12 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1