Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Jul 2005
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Does FF interpreted px differently than Opera/IE

    Currently building a webpage and having some trouble making it look as close to the same as possible in all browsers.
    I've got a header and nav-bar. All header items have the width 120px, the nav-bar has the width of 120px as well. This is so a black outline is pulled from the header through the nav to the footer. It's strange because the only browser not displaying it correctly is FF. Now I've heard the stories about FF being completely W3C-Rule-Compliant and whatnot, but how come two items with the exact same width that are placed underneath each other do not have the same width?
    Is it that FF interprets the px width differently?
    I tried recoding the webpage so it looks right in FF, but then it breaks up in everything else.
    I used CSS to define the width of the items, both at 120px. It just seems weird.

  • #2
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    Did you specify a doctype with a URL?
    If not, browsers go into quirks mode, which would account for many discrepancies.
    Also, specify padding and margin in the CSS or the browsers get to use defaults, which are not the same cross-browser.

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #3
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I can't remember exactly but I know IE includes padding and borders in the width of an element - or is it the other way round? That's possibly the cause.

  • #4
    New Coder
    Join Date
    Jul 2005
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yes, I have specified padding and margin
    and I forgot to specify a doctype because it's momentarily only a testpage. This helped, but at the same time didn't. I could fix the width error, but now there's a border error, I set the doctype to strict which has helped a lot, I was fixing the header's height, so that the bottom border appears under the menu, works perfect in Opera and IE, but with FF the line goes throught the bottom of the menu-boxes.
    I get the same propblems with xhtml transitional and html 4.01 transitional. Yes I know how they differ, was just trying to get the browsers to display properly.

    BTW, does IE ignore the doctype definition, it hasn't changed once, no matter how declared.

  • #5
    New Coder
    Join Date
    Jul 2005
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, I wanted to use strict or maybe even xhtml 1.1, but I noticed that you are not allowed to use
    Code:
    target="_blank"
    on <a>.
    I don't know what I'm supposed to use instead. JavaScript seems a waste.
    If I can't use it I might just switch to transitional.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Yeah you might want to go transitional. You would need some sort of javascript to open a page in a new window. Remember borders and padding count for overall width. Browsers do rending pixels slightly different but can't tell for the most part. Can you show us your code? It sounds like you are floating some items but you haven't cleared them.

  • #7
    New Coder
    Join Date
    Jul 2005
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, I am floating items, but they have been cleared. I made a class called clear
    Code:
    .clear { clear: both; }
    This is how my body is set up:
    Code:
    <div id="header">...</div>
    <div class="clear"></div>
    <div id="wrapper">
     <div id="nav">...</div>
     <div id="content">...</div>
     <div class="clear"></div>
     <div id="footer">...</div>
    </div>
    the header has a fixed position (with items in the header floating left), the wrapper is absolute, nav is floating left, footer no position-attribute specified.

    It doesn't matter that much anymore, I found something you might be able to consider a work-a-round. I applied the IE height setting, which works for Opera aswell and FF will have to suffer, it's just not as beautiful. Then again less than 1% of visitors use FF.

    Another problem I had was aligning the contents because z-index for elements with position: fixed is ignored by IE.
    Is there perhaps a hack? Since my background is going to be white it's not a problem (other colour bgs you could see a white strip at the top). But would be nicer if I could be variable.

    Thanks

    (BTW this topic seems to have gone of course from what I originally intended so if a mod/admin could maybe move it into HTML/CSS?)

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Hmm looks like you are wanting a fluid layout with a header, content, and footer. http://bonrouge.com/hcf-fluid.php If the link works, its been off and on, you should see an example of a layout that I think you are trying to achieve.

  • #9
    New Coder
    Join Date
    Jul 2005
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes and no, you've given me that link before. They didn't work back then but eventually they worked. Anyways since I'm trying to get my header and nav to be fixed the fluent layout didn't work too well, the nav went crazy. The layout the way it is atm is ok, the thing causing the problem is most likely IE.

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Here is a site that seems to have made fixed positioning work in IE. http://www.stunicholls.myby.co.uk/layouts/fixed.html this site might help as well http://tagsoup.com/-dev/null-/css/fixed/#gtev5 This whole site really might be useful to you http://www.stunicholls.myby.co.uk/layouts/

  • #11
    New Coder
    Join Date
    Jul 2005
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks _Aerospace_Eng_


  •  

    Posting Permissions

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