Mozilla vs. Internet Explorer

Discussion in 'HTML' started by hgwoss@gmx.de, Mar 10, 2006.

  1. Guest

    Hi everyone,

    in order to position elements on a website I have mostly used CSS. The
    page displays fine in Mozilla. In Internet Explorer it is all screwed
    up. Maybe someone can give me a few hints, on what exactly is causing
    this. You can visit the page at http://romm.vs138162.vserver.de/open

    Thanks in advance
    Robert.
    , Mar 10, 2006
    #1
    1. Advertising

  2. Guest

    Let me give you a few examples on what is going wrong on my page:

    The <div class="horizontal_ruler_438px margin-bottom_15px"> element is
    supposed to draw a line with a height of 1px. In mozilla this is
    working fine. In IE the height is much greater.

    Also the gaps between <div class="container_hauptmenu clear_left"> and
    <div class="container_hauptinhalt">, as well as between <div
    class="container_hauptinhalt_links"> and <div
    class="container_aktuelle_themen"> are not displayed properly in IE. In
    Mozilla you can see what it is supposed to look like.
    , Mar 10, 2006
    #2
    1. Advertising

  3. Guest

    I have figured out most of the problems, by adjusting values, although
    I do not know, what caused the problems.
    But I still don't have the <div class="horizontal_ruler_438px
    margin-bottom_15px"> element at the right height of 1px.
    , Mar 10, 2006
    #3
  4. Guest

    I have figured out most of the problems, by adjusting values, although
    I do not know, what caused the problems.
    But I still don't have the

    <div class="horizontal_ruler_420px margin-bottom_15px">

    element at the right height of 1px.

    The css file can be found at
    http://romm.vs138162.vserver.de/open/style.css
    , Mar 10, 2006
    #4
  5. Guest

    I assume IE is not letting me set the height of a <div> element to any
    value less then line-height. Does anyone know wether or not this is tha
    case?

    Thanks
    Robert
    , Mar 10, 2006
    #5
  6. wrote:

    > I have figured out most of the problems, by adjusting values, although
    > I do not know, what caused the problems.
    > But I still don't have the <div class="horizontal_ruler_438px
    > margin-bottom_15px"> element at the right height of 1px.
    >

    Firstly, you have some markup errors, most not too serious but some
    serious enough to cause problems, your doctype of XTML is not forgiving.

    Once note though, your choice of class naming defeats the beauty of CSS.

    example "horizontal_ruler_438px" what happens later down the road you
    decide "200px" works better? Your class will either have a deceptive
    name of "horizontal_ruler_438px" or your have to change ALL INSTANCES of
    "horizontal_ruler_438px" on your website to "horizontal_ruler_200px".

    Better class names that describe purpose and not the style, for example

    Intro, Boilerplate, PictureBox, Detailed_Desc, Handy_Shortcuts

    so if you define

    ..Boilerplate {
    font-size: .75em;
    color: white;
    background-color: black;
    border: 1px solid red;
    }

    then later you change the color scheme of your site

    ..Boilerplate {
    font-size: .85em;
    color: black;
    background-color: silver;
    border: 0;
    width: 50%;
    float: right;
    }

    you can do so but if it was named "white_on_black_dot75em" the call name
    would be confusing, right?


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Mar 10, 2006
    #6
  7. kchayka Guest

    wrote:
    >
    > The page displays fine in Mozilla.


    Hmmm... I suspect you haven't tested this with text zoomed up a couple
    notches...

    > Maybe someone can give me a few hints


    Forget about trying to make a pixel-perfect layout. It won't happen and
    you'll only set yourself up for failure.

    > http://romm.vs138162.vserver.de/open


    As for that 1px high divider div, why don't you just use a top or bottom
    border instead?

    --
    Reply email address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
    kchayka, Mar 10, 2006
    #7
  8. Guest

    First of all thanks to Jonathan and kchayka for replying.

    The updated source can be found at
    http://romm.vs138162.vserver.de/open/index1.php
    The updated stylesheet can be found at
    http://romm.vs138162.vserver.de/open/style1.css

    I have got rid of the markup errors.

    > Once note though, your choice of class naming defeats the beauty of CSS.


    Most of my classnames were already describing the purpose and not the
    style. As for horizontal_ruler_438px. You were right about that. That
    class is not even necessary.

    > As for that 1px high divider div, why don't you just use a top or bottom
    > border instead?


    Thanks for that one kchayka. It solved the problem and is actually a
    much better approach.

    > Hmmm... I suspect you haven't tested this with text zoomed up a couple
    > notches...


    I see what you mean. But what can I do about it? I guess that problem
    appears with every "pixel-perfect layout", as you called it. I could
    easyly do without a "pixel-perfect layout", but I do want the
    horizontal ruler on the left hand side be at the bottom of the box on
    the right hand side. I don't know how to accomplish that in another way
    then setting the hight of both the right hand and the left hand
    elements, which are <div class="container_hauptinhalt_links"> and <div
    class="container_aktuelle_themen">.

    Also I used "float:left" a few times in order to align <div> elements
    horizontally. And far as I know, when using "float:left", I have to set
    the widh of that element. Which, again will screw up the design when
    zooming up.

    Am I right?

    Robert.
    , Mar 11, 2006
    #8
  9. wrote:

    <snip>

    > Also I used "float:left" a few times in order to align <div> elements
    > horizontally. And far as I know, when using "float:left", I have to set
    > the widh of that element. Which, again will screw up the design when
    > zooming up.
    >
    > Am I right?


    No, not if you use a unit measurement that is based on the size of the
    text such as 'em'. Then as the text grows or shrinks so does the container.

    If you use 'float' you will also want to research the 'clear' property.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Mar 11, 2006
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. cmay
    Replies:
    0
    Views:
    1,113
  2. Replies:
    4
    Views:
    5,377
    Jonathan N. Little
    Dec 5, 2005
  3. Paul
    Replies:
    3
    Views:
    382
  4. Ed Hauptman
    Replies:
    7
    Views:
    992
    Ed Hauptman
    Aug 7, 2009
  5. dhplank

    Mozilla faster than Internet Explorer

    dhplank, Jun 2, 2005, in forum: Javascript
    Replies:
    9
    Views:
    160
    Thomas 'PointedEars' Lahn
    Jun 10, 2005
Loading...

Share This Page