Solved

position logo OVER nav sidebar

Posted on 2014-01-06
4
327 Views
Last Modified: 2014-01-06
How do I tweak the position of the logo (upper left) so that it sits in the same place on different browsers?  Looks great in Safari.  Not so good in other browsers.  

http://nsitedesigns.com/nsitedesigns/gei/index.html

How it is supposed to look:
http://screencast.com/t/YTfbYoINFWc

.sidebar1 {
	float: left;
	width: 180px;
	background-color: none;
	padding-bottom: 10px;
	margin-top:100px;
	
}


.img_gei_logo { /*topleft logo over nav bar */
	left: 110px; 
	top:10px;
	position:absolute; 
}
	


  <div class="sidebar1"><img src="img/logo_gei.png" alt="GEI Technology Solutions" width="263" height="241" class="img_gei_logo" />
 
  <div class="sidebar_nav">
    <ul class="nav">
      <li><a href="audio.html">Audio</a></li>
      <li><a href="theater.html">Home Theater</a></li>
      <li><a href="automation.html">Home Automation</a></li>
      <li><a href="security.html">Security</a></li>
      <li><a href="wiring.html">Structured Wiring</a></li>
      <li><a href="telecom.html">Telecom/Networking</a></li>
      <li><a href="contact.html">Contact Us</a></li>
      <li><a href="index.html">Home</a></li>
    </ul></div>
    
    <div class="sidebar_logos"><img src="img/logo_control4.png" alt="Control 4 Dealer" width="156" height="155" class="logos_sidebar" /></div>
        <div class="sidebar_logos"><img src="img/logo_cedia.png" alt="Control 4 Dealer" width="155" height="213" class="logos_sidebar" /></div>
            <div class="sidebar_logos"><img src="img/logo_manty.png" alt="Control 4 Dealer" width="160" height="53" class="logos_sidebar" /></div>
    
  </div><!-- end sidebar 1 -->

Open in new window

0
Comment
Question by:nsitedesigns
  • 2
  • 2
4 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39759731
Looks the same to me in all browsers (including Safari)

In .img_gei_logo set top to 0 and left to -50px
0
 

Author Comment

by:nsitedesigns
ID: 39759757
The logo moves to the left. Below are screen shots from my mac using the identified browsers:

Chrome
http://screencast.com/t/AIVv4NBPusE0

Internet Explorer
http://screencast.com/t/AIVv4NBPusE0
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39759779
Add position:relative to .sidebar1

Change the top on the logo to -100px (tweak as necessary)
0
 

Author Closing Comment

by:nsitedesigns
ID: 39759823
Thanks!
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
This article discusses how to create an extensible mechanism for linked drop downs.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

815 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now