for mig at se er ser det rigtigt ud i de andre browsere og forkert ud i IE - men IE får det bare til at se normalt ud ;-)
Nå, men det som du har kan man sige gjort forkert, er at du ikke har medregnet padding med i din samlede bredde - hvilket man efter standarden skal gøre. IE har åbenbart en anderledes måde at tolke tingene på, og overskriver faktisk den givne bredde med en, som får tingene til at se meget bedre ud. Når man retter i det, laver IE dog stadig noget mærkeligt med bredden, som jeg ikke kunne rette på andre måder, end at bruge et trick hvor man udnytter en CSS selector, som IE ikke forstår, til at lave en ny bredde med:
body,html {height:100%;}
body {
margin: 0px;
font: 10px verdana, arial;
background-color:#fff;
}
a:link { color: #AAB500; text-decoration: none;}
a:visited { color:#AAB500; text-decoration: none;}
a:hover { color: #AAB500; text-decoration: underline;}
td {
font: 10px verdana, arial;
color: #646464;
}
img {
border: 0px;
}
#content1_top {
background: url(
http://www.casual.dk/v4test/images/content1_top.gif) no-repeat;
height: 60px;
}
#content1_middle {
background: url(
http://www.casual.dk/v4test/images/content1_bottom.gif) bottom left no-repeat;
height: 276px;
overflow: auto;
padding-left:170px;
padding-right:10px;
width:462px;
float:left;
}
HTML > BODY #content1_middle {width:282px;}
#content1_right {
background: url(
http://www.casual.dk/v4test/images/content1_right.gif) no-repeat;
width: 15px;
margin-left:-15px;
height: 245px;
float:left;
}
.venstre {
width: 485px;
height:305px;
float:left;
background: url(
http://www.casual.dk/v4test/images/content1_middle.gif) no-repeat;
}
.menu {
width: 166px;
float:left;
}
og rettelser i HTML koden (#content1_bottom er her helt taget ud):
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 100%;"><tr>
<td style="width: 100%;height:100%" valign="middle">
<div class="venstre">
<div id="content1_top"> </div>
<div id="content1_middle">
<img alt="" src="
http://www.casual.dk/v4test/images/square_01.gif" /><b>8 June 2004</b><br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed arcu. Vestibulum egestas. Integer tincidunt. Quisque consequat aliquam nulla. Nulla lacus quam, laoreet sed, tincidunt eu, porta id, sem. Integer nonummy. In pellentesque arcu vel libero. Ut vestibulum eros non ligula. Phasellus nonummy, pede sed ultricies elementum, tortor lectus suscipit nibh, placerat tincidunt leo velit non nunc. Nulla faucibus scelerisque augue. Nunc lacinia, tortor et feugiat euismod, velit tortor fringilla augue, sagittis suscipit sapien risus ac risus. Mauris vel sem sed dui aliquet laoreet. Etiam tincidunt diam vitae felis.
</div>
<div id="content1_right"> </div>
</div>
<div class="menu">
<a href='index.php' onmouseover="skiftbillede('menu1','
http://www.casual.dk/v4test/images/menu_01_over.gif')"
onmouseout="skiftbillede('menu1','
http://www.casual.dk/v4test/images/menu_01.gif')"><img alt="" src="
http://www.casual.dk/v4test/images/menu_01.gif" style="width:166px; height:30px;" name='menu1' /></a>
<a href='portfolio.php' onmouseover="skiftbillede('menu2','
http://www.casual.dk/v4test/images/menu_02_over.gif')"
onmouseout="skiftbillede('menu2','
http://www.casual.dk/v4test/images/menu_02.gif')"><img alt="" src="
http://www.casual.dk/v4test/images/menu_02.gif" style="width:166px; height:30px;" name='menu2' /></a>
<a href='whatever.php' onmouseover="skiftbillede('menu3','
http://www.casual.dk/v4test/images/menu_03_over.gif')"
onmouseout="skiftbillede('menu3','
http://www.casual.dk/v4test/images/menu_03.gif')"><img alt="" src="
http://www.casual.dk/v4test/images/menu_03.gif" style="width:166px; height:30px;" name='menu3' /></a>
<a href='about.php' onmouseover="skiftbillede('menu4','
http://www.casual.dk/v4test/images/menu_04_over.gif')"
onmouseout="skiftbillede('menu4','
http://www.casual.dk/v4test/images/menu_04.gif')"><img alt="" src="
http://www.casual.dk/v4test/images/menu_04.gif" style="width:166px; height:30px;" name='menu4' /></a>
<table cellspacing='0' cellpadding='0'>
<tr><td><a href="links.php" onMouseover="changeImg('links3', 'links4', 'links2', 'links')" onMouseout="changeImgBack('links')"><img alt="" src="
http://www.casual.dk/v4test/images/menu_05.gif" name="links" border='0' /></a><a href="shoutbox.php" onMouseover="changeImg2('shoutbox3', 'shoutbox4', 'shoutbox2', 'shoutbox')" onMouseout="changeImgBack2('shoutbox')"><img alt="" src="
http://www.casual.dk/v4test/images/menu_06.gif" name="shoutbox" border='0' /></a><a href="contact.php" onMouseover="changeImg3('contact3', 'contact4', 'contact2', 'contact')" onMouseout="changeImgBack3('contact')"><img alt="" src="
http://www.casual.dk/v4test/images/menu_07.gif" name="contact" border='0' /></a></td></tr><tr><td><img alt="" src="
http://www.casual.dk/v4test/images/menu_051.gif" name="fam1" border='0' /><img alt="" src="
http://www.casual.dk/v4test/images/menu_061.gif" name="fam3" border='0' /><img alt="" src="
http://www.casual.dk/v4test/images/menu_071.gif" name="fam4" border='0' /></td></tr></table>
</div>
</td></tr></table>
Tag dig ikke af de url'erne på billederne - dem brugte jeg bare da jeg skulle teste det hele.
Overskrivelsen af width'en ligger her:
#content1_middle {
background: url(
http://www.casual.dk/v4test/images/content1_bottom.gif) bottom left no-repeat;
height: 276px;
overflow: auto;
padding-left:170px;
padding-right:10px;
width:462px;
float:left;
}
HTML > BODY #content1_middle {width:282px;}
Hvis man, som du gjorde før, bruger width:462px; så bliver den aktuelle bredde faktisk på 642px når man lægger padding til. Problemmet kunne måske være løst anderledes med at bruge marginer istedet for padding, men så skal billderne jo laves om (og det gider jeg ikke lige bøvle med ;-)
Håber det virker lidt bedre end det før...
