/    Sign up×
Community /Pin to ProfileBookmark

IE problems

Copy linkTweet thisAlerts:
Sep 25.2003

Hi all,
I’m trying to do the layout of my website with CSS.
Here’s what I got so far:
[url]http://www.3d-community.com/layout.php[/url]
[url]http://www.3d-community.com/css.php[/url]
css.php is actually the CSS stylesheet.

The layout works in Mozilla, Netscape and Opera, but in IE (6) there are numerous errors!

  • –

    The text right above “Zweite Überschrift” is invisible. Scrolling, marking it with the mouse, or hovering makes it visible (partly) again.

  • –

    the DIV title_bg (“zweite überschrift”) is moved down by the floated menu. Here’s the definition:

    [CODE]
    div.title_bg {
    width:100%;
    padding:0;
    margin: 0 10px 20px 0;
    background: #6185B7;
    border-bottom: 1px dashed #aaa;}
    [/CODE]

    I don’t have clear:both; or clear:left; in there, so I have no clue why IE is doing that!

  • –

    At “Vierte Überschrift” the grey background is aligned to the left of the screen, although it is nested in a DIV, that has margin-left:210px; in it.

    • Thanks for any help! I’m really stuck on these problems here.

    to post a comment
    CSS

    10 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @MotherNatrsSonSep 25.2003 — IE 6 has poor css support. Even css one. There are bugs in most browsers with floats. You may have to position that instead of floating it.

    MNS
    Copy linkTweet thisAlerts:
    @GweiloauthorSep 25.2003 — Is there a possibility to position an absolute positioned DIV beneath another one, without knowing it's height?
    Copy linkTweet thisAlerts:
    @MotherNatrsSonSep 25.2003 — I am not sure. You will have to just try it and see. If it does not work and you do not want to specify a height, try height: auto;...

    MNS
    Copy linkTweet thisAlerts:
    @toicontienSep 26.2003 — There is no way to guarantee an absolutely positioned element will stay underneath another unless you know the height.

    The purpose of absolute positioning to to remove the element from the normal document flow and create a new document flow within it.

    I feel your pain. Oh yes I do! I recently redesigned http://www.cm-life.com using a completely CSS layout. I found this to be true for IE on both PC and Macs:

  • 1. An element that is a direct child of the body tag doesn't need to be positioned in any way, but sometimes it needs to be positioned like: [b]position: static;[/b] (for all you standards compliance gurus out there, I'm not saying it's right, I'm just saying sometimes it's necessary to make it work).


  • 2. Most elements inside the direct child element of the body tag need to be positioned - [b]position: relative;[/b]


  • 3. Often defining your styles in CSS like below gets around numbers 1 and 2:


    • div #id_name { style: statements; }

    It means [b]if the div tag is the parent element[/b] of [b]an element with id="id_name"[/b] then {apply the style statements}.

    An alternative way is of course using absolute positioning. I've done a little playing around with that and came up with a 3-column layout that you might find to be a help:

    http://users.tm.net/gburghardt/test/

    The widths of each column are specified in ems, but you could just as easily use percentages of pixels.
    Copy linkTweet thisAlerts:
    @GweiloauthorSep 26.2003 — I just had an idea that might just work!

    The idea is to put an abolute positioned DIV to the left and put relative DIV's in it for every box (The same with the content and the Header). I just *hope* IE get's this one done correctly.

    Oh, and thanks a lot for your tips! I'll try those out aswell.
    Copy linkTweet thisAlerts:
    @GweiloauthorSep 26.2003 — I did a little bit of testing, and here's what came out:

    http://3d-community.com/layout.php

    The images aren't in the box yet, but I'll find a way to make it look like they where inside. The problem was, that IE couldn't display 3-times-nested div's correctly, so I just took them out and it worked fine afterwards.

    I'm so glad to have solved this problem. It was such a pain in the ass. I was trying and trying for about 3 weeks without a solution in sight.
    Copy linkTweet thisAlerts:
    @GweiloauthorSep 27.2003 — now here's a *very* strange problem. I didn't even notice it, but it is in the same layout. The glitch only occurs in IE (oh, what a coincidence!)

    http://3d-community.com/layout.php

    The second and third lines of the news are shifted to the left by 2 px (only in IE). The reason? Because the DIV tag where the news titles are in (ie "3DC Update - August 31st 2003") has only 3 borders!

    border:1px solid #aaa;

    border-bottom:0;

    Now why the hell does IE shift the content to the left by 2px? I have no idea. It works fine without borders, or with all borders.

    Does anybody know how to solve this problem?
    Copy linkTweet thisAlerts:
    @GweiloauthorSep 27.2003 — Nope, that's something else.

    it shifts to the left by 2px every time this div-tag with 3 borders is used.

    I highlighted the border this time, so it's easier to understand.

    http://www.3d-community.com/layout.php

    again: this only occurs, if I have 3 borders. If I use 4, or none it works normally.
    Copy linkTweet thisAlerts:
    @MotherNatrsSonSep 28.2003 — It is IE incorrect rendering of the box model. You need to apply the IE box model "hack" and it wil work the same.

    MNS
    ×

    Success!

    Help @Gweilo spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.16,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...