#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Posts
    5
    Rep Power
    0

    Small problem with nav bar in Safari


    Hi everyone,

    I am new to the forum. I am new to CSS and just trying to learn as much as i can as i go. I am currently working on a website and having a small problem with my drop down menus. It works great in Firefox, but in Safari when i hover over the drop down, it shifts to the left by a few pixels. I haven't added the IE workaround yet because i wanted to get this sorted before doing that so it won't work in IE yet.

    I would post a link but can't because i'm too new.

    I'm new to this, so be kind on my coding

    The code:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    	<title>Center test - "text-align: center" set for body, "text-align: left" for containing div</title>
    	<style type="text/css" media="screen">
    body		
    		{
    			margin: 0;
    			padding: 0;
    			text-align: center;
    		}
    		
    div#container		
    		{
    	
    	width: 100%;
    	
    	background-color: #EAFBFF;
    	width:760px;
    	height:220px;
    	text-align: left;
    	margin-top: 0px;
    	margin-right: auto;
    	margin-bottom: 0px;
    	margin-left: auto;
    	border-top-width: thin;
    	border-right-width: thin;
    	border-bottom-width: thin;
    	border-left-width: thin;
    	border-top-style: none;
    	border-right-style: solid;
    	border-bottom-style: none;
    	border-left-style: solid;
    	border-top-color: #0066FF;
    	border-right-color: #0066FF;
    	border-bottom-color: #0066FF;
    	border-left-color: #0066FF;
    		}
    div#container2		
    		{
    	width: 760px;
    	background-color: #ddd;
    	width:760px;
    	text-align: left;
    	margin-top: 0px;
    	margin-right: auto;
    	margin-bottom: 0px;
    	margin-left: auto;
    	border-top-width: thin;
    	border-right-width: thin;
    	border-bottom-width: thin;
    	border-left-width: thin;
    	border-top-style: none;
    	border-right-style: solid;
    	border-bottom-style: solid;
    	border-left-style: solid;
    	border-top-color: #0033FF;
    	border-right-color: #0033FF;
    	border-bottom-color: #0033FF;
    	border-left-color: #0033FF;
    	padding-top: 15px;
    	padding-bottom: 15px;
    		}
    div#container3		
    		{
    	width: 760px;
    	background-color: #666666;
    	width:760px;
    	text-align: left;
    	margin-top: 0px;
    	margin-right: auto;
    	margin-bottom: 0px;
    	margin-left: auto;
    	border-top-width: thin;
    	border-right-width: thin;
    	border-bottom-width: thin;
    	border-left-width: thin;
    	border-top-style: none;
    	border-right-style: solid;
    	border-bottom-style: none;
    	border-left-style: solid;
    	border-top-color: #0033FF;
    	border-right-color: #0033FF;
    	border-bottom-color: #0033FF;
    	border-left-color: #0033FF;
    	padding-top: 13px;
    	padding-bottom: 10px;	
    		}
    #container {
    }
        #Layer1 {
    	position:absolute;
    	width:760px;
    	height:115px;
    	z-index:1;
    	left: 405px;
    	top: 102px;
    	background-color: #0000FF;
    	overflow: scroll;
    }
    #container2 {
    }
        #Layer2 {
    	position:relative;
    	width:760px;
    	height:600px;
    	z-index:1;
    	left: 405px;
    	top: 102px;
    	background-color: #0000FF;
    	overflow: scroll;
    }
    #container4 {
    	font-family: Arial, Helvetica, sans-serif;
    	width: 500px;
    	font-size: 14px;
    	font-style: normal;
    	color: #DDDDDD;
    	text-decoration: none;
    	text-align: left;
    	margin-right: 110px;
    	margin-left: 125px;
    	background-color: #999999;
    	border: thin solid #999999;
    	padding-left: 15px;
    }
    
    
        #Layer3 {
    	position:relative;
    	width:200px;
    	height:600px;
    	z-index:1;
    	left: 405px;
    	top: 102px;
    	background-color: #0000FF;
    	overflow: scroll;
    }
        .style1 {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 10px;
    }
        .style2 {
    	font-family: Arial, Helvetica, sans-serif; 
    	color: #FFFFFF;
    }
    
    
        #navbar {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #FFFFFF;
    	text-decoration: none;
    	background-color: #666666;
    	margin: 0px;
    	padding: 0px;
    	height: 20px;
    }
        #navbar ul {
    	padding: 0;
      	margin: 0;
      	list-style: none;
    
    }
        #navbar li {
    	float: left;
    	text-align: center;
    	background-color: #666666;
      	position: relative;
      	width: 130px;
    }
    	#navbar li ul{
    	position: absolute;
    	display: none;
    	text-align: center;
    	line-height: 25px;
    	padding-top: 7px;
    }
    	#navbar li > ul {
    	top: auto;
    	left: auto;
    }
    	#navbar li:hover ul { 
    	display:block;
    	text-align: center;
    	text-indent: 0;
    }
    	#content {
    	clear: left;
    }
    
        
        #mainphoto {
    	padding: 0px;
    	float: right;
    	border: 1px solid #0066FF;
    	margin-top: 20px;
    	margin-right: 30px;
    	margin-bottom: 30px;
    	margin-left: 30px;
    }
        
        #container6 {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #000000;
    	text-decoration: none;
    	padding-right: 30px;
    	padding-left: 30px;
    }
        .style3 {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: bold;
    	color: #000000;
    }
        .style4 {color: #000000}
    .style5 {font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; }
        a {
    	font-size: 12px;
    	color: #FFFFFF;
    }
    a:link {
    	text-decoration: none;
    }
    a:visited {
    	text-decoration: none;
    	color: #FFFFFF;
    }
    a:hover {
    	text-decoration: none;
    	color: #CC6600;
    }
    a:active {
    	text-decoration: none;
    	color: #CCCCCC;
    }
        </style> 
    </head>
    <body>
    <div id="container">
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="(URL address blocked: See forum rules)=7,0,19,0" width="760" height="220">
        <param name="movie" value="(URL address blocked: See forum rules)">
        <param name="quality" value="high">
        <embed src="(URL address blocked: See forum rules)" quality="high" pluginspage="(URL address blocked: See forum rules)" type="application/x-shockwave-flash" width="760" height="220"></embed>
      </object>
    </div>
    <div class="style2" id="container3">
    <div id="navbar">
    <ul>
      <li><a href="(URL address blocked: See forum rules)">Home</a></li>
      
       <li>About the Office
        <ul>
          <li><a href="">Meet Dr. Toolson
            </a></li>
          <li><a href="">Meet the Team</a></li>
          <li><a href="">Office Tour</a></li>
    	  <li><a href="">Location</a></li>
        </ul>
      </li>
      
      <li>About Orthodontics
        <ul>
          <li><a href="">Adults</a></li>
          <li><a href="">Children</a></li>
    		</ul>
    	</li>
    
      <li>Life with Braces</li>
    
      <li>Contact Us
        <ul>
    	  <li><a href="">Contact Information</a></li>
          <li><a href="">Request Appointment</a></li>
    	  <li><a href="">Location</a></li>
        </ul>
      </li>
    </ul>
      </div>
    </div>
    <div id="container2">
      <div id="container4">
        <p class="style3">Contact Information Form</p>
    	
        <form action="(URL address blocked: See forum rules)" method="post" class="style4">
          <span class="style1">
          <label>Name
            <br>
            <input type="text" name="Name">
          </label>
          </span>
        
          <span class="style1">
    	  <br>
    	  <br>
          <label>Email
            <br>
            <input type="text" name="Email Address">
          </label>
          </span>
        
          <span class="style1">
    	  <br>
    	  <br>
          <label>Phone Number
            <br>
            <input type="text" name="Phone Number">
          </label>
          </span>
       
            <span class="style5">
    		<br>
    		<br>
            <label><span class="style4">Description (if neccessary)</span> </label>
          </span>
            <span class="style4">
    		
            </span>
    	
          <label><br>
            <textarea name="Description" rows="5"></textarea>
          </label>
      
        
          <label>
    	  <br><br>
          <input name="Submit" type="submit" class="style1" value="Submit">
          </label>
          <label>
          <input name="Reset" type="reset" class="style1" id="Reset" value="Reset">
          </label>
          <input name="recipient" type="hidden" id="recipient" value="jeff@dinorestoration.com">
    	  
    	  <input name="redirect" type="hidden" id="redirect" value="(URL address blocked: See forum rules)">  
        
    	</form>
      </div>
    </div>
      
    <div class="style1">
    Copyright Toolson Orthodontics 2009 </div>
    <p>&nbsp;</p>
    
    </body>
    </html>
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Posts
    5
    Rep Power
    0
    I have narrowed it down a little to my "#navbar li" and inside the "text-align: center". When aligned to the left it no longer shifts. I need it center aligned though.
  4. #3
  5. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    text-align:center; only effects the contents of the element. Have you tried using margin:0 auto; on the element in question? If this is not the case, you may need to post a link. Remove the http:// part and use this format

    www .yoursite. com/testpage.html

    ps. Welcome to DevShed
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Posts
    5
    Rep Power
    0
    Skipt- I tried that with no luck. Thanks very much though!

    Here is the link:

    www .drtoolson. com/contact
  8. #5
  9. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    [edit]
    Nevermind, it causes other issues with your nav

    Give me more time..

    [/edit]
    Last edited by Skipt; May 29th, 2009 at 08:25 PM.
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  10. #6
  11. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    Ok I got it. use this code. basically I had to use left:-999em; and remove some of your other code. BTW, I'm 17. Sorry it took so long to figure out..

    Code:
    	<style type="text/css" media="screen">
    body		
    		{
    			margin: 0;
    			padding: 0;
    			overflow-x:hidden;
    			text-align: center;
    		}
    		
    div#container		
    		{
    	
    	width: 100%;
    	
    	background-color: #EAFBFF;
    	width:760px;
    	height:220px;
    	text-align: left;
    	margin-top: 0px;
    	margin-right: auto;
    	margin-bottom: 0px;
    	margin-left: auto;
    	border-top-width: thin;
    	border-right-width: thin;
    	border-bottom-width: thin;
    	border-left-width: thin;
    	border-top-style: none;
    	border-right-style: solid;
    	border-bottom-style: none;
    	border-left-style: solid;
    	border-top-color: #0066FF;
    	border-right-color: #0066FF;
    	border-bottom-color: #0066FF;
    	border-left-color: #0066FF;
    		}
    div#container2		
    		{
    	width: 760px;
    	background-color: #ddd;
    	width:760px;
    	text-align: left;
    	margin-top: 0px;
    	margin-right: auto;
    	margin-bottom: 0px;
    	margin-left: auto;
    	border-top-width: thin;
    	border-right-width: thin;
    	border-bottom-width: thin;
    	border-left-width: thin;
    	border-top-style: none;
    	border-right-style: solid;
    	border-bottom-style: solid;
    	border-left-style: solid;
    	border-top-color: #0033FF;
    	border-right-color: #0033FF;
    	border-bottom-color: #0033FF;
    	border-left-color: #0033FF;
    	padding-top: 15px;
    	padding-bottom: 15px;
    		}
    div#container3		
    		{
    	width: 760px;
    	background-color: #666666;
    	width:760px;
    	text-align: left;
    	margin-top: 0px;
    	margin-right: auto;
    	margin-bottom: 0px;
    	margin-left: auto;
    	border-top-width: thin;
    	border-right-width: thin;
    	border-bottom-width: thin;
    	border-left-width: thin;
    	border-top-style: none;
    	border-right-style: solid;
    	border-bottom-style: none;
    	border-left-style: solid;
    	border-top-color: #0033FF;
    	border-right-color: #0033FF;
    	border-bottom-color: #0033FF;
    	border-left-color: #0033FF;
    	padding-top: 13px;
    	padding-bottom: 10px;	
    		}
    #container {
    }
        #Layer1 {
    	position:absolute;
    	width:760px;
    	height:115px;
    	z-index:1;
    	left: 405px;
    	top: 102px;
    	background-color: #0000FF;
    	overflow: scroll;
    }
    #container2 {
    }
        #Layer2 {
    	position:relative;
    	width:760px;
    	height:600px;
    	z-index:1;
    	left: 405px;
    	top: 102px;
    	background-color: #0000FF;
    	overflow: scroll;
    }
    #container4 {
    	font-family: Arial, Helvetica, sans-serif;
    	width: 500px;
    	font-size: 14px;
    	font-style: normal;
    	color: #DDDDDD;
    	text-decoration: none;
    	text-align: left;
    	margin-right: 110px;
    	margin-left: 125px;
    	background-color: #999999;
    	border: thin solid #999999;
    	padding-left: 15px;
    }
    
    
        #Layer3 {
    	position:relative;
    	width:200px;
    	height:600px;
    	z-index:1;
    	left: 405px;
    	top: 102px;
    	background-color: #0000FF;
    	overflow: scroll;
    }
        .style1 {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 10px;
    }
        .style2 {
    	font-family: Arial, Helvetica, sans-serif; 
    	color: #FFFFFF;
    }
    
    
        #navbar {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #FFFFFF;
    	text-decoration: none;
    	background-color: #666666;
    	margin: 0px;
    	padding: 0px;
    	height: 20px;
    }
        #navbar ul {
    	padding: 0;
      	margin: 0;
      	list-style: none;
    
    }
        #navbar li {
    	float: left;
    	text-align: center;
    	z-index:9;
    	background-color: #666666;
      	position:relative;
      	width: 130px;
    }
    	#navbar li ul{
    	position: absolute;
    	left:-999em;
    	line-height: 25px;
    	z-index:10;
    	padding-top: 7px;
    }
    	
    	#navbar li:hover ul { 
    	left:0;
    
    }
    	#content {
    	clear: left;
    }
        #container6 {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #000000;
    	text-decoration: none;
    	padding-right: 30px;
    	padding-left: 30px;
    }
        .style3 {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: bold;
    	color: #000000;
    }
        .style4 {color: #000000}
    	.style5 {font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; }
        
    a {
    	font-size: 12px;
    	display:block;
    	color: #FFFFFF;
    }
    a:link {
    	text-decoration: none;
    }
    a:visited {
    	text-decoration: none;
    	color: #FFFFFF;
    }
    a:hover {
    	text-decoration: none;
    	color: #CC6600;
    }
    a:active {
    	text-decoration: none;
    	color: #CCCCCC;
    }
        </style>
    It works perfectly now
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Posts
    5
    Rep Power
    0
    Thank you Thank you Thank you Thank you!!

    Awesome man.. sure saved me a headache! I'm 22 so just a few years ahead of you in age but obviously not skill . I've been working in photoshop/illustrator/etc. for 8 years now doing the graphical side of things but just got into the backend stuff.

    Thanks again man
  14. #8
  15. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    I've only been doing CSS for 10 months. Do you have any recommended tutorials for learning Photoshop?
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Posts
    5
    Rep Power
    0
    Originally Posted by Skipt
    I've only been doing CSS for 10 months. Do you have any recommended tutorials for learning Photoshop?
    I did most of my learning through the trial and error and playing around, but i always liked the tutorials at www. teamphotoshop .com

    Comments on this post

    • Skipt agrees : Thanks

IMN logo majestic logo threadwatch logo seochat tools logo