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 4 of 4
  1. #1
    Member
    Join Date
    Jul 2007
    Posts
    92
    Member #
    15534
    Hello everydoy,

    So this is Part 1 of a 2-part series called "I HATE I.E!!!" Really, I don't understand why Microsoft can't manage to make it's browser at least somewhat as good as Firefox... but whatever.

    My first problem deals with <div>. For a layout, I'm mainly using CSS div positioning. Most of it works in IE as it does in Firefox... but there's one particular parat that is a little off. I'll copy the code before and maybe you guys can point out how to make it look the same in IE as it is in FF.
    Code:
     #navbar {
     
     position: relative;
     width: 750px;
     height: 73px;
     z-index: 2;
     background-image: url(images/navbar.png);
     background-repeat: no-repeat;
     
     }
     
    #navbar1 {
     
     position: absolute;
     width: 124px;
     height: 100%;
     left: 0px;
     top: 0px;
     z-index: 3;
     text-align: center;
     
     }
     
    #navbar2 {
     
     position: absolute;
     width: 96px;
     height: 100%;
     left: 124px;
     top: 0px;
     z-index: 3;
     text-align: center;
     
     }
     
    #navbar3 {
     
     position: absolute;
     width: 111px;
     height: 100%;
     left: 220px;
     top: 4px;
     z-index: 3;
     text-align: center;
     
     }
     
    #navbar4 {
     
     position: absolute;
     width: 92px;
     height: 100%;
     left: 331px;
     top: -8px;
     z-index: 3;
     text-align: center;
     overflow: hidden;
     
     }
     
    #navbar5 {
     
     position: absolute;
     width: 83px;
     height: 100%;
     left: 423px;
     top: -10px;
     z-index: 3;
     text-align: center;
     overflow: hidden;
     
     }
     
    #navbar6 {
     
     position: absolute;
     width: 111px;
     height: 100%;
     left: 506px;
     top: 0px;
     z-index: 3;
     text-align: center;
     
     }
     
     #navbar7 {
     
     position: absolute;
     width: 133px;
     height: 100%;
     left: 617px;
     top: 30px;
     z-index: 3;
     text-align: center;
     overflow: hidden;
    HTML Code:
     <div id="navbar"> <div id="navbar1"><p class="link"><br/><a href="whoweare.html" class="nav" target="_self">who we are</a></p></div>
    <div id="navbar2"><p class="link"><br/><a href="whatwedo.html" class="nav" target="_self">what we do</a></p></div>
    <div id="navbar3"><p class="link"><a href="howyoucanhelp.html" class="nav" target="_self">how you<br/>can help</a></p></div>
    <div id="navbar4"><p class="link"><br/><a href="news.html" class="nav" target="_self">news</a></p></div>
    <div id="navbar5"><p class="link"><br/><a href="events.html" class="nav" target="_self">events</a></p></div>
    <div id="navbar6"><p class="link"><br/><a href="clubfinder.html" class="nav" target="_self">clubfinder</a></p></div>
    <div id="navbar7"><a href="kids.html" target="_self"><img src="images/kidslink.png" border="0" /></a></div> </div>

    As you can see, I have a container block called "navbar" and then multiple links layout out within that container using CSS div. You'll notice that each of the divs for the links has a different "top" positioning. This is because the links are on a navigation bar that isn't straight across (the image kind of jumps up and down).

    In Firefox, all the links are exactly where they should be. In IE they seem to be higher and not centered properly.

    I'm aware that doing it this way is a roundabout way and there most definitely is a better way to do it. In fact, the navigation bar is probably going to change to a certain way that won't even require this. But, I'd like to learn why its doing this regardless.

    Thanks for the help!

  2.  

  3. #2
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    Wow, okay...

    1. That markup is just no good. Everything about it. You can achieve the same styling using a more standardized, semantic approach like so:

    Code:
    <ul id="navbar">
      <li class="whoweare"><a href="whoweare.html">who we are</a></li>
      <li class="whatwedo"><a href="whatwedo.html">what we do</a></li>
    </ul>
    2. You can't have a 100% height element that's absolutely positioned. It doesn't have a parent once you position it, so it gets confused and the behavior is most likely erratic across browsers.

    3. Why do you have widths on text links without background images?

    4. Without an example page, there's no way to actually help your problem. But I'd say it's 90% due to the <br />s you have inside your divs (block level elements!). They're unnecessary and can only cause bugs.
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site

  4. #3
    Member
    Join Date
    Jul 2007
    Posts
    92
    Member #
    15534
    Quote Originally Posted by Brak
    Wow, okay...

    1. That markup is just no good. Everything about it. You can achieve the same styling using a more standardized, semantic approach like so:

    Code:
    <ul id="navbar">
      <li class="whoweare"><a href="whoweare.html">who we are</a></li>
      <li class="whatwedo"><a href="whatwedo.html">what we do</a></li>
    </ul>
    2. You can't have a 100% height element that's absolutely positioned. It doesn't have a parent once you position it, so it gets confused and the behavior is most likely erratic across browsers.

    3. Why do you have widths on text links without background images?

    4. Without an example page, there's no way to actually help your problem. But I'd say it's 90% due to the <br />s you have inside your divs (block level elements!). They're unnecessary and can only cause bugs.
    Right, I realize it's probably hard to understand what I'm doing without an example... so, here ya go... http://rodandconecreative.com/bgcsnindex.htm

    Maybe that will help you understand why I did it such a backwards way.

    Will you further explain the CSS thing... I don't understand why you can't have an absolute positioned DIV tag that calls out height as 100%. Isn't that just telling it to take on it's container's height...? I'm not a CSS whiz, so if you could explain I'd appreciate it. Also, how do the <br />'s affect a "block level element"

    I have widths on the boxes containing the DIV tags because I had to space them out according to where the backdrop was in the image behind...

    I know, I know it's backwards. But like I said, this isn't final. And at this point, It's just a lesson on CSS

    Thanks a bunch man!

  5. #4
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    Will you further explain the CSS thing... I don't understand why you can't have an absolute positioned DIV tag that calls out height as 100%
    I find it hard to explain but just picture that you ahve an absoutely positioned DIV and you tell its height to be 100% of the browser. It just doesn't make sense.

    Really, I don't understand why Microsoft can't manage to make it's browser at least somewhat as good as Firefox... but whatever.
    It's not because Microsoft can't manage it - they've got the best programmers in the world who each earn over $300 000 a year, it's becasue that IE was out first and they couldn't be bothered to change it becasue it's 'theirs'. Also, they think that becasue they're Microsoft, they can do anything, (which is of course mostly true).
    But Microsoft is going downhill, and nobody can deny that, with Office 07, Vista and the Firefox browser (which is HEAPS better) being so baaaaaaad.
    lets all face it, Microsoft started off good, and revoloutionised computers and Operating systems, but they've stuffed themselves now and dug themselves into a hole that I don't think they'll get out of.















    ill stop now


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