Forum Moderators: mack
I've written the code in Notepad, and have checked it against W3C validators.
The style sheet (external) is
_____________________
div.index {width:20%;
position:absolute;
color: rgb(0,160,255);
font-family: sans-serif;
font-weight:bold;
font-size:large;
font-style:italic;}
div.normal {width:100%;
line-height:0.6}
_____________________
and the HTML is
_____________________
<BODY>
<DIV class="index"><P>Front Page<BR><BR>Latest Pictures<BR><BR>Gallery<BR><BR>Birth Statistics</P></DIV>
<iframe class="normal" align="right" position="absolute" height=75% width=80% top=0 src="http://www.google.co.uk">
</iframe>
<DIV class="normal">
<P><img src="images/name.gif"> <img src="images/email.gif"</P></DIV>
</BODY>
</HTML>
_____________________
Please could someone suggest some easy cross-browser fix? Or at least an attempt to make it work?
Thanks
Your positioning problem is that you have a conflict between your iframe html code requiring a width of 80% and your css .normal class requiring a width of 100%.
For whatever reasons NN7.1 is allowing the html to override the css and the others are not.
Change .normal to width: 80%;
I've now changed a few bits on the codes, including entering them into a table... and I have different and still wrongly placed renditions! And they're all different. Perhaps they'll be clearer tomorrow, after some sleep (3am here).
Nothing changed on the CSS.
Thanks
Jaguarette
_________________________
<BODY>
<TABLE width="100%">
<TR height="80%" width="20%">
<TD><P><DIV class="index">Front Page<BR><BR>Latest Pictures<BR><BR>Gallery<BR><BR>Birth Statistics</DIV></P>
</TD>
<TD><IFRAME class="normal" src="http://www.google.co.uk"></IFRAME>
</TR>
<TR>
<TD> hi</TD>
<TD> <img src="images/name.gif"> <img src="images/email.gif"</P></TD>
</TR>
</TABLE>
</BODY>
_________________________
Your table re-design is something of a mish-mash. You may want to try using divs such as below:
CSS:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div#index {
position: absolute;
left: 0;
top: 0;
width: 20%;
height: 100%;
color: rgb(0,160,255);
font: italic bold large sans-serif;
text-align: center;
border: none;
}
div#index p {
margin: 20px 0 0 0;
padding: 0;
}
div#index a {
text-decoration: none;
}
div#frame, div#image {
float: right;
width: 80%;
left: 20%;
margin: 0;
padding: 0;
border: none;
line-height: 0.6;
}
div#frame iframe {
width: 100%;
height: 100%;
margin: 10px 0 0 0;
padding: 0;
line-height: 0.6;
border: 1px black solid;
}
div#image img {
width: 50px;
height: 50px;
padding: 0;
margin: 10px;
border: none;
{
HTML:
<!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" lang="en">
<head>
<title>Test Bed</title>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body >
<div id="index">
<p><a href="x">Front Page</a></p>
<p><a href="x">Latest Pictures</a></p>
<p><a href="x">Gallery</a></p>
<p><a href="x">Birth Statistics</a></p>
</div>
<div id="frame">
<iframe src="http://www.google.co.uk"></iframe>
</div>
<div id="image">
<img src="dog.jpg" height="50px" width="50px" alt="" /><img src="dog.jpg" height="50px" width="50px" alt="" />
</div>
</body>
</html>
In my testing I changed your classes to id's. This is somewhat personal preference and somewhat how often a div will be used in a page (id's once, classes multiple).
Hopefully the above will give you somethings to consider and help get your design working as you want.
Anyway, your advice was spot on & I now have a cross-browser CSS sheet. Can you recommend anywhere I can reread the logic of CSS? Like I said, I've read all about it at W3C, and I've been reading webmonkey and other sites, but I haven't captured the feel of it the way you obviously have:).
Thanks - Jaguarette
