Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Junior Member
    Join Date
    Nov 2014
    Posts
    2
    Member #
    40919

    My Nav bar does not align correctly on firefox

    Okay I have a problem I designed a website and the nav bar which I am using images is aligned perfectly all the way across in IE and Chrome but it is misaligned in Firefox. I have attached three images one for firefox where the nav bar is misaligned and two for IE and Chrome where it is aligned correctly and looks perfect. Please have a look and offer me solutions.

    Here is the HTML code for the Nav Bar:

    <nav>
    <div id="links1">
    <div id="divlinks1">
    <div id="homelink">
    <a href="index 2.html"><img src="productimages/home.png"/></a></li>
    </div>
    <div id="productlink2">
    <a href="index 2.html"><img src="productimages/products.png"/>
    </div>
    <div id="servicelink3">
    <a href="index 2.html" ><img src="productimages/services.png"/>
    </div>
    <div id="aboutlink4">
    <a href="index 2.html"><img src="productimages/aboutus.png"/>
    </div>
    <div id="contactlink5">
    <a href="index 2.html"><img src="productimages/contact.jpg"/>
    </div>
    </div>
    </div>
    </nav>

    Here is the CSS code for the Nav bar:


    #homelink {
    position:relative;
    left:200px;
    bottom:60px;

    }

    #productlink2 {
    position:relative;
    left:380px;
    bottom:114px;



    }

    #servicelink3 {
    position:relative;
    left:560px;
    bottom:168px;
    }
    #aboutlink4 {
    position:relative;
    left:740px;
    bottom:222px;
    }
    #contactlink5 {
    position:relative;
    left:920px;
    bottom:276px;
    }
    #divlinks1 {
    position:relative;
    left:40px;
    bottom:590px;

    Please help the nav bar looks okay and aligned on IE and Chrome but not in Firefox in Firefox the nav bar looks misaligned. Any solutions?
    Attached Images Attached Images

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,733
    Member #
    5580
    Liked
    718 times
    I think the problem is related to that 3-pointed graphic thing on the banner.
    Note the position of that is different as well.

    Post a link to your real website so I can actually see the whole HTML source.


  4. #3
    Junior Member
    Join Date
    Nov 2014
    Posts
    2
    Member #
    40919
    If you want to see the whole html source then here you go. I don't have a link to the website as it not live yet and is on the developmental stage.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8"/>
    <title>Eclipse</title>
    <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
    <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/style3.css" type="text/css" media="screen">

    <style>
    body {
    background-color:#70a9f1;
    }
    </style>

    </head>

    <body>

    <div id="maindiv">

    <div id="divheader1">
    <img src="productimages/image14.png"/>
    <div id="divline1"></div>
    </div>

    <section>
    <article>

    <div id="box">
    <div id="productimage1">
    <img src="productimages/productimage1.jpg"/>
    </div>
    <div id="productimage1text">
    <img src="productimages/productimage1text.jpg"/>
    </div>
    <div id="productimage2">
    <img src="productimages/productimage9.jpg"/>
    </div>
    <div id="productimage2text">
    <img src="productimages/productimage2text.jpg"/>
    </div>
    <div id="productimage3">
    <img src="productimages/productimage15.jpg"/>
    </div>
    <div id="productimage3text">
    <img src="productimages/productimage3text.jpg"/>
    </div>
    <div id="productimage4">
    <img src="productimages/productimage4.jpg"/>
    </div>
    <div id="productimage4text">
    <img src="productimages/productimage4text.jpg"/>
    </div>
    <div id="socialmediaicons">
    <img src="productimages/socialmediaicons.jpg"/>
    </div>
    <div id="socialmediaicons2">
    <img src="productimages/socialmediaicons.jpg"/>
    </div>
    <div id="socialmediaicons3">
    <img src="productimages/socialmediaicons.jpg"/>
    </div>
    <div id="socialmediaicons4">
    <img src="productimages/socialmediaicons.jpg"/>
    </div>


    </div>






    </article>
    </section>




    <nav>
    <div id="links1">
    <div id="divlinks1">
    <div id="homelink">
    <a href="index 2.html"><img src="productimages/home.png"/></a></li>
    </div>
    <div id="productlink2">
    <a href="index 2.html"><img src="productimages/products.png"/>
    </div>
    <div id="servicelink3">
    <a href="index 2.html" ><img src="productimages/services.png"/>
    </div>
    <div id="aboutlink4">
    <a href="index 2.html"><img src="productimages/aboutus.png"/>
    </div>
    <div id="contactlink5">
    <a href="index 2.html"><img src="productimages/contact.jpg"/>
    </div>
    </div>
    </div>
    </nav>
    </div>

    </body>
    </html>


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:13 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com