Nested divs in IE and Firefox.. rendering issues...

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • drdeadpan
    #1

    Nested divs in IE and Firefox.. rendering issues...

    Hi,

    Being a newbie, pardon me if this question has been answered. I was
    finding it difficult to search for my problem on Usenet 'cos I was
    having a tough time describing it.. Here gow.


    I have a <div> within which I have another <div> ( i.e nested divs). I
    find that Firefox gives me the result I want but IE 6 does'nt. IE six
    chops out the title. WHat suggestions/recommnedations can you guys
    offer. Book recommnedations would help too. Please also explain any
    solutions you have..Thanks

    Sample page is at http://home.cachecow.org:7777

    Take a look thru both IE6 and Firefox and I think you'll understand
    what I'm trying to say.

    Here is my css:


    html,body {
    background-color:#999966;
    height:100%;
    margin-bottom:5%;
    }


    #content {

    background-color:#CCCC99;
    line-height: 16px;
    font-family: Verdana;
    font-size: 12px;
    text-align: left;
    padding-top:0px;
    padding-right:1.5%;
    padding-left:1.5%;
    padding-bottom:0px;
    height:100%;
    margin-left: 5%;
    margin-right:5%;
    margin-top:5%;
    border-style:dashed;
    border-width:2px;
    border-color:#996633;
    }

    h1#title {
    font-family: Impact;
    color:tan;
    font-size: 68px;
    }


    Thanks

    DrD

    Tags: None
    • Jan Roland Eriksson
      #2
      Re: Nested divs in IE and Firefox.. rendering issues...

      On 19 Jan 2005 20:22:02 -0800, "drdeadpan" <vkat01-nospam@yahoo.co m>
      wrote:
      [...][color=blue]
      >I have a <div> within which I have another <div> ( i.e nested divs).[/color]

      Not from what I can see in your source.
      [color=blue]
      >I find that Firefox gives me the result I want but IE 6 does'nt.[/color]
      [...][color=blue]
      >Sample page is at http://home.cachecow.org:7777[/color]

      First of all You need to include a doctype declaration at the top of
      your source to convince both FF and IE to go into standard rendering
      mode (don't ask...)

      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
      <html> ... etc ...

      --
      Rex


        Comment

        • drdeadpan
          #3
          Re: Nested divs in IE and Firefox.. rendering issues...


          Your absolutely right. My mistake.
          I had the title and content in divs but then removed it and added the
          styles to the H1 tag. Sorry.
          In any case, I have added the DOCTYPE but the issue persists. Ok, now
          that you've corrected me, what am I doing wrong or what should I be
          doing correctly to make sure they render the same. My heading still
          gets chopped off in IE 6.0

          DrD

            Comment

            • Jan Roland Eriksson
              #4
              Re: Nested divs in IE and Firefox.. rendering issues...

              On 20 Jan 2005 06:48:11 -0800, "drdeadpan" <vkat01-nospam@yahoo.co m>
              wrote:
              [...][color=blue]
              >In any case, I have added the DOCTYPE but the issue persists.[/color]
              [...][color=blue]
              >My heading still gets chopped off in IE 6.0[/color]

              Here you go...

              Markup...

              <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
              "http://www.w3.org/TR/html4/strict.dtd"[color=blue]
              ><html
              ><head
              ><meta content="text/html;[/color]
              charset=ISO-8859-1" http-equiv="content-type"[color=blue]
              ><title>Home@Ca checow.org</title
              ><link rel="stylesheet " type="text/css"[/color]
              href="./main.css"[color=blue]
              ></head
              ><body
              ><div id="content"
              ><h1 id="title">Cach ecow.Org...</h1
              ></div
              ></body
              ></html
              >[/color]

              Style sheet...

              html, body {
              background-color: #999966; color: #000000;
              margin-bottom:5%; font-size: 100%; height: 100%;
              }

              #content {
              background-color: #CCCC99; color: #000000;
              font-family: Verdana, sans-serif; text-align: left;
              margin: 5%; border: dashed 2px #996633; padding: 0 1.5%;
              height: 100%;
              }

              h1#title {
              background-color: #CCCC99; color: #000000;
              font-family: Impact, sans-serif; font-size: 500%;
              margin: 0; border: solid 1px #000000; padding: 0;
              line-height: 100%;
              }

              Now; promise to go read up on both markup and style sheet specs.
              (and please do not specify Verdana as your font for a www page)

              Side note: I added a border to your h1 element only to let you have an
              indication of where it sits physically. You may want to use that "trick"
              whenever you get into trouble to find the edges of your elements.

              Replace; 'border: solid 1px #000000;' with 'border: none;' when you are
              done with your "inspection ".

              --
              Rex


                Comment

                • Spartanicus
                  #5
                  Re: Nested divs in IE and Firefox.. rendering issues...

                  "drdeadpan" <vkat01-nospam@yahoo.co m> wrote:
                  [color=blue]
                  >Thanks for your help.[/color]

                  Who are you responding to? Quote a snippet (the bare minimum) of what
                  you are replying to and put your reply beneath it.

                  --
                  Spartanicus

                    Comment

                    Previous template Next
                    Working...