[advanced search]
 

Go Back   NamePros.com > Discussion > Web Design & Development > Programming

Programming PHP, Perl, Ruby on Rails, AJAX, HTML, XHTML, CSS, JavaScript, MySQL and any other coding topics.


Closed Thread
 
LinkBack Thread Tools
Old 01-05-2007, 07:33 PM   #1 (permalink)
NamePros Member
 
Breakpoint's Avatar
 
Join Date: Oct 2005
Posts: 111
139.00 NP$ (Donate)

Breakpoint is an unknown quantity at this point


Left Menu Not Working in IE (Im a noob(

I am just getting into designing websites and I have a problem with understanding how something works in FF but not IE. I am looking to see if anyone here has a working answer for me to get it to work in IE also.

I am trying to create a left side menu for a template and have a little divider between the buttons. The buttons have a blue background color and the divider is an image 2px high by 1px wide which repeats on x.

The website preview is at http://www.breakpointdesigns.com/nathan
It works in Firefox, but not IE.

Here is the code I am using.

Code:
<html>
 <head>
  <style type="text/css">

   body 
   {
    text-align: center;
    background-image : url("images/background.jpg"); 
    background-repeat : repeat;
    font-size:12px;
   }

   #center 
   { 
    width:671px; 
    margin:0px auto; 
    text-align:left; 
   }

   #width 
   { 
    width:671px; 
   } 

   #header 
   { 
    width:671px; 
    height:96px;
    background-color:#ffffff;
   } 

   #top_gradient 
   {
    width:611px;
    float:left; 
    height:18px;
    background-image:url("images/topgradient.gif"); 
    background-repeat:repeat-x; 
   } 

   #divider
   {
    width:2px;
    float:left; 
    height:18px;
    background-image:url("images/divider.gif");
    background-repeat:repeat-x;
   }

   #login_button
   {
    width:58px;
    float:right; 
    height:18px;
    background-image:url("images/topgradient.gif");
    background-repeat:repeat-x;
    line-height:18px;
    text-align: center;
   }

   #banner
   {
    width:671px;
    float:left; 
    height:56px;
    background-image:url("images/banner.gif");
    background-repeat:repeat-x;
    margin-top:2px;
    margin-bottom:2px;
   } 

   a.white:link {color: #ffffff; text-decoration: none; }
   a.white:visited {color: #ffffff; text-decoration: none; }
   a.white:hover {color: #ffffff; text-decoration: underline; }
   a.white:active {color: #ffffff; } 

   #bottom_gradient 
   {
    width:190px;
    float:left; 
    height:18px;
    background-image:url("images/bottomgradient.gif"); 
    background-repeat:repeat-x;
   } 

   .divider2
   {
    width:2px;
    float:left; 
    height:18px;
    background-image:url("images/divider2.gif");
    background-repeat:repeat-x;
   }

   .bottom_gradient2 
   {
    width:70px;
    float:left; 
    height:18px;
    background-image:url("images/bottomgradient.gif"); 
    background-repeat:repeat-x;
    line-height:18px;
    text-align: center;
   }

   #bottom_gradient3 
   {
    width:191px;
    float:left; 
    height:18px;
    background-image:url("images/bottomgradient.gif"); 
    background-repeat:repeat-x;
   }

   #main
   {
    width:671px;
    float:left; 
    height:100%;
    background-color:#ffffff;
   } 

   #leftmenu
   {
    width:130px;
    float:left; 
    height:100%;
    margin-top:10px;
    margin-bottom:10px;
   }

   #navigation
   {
    width:130px;
    float:left;
    height:18px;
    background-image:url("images/topgradient.gif"); 
    background-repeat:repeat-x;
    margin-bottom:1px;
   }

   .button
   {
    width:130px;
    float:left;
    height:18px;
    background-color:#03237D; 
   }

   .menudivider
   {
    width:130px;
    float:left; 
    height:2px;
    background-image:url("images/menudivider.gif");
    background-repeat:repeat-x;
   }

  </style>
 </head>
 <body>
  <div id="center"> <!-- Centers FireFox --!>
   <div id="width">
    <div id="header">
     <div id="top_gradient">
     </div>
     <div id="divider">
     </div>
     <div id="login_button"><a class="white" href="#">Login</a>
     </div>
     <div id="banner">
     </div>
     <div id="bottom_gradient">
     </div>
     <div class="divider2">
     </div>
     <div class="bottom_gradient2"><a class="white" href="#">Home</a>
     </div>
     <div class="divider2">
     </div>
     <div class="bottom_gradient2"><a class="white" href="#">About</a>
     </div>
     <div class="divider2">
     </div>
     <div class="bottom_gradient2"><a class="white" href="#">Portfolio</a>
     </div>
     <div class="divider2">
     </div>
     <div class="bottom_gradient2"><a class="white" href="#">Contact</a>
     </div>
     <div class="divider2">
     </div>
     <div id="bottom_gradient3">
     </div>
    </div>
    <div id="main">
     <div id="leftmenu">
      <div id="navigation">
      </div>
      <div class="button">
      </div>
      <div class="menudivider">
      </div>
      <div class="button">
      </div>
      <div class="menudivider">
      </div>
      <div class="button">
      </div>
      <div class="menudivider">
      </div>
     </div>
    </div>
   </div>
  </div>
 </body>
</html>
__________________
:hehe:
Breakpoint is offline  
Old 01-06-2007, 02:15 AM   #2 (permalink)
NamePros Regular
 
beaver6813's Avatar
 
Join Date: May 2005
Location: England
Posts: 349
65.50 NP$ (Donate)

beaver6813 is a jewel in the roughbeaver6813 is a jewel in the roughbeaver6813 is a jewel in the rough


Firstly i reccomend strongly that you do not use DIV's for the menu's and that instead you use <ul> and <li>. As its what they are primarily for. I have optimized this as much as i can in the small space of time i have. And removed tons of div's and css tags that were un-needed. Use div's sparingly, you used one for every single thing there, ive even merged some of the css tags together because you had one <div id="width"> that did exactly the same as the one above it.

I've converted both menus to use <ul>'s and <li>'s , the divider you had at the bottom of each button in the menu i changed to use a bottom border, which looks almost identical. I've also changed the layout of the horizontal menu, it now only uses 1 image.

http://www.beaver6813.com/temp/break...esigns.com.htm

This time i've done it for free But remember to keep your code as slim as possible next time.

Code:
<html><head>
 
  <style type="text/css">

   body 
   {
    text-align: center;
    background-image : url("http://breakpointdesigns.com/nathan/images/background.jpg"); 
    background-repeat : repeat;
    font-size:12px;
   }

   #center 
   { 
    width:671px; 
    margin:0px auto; 
    text-align:left; 
   }

   #width 
   { 
    width:671px; 
   } 

   #header 
   { 
    width:671px; 
    height:96px;
    background-color:#ffffff;
   } 

   #top_gradient 
   {
    width:611px;
    float:left; 
    height:18px;
    background-image:url("http://breakpointdesigns.com/nathan/images/topgradient.gif"); 
    background-repeat:repeat-x; 
   } 

   #divider
   {
    width:2px;
    float:left; 
    height:18px;
    background-image:url("http://breakpointdesigns.com/nathan/images/divider.gif");
    background-repeat:repeat-x;
   }

   #login_button
   {
    width:58px;
    float:right; 
    height:18px;
    background-image:url("http://breakpointdesigns.com/nathan/images/topgradient.gif");
    background-repeat:repeat-x;
    line-height:18px;
    text-align: center;
   }

   #banner
   {
    width:671px;
    float:left; 
    height:56px;
    background-image:url("http://breakpointdesigns.com/nathan/images/banner.gif");
    background-repeat:repeat-x;
    margin-top:2px;
    margin-bottom:2px;
   } 

   #main
   {
    width:671px;
    float:left; 
    height:100%;
    background-color:#ffffff;
   } 

   #leftmenu
   {
    width:130px;
    float:left; 
    height:100%;
    margin-top:10px;
    margin-bottom:10px;
   }

   #navigation
   {
    background-image:url("http://breakpointdesigns.com/nathan/images/topgradient.gif"); 
    background-repeat:repeat-x;
	padding-left:5px;
   }

#tab-container{
background-image:url("http://breakpointdesigns.com/nathan/images/bottomgradient.gif");
width:100%;
}

#nav-tabs-horizontal{
margin: 0;
padding: 0;
text-decoration: none;
list-style:none;
}

	#nav-tabs-horizontal li{
	display: inline;
	text-decoration: none;
	margin: 0px;
	padding-left:20px;
 	padding-right:20px;
 	border-left:thin groove #425A9E;
	}
		#nav-tabs-horizontal li a:link {color: #ffffff; text-decoration: none; }
   		#nav-tabs-horizontal li a:visited {color: #ffffff; text-decoration: none; }
   		#nav-tabs-horizontal li a:hover {color: #ffffff; text-decoration: underline; }
   		#nav-tabs-horizontal li a:active {color: #ffffff; } 
		
		
.farright{
border-right:thin groove #425A9E;
}

#nav-tabs{
text-decoration: none;
list-style:none;
margin:0;
padding:0;

}
#nav-tabs li
   {
   text-decoration: none;
    background-color:#03237D;
    line-height:17px;
    padding-left: 19px;
    margin: 0px;
	border-bottom:groove thin #425A9E;
	}
		#nav-tabs li a:link {color: #ffffff; text-decoration: none; }
   		#nav-tabs li a:visited {color: #ffffff; text-decoration: none; }
   		#nav-tabs li a:hover {color: #ffffff; text-decoration: underline; }
   		#nav-tabs li a:active {color: #ffffff; } 
	.white{
	color:#FFFFFF;
	}

   }
  </style></head><body>
  <div id="center"> <!-- Centers FireFox -->
    <div id="header">
     <div id="top_gradient">
     </div>
     <div id="divider">
     </div>
     <div id="login_button"><a class="white" href="#">Login</a>
     </div>
     <div id="banner">
     </div>
	 <div id="tab-container" align="center">
	 <ul id="nav-tabs-horizontal">
	 <li><a href="#">Home</a></li>
	 <li><a href="#">About</a></li>
	 <li><a href="#">Portfolio</a></li>
	 <li class="farright"><a href="#">Contact</a></li>
	</ul>
	</div>
    </div>
    <div id="main">
     <div id="leftmenu">
	<ul id="nav-tabs">
	<li id="navigation" class="white">Navigation</li>
	 <li><a href="#">Home</a></li>
	 <li><a href="#">About</a></li>
	 <li><a href="#">Portfolio</a></li>
	 <li><a href="#">Contact</a></li>
	</ul>
     </div>
    </div>
  </div>
 </body></html>
Rep & $NP Appreciated
__________________
-Beaver6813.com V5 Soon!

Last edited by beaver6813; 01-06-2007 at 02:21 AM.
beaver6813 is offline  
Old 01-09-2007, 12:04 AM   #3 (permalink)
NamePros Member
 
Breakpoint's Avatar
 
Join Date: Oct 2005
Posts: 111
139.00 NP$ (Donate)

Breakpoint is an unknown quantity at this point


thank you, i have save the temp page to my harddrive and will look over you code and gain knowledge, I will have some questions in the future and would like your help if you would be willing (easy questions)

I have donated all the NP$ I have and will try and get some more for the future.
__________________
:hehe:
Breakpoint is offline  
Closed Thread


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On


Site Sponsors
Advertise your business at NamePros

All times are GMT -7. The time now is 02:27 AM.


Powered by: vBulletin® Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.3.0
Template-Modifications by TMS
vBCredits v1.4 Copyright ©2007 - 2008, PixelFX Studios

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85