stu nicholl's frames and IE issue [Archive]

Click to See Complete Forum and Search --> : stu nicholl's frames and IE issue

staypuffinpc

12-14-2006, 01:45 PM

In an experiment to create a frame-like page for a friend, I have used Stu Nicholl's tutorial found at WebReference.com (http://www.webreference.com/programming/css_frames/). For the most part, I have met with success. I even got the content to scroll correctly in IE. However, the one problem I am having comes (I believe) from this statement.

/* for internet explorer */

* html body {
padding:120px 0 50px 0;
}

* html #contents {
height:100%;
width:100%;
}

The problem is that, by setting the body to have that padding, nothing, not even the header and the sidebars I've created, starts until after the padding.

I have validated my code (http://jigsaw.w3.org/css-validator/validator?uri=http://peterich.myweb.uga.edu/mims/index.html) and tested the design in FF, Safari and OmniWeb, and Opera on a macBook (2Ghz, Core 2 duo), and FF and IE on a Windows PC. The code validates and the design works everywhere except for in IE 6.0 on the PC (although I don't know why the scroll bar does not stick to the far right of the window in FF and Opera).

I have put the test page up at http://peterich.myweb.uga.edu/mims/

Any clue on how to get this to work in IE?

WebJoel

12-14-2006, 02:31 PM

With the !doctype that you are using, there might be a problem here:

<head>
<link href="spidey.css" type="text/css" rel="stylesheet" id="spideyCSS"></link>
</head>

Try:

<head>
<link href="spidey.css" type="text/css" rel="stylesheet" id="spideyCSS" />
</head>

It looked okay in Firefox, but there is something definately wrong with the way it views in IE... your navigation bar is too far to the right, and the 'lorem ipsum' overlaps the navs..

From validating your HTML:

....Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, <head> generally requires a <title>, lists (ul, ol, dl) require list items (li, or dt, dd), and so on.

I think that the improperly-closed <link> is messing up the layout..

staypuffinpc

12-14-2006, 04:40 PM

Thanks. I've changed it, but still get the same results. As for the overlapping content, I think I know what's happening there, but I'm focused on getting everything pushed up to the top and left first. Any more suggestions as welcome.

_Aerospace_Eng_

12-14-2006, 04:45 PM

Remove this
<?xml version="1.0" encoding="UTF-8"?>
and see what happens.

Centauri

12-14-2006, 05:01 PM

I think it should be mentioned in the article (haven't read right through it, but familiar with the technique from Stuart's site), IE needs to be in quirks mode for this to work - hence the xmlns declaration BEFORE the doctype in his example.

See Stu's site for more layouts - http://www.cssplay.co.uk/layouts/index.html
I have used fixed version 2 quite successfully.

Cheers
Graeme

staypuffinpc

12-14-2006, 05:08 PM

I removed that line and not only does it not fix my positioning issue, but it also removes the fixed-like scrolling from the page (in IE only). I inserted it back in and things worked fine, but that was expected b/c I had read something about it having to work in quirks mode.

BTW, because of your tagline, _Aerospace_Eng_, I realized that I had only validated my css and not my xhtml. So, I ran the validator, caught a few problems, and made the necessary changes. It now validates (http://validator.w3.org/check?uri=http%3A%2F%2Fpeterich.myweb.uga.edu%2Fmims%2F&charset=%28detect+automatically%29&doctype=Inline&ss=1&outline=1&No200=1&verbose=1) . But, alas, I still have been unsuccessful. I'll keep digging. It's there somewhere.

_Aerospace_Eng_

12-14-2006, 07:33 PM

Try this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
* {
margin:0;
border:0;
padding:0;
}

html,body {
background:#000 url(BigWeb.jpg) fixed no-repeat;
color:#fff;
font:12px verdana, helvetica, sans-serif;
height:100%;
font-size:14px;
}

/*-------------Site navigation-------------*/
a {
color:#fff;
font:11px verdana, helvetica, sans-serif;
text-decoration:none;
z-index:100;
position:relative;
background-color:transparent;
}

a:hover {
text-decoration:underline;
color:#5252E3;
}

a:active,a:visited {
color:#fff;
text-decoration:none;
}

/*-------------end navigation-------------*/
#sideBar {
background:#000 url(brickWall.jpg) repeat-y;
width:200px;
height:100%;
position:fixed;
margin-right:20px;
color:#fff;
z-index:2;
}

#sideBar #links {
padding-top:164px;
padding-left:40px;
}

#sideBar #links ul {
list-style-type:none;
}

#sideBar #links ul li {
padding-top:15px;
}

#sideBar #links ul ul {
list-style-type:none;
padding-left:20px;
}

#sideBar #links ul ul li {
padding-top:5px;
}

/*-------------end sidebar links-------------*/
/*---------top links ---------------*/
#topLinks {
position:relative;
top:130px;
left:350px;
z-index:100;
}

#topLinks a {
text-decoration:none;
font:17px verdana, helvetica, sans-serif;
color:#fff;
background-color:transparent;
}

#topLinks a:hover {
text-decoration:underline;
color:#5252E3;
}

#topLinks a:active {
text-decoration:none;
color:#5252E3;
}

#topLinks a:visited {
text-decoration:none;
color:#fff;
}

/*-------------end top links-------------*/
#contents p {
padding:10px 0;
text-align:justify;
}

#contents {
z-index:0;
padding:200px 30px 30px 230px;
}

#header {
height:200px;
position:fixed;
width:100%;
overflow:hidden;
z-index:1;
background:url(BigWeb.jpg) repeat-x;
top:0;
left:0;
}

#longWeb {
z-index:10;
position:absolute;
top:140px;
height:40px;
}

#clifName {
position:absolute;
top:100px;
z-index:10;
margin:20px;
}

#spidey {
position:absolute;
left:300px;
}

</style>

<title>Clif Mims</title>
</head>
<body>
<div id="sideBar"> <img src="clifName.png" id="clifName" alt="Clif Mims"/> <img src="longWeb.png" id="longWeb" alt="Spider web"/>
<div id="links">
<ul>
<li><a href="">EDCI 557</a>
<ul>
<li><a href="">Welcome</a></li>
<li><a href="">Syllabus</a></li>
<li><a href="">Assignments</a></li>
<li><a href="">Participants' sites</a></li>
<li><a href="">Technical Help</a></li>
<li><a href="">Privacy Policy</a></li>
<li><a href="">Acknowledgements</a></li>
</ul>
</li>
<li><a href="">K-12 Resources</a>
<ul>
<li><a href="">Teacher Links</a></li>
<li><a href="">Links for Kids</a></li>
<li><a href="">Racoon Hunting</a></li>
<li><a href="">Panda Project</a></li>
<li><a href="">Authentic Learning</a></li>
<li><a href="">Multiplication</a></li>
<li><a href="">Draw/slideshow</a></li>
<li><a href="">Erik Erikson</a></li>
</ul>
</li>
<li><a href="">email</a></li>
</ul>
</div>
</div>
<div id="header">
<div id="headerContent"> <img src="spidey-crawl-shaddowsSolid-300w.png" id="spidey" width="400" height="129" alt="picture of spiderman crawling out of shaddows"/>
<div id="topLinks"> <a href="">Home</a> | <a href=""> Teaching</a> | <a href=""> Portfolio</a> | <a href=""> Research Service</a> | <a href=""> K-12</a> | <a href=""> Links</a> </div>
</div>
</div>
<div id="contents">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla enim risus, ornare scelerisque, suscipit quis, nonummy quis, ipsum. Duis ullamcorper augue ut nibh. Sed pretium magna quis turpis. Curabitur feugiat. Proin faucibus. Sed consectetuer, erat eu commodo tincidunt, orci nibh lobortis est, vitae ornare nulla purus vitae tortor. Vivamus viverra bibendum dui. Mauris viverra, justo suscipit imperdiet suscipit, justo orci sodales tellus, ac ullamcorper quam urna vitae neque. Sed id metus. Donec cursus. Pellentesque ac tortor sit amet nibh fermentum egestas. </p>
<p> Donec tempor consectetuer orci. Morbi dapibus scelerisque sem. Pellentesque faucibus bibendum nibh. Quisque massa. Sed quam ligula, porta non, rutrum vitae, interdum eget, purus. Suspendisse porta. Quisque congue sapien in tellus. Vivamus lobortis laoreet ligula. Curabitur at quam. Aenean suscipit hendrerit elit. </p>
<p> Nullam lobortis. Sed ac enim et lacus euismod sollicitudin. Proin interdum. Cras tempor risus feugiat lorem. In non tortor. Vivamus vel odio vitae felis lacinia nonummy. Donec imperdiet iaculis odio. Duis vestibulum dapibus massa. Morbi at magna et est ullamcorper aliquet. Vivamus leo neque, mattis at, scelerisque a, pellentesque id, nibh. Phasellus vel mauris. Proin sed sem sed augue interdum ultricies. Sed et velit. Vivamus et ipsum ut erat ullamcorper auctor. Morbi nisl. </p>
<p> Donec dolor ligula, sagittis vel, pellentesque sit amet, semper a, est. Quisque posuere, justo laoreet sollicitudin rhoncus, nunc arcu viverra nunc, at posuere mi purus id purus. Integer mattis nonummy odio. Aenean ultrices pharetra sapien. Sed sagittis nibh at nisi. Nullam tellus. Mauris vitae ipsum in arcu commodo imperdiet. Etiam tellus erat, hendrerit at, adipiscing sed, posuere id, arcu. Nullam ullamcorper. Sed ac nunc. Aliquam condimentum. </p>
<p> Integer facilisis turpis a quam. Phasellus vel libero nec leo dignissim tempus. Quisque condimentum. Fusce in felis eu arcu suscipit euismod. Fusce eleifend nunc sit amet libero. Curabitur orci. Nullam vulputate rutrum arcu. Aliquam sit amet dui. Integer orci urna, facilisis non, sagittis vel, hendrerit vitae, risus. Sed id odio ultrices augue malesuada rhoncus. Morbi nisi mi, pharetra et, pulvinar at, lobortis at, elit. Aliquam mi lorem, tempus a, hendrerit vitae, varius id, risus. Maecenas felis lorem, consequat eget, hendrerit sed, euismod at, tortor. Mauris ac felis ac nibh aliquet varius. Aenean non ligula. </p>
<p> Pellentesque sodales. Nulla condimentum orci laoreet odio. Pellentesque malesuada dui id leo. Cras massa nunc, fringilla eu, porta sed, imperdiet sit amet, sapien. Fusce posuere, diam ac consequat convallis, libero pede rhoncus urna, et eleifend mi arcu sed lacus. Aenean dictum orci et risus. Aliquam ligula lacus, bibendum iaculis, bibendum eu, mattis vestibulum, odio. Pellentesque tincidunt. Sed nulla ante, porta vel, accumsan vel, malesuada sit amet, nisi. Morbi iaculis ullamcorper ligula. Sed consequat augue eget metus. Donec eget justo. Morbi adipiscing vulputate tortor. Nullam commodo. </p>
</div>
</body>
</html>

Centauri

12-14-2006, 08:56 PM

Well, I also took a look at this.... :)

Ignoring other issues at the moment, the different offset of the links li's is due to different browser margin defaults, so, as Aerospace alluded to in the code above, zero out these differences first with* {
border: 0;
margin: 0;
padding: 0;
}

A big problem is your left sideBar - it has been positioned absolutely, but not told WHERE to go, and each browser will make different assumptions here. #sideBar {
background: #000 url('brickWall.jpg') fixed repeat-y;
width: 200px;
height: 100%;
position: absolute;
margin-right: 20px;
color: #fff;
top: 0px;
left: 0px;
}
fixes that.

The padding applied to the body pushes the content too low, and allows for a non-existant footer, so /*--hack for IE--*/
* html body {
padding: 160px 0 0 200px;
}
addresses that.

To position the sideBar links properly, try #sideBar #links {
z-index: 100;
margin-top: 160px;
}

#sideBar #links ul {
list-style-type: none;
margin-left: 20px;
}
and get rid of #sideBar #links ul ul css as it is not needed.

To get contents to behave, use a left margin except for IE, so css is #contents {
z-index: 0;
padding: 30px;
position: fixed;
overflow: auto;
top: 160px;
bottom: 0px;
right: 0px;
margin-left: 160px;
}
* html #contents {
width: 100%;
height: 100%;
margin: 0;
position: static;
}

Think thats it
Cheers
Graeme

edit: Oh, and get rid of #contents p - it mucks up the right padding in IE