www.webdeveloper.com
Results 1 to 6 of 6

Thread: float logopic right in header area: IE - ouch!

  1. #1
    Join Date
    Nov 2004
    Location
    Canada
    Posts
    330

    float logopic right in header area: IE - ouch!

    I have a sort of dog-logo image I float right (if I can) on all my main pages. I'm in the process of changing from HTML 4.01 Transitional to Strict, and have the hang of that now, whew!

    But then also, I'm changing the layout of some pages; some will remain full-page, but some will have banner, horizontal nav, and then main page headings, all full-page-sidth (excluing background image, a .gif strip 20px wide, at the left, repeat-y only) - followed by a two-column structure for content. At the bottom of the page, I have another full-page-width area, to accommodate a decorative image, followed by the full-page-width copyright notice.

    A sketch for that layout is visible on my site, at

    http://www.coherentdog.org/layout.htm

    It's the right-hand sketch; my other ideas are in the left-hand-sketch, but for now, I've abandoned those ideas.

    I'm re-doing all my CSS, of course, to accommodate the new tw0-column structure in the middle of the page.

    Finally, with lots of help from Fang, I have what looks like a workable CSS for my two-column structure. I've colored various page-areas differently from how I intend them to appear, just to see the structures for myself, before I change background-colors back to how I want them. (None of this is on my site; I find it too complex to try to publish it.)

    I have a remaining problem that shouldn't surprise anybody! Must be very common!

    That is, in Opera and Firefox, my dog-logo in the full-page headings area, floats right just fine. But in IE, I guess, predictably, it appears above the headings area, all by itself. ARGH! Must have something to do with the box model? Or maybe a problem with right-float?

    Here's my code (partly; a mock-up of it).

    CSS code:

    Code:
    #pagetop {
    margin: 0;
    display: block;
    margin-bottom: 10px;
    }
    
    #masthead {
    width: 96%;
    margin-left: 20px;
    border: 0;
    }
    
    #hedsmanymany {
    height: 400px;
    width: 96%;
    background-color: #0c6;
    margin-left: 20px;
    margin-bottom: 10px;
    z-index: 1;
    }

    HTML code, editing out details, just to show the structure

    Code:
    <body>
    <div id="pagetop">
    
    <div id="masthead">[banner]</div>
    
    <div id="nav">[horizontal nav]</div>
    
    <div id="animlogo"><img alt="Kwali.." src=..</div>
    
    <div id="hedsmanymany">
    <h1>Dogs are Coherent</h1>
    <h2>[and so forth]</h2>
    <h3>[and so forth]</h3>
    
    <p>This entire site [and so forth; a few paragraphs]</p>
    
    </div>
    </div>
    [and so forth]
    </body>
    I've never tried attaching a file here before, but I'm going to try now,to show first how Opera and Firefox show the logo, and then how IE shows it.

    Can somebody help me fix the code, or point me to where I can learn? THANKS!

    Wed, 23 Feb 2005 17:14:53
    Attached Images Attached Images
    Last edited by CarolW; 02-23-2005 at 07:25 PM.
    My site is my home-and-playground
    http://www.coherentdog.org/
    Carol W

  2. #2
    Join Date
    Jul 2004
    Location
    Sendai, Japan
    Posts
    1,273
    Hi Carol,
    It would be easier to try to help if you posted a link to the pages you're referring to. Do you think you could do that? You don't need to actually put them on your site - just put them on your server with names like test1.htm and test2.htm - things like that. You say that you float your picture right, but that's not apparent in the code that you've posted.

    (Thanks for the nice comment you left on my site by the way).
    Last edited by BonRouge; 02-24-2005 at 05:42 AM.

  3. #3
    Join Date
    Nov 2004
    Location
    Canada
    Posts
    330
    Hi BonRouge; good to hear from you!

    Originally posted by BonRouge
    Hi Carol,
    It would be easier to try to help if you posted a link to the pages you're referring to. Do you think you could do that? You don't need to actually put them on your site - just put them on your server with names like test1.htm and test2.htm - things like that. You say that your float your picture right, but that's not apparent in the code that you've posted.

    (Thanks for the nice comment you left on my site by the way).
    I've bookmarked your site, and will be visiting, quite a lot, when I get to the next stage in my workings (playings, rather). Gotta study your gallery method; it looks wonderful! I had a look at your three-column stuff, too, and may study it again later. For now, I'm using Russ Weakley's tutorials on the MaxDesign site (sorry I don't have the URL right handy for that, though it's on my layout page).

    Had a great success today (oops; yesterday); finally beginning to catch on to the horizontal nav stuff that MstrBob kindly led me into; I used his code, but have now substituted Russ Weakley's tutorial code for it, and then altered that slightly, copying MstrBob in parts, and that part seems to be working fine!

    How silly of me not to have noticed I didn't post the float part of the CSS! Here it is:

    Code:
    #animlogo {
    float: right;
    border: thin solid black;
    margin: 2px 20px 2px 5px;
    padding: 1px;
    z-index: 2;
    }
    But now, you can also get it from my site. I was aware that people post test stuff on their servers without publishing on their sites, but mostly, I decided to post right on my site, because I have lots of friends who might like to make themselves web pages, and I'd like to encourage them not to be afraid to try, and not to be afraid to make mistakes, either!

    Apparently people are enjoying this; anyway, they are enjoying the site, though these are mostly dog-people. Most likely one in ten-thousand would actually dare to try, but you never know! I have so much work to do on content, and when I get the structure reasonably as I like it, I'll try to fill out the content part, including some pointers for people who start as I did, knowing absolutely nothing - and including links to these forums, and a number of other places. But these forums lead to all kinds of wonderful places! So I don't have to provide too many links, haha!

    Well, now I do have the whole thing up on my site, though I should have edited the title on the bad-columns page, and I'll do that first thing - after I've had some sleep and done my chores.

    Must fall into bed; can hardly type! Thanks!

    Thu, 24 Feb 2005 02:31:43
    My site is my home-and-playground
    http://www.coherentdog.org/
    Carol W

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Place #animlogo in #hedsmanymany
    Code:
    <div id="hedsmanymany">
    <div id="animlogo"><img alt="" src="doggy.gif">..</div>
    ....
    Last edited by Fang; 02-24-2005 at 05:28 AM.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  5. #5
    Join Date
    Nov 2004
    Location
    Canada
    Posts
    330
    Dear Fang,

    Originally posted by Fang
    Place #animlogo in #hedsmanymany
    Code:
    <div id="hedsmanymany">
    <div id="animlogo"><img alt="" src="doggy.gif">..</div>
    ....
    WOW! Bow, wow! It's Fang to the rescue again!

    I'm off to try it!

    Nested IDs! well, divs. Whatever!

    I'll report back! Again, fifty-million thanks!

    Thu, 24 Feb 2005 10:46:38
    My site is my home-and-playground
    http://www.coherentdog.org/
    Carol W

  6. #6
    Join Date
    Nov 2004
    Location
    Canada
    Posts
    330
    Originally posted by Fang
    Place #animlogo in #hedsmanymany
    Code:
    <div id="hedsmanymany">
    <div id="animlogo"><img alt="" src="doggy.gif">..</div>
    ....
    Update: It worked perfectly! Of course! Makes sense to me, too!


    Now a new thread concerning the same basic layout (but this time, without the IE shove-the-animlogo-around problem (big grin)

    See "Bottomless Pit Revisited" (yet to be written)

    Thu, 24 Feb 2005 11:04:22
    My site is my home-and-playground
    http://www.coherentdog.org/
    Carol W

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles