SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs down Another IE Mac problem

    Ok, yest another IE Mac problem. Some more and i will just put IE Mac at the same place where I have NS4.

    I don't know if this is a bug if I am doing something wrong. (all other browsers show it correctly).

    I have a relatively positioned div, and a right floting one. The right floting div couses the relativly pos. div to increase its width. Its seems like the floating element "pulls" or "streaches" the relative one towards it.

    if I remove the "position:relative", eveyrithing shows corectly. But i need that div to be relative because I will have absolutely positioned elements inside it.

    Here is the code:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Simple RC</title>
    <style type="text/css">
    .header{
    position:relative;
    width:200px;
    height:30px;
    background:green;
    color:red;
    }
    .fl{
    float:right;
    width:300px;
    height:150px;
    background:yellow;
    color:blue;
    }
    </style>
    </head>
    <body>
    <div class="fl">xx</div>
    <div class="header">yy</div>
    </body>
    </html>

  2. #2
    SitePoint Member byss's Avatar
    Join Date
    Sep 2002
    Location
    Central Kentucky, USA
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm making a guess, but try defining the top, right, left, and bottom positions of your header div.

    You've defined it's size, but not where it actually goes on the page, so IE is being forced to think on its own where it goes. And we all know that IE thinking on its own is NOT a good thing.

    Also, if you plan on the header being at the top of the page (I'm assuming this, because it's a "header"), wouldn't you want to write your code in this order?

    Code:
    <div class="header">yy</div>
    <div class="fl">xx</div>
    Hope that helps, but as I said, it's a guess.
    Caution: Slow Children At Play -->

  3. #3
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The header needs to be relatively positioned, not absolutely.

    There are many headers. If you have the header before the float, then the floating element will not be floating next to the header (it will be bellow).

  4. #4
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    At the risk of stating the obvious the point of a header is that it is above all the other elements (i.e. at the head of the page).

    Anything that sits next to the header could/should quite likely become part of the header, but anyway...

    ---

    Place the header before the 'fl' div* (as byss suggested), but also give the header div a [i]float: left['i] attribute. This will enable other (floated) divs to sit on the same 'line'.
    (* this isn't actually required, as the floats will arrange themselves correctly regardless of which comes first in the markup. It is a matter of instilling a meaningful structure into the page for those occasions when people visit your page with no css.)


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http: //www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    	<title>Simple RC</title>
    	<style type="text/css">
    
    	.header {
    	position: relative;
    	width: 200px;
    	height: 30px;
    	background: green;
    	color: red;
    	float: left;
    	}
    
    	.fl {
    	float: right;
    	width: 300px;
    	height: 150px;
    	background: yellow;
    	color: blue;
    	}
    
    	</style> 
    </head>
    <body>
    <div class="header">
    	yy
    </div>
    <div class="fl">
    	xx
    </div>
    </body>
    </html>
    Regarding 'IE thinking on its own':

    The fact that it doesn't do it well is a good thing.
    IEMac takes instruction very well (amongst the very best), just as long as those instructions are well-formed.
    The habit of some other browsers to 'guess' what is meant when markup is senseless is what keeps web-developers and designers in their lazy, bad-code habits.

    In this case it was the absence of correct and suitable instruction that was causing your page to appear 'incorrectly'** in IEMac.
    (** though IEMac's rendition of the page was appropriate given the default behaviours associated with divs.)


    What is it they say about 'bad workmen'?
    Last edited by Bill Posters; Jun 12, 2003 at 00:21.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  5. #5
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks.
    Unfortunatly floating the headers to the left messed up the rest of the page.
    What I gave here was just the IE Mac bug, not the whole code.


    Regarding IE Mac:

    IE6, Mozilla and Opera render what I gave correctly. Another IE Mac bug was found here: http://www.sitepointforums.com/showt...hreadid=112837

    The instructions are correct, its just that IE Mac has some bugs in these cases.

    Headers:
    There are several headers. Even in html you have h1,h2,h3 etc, they don't have to sit on top of everything, just ontop of their subject.

    In any case thats totally irrelevant. You can replace the .header with .whatever , and the problem is still the same.

  6. #6
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The <hx> tags are used for 'headings', not 'headers'.
    The difference may sound minor, but it's actually quite fundamental.

    Can you show me your entire page code?

    I'm curious to know for sure where the root of the problem is.
    I may be overly trusting of IE5Mac, but that's because I've hit very few obstacles that couldn't be overcome by rationalising the markup or css.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  7. #7
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    right, those are headings not headers.

    I found a "solution". Its not a very elegant one, but atleast it works in the browsers it has to work:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Simple RC</title>
    <style type="text/css">
    .header{
    position:relative;
    width:200px;
    height:30px;
    }
    .headabs{
    position:absolute;
    top:0;
    left:0;
    width:200px;
    height:30px;
    background:green;
    color:red;
    }
    .fl{
    float:right;
    width:300px;
    height:150px;
    background:yellow;
    color:blue;
    }
    </style>
    </head>
    <body>
    <div class="fl">xx</div>
    <div class="header"><div class="headabs">yy</div></div>
    </body>
    </html>
    I know it doesn't look very neat that way, but at least it works in IE Mac without messing up anything in any of the other browsers.

    Bill, i think you are overly trusting IE5Mac. Although I don't own a Mac, from the tests I run recently it seems that safari, mozilla, Opera and some other newer Mac browsers are much better from IE.
    IE5Mac might be a bit better from IE5 Windows, but it is behind IE 6 Win and the browsers i mentioned above. At least thats the impression I got

  8. #8
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, put it this way. I've been a user of IE5Mac since it came out and until recently it was my default browser for browsing and testing.

    Aside from one or two issues with vertically-centered layouts, I've never had problems making it play ball with simple, valid code and simple, clear methodology- perhaps most significantly, the same code that also works first time in Camino/Moz et al.
    Bug for bug I'd actually say that IE5/Mac compares quite favourably with IE6/Win. The browsers in which I most often see healthy code fall apart are Windows editions of IE, including 6.
    In fact, it is commonly understood that when a division exists between a page displaying one way in Moz/Camino/Opera and another way in IE6, then IE5/Mac is most likely to be found getting it right and standing shoulder to shoulder with Moz/Camino/Opera.

    So, forgive me if I don't consign IE5/Mac to the scrapheap just yet, but in my experience, it's works well when the code is good and remains a worthy test browser. Not flawless, but it still compares well in today's more astute, standards-aware line up.


    I'm not saying this to be a wise guy. It simply intrigues me when you say that the semantically and structurally 'correct' method which I first posted breaks the rest of your page.

    The bottom line is- make the code correct to start with. Then put in the workarounds for those browsers that cannot handle it properly.
    In this instance IE5/Mac handled it fine. Now, it's the rest of your page that concerns me.

    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  9. #9
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE5/Mac is extremely better than IE5/Win, and on par with IE6/Win, except it supports PNG properly.

    I find when working with IE6/Win in standards mode, writing code it simple, and usually works with the latest IE/Moz/Opera, and I end up having to hack it to get it to work right in IE5/Win.
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.

  10. #10
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by cyborg from dh
    IE5/Mac is extremely better than IE5/Win, and on par with IE6/Win, except it supports PNG properly.
    You'd think they would have figured it out by now .
    Quote Originally Posted by cyborg form dh
    I find when working with IE6/Win in standards mode, writing code it simple, and usually works with the latest IE/Moz/Opera, and I end up having to hack it to get it to work right in IE5/Win.
    I work a little differently. Usually I start with Firebird and Opera, then accommodate for IE6 (some things, like position: fixed; and lack of CSS2 support), then for IE5. However, accommodating for the IE/Windows versions usually doesn't take me longer than a few minutes.

  11. #11
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I actually accomodate for IE6 and Mozilla at the same time, then work with Opera, as Opera has a couple things that don't work right.

    It doesn't really matter, as long as it works in all of them in the end, and the code is standards-compliant.
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.

  12. #12
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Bill Posters
    The bottom line is- make the code correct to start with. Then put in the workarounds for those browsers that cannot handle it properly.
    In this instance IE5/Mac handled it fine. Now, it's the rest of your page that concerns me.
    ok. I am attaching a screenshot of how IE Mac rendered the initial code.
    Show me why the way that IE Mac renders this code is the correct one, and all the rest are wrong. Then i will agree that this is not a bug, but just my code is wrong.
    Attached Images Attached Images


Bookmarks

Posting Permissions

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