scrolling iframes in IE
- Thread starter Frank
- Start date
GRRR!!! I HATE IE!
Everything I make works flawlessly in FF from the start all the time, but I always end up spending much more time getting IE to display it correctly
Like the horizontal scrollbar in the frame. I got rid of it a while ago, but now it's back to stay.
Everything I make works flawlessly in FF from the start all the time, but I always end up spending much more time getting IE to display it correctly
Like the horizontal scrollbar in the frame. I got rid of it a while ago, but now it's back to stay.
can you set the right padding to a larger value perhaps?
http://www.w3schools.com/css/tryit.asp?filename=trycss_padding-right
http://www.w3schools.com/css/tryit.asp?filename=trycss_padding-right
DiGuru said:
I took a quick look in your css and it seems to contain alot of rules for the same elements in there, might be you are having conflicting rules in there...
Like... in one place setting margin to 0, and in another setting it to something else.
If I were to do something like this, i would set an id selector for the whole iframe, so i can have specific rules for everything inside that iframe without conflicting elements in the menu for instance.
Personally I wouldn't go with an iframe or frame at all for that matter. they often cause more problems than they solve
If your server has php or server side includes, I would just make the side menu in a separate file, then just include that on every page, so I can make changes in just 1 file. I realize this is probably too much work than you'd wanna put down right now.
Working with that CSS file and making sure you separate the different sections with #id's
so
#menu
#content
then you could have
p#menu {
css uinque for the p tags inside the id #menu
}
p#content {
css unique for the p tags inside the id #content
}
PS, sorry for probably confusing stuff even more
Take a look at this page, this page could easily be modified with your colors and style.
http://www.bluerobot.com/web/layouts/layout1.html
Check the source and css
http://www.bluerobot.com/web/layouts/layout1.html
Check the source and css
Did a little quick modification of the example just above... This is how your site can look with this code. Look now little actual HTML there is compared to when you use tables and stuff.
The HTML Code
The CSS
The HTML Code
Code:
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Digital Guru</title>
<style type="text/css" media="all">@import "css.css";</style>
</head>
<body>
<div id="Header"><h1>Put nice logo here</h1></div>
<div id="Content">
<h1>Vulture's Eye and Vulture's Claw </h1>
<h2>Introduction</h2>
<p>In 1980, Michael Toy, Glenn Wichman and Ken Arnold had the idea to make a different kind of computer game. Rogue. Instead of using only text, like most other games at that time, this one had to have graphics. A dungeon crawl, with a graphical representation of the dungeon layout. As most computers didn't have real graphics yet, they used characters to depict things. It looked like this: </p>
<p>This game was quite successful, and spawned a lot of Rogue-likes, which branched into a whole tree of games that were more or less alike.</p>
<p>One of these branches spawned Hack, and later Nethack. And while Nethack is more or less an evolution of Rogue and Hack, as these games were open-source, a many enthousiasts made a lot of patches for it. Those patches are things that add to or change the original game.</p>
<p>Another development team decided to add some of the different branches and quite a lot of all those patches together, which resulted in Slash'EM (Super Lotsa Added Stuff Hack - Extended Magic). </p>
<p>When time progressed and computer games started to use real graphics, the people who really liked to play Nethack and all the variants started to look at ways to make the games they loved look nicer. </p>
<p>One solution to do that was by using tiles, small pictures instead of characters. It looks like this: </p>
<p>However, Jaakko Peltonen decided in 1998 that a much nicer looking version of Nethack could be made, which resulted in the great looking Falcon's Eye. </p>
<p>It adds an 3D isometric view and great pre-rendered graphics to nethack. It is really a joy to play. Nethack is a very deep and complex game, with endless possibilites, and the graphics really add a lot to it, in my opinion. And while a lot of other people prefer one of the older interfaces, I really dig this one. </p>
<p>Unfortunately, since 2001 the development of Falcon's Eye has stalled. And as many people enjoy playing it, Clive Crous from DarkArts Studios decided to fork the project into Vulture's Eye, and continue the development.</p>
<p>As he is a member of the Slash'EM development team, and the Slash'EM source code is another Nethack adoption, he decided to make a new version of that as well, called Vulture's Claw, that uses the same graphical interface.</p>
<p>At about the same time, I was thinking of doing the same thing. And when I found out that Clive was already working on it, we decided to join forces. The first version of both Vultures are ready for download, try them out if you like. And visit the forum when you have any questions.</p>
<p>We hope you have lots of fun playing them! </p>
<p>Frank Rademakers </p>
</div>
<div id="Menu">
<h3>Digital Guru</h3>
<a href="index.html">Home</a><br />
<a href="forum/index.php">Forum</a><br />
<a href="eye.html">Vulture's Eye</a><br />
<a href="claw.html">Vulture's Claw</a><br />
<a href="mantis/login.php">Bug tracker</a><br />
<a href="mailto:info@diguru.com">Mail us</a><br />
<h3>Search</h3>
<!-- Search Google -->
<form method="get" action="http://www.google.com/custom" target="mainframe">
<input type="image" class="submit" name="sa" value="Search" src="http://www.google.com/intl/en/logos/Logo_25blk.gif">
<input type="text" name="q" maxlength="255" value="" size=13> <br />
<input type="hidden" name="num" maxlength="4" value="3" size=1>
<input type="hidden" name="domains" value="diguru.com">
<input type="radio" class="radio" name="sitesearch" value="diguru.com" checked>DiGuru.com<br />
<input type="radio" class="radio" name="sitesearch" value="">WWW
</form>
<!-- Search Google -->
</div>
</body>
</html>The CSS
Code:
body {
margin:0px;
padding:0px;
font-family:verdana, arial, helvetica, sans-serif;
color:#eedd88;
background-color:black;
}
h1 {
margin:0px 0px 15px 0px;
padding:0px;
font-size:28px;
line-height:28px;
font-weight:900;
color:#ccc;
}
p {
font:12px/20px verdana, arial, helvetica, sans-serif;
margin:0px 0px 16px 0px;
padding:0px;
}
#Content>p {margin:0px;}
#Content>p+p {text-indent:30px;}
a {
color:#daa520;
font-size:11px;
text-decoration:none;
font-weight:600;
font-family:verdana, arial, helvetica, sans-serif;
}
a:link {color:#daa520;}
a:visited {color:#0aa520;}
a:hover {background-color:#eee;}
form {
font-size: 9px;
}
#Header {
margin:50px 0px 10px 0px;
padding:17px 0px 0px 20px;
/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
height:33px; /* 14px + 17px + 2px = 33px */
border-width:1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
line-height:11px;
background-color:#000000;
/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity.
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it.
IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style
declaration. The incorrect IE5/Win value is above, while the correct value is
below. See http://glish.com/css/hacks.asp for details. */
voice-family: "\"}\"";
voice-family:inherit;
height:14px; /* the correct height */
}
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct
length values to user agents that exhibit the parsing error exploited above yet get
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */
body>#Header {height:14px;}
#Content {
margin:0px 50px 50px 200px;
padding:10px;
}
#Menu {
position:absolute;
top:100px;
left:20px;
width:172px;
padding:10px;
background-color:#00000;
line-height:17px;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:150px;
}
/* Again, "be nice to Opera 5". */
body>#Menu {width:150px;}Someone on a Dutch forum told me how to fix it: remove the DOCTYPE and xmlns declaration headers from the pages in the iframe. YAY! But it works.
I have done many different kind of pages, plain html, frames, tables and including everything with perl or php, etc. My first forum was a heavily modified perl script that didn't use a database, as you didn't get php or MySQL with websites at that time.
But I wanted this site to be simple to maintain, and I think it is ugly and unconvenient to have your menus scroll off the screen, or use a lazy float with a latency of seconds.
I think there are much too many different ways and standards to build pages, which all result in pages that look more or less alike anyway: single, fixed pages, with some mouse-overs and floats that require you to scroll the page back up or down all the way to be able to use them.
But anyway, I'm happy it works as expected again.
I have done many different kind of pages, plain html, frames, tables and including everything with perl or php, etc. My first forum was a heavily modified perl script that didn't use a database, as you didn't get php or MySQL with websites at that time.
But I wanted this site to be simple to maintain, and I think it is ugly and unconvenient to have your menus scroll off the screen, or use a lazy float with a latency of seconds.
I think there are much too many different ways and standards to build pages, which all result in pages that look more or less alike anyway: single, fixed pages, with some mouse-overs and floats that require you to scroll the page back up or down all the way to be able to use them.
But anyway, I'm happy it works as expected again.
On decent browsers (read Opera, FireFox, Safari) you can use pure CSS so that your menu stays fixed whilst the rest of the page scrolls. For an example, try my site - http://www.diplo.co.uk/ - and choose 'minimal' from the 'skin' menu on left (doesn't work in IE). That allows you to change the CSS for the site on the fly. All the styles are done with CSS but, because IE is crap, it doesn't render all of them properly. IE is the bane of web developers lives.DiGuru said:
PS. and my site validates as XHTML strict - so there
Diplo said:On decent browsers (read Opera, FireFox, Safari) you can use pure CSS so that your menu stays fixed whilst the rest of the page scrolls. For an example, try my site - http://www.diplo.co.uk/ - and choose 'minimal' from the 'skin' menu on left (doesn't work in IE). That allows you to change the CSS for the site on the fly. All the styles are done with CSS but, because IE is crap, it doesn't render all of them properly. IE is the bane of web developers lives.
PS. and my site validates as XHTML strict - so there
Yes, that's exactly how I would want to have it as well, if not for IE.
