Webmaster Key - Discussion Forums
Home Help Search Calendar Login RegisterContact Us


Welcome, Guest. Please login or register.
Did you miss your activation email?
February 08, 2012, 06:46:45 PM

Login with username, password and session length
Welceome to Forums!

Important information for guests and new members:

In order to understand the full benefits of becoming an active member of this forum, please review the following information on guest and new member restrictions. These forum changes have been prompted by an overwhelming and unreasonable amount of bot postings and incoherent guest spam messages. We wish to prevent these events from happening in the future and make our community a more comfortable place for all of our members.

For guests:

Guests are not allowed to open new topics, polls, or posts attachments.
If you wish to open up new discussions on this forum, we encourage you to register.

For new members:

New members with less than five posts are not allowed to modify additional profile information such as avatars, contact information, biographies, and signatures. However, new members are encouraged to post their own topics or reply to topics initiated by other members. Become active on the forums and 5 posts should be an easy task!

We are a diverse community with members from all over the world. We encourage new ideas and interesting conversation. Do not be afraid to post webmaster/computer-related questions or problems, as our active members are always willing to help when they are able. Interested? Join us.

+ Webmaster Key Forums
|-+ Webmaster Corner
| |-+ Site Design and Web Authoring
| | |-+ CSS position issue - IE and FireFox for div element?		 0 Members and 1 Guest are viewing this topic. « previous next »
Pages: [1] Go Down Stumble Upon! Digg It! del.icio.us! Add to Technorati! ReddIt!  Send this topic Print
Author Topic: CSS position issue - IE and FireFox for div element?  (Read 1891 times)
websj06
Jr. Member
*
Posts: 31
« on: July 25, 2007, 09:06:28 PM »
Hello everyone:

  I used CSS to control the positioning for a <div id="browser_detect"> element.

 It appear fine in Firefox(FF), but in IE 7 the element got positioned further away from navigation bar. I did some research found out the IE calculate box model differently. How Can I fix the problem, so the element position will be identical in both browsers? Please give me some suggestion.

 sample page

 html code:
 
Code:
<html>
<body>
<div id="nav_bar">
  <ul>
  <li><a href="biography.html">Biography</a></li>
  <!--
  submenu for projects
  -->
  <li>
   <a href="#">Projects</a>
     <ul>
      <li><a href="#">coin74</a><li>
      <li><a href="#">coin61</a><li>
      <li><a href="#">coin63</a><li>
      <li><a href="#">psme</a><li>
     </ul>
   </li>
  <li><a href="#">Hobby</a></li>
  <li><a href="#">Friends</a></li>
 </ul>
</div><!-- end of nav_bar section -->
 
 <!--
browser detection
 try to put this javascript into a separate folder.
 link to javascript file to save space
 -->
 <div id="browser_detect">
 <script type="text/javascript">
 <!-- hide from non-JS browsers
 var b_name = navigator.appName;
 var b_version = navigator.appVersion;

 var version = parseFloat(b_version);

 if(b_name == "Microsoft Internet Explorer" && version >= 4)
 {
   document.write("You are using " + b_name + "Version " + version);
 }
 else if(b_name == "Netscape" && version == 5)
 {
   document.write("You are using " + b_name + "Version " + version);
 }
 else if(b_name == "Netscape" && version >= 4)
 {
    document.write("You are using " + b_name + "Version " + version);
 }

//stop hiding -->
 </script>
 </div>

</body>

</html>

 


  CSS code:  I didn't post all the css code to save some space here.
 
body
 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  behavior: url(csshover.htc);
 }
 
 #nav_bar
 {
   margin: 20px;
 }
 
 #browser_detect
 {
  width: 100px; 
  position: relative; top: 40px; left: 60px;
  border-top: 0px;
  background: orange;
 }
 
Report to moderator   Logged
SensoVision
Administrator
Veteran
*****
Posts: 5 857


I'm proud user of Debian GNU/Linux OS


WWW
« Reply #1 on: July 25, 2007, 09:15:07 PM »
hi websj06! I'm a bit low on time now so didn't check your CSS code yet. The solution I wish propose is detecting browser type by some PHP code and show CSS which is designed for this browser specifically, this way you'll be sure that everything would be compatible with particular browser. It's used by many webmasters from what I know and I know for sure that it's used by our forum software too.
Does such solution is possible for you?

A bit later I'll also check your code to see if I can come up with CSS only solution.
Report to moderator   Logged
Denis
Pages: [1] Go Up Stumble Upon! Digg It! del.icio.us! Add to Technorati! ReddIt!  Send this topic Print 
+ Webmaster Key Forums
|-+ Webmaster Corner
| |-+ Site Design and Web Authoring
| | |-+ CSS position issue - IE and FireFox for div element?
Jump to:  
« previous next »

Our Partners
RelmaxTOP Ranking System Web Hosting RelmaxTOP Ranking System
Staff Sites
12Noon[12Noon Gallery] Andy[Urgentclick]
Tamuril[Tamuril's Digital Art Exhibit] Sensovision
Powered by MySQL Powered by PHP We are hosted by Relmax Inc. |Our Privacy Policy | Sitemap
Powered by SMF 1.1.9 | SMF © 2006-2009, Simple Machines LLC
Forum design by Tamuril © 2005. 		Valid XHTML 1.0! Valid CSS!