PDA

View Full Version : CSS Jello design not working in IE



whackaxe
Aug 25th, 2004, 07:48 PM
*note: this is really continuing from the last thread I started, but is only about my one problem :) i hope mods don't see this a double post

righto the code is as follows
symple.css:


body
{
background-color: #e3e3e3;

margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;

}

div#logo
{
background-color: white;
border-color: #777777;
border-width: 2px;
border-style: solid;

position: absolute;
top: 20px;
left: 20px;

width: 250px;
height: 250px;

}

div#nav
{
background-color: white;

border-color: #777777;
border-width: 2px;
border-style: solid;
border-bottom-color: white;
border-bottom-width: 1px;

position: absolute;
top: 20px;
left: 290px;
right: 20px;

height: 269px;
width: auto;
z-index: 5;

}

div#main
{
background-color: white;
border: 2px #777777 solid;
position: absolute;
top: 290px;
left: 20px;
right: 20px;
z-index: 1;
padding: 10px;
}


index.html:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
<title>| theme: symple</title></title>

<link type="text/css" rel="stylesheet" href="symple.css">

<!--[IF IE]>
<style type="text/css">
div#nav
{
position: absolute;
top: 20px;
left: 290px;
height: 272px;
width: auto;
margin-right: 20px;

}

div#main
{
width: 100%;
}

body
{

}
</style>
<![endif]-->

</head>

<body>


<div id="logo">logo</div>
<div id="nav">navigation</div>
<div id="main">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse dignissim, nisl et aliquet ullamcorper, justo neque volutpat nulla, at dignissim nisl quam eget nisl. Vivamus eleifend molestie libero. Donec nonummy augue blandit nunc dapibus fermentum. Nam semper volutpat wisi. Quisque laoreet vulputate lorem. Curabitur sapien. Fusce sit amet erat. Sed eros sapien, sodales et, placerat ac, consequat eu, erat. Praesent posuere. Vestibulum ipsum. Suspendisse potenti. Cras sit amet ligula sit amet sem laoreet luctus. Quisque ut sapien. Maecenas nec arcu non est interdum commodo. Maecenas egestas leo et wisi. Vestibulum id urna.
</div>


</body>

</html>



now if you view the page in firefox for axample, it should render perfectly (thatnks to the "right" property) but in IE, i can't seem to make it work. ive tried lots of things, floats, nesterd divs, all differnt positioning types. now i know its possible (because i managed to make it work a few days ago :o and its not really that hard to do). much appreicated people :)

rmedek
Aug 25th, 2004, 07:59 PM
What about this? (http://codingforums.com/showthread.php?p=229272#post229272)
<edit> for the sake of continuity :) here's the CSS...</edit>

body {
background: #e3e3e3;
margin: 0;
padding: 0;
}

#wrapper {
margin: 20px;
position: relative;
}

#logo {
background: #fff;
border: solid 2px #777;
width: 250px;
height: 250px;
position: absolute;
top:0;
left:-270px;
}

html>body #logo {
position: absolute;
left: 0;
}

#nav {
background: #fff;
border: solid 2px #777;
border-bottom-color: white;
border-bottom-width: 1px;
height: 269px;
margin: 0 0px 0 270px;
width: auto;
}

#main {
background: white;
border: 2px #777 solid;
padding: 10px;
}

whackaxe
Aug 25th, 2004, 08:02 PM
sorry, bout that, but other topic was getting long and OT :p i'm fiddling about with what you gave me, not much luck as of yet

bradyj
Aug 25th, 2004, 08:20 PM
Can someone pop me a screenshot? I can't test on anything but mac, I just want to see how the box model is rendering improperly.

edit: you're missing an opening style tag in you HTML of that last post too.

rmedek
Aug 25th, 2004, 08:27 PM
Brady: In IE the navigation div doesn't expand to the width of the window, just the content. Everything else looks good, though... (gotta get with the Virtual PC, man! :))

whackaxe: I know... It makes more sense for this question to be in this section, I was just in a rush to contribute :)

Anyhow, to make sure I got it right, the question is basically how to set up two boxes (logo-- 250px square-- and navigation) with 20px margins all around, and have the navigation stretch with the browser window, right?

Ok, the theory behind the CSS above is to first set up a wrapper that's given a 20px margin (to make positioning easier, for me at least). Then I set the navigation, making sure it would expand with the window. The margins set by the wrapper give it the 20px separation.

Next I set up the logo, positioning it absolutely top and left. I did this to avoid floats. That put it right on top of the navigation, so I offset the nav by 270px, the width+20px.

This worked in Moz, but IE for some reason pushed the logo even with the navigation (i.e., 270px to the right), so I set up the IE hack to scoot it back where it belongs.

I know this is overly explanatory, but seeing as how you said you were returning to CSS I thought I'd give my logic behind the numbers :) There might be an easier way to do this...

rmedek
Aug 25th, 2004, 08:35 PM
I almost forgot the altered html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>| theme: symple</title></title>
<link type="text/css" rel="stylesheet" href="symple.css">
</head>

<body>
<div id="wrapper">
<div id="logo">logo</div>
<div id="nav">navigation</div>
<div id="main">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse dignissim, nisl et aliquet ullamcorper, justo neque volutpat nulla, at dignissim nisl quam eget nisl. Vivamus eleifend molestie libero. Donec nonummy augue blandit nunc dapibus fermentum. Nam semper volutpat wisi. Quisque laoreet vulputate lorem. Curabitur sapien. Fusce sit amet erat. Sed eros sapien, sodales et, placerat ac, consequat eu, erat. Praesent posuere. Vestibulum ipsum. Suspendisse potenti. Cras sit amet ligula sit amet sem laoreet luctus. Quisque ut sapien. Maecenas nec arcu non est interdum commodo. Maecenas egestas leo et wisi. Vestibulum id urna.
</div>
</div>

</body>
</html>

bradyj
Aug 25th, 2004, 08:39 PM
Well, if you absolutely position the wrapper, you can probably drop all the other absolutely positioned elements, I'll attempt that... in the meantime, your first example could work this way too:


body
{
background-color: #e3e3e3;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;

}

div#logo
{
background-color: white;
border-color: #777777;
border-width: 2px;
border-style: solid;
width: 250px;
height: 250px;
margin: 0px;
padding: 0px;
}

div#nav
{
background-color: white;
border-color: #777777;
border-width: 2px;
border-style: solid;
border-bottom-color: white;
border-bottom-width: 1px;
position: absolute;
top: 20px;
left: 290px;
right: 20px;
height: 269px;
width: auto;
z-index: 5;
margin: 0px;
padding: 0px;

}

div#main
{
background-color: white;
border: 2px #777777 solid;
width: auto;
height: auto;
z-index: 1;
padding: 10px;
margin: 16px 0px 0px 0px;
padding: 10px;
}


Only the navigation section needs to be absolutely positioned, and that's the problem -- IE doesn't register that right positioning element -- but nothing else really NEEDS to be positioned that way, as the logo will stack on top of the main content, and those can feed off each others' margins.

bradyj
Aug 25th, 2004, 08:50 PM
Ok, taking your last post rmedek, this works for me with a similar method:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
<title>| theme: symple</title></title>

<link type="text/css" rel="stylesheet" href="symple.css">
</head>

<body>
<div id="wrapper">
<div id="logo">logo</div>
<div id="nav">navigation</div>
<div id="main">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse dignissim, nisl et aliquet ullamcorper, justo neque
volutpat nulla, at dignissim nisl quam eget nisl. Vivamus eleifend
molestie libero. Donec nonummy augue blandit nunc dapibus fermentum.
Nam semper volutpat wisi. Quisque laoreet vulputate lorem. Curabitur
sapien. Fusce sit amet erat. Sed eros sapien, sodales et, placerat
ac, consequat eu, erat. Praesent posuere. Vestibulum ipsum.
Suspendisse potenti. Cras sit amet ligula sit amet sem laoreet
luctus. Quisque ut sapien. Maecenas nec arcu non est interdum
commodo. Maecenas egestas leo et wisi. Vestibulum id urna.
</div>
</div>
</body>

</html>



body
{
background-color: #e3e3e3;
margin: 0px;
padding: 0px;
}
div#wrapper {
padding: 20px;
}
div#logo
{
background-color: white;
border-color: #777777;
border-width: 2px;
border-style: solid;
width: 250px;
height: 250px;
margin: 0px;
padding: 0px;
float: left;
}

div#nav
{
background-color: white;
border-color: #777777;
border-width: 2px;
border-style: solid;
border-bottom-color: white;
border-bottom-width: 1px;
height: 269px;
width: auto;
z-index: 5;
margin: 0px 0px 0px 270px;
padding: 0px;

}

div#main
{
background-color: white;
border: 2px #777777 solid;
width: auto;
height: auto;
z-index: 1;
padding: 10px;
margin: 0px 0px 0px 0px;
padding: 10px;
}

But I am choosing a float and a margin to force the logo. The only issue I see is that the main div does not want to overlap now to hide it's right side border -- essentially ignoring the z-index. To overfide this, relative positioning (trying to steer clear of the absolute):


body
{
background-color: #e3e3e3;
margin: 0px;
padding: 0px;
}
div#wrapper {
padding: 20px;
}
div#logo
{
background-color: white;
border-color: #777777;
border-width: 2px;
border-style: solid;
width: 250px;
height: 250px;
margin: 0px;
padding: 0px;
float: left;
}

div#nav
{
background-color: white;
border-color: #777777;
border-width: 2px;
border-style: solid;
border-bottom-color: white;
border-bottom-width: 1px;
height: 269px;
width: auto;
z-index: 5;
margin: 0px 0px 0px 270px;
padding: 0px;
position: relative;

}

div#main
{
background-color: white;
border: 2px #777777 solid;
width: auto;
height: auto;
z-index: 1;
padding: 10px;
margin: 0px 0px 0px 0px;
padding: 10px;
position: relative;
left: 0px;
top: -2px;
}

That works in all my browsers, but IE should have some errors in the box model, yes?

rmedek
Aug 25th, 2004, 08:52 PM
Only the navigation section needs to be absolutely positioned, and that's the problem -- IE doesn't register that right positioning element -- but nothing else really NEEDS to be positioned that way, as the logo will stack on top of the main content, and those can feed off each others' margins.
Well, IE is the problem here :) But I approached it this way: Everything needs to expand with the window, except for the logo. So, to me, it makes more sense to position only the LOGO absolutely. Essentially the page is fluid and the logo just sits on top.

bradyj
Aug 25th, 2004, 08:57 PM
I agree, and I do that often, but since the navigation could break too easily with these methods, I think forcing it over with a box may be better... but it's IE, so who knows:)

Ok, another method:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
<title>| theme: symple</title></title>

<link type="text/css" rel="stylesheet" href="symple.css">
</head>

<body>
<div id="wrapper">
<div id="content">
<div id="logo">logo</div>
<div id="nav">navigation</div>
</div>
<div id="main">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse dignissim, nisl et aliquet ullamcorper, justo neque
volutpat nulla, at dignissim nisl quam eget nisl. Vivamus eleifend
molestie libero. Donec nonummy augue blandit nunc dapibus fermentum.
Nam semper volutpat wisi. Quisque laoreet vulputate lorem. Curabitur
sapien. Fusce sit amet erat. Sed eros sapien, sodales et, placerat
ac, consequat eu, erat. Praesent posuere. Vestibulum ipsum.
Suspendisse potenti. Cras sit amet ligula sit amet sem laoreet
luctus. Quisque ut sapien. Maecenas nec arcu non est interdum
commodo. Maecenas egestas leo et wisi. Vestibulum id urna.
</div>
</div>
</body>

</html>




body
{
background-color: #e3e3e3;
margin: 0px;
padding: 0px;
}
div#wrapper {
padding: 20px;
}
div#logo
{
background-color: white;
border-color: #777777;
border-width: 2px;
border-style: solid;
width: 250px;
height: 250px;
margin: 0px;
padding: 0px;
float: left;
}

div#content
{
height: 269px;
width: auto;
z-index: 5;
margin: 0px 0px 0px 0px;
padding: 0px;
position: relative;
}
div#nav
{
background-color: white;
border-color: #777777;
border-width: 2px;
border-style: solid;
border-bottom-color: white;
border-bottom-width: 1px;
height: 269px;
width: auto;
z-index: 5;
margin: 0px 0px 0px 270px;
padding: 0px;
}

div#main
{
background-color: white;
border: 2px #777777 solid;
width: auto;
height: auto;
z-index: 1;
padding: 10px;
margin: 0px 0px 0px 0px;
padding: 10px;
position: relative;
}


Main wrapper, and then a wrapper for the navigation and the logo -- and force itself over a little smoother. Downfall is requires and extra div, but that's nothing major, it may prove better structure since instead of div logo, I'd actually make that an h1 tag, and navigation I'd make a ul or something that's relevant and apply that CSS to that.

bradyj
Aug 25th, 2004, 09:03 PM
Semantically improved option:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
<title>| theme: symple</title></title>

<link type="text/css" rel="stylesheet" href="symple.css">
</head>

<body>
<div id="wrapper">
<div id="content">
<h1>logo</h1>
<ul>
<li>navigation</li>
<li>navigation</li>
<li>navigation</li>
<li>navigation</li>
<li>navigation</li>
</ul>
</div>
<div id="main">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse dignissim, nisl et aliquet ullamcorper, justo neque
volutpat nulla, at dignissim nisl quam eget nisl. Vivamus eleifend
molestie libero. Donec nonummy augue blandit nunc dapibus fermentum.
Nam semper volutpat wisi. Quisque laoreet vulputate lorem. Curabitur
sapien. Fusce sit amet erat. Sed eros sapien, sodales et, placerat
ac, consequat eu, erat. Praesent posuere. Vestibulum ipsum.
Suspendisse potenti. Cras sit amet ligula sit amet sem laoreet
luctus. Quisque ut sapien. Maecenas nec arcu non est interdum
commodo. Maecenas egestas leo et wisi. Vestibulum id urna.</p>
</div>
</div>
</body>

</html>




body
{
background-color: #e3e3e3;
margin: 0px;
padding: 0px;
}
div#wrapper {
padding: 20px;
}
#content h1
{
background-color: white;
border-color: #777777;
border-width: 2px;
border-style: solid;
width: 250px;
height: 250px;
margin: 0px;
padding: 0px;
float: left;
}
div#content
{
height: 269px;
width: auto;
z-index: 5;
margin: 0px 0px 0px 0px;
padding: 0px;
position: relative;
}
#content ul
{
background-color: white;
border-color: #777777;
border-width: 2px;
border-style: solid;
border-bottom-color: white;
border-bottom-width: 1px;
height: 269px;
width: auto;
z-index: 5;
margin: 0px 0px 0px 270px;
padding: 0px;
}
#content ul li {
list-style-type: none;
font: normal 1em helvetica, verdana, arial, sans-serif;
padding: 10px 0px 0px 50px;
}
div#main
{
background-color: white;
border: 2px #777777 solid;
width: auto;
height: auto;
z-index: 1;
padding: 10px;
margin: 0px 0px 0px 0px;
padding: 10px;
position: relative;
}

whackaxe
Aug 25th, 2004, 09:06 PM
ok, i got that up and running, BUT it has one problem :p, the main div always slips down whatever the height of the navigation div. i need the 2pxs of the nav div white border to overlap so that main and navigation LOOK seamless. i'm not shure if your solution can be adapated to that :(

bradyj
Aug 25th, 2004, 09:11 PM
of course it can:)
in the main div, under position relative write:


top: -2px;
left: 0px;


and however many minuses you need! I had to do that for safari to see it right.

rmedek
Aug 25th, 2004, 09:24 PM
Ahhh... I like it. Semantic, and CSS wins again. The only thing I'm not sure about is
navigation could break too easily with these methods
Although I like your final method better, if I were to use the other way, how might it break?

bradyj
Aug 25th, 2004, 09:39 PM
Not in modern browsers -- but I find with older browsers a ton of absolute positioning can wreak havoc on it's render. Plus, keep in mind, if you absolutely position that bottom element, it's taken out of the flow of the containing elements -- so your page won't flex and stretch like it needs to.

I still use absolutely positioned elements all the time, and I think their excellent, just not for everything... and having the boxes stretch and mold to each other allows for much better resizing since all the elements are based on each other, they'll keep uniform.

rmedek
Aug 25th, 2004, 10:25 PM
it's funny... in another thread of mine I just figured out that IE wouldn't render my menus if I resized the window due to positioning. I ended up replacing "top: 285px" with "margin-top: 285px."<edit> which breaks Mozilla now... *sigh* back to work...</edit>

So I guess it's not just the old browsers after all :)

bradyj
Aug 25th, 2004, 10:37 PM
might try padding instead -- margins collapse if they contact another margin, maybe that's the thing?

whackaxe
Aug 25th, 2004, 10:54 PM
thanks bradyj and rmedek, you pwn :)

bradyj
Aug 25th, 2004, 11:40 PM
thanks bradyj and rmedek, you pwn :)

Glad to help, it was an interesting challenge!