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 8 of 8
  1. #1
    New Coder
    Join Date
    Jul 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS differences between IE7 and FF

    I'm currently making a website and depending on the browser I'm viewing the page in (IE7 or FireFox) the alignment of DIV tags is different. In IE7 it's lining up correctly but it's off in FireFox. Any suggestions?

  • #2
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    I can't tell you anything without seeing you're code or a live example.
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • #3
    New Coder
    Join Date
    Jul 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    In the HTML file the div tag is listed as:

    <div class="pwdiv">
    <h1>Text goes here</h1
    </div>

    In the CSS file the code is:

    .pwdiv {
    position: absolute;
    width: 48em;
    height: 30em;
    top: 4em;
    left: 10em;
    background-color: #8B5A00;
    color: white;
    font-family: Times New Roman;
    font-size: small;
    filter:alpha(opacity=50);
    opacity: 0.5;
    z-index: 1;
    }

  • #4
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    This looks the same on IE 7 and Firefox to me, except for the font-size, but you can adjust that like this:

    Code:
    .pwdiv h1 {
    font-size: small;
    }
    EDIT: perhaps add this too, so the <h1> default margin is eliminated.

    Code:
    * { margin: 0; padding: 0; }
    Last edited by Jutlander; 08-01-2007 at 05:09 PM.
    .
    .

  • #5
    New Coder
    Join Date
    Jul 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    the difference is the location of the div on the screen. If you add another element (like an image or something) and have it lined up in one browser, it's not lined up in the other.

  • #6
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    OK, got any code where this problem occurs? Generally it's not a good idea to position things absolute. Float them instead.
    .
    .

  • #7
    New Coder
    Join Date
    Jul 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I found out what was making it change location in firefox. When i set "font-size: small;" the position of the div element changes as well. Does anybody know what the reason for this is?

  • #8
    New Coder
    Join Date
    Jul 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Alright. I found a work-around. Instead of setting "font-size: small" for the DIV itself, I set <p> to have a smaller font size. I'd still be curious to why this would change the location of a div tag if anybody knows.


  •  

    Posting Permissions

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