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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer woes

    I am working on a school project using CSS to create a website. I personally only use Firefox, so during development I only tested what I was working on in that browser.

    Tonight, I decided to test it on Safari and IE. Safari great, IE...not so much.

    I'm using a CSS based tab navigation menu, and it seems to have a gap underneath it in IE.

    Here it is in Firefox, as it should be:


    Here it is in IE:


    IE also seems to interpret my h3 setting differently and displays "Featured Work" larger than it is supposed to be.

    If you need any code, let me know and I will paste it. I was thinking this might be a common error and you guys would know right off how to fix it.

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Which version of IE?

    Version numbers are important.

    effpeetee

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    In addition to version numbers, the code is needed. A live site would be preferable, but offline code with the relevant images will also work.

    The differences in font size may be because you are either relying on the browser default (set the size explicitly) or you’re using some relative unit that relies on the browser’s default font size. For example, these might be the font size keywords, which may be interpreted differently from browser to browser, percentages, ems, exes, etc.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by effpeetee View Post
    Which version of IE?

    Version numbers are important.

    effpeetee
    It's IE7. However, I also tested in IE6 this morning and the same thing happens.

    Here is a live version of the index page (sorry its on geocities, I dont have webspace yet). You should be able to view my source code, and my CSS by adding test.css to the URL.



    Would appreciate any advice you guys could give me, even if its unrelated to my problem. This is my first time trying to code with CSS, so it's undoubtedly messy.

    Thanks.

  • #5
    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
    Get a different free host for now. One that doesn't have ads. www.freehostia.com is good

    Then once you do that change this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    to this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    See if that helps any. I'm guessing its probably going to since you say IE6 and IE7 are showing the same results. Without a full doctype its usually only IE6 showing you the results you don't want. What is happening is with the previous doctype the page is being displayed in quirks mode in both IE6 and IE7. Also anything about the doctype in IE6 will cause the page to go into quirks mode.

    http://www.quirksmode.org/css/quirksmode.html
    Last edited by _Aerospace_Eng_; 06-03-2007 at 06:58 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Changing the doctype didn't do anything from what I can tell. Any other ideas?

    I'm reading through the quirksmode site now, thanks for that link.

  • #7
    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
    Don't use things like this
    Code:
    		<p><br><br><br></p>
    Remove that. I'm pretty sure thats causing your problem. To create space use top padding on the header.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Don't use things like this
    Code:
    		<p><br><br><br></p>
    Remove that. I'm pretty sure thats causing your problem. To create space use top padding on the header.
    That fixed it! But now my header is so small the banner is being hidden.

    So I should use top padding on the header, can you show me the CSS code to do that properly? The only reason I resorted to using the linebreaks was I couldn't get the padding right.

    Thanks alot for all of your help so far.

  • #9
    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
    Quote Originally Posted by Myrix View Post
    That fixed it! But now my header is so small the banner is being hidden.

    So I should use top padding on the header, can you show me the CSS code to do that properly? The only reason I resorted to using the linebreaks was I couldn't get the padding right.

    Thanks alot for all of your help so far.
    Unfortunately no since this is your assignment. www.htmldog.com should have the info you need.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #10
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I got it!

    padding:40px 10px 0px 50px;
    Along with removing those line breaks seems to have fixed it.

    Thanks very much.


  •  

    Posting Permissions

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