www.webdeveloper.com
Results 1 to 5 of 5

Thread: Please help make this layout look the same in FF & IE

  1. #1
    Join Date
    Dec 2007
    Posts
    8

    Please help make this layout look the same in FF & IE

    Working Link: http://www.forsythe.on.ca/working/index.htm

    I cant seem to get the alignment to of the navigation links (Home, Services, About Us) to look the same in IE and FF. IE seems to be displaying it correctly however FF overlaps it into the search bar. I want the navigation links to be stacked on the border just above the banner picture but in the current state it will require different padding numbers for IE and FF.

    I'm sure there is something small that I am missing and I hope someone else can find it quick.

    The I found the code for the menus on another site (it was free) so I still need to change some naming conventions, colours, etc. but would like to get it working first.
    Last edited by mrchaos; 01-03-2008 at 03:51 PM.

  2. #2
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    I'm not seeing any difference between IE6 and Fx2.

  3. #3
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Looks the same to me, too.
    mrchaos - you might clean out the browsers' caches and take another look.

    KDLA

  4. #4
    Join Date
    Jun 2007
    Posts
    183
    not seeing any difference either.

  5. #5
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    There may not be much difference at the moment, but mrchaos wanted the navbar at the bottom of the header, and that is where differences occur.

    Firstly, IE is showing the header slightly too high, due to a gap below the logo image - setting this to block display solves that :
    Code:
    #upperlogo img {display: block;}
    The easiest way to position the navbar is to position it absolute referenced to its container. First the wrapper needs a relative position to provide the reference, and the nav can be positioned absolutely in the bottom right corner :
    Code:
    #upperrightwrapper {
       float: left;
       width: 616px; /*636*/
       height: 110px;
       padding: 10px 20px 0px 0px;
       color: #996600 !important;
       text-align: right;
       position: relative;
    }
    
    #dolphinnav {
       position: absolute;
       right: 0;
       bottom: 0;
       height: 33px;
       width: 400px;
       text-transform: uppercase;
       font-weight: bold;
       background: #ffffff url(../content/images/dolphin_bg.gif) repeat-x bottom left;
       padding: 0 0 0 20px;
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles