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 7 of 7
  1. #1
    Junior Member
    Join Date
    Sep 2007
    Posts
    24
    Member #
    15800
    I am having a problem getting some CSS stuff to look right in IE. Looks perfectly fine in Firefox. I was hoping someone could help. I am trying to acheive a menu bar type of look that goes across the entire screen. Although I set the height=18 of one of my boxes and the height=1 for the others, IE still makes them way too large. I tried a bunch of common solitions that I found out on the web for this problem, but none of them seem to work.
    Thanks for the help

    Here's my css
    Code:
    .navbar{
            height:18;
            width:100%;
            background-color:AE4F0D;
            margin: 0px, 0px, 0px, 0px;
            padding: 0px, 0px, 0px, 0px;
            padding-left:0;
            padding-bottom:0;
            border-left:0;
            text-align:center;
            list-style-type:none;
    }
     
    .navbar ul li{
            display:inline;
    }
     
    .navbar ul li a{
            text-decoration:none;
            padding-left:20;
            padding-right:20;
    }
     
    .navbar li.over,
    .navbar li:hover
    {
      background:url(lighttab.gif);
    }
     
    .navlink{
      text-decoration:none;
      font-size:13;
      font-weight:bold;
      color:F3D8C6;
    }
     
    .line{
            width:100%;
            height:1px;
            line-height:0;
            margin: 0, 0, 0, 0;
            padding: 0, 0, 0, 0;
            background-color:F3D8C6;
    }
     
    .line2{
            width:100%;
            height:1px;
            line-height:0;
            background-color:AE4F0D;
    }
    Here's the HTML

    Code:
    <div class="navbar">
    <ul>
            <li id="a"><a class="navlink" href="a.php">Home</a></li>
            <li id="b"><a class="navlink" href="b.php">Browse</a></li>
            <li id="c"><a class="navlink" href="c.php">Search</a></li>
            <li id="d"><a class="navlink" href="d.php">List</a></li>
            <li id="e"><a class="navlink" href="e.php">About</a></li>
    </ul>
    </div>
    <div class="line"></div>
    <div class="line2"></div>

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    It's always nice to have a link, as it takes a ton of time to
    duplicate the page manually on our PCs. Let us see the
    site in real-life online.


  4. #3
    Junior Member
    Join Date
    Sep 2007
    Posts
    24
    Member #
    15800
    Sorry, but I don't have a real life web server set up yet.
    I'm running everything local.

    My main problem is that the navbar class is not showing up as size=18 in IE, but it is OK in firefox. It's super enlarged in ie.
    Same problem with the line and line2 items. Instead of showing up as 1 pixel lines they show up as thicker lines, but are fine in firefox

  5. #4
    Senior Member Ferro's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    386
    Member #
    14204
    Liked
    5 times
    Quote Originally Posted by carlg
    Sorry, but I don't have a real life web server set up yet.
    I'm running everything local.

    My main problem is that the navbar class is not showing up as size=18 in IE, but it is OK in firefox. It's super enlarged in ie.
    Same problem with the line and line2 items. Instead of showing up as 1 pixel lines they show up as thicker lines, but are fine in firefox
    Try reducing the font size to 18 in the Nav bar and to 0 or 1 in the 1 pixel lines - see if that helps. I seem to remember IE expands divs vertically to match the font size contained within them.

  6. #5
    Junior Member
    Join Date
    Sep 2007
    Posts
    24
    Member #
    15800
    Worked in the smaller lines, but not in the larger one.
    Thanks for the help

    I'm 1/2 there!!

  7. #6
    Senior Member -chris-'s Avatar
    Join Date
    Apr 2006
    Location
    SK
    Posts
    1,205
    Member #
    13102
    Quote Originally Posted by Ferro
    Try reducing the font size to 18 in the Nav bar and to 0 or 1 in the 1 pixel lines - see if that helps. I seem to remember IE expands divs vertically to match the font size contained within them.
    The font for the nav bar would have to be smaller than 18. Also, you could try specifying what unit of measurement you want. Instead of just 18, try 18px, 18em, etc.

    And, for the places you have
    Code:
    padding/margin: 0 0 0 0;, or 0px, 0px, 0px, 0px;
    , you can just use
    Code:
    padding/margin: 0;
    Portfolio | Blog | Twitter

    Was my post, or someone elses, helpful? Click the thumbs up to let everyone know!

  8. #7
    Senior Member Ferro's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    386
    Member #
    14204
    Liked
    5 times
    Quote Originally Posted by -chris-
    The font for the nav bar would have to be smaller than 18. Also, you could try specifying what unit of measurement you want. Instead of just 18, try 18px, 18em, etc.
    Good point chris - apologies - I wrote the post in a hurry - yes a unit of measurement would be required.


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 06:48 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com