ok last question i promise

Discussion in 'HTML' started by Paul Watt, Apr 5, 2006.

  1. Paul Watt

    Paul Watt Guest

    Hi,
    Ok, I've solved most of the layout issues I was having with the template I'm
    building and it looks ok in both IE and FF.
    One thing remains though and its driving me nuts. I've got two divs's
    displayed next too each other to make two cols, the left hand div set at a
    width of 250px, the right hand div no width set.
    In FF the right div starts at the edge of the left div and displays
    correctly, however in IE the right div starts at the edge of the page
    (although the text in the div starts at the edge of the left div).

    So If i set margin-left on the maincontent div to 255px in IE it sits where
    I want, but in FF it sits 255px away from the left div which just looks
    wrong.

    The URL is: http://www.paulwatt.info/test/turn/ .
    and http://www.paulwatt.info/test/turn/css/turnlayout.css

    I've been searching google and I cant find a answer. I suspect that FF is
    behaving properly and IE is doing its usual thing.

    many thanks in advance

    Paul
    --
    http://www.paulwatt.info
    Paul Watt, Apr 5, 2006
    #1
    1. Advertising

  2. Paul Watt

    Noozer Guest

    "Paul Watt" <> wrote in message
    news:...
    > Hi,
    > Ok, I've solved most of the layout issues I was having with the template
    > I'm building and it looks ok in both IE and FF.
    > One thing remains though and its driving me nuts. I've got two divs's
    > displayed next too each other to make two cols, the left hand div set at a
    > width of 250px, the right hand div no width set.
    > In FF the right div starts at the edge of the left div and displays
    > correctly, however in IE the right div starts at the edge of the page
    > (although the text in the div starts at the edge of the left div).
    >
    > So If i set margin-left on the maincontent div to 255px in IE it sits
    > where I want, but in FF it sits 255px away from the left div which just
    > looks wrong.


    Because "leftcell" is floated, it's not counted when placing the
    "maincontent" div.

    I think both browsers have it wrong...

    Firefox, because it's not truly floating the "leftcell" div.

    IE, because it takes into account the foated div, but then doesn't apply the
    content based on it.

    Try sqashing your browsers narrower and you'll see IE starts wrapping the
    content at the left margin.
    Noozer, Apr 5, 2006
    #2
    1. Advertising

  3. Paul Watt

    Tony Guest

    Paul Watt wrote:
    > Hi,
    > Ok, I've solved most of the layout issues I was having with the template I'm
    > building and it looks ok in both IE and FF.
    > One thing remains though and its driving me nuts. I've got two divs's
    > displayed next too each other to make two cols, the left hand div set at a
    > width of 250px, the right hand div no width set.
    > In FF the right div starts at the edge of the left div and displays
    > correctly, however in IE the right div starts at the edge of the page
    > (although the text in the div starts at the edge of the left div).
    >
    > So If i set margin-left on the maincontent div to 255px in IE it sits where
    > I want, but in FF it sits 255px away from the left div which just looks
    > wrong.
    >
    > The URL is: http://www.paulwatt.info/test/turn/ .
    > and http://www.paulwatt.info/test/turn/css/turnlayout.css
    >


    ..leftcell{
    margin-top:5px;
    width: 250px;
    position: absolute;
    }

    Look into FLOAT, and lose position:absolute
    Tony, Apr 5, 2006
    #3
  4. Paul Watt

    Paul Watt Guest

    "Tony" <> wrote in message
    news:...
    > Paul Watt wrote:
    >> Hi,
    >> Ok, I've solved most of the layout issues I was having with the template
    >> I'm building and it looks ok in both IE and FF.
    >> One thing remains though and its driving me nuts. I've got two divs's
    >> displayed next too each other to make two cols, the left hand div set at
    >> a width of 250px, the right hand div no width set.
    >> In FF the right div starts at the edge of the left div and displays
    >> correctly, however in IE the right div starts at the edge of the page
    >> (although the text in the div starts at the edge of the left div).
    >>
    >> So If i set margin-left on the maincontent div to 255px in IE it sits
    >> where I want, but in FF it sits 255px away from the left div which just
    >> looks wrong.
    >>
    >> The URL is: http://www.paulwatt.info/test/turn/ .
    >> and http://www.paulwatt.info/test/turn/css/turnlayout.css
    >>

    >
    > .leftcell{
    > margin-top:5px;
    > width: 250px;
    > position: absolute;
    > }
    >
    > Look into FLOAT, and lose position:absolute


    I tried Float but it wasnt working for me, so I had to resort to
    position:absolute.
    Paul Watt, Apr 5, 2006
    #4
  5. Paul Watt

    Tony Guest

    Tony, Apr 5, 2006
    #5
  6. Paul Watt

    Paul Watt Guest

    "Tony" <> wrote in message
    news:...
    > Paul Watt wrote:
    >
    >>>>The URL is: http://www.paulwatt.info/test/turn/ .
    >>>> and http://www.paulwatt.info/test/turn/css/turnlayout.css
    >>>>
    >>>
    >>>.leftcell{
    >>> margin-top:5px;
    >>> width: 250px;
    >>> position: absolute;
    >>>}
    >>>
    >>>Look into FLOAT, and lose position:absolute

    >>
    >>
    >> I tried Float but it wasnt working for me, so I had to resort to
    >> position:absolute.

    >
    > What happened when you used float?


    I had two cells leftcell and maincontent; I had leftcell (float:left;
    width:250px;) and maincontent(no float,margin-left:255px;). IE and FF
    couldnt decide where to start counting the 255px from because leftcell was
    floated.

    Paul
    Paul Watt, Apr 5, 2006
    #6
  7. Paul Watt

    axlq Guest

    In article <>,
    Paul Watt <> wrote:
    >I had two cells leftcell and maincontent; I had leftcell (float:left;
    >width:250px;) and maincontent(no float,margin-left:255px;). IE and FF
    >couldnt decide where to start counting the 255px from because leftcell was
    >floated.


    Try and see what happens if you set a margin-left: -1px; in the
    left-floated box. It fixes up a similar problem in NS4.

    See: http://realworldstyle.com/2col.html

    I have found this to be a very useful example for my own page layouts.

    -A
    axlq, Apr 5, 2006
    #7
  8. Paul Watt

    Tony Guest

    Paul Watt wrote:
    > "Tony" <> wrote in message
    > news:...
    >
    >>>I tried Float but it wasnt working for me, so I had to resort to
    >>>position:absolute.

    >>
    >>What happened when you used float?

    >
    > I had two cells leftcell and maincontent; I had leftcell (float:left;
    > width:250px;) and maincontent(no float,margin-left:255px;). IE and FF
    > couldnt decide where to start counting the 255px from because leftcell was
    > floated.


    What happens if you leave off the margin-left:255px?
    Tony, Apr 5, 2006
    #8
  9. Paul Watt

    Neredbojias Guest

    To further the education of mankind, "Paul Watt"
    <> declaimed:

    > Hi,
    > Ok, I've solved most of the layout issues I was having with the
    > template I'm building and it looks ok in both IE and FF.
    > One thing remains though and its driving me nuts. I've got two divs's
    > displayed next too each other to make two cols, the left hand div set
    > at a width of 250px, the right hand div no width set.
    > In FF the right div starts at the edge of the left div and displays
    > correctly, however in IE the right div starts at the edge of the page
    > (although the text in the div starts at the edge of the left div).
    >
    > So If i set margin-left on the maincontent div to 255px in IE it sits
    > where I want, but in FF it sits 255px away from the left div which
    > just looks wrong.
    >
    > The URL is: http://www.paulwatt.info/test/turn/ .
    > and http://www.paulwatt.info/test/turn/css/turnlayout.css


    Try adding left:0; to your .leftcell css. (Untried.)

    --
    Neredbojias
    Infinity can have limits.
    Neredbojias, Apr 5, 2006
    #9
  10. Paul Watt

    Paul Watt Guest

    "Neredbojias" <http://www.neredbojias.com/fliam.php?cat=alt.html> wrote in
    message news:Xns979C8720F2950httpwwwneredbojiasco@208.49.80.251...
    > To further the education of mankind, "Paul Watt"
    > <> declaimed:
    >
    >> Hi,
    >> Ok, I've solved most of the layout issues I was having with the
    >> template I'm building and it looks ok in both IE and FF.
    >> One thing remains though and its driving me nuts. I've got two divs's
    >> displayed next too each other to make two cols, the left hand div set
    >> at a width of 250px, the right hand div no width set.
    >> In FF the right div starts at the edge of the left div and displays
    >> correctly, however in IE the right div starts at the edge of the page
    >> (although the text in the div starts at the edge of the left div).
    >>
    >> So If i set margin-left on the maincontent div to 255px in IE it sits
    >> where I want, but in FF it sits 255px away from the left div which
    >> just looks wrong.
    >>
    >> The URL is: http://www.paulwatt.info/test/turn/ .
    >> and http://www.paulwatt.info/test/turn/css/turnlayout.css

    >
    > Try adding left:0; to your .leftcell css. (Untried.)
    >


    All sorted now using a mix of absolute positioning and a IE browser hack!
    Thanks any way

    Paul.
    Paul Watt, Apr 5, 2006
    #10
  11. Paul Watt

    dorayme Guest

    In article <>,
    "Paul Watt" <> wrote:

    > > What happened when you used float?

    >
    > I had two cells leftcell and maincontent; I had leftcell (float:left;
    > width:250px;) and maincontent(no float,margin-left:255px;). IE and FF
    > couldnt decide where to start counting the 255px from because leftcell was
    > floated.


    They do decide, it is just that they decide differently to each
    other. And IE deviates from the css standards. If you left float
    a nav block, IE displaces the whole of the next block, not just
    its content (eg, words).

    It is a headache, true, but you need to get to grips with it, it
    is really a fundamental if you are going to design with css.

    If you want to avoid a margin on your content block in which your
    float sits, then you can use a left float on the content block as
    well.

    You need now to watch for IE doubling float margins too, these
    are all horrible bugs. There are no end of tutes on these things.
    http://www.positioniseverything.net/explorer/doubled-margin.html
    for this last.

    You could read
    http://www.digital-web.com/articles/toward_a_more_standards_compli
    ant_ie/

    and

    http://www.positioniseverything.net/floatmodel.html

    --
    dorayme
    dorayme, Apr 5, 2006
    #11
  12. Paul Watt wrote:

    >>> The URL is: http://www.paulwatt.info/test/turn/ .
    >>> and http://www.paulwatt.info/test/turn/css/turnlayout.css

    >
    > All sorted now using a mix of absolute positioning and a IE browser hack!
    > Thanks any way


    How come you want me to scroll two different areas to read your content,
    Paul? Your maincontent box is taller than my browser canvas, so I have
    to scroll both the content div *and* the main viewport to read the
    bottom of the text.

    If you have a tall browser window, shorten up the height to see what I
    mean.

    --
    -bts
    -Warning: I brake for lawn deer
    Beauregard T. Shagnasty, Apr 5, 2006
    #12
  13. Paul Watt

    dorayme Guest

    In article <>,
    Tony <> wrote:

    > Paul Watt wrote:
    > > "Tony" <> wrote in message
    > > news:...
    > >
    > >>>I tried Float but it wasnt working for me, so I had to resort to
    > >>>position:absolute.
    > >>
    > >>What happened when you used float?

    > >
    > > I had two cells leftcell and maincontent; I had leftcell (float:left;
    > > width:250px;) and maincontent(no float,margin-left:255px;). IE and FF
    > > couldnt decide where to start counting the 255px from because leftcell was
    > > floated.

    >
    > What happens if you leave off the margin-left:255px?


    If he were to leave off the margin then in good and compliant
    browsers the main would start at the left edge of the window,
    same as with the float, and only the content would be displaced.
    It is altogether better for the whole content block to be clear
    of the float when you are using the float method to create
    columns.

    Floating for columns is a clever adaptation of the idea of
    allowing text to wrap around pics, but it needs careful attention.

    --
    dorayme
    dorayme, Apr 5, 2006
    #13
  14. Paul Watt

    Guest

    ie measures the box model differently than the others do. ie measures
    from outside border to outside border. other browsers do it differently
    and the box model ends up smaller in the other browsers.

    here is a flash tutorial on how to fix the box model in ie
    http://www.idest.com/csshacks/demos.htm

    box model hack examples. click on "Chapter 3: Hiding Css From Newer
    Browsers"
    http://www.idest.com/csshacks/files.htm

    also see
    http://centricle.com/ref/css/filters/

    this might be a bit intense for a newbie to follow
    http://css-discuss.incutio.com/?page=BoxModelHack

    if you still don't understand it join http://www.cssdiscuss.org/ it's a
    css email list. get a throw away email address just for this list.
    you'll get about a dozen emails from them maybe more. they help newbies
    and professionals.
    , Apr 8, 2006
    #14
    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. NKOBAYE027

    i promise not to...

    NKOBAYE027, Feb 23, 2004, in forum: C++
    Replies:
    14
    Views:
    633
    Dennis \(Icarus\)
    Feb 24, 2004
  2. sangram
    Replies:
    16
    Views:
    1,984
  3. Tomás
    Replies:
    3
    Views:
    306
    Josh Sebastian
    Mar 5, 2006
  4. Tomás
    Replies:
    4
    Views:
    308
    Luke Meyers
    May 27, 2006
  5. Johny
    Replies:
    8
    Views:
    390
Loading...

Share This Page