|
CSS - Ie On Xp Is Not Same As Ie On Vista !
this is my code and the display is different in IE on Vista,
the rounded containers alternating in colours are showing up with a staggered border and not a smooth rounded edge as it should be. is this a fault in IE for Vista? or yet another coding error i need fixing Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
window.onload=function() {
links=document.getElementsByTagName('a');
for(c=0;c<links.length;c++) {
if(links[c].className=='bm') { /*this specifies the bookmark links by class*/
links[c].onclick=function() {
bookmarks(this.title,this.href);
}
}
}
}
function bookmarks(title,url){
if(window.sidebar) {
window.sidebar.addPanel(title,url,'');
}
else {
if((window.opera)&&(window.print)){
lnk=document.createElement('a');
lnk.setAttribute('href',url);
lnk.setAttribute('title',title);
lnk.setAttribute('rel','sidebar');
lnk.click();
}
else {
window.external.AddFavorite(url,title);
}
}
}
</script>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function leapto(form) {
var myindex=form.dest.selectedIndex
location.href=(form.dest.options[myindex].value);
// You can output to ANY frame using: parent.[framename].location.href
}
// End -->
</SCRIPT>
<style type="text/css">
<!--
.verticalline { border-width: 2px; border-color: #FFFFFF; border-left-style: solid; height: 100%; }
.horizontalline { border-bottom-width: 2px; border-color: #999999; border-bottom-style: solid; height: 100%; }
.container1 { background:#799BD9; margin:0 5px;}
.rtop1, .rbottom1{ display:block; background:#507BCD; }
.rtop1 *, .rbottom1 *{ display: block; height: 1px; overflow: hidden; background:#799BD9; }
.container2 { background:#325EAF; margin:0 5px;}
.rtop2, .rbottom2{ display:block; background:#507BCD; }
.rtop2 *, .rbottom2 *{ display: block; height: 1px; overflow: hidden; background:#325EAF; }
.container3 { background:#FFFFFF; margin:0 5px;}
.rtop3, .rbottom3{ display:block; background:#507BCD; }
.rtop3 *, .rbottom3 *{ display: block; height: 1px; overflow: hidden; background:#FFFFFF; }
.menucontainer { background:#799BD9; margin:0 5px;}
.menurtop1, .menurbottom1{ display:block; background:#125892; }
.menurtop1 *, .menurbottom1 *{ display: block; height: 1px; overflow: hidden; background:#799BD9; }
.r1{ margin: 0 5px}
.r2{ margin: 0 3px}
.r3{ margin: 0 2px}
.r4{ margin: 0 1px; height: 2px }
a.one:link { color: #000; }
a.one:visited { color: #000; }
a.one:hover { color: #fff; }
a.one:active { color: #000; }
a.one { text-decoration: none; }
h1 { text-align: left; font: small tahoma; font-size: 12px; font-weight: bold; margin: 0 0; padding: 5; }
h2 { text-align: left; font: small tahoma; font-size: 12px; font-weight: bold; margin: 0 5; padding: 5; }
-->
</style>
</head>
<body bgcolor="#000000">
<table width="319" align="center" style="border-collapse:collapse;">
<tr>
<td width="311" height="126" valign="top" bgcolor="#000000">
<table cellpadding="8" style="border-collapse:collapse;">
<tr>
<td valign="top">
<div align="center">
<table border="1" cellpadding="8" bordercolor="#FFFFFF" bgcolor="#507BCD" style="border-collapse:collapse;">
<tr>
<td>
<div><table width="100%" border="2" bordercolor="#FFFFFF">
<tr>
<td><table width="100%" style="border-collapse:collapse">
<tr>
<td width="100%" height="121" align="center" valign="bottom" bgcolor="#125892"><img width="707" height="49" border="0"></td>
<td valign="top" bgcolor="#125892"> <div align="right"></div></td>
</tr>
<tr>
<td colspan="2" bgcolor="#125892">
<style>
<!--
A {color:#000000; font-weight: normal;}
A:hover {color: #0066FF; font-weight: normal;}
-->
</style>
<body>
<table width="100%" style="border-collapse:collapse;">
<tr>
<td height="21">
<div class="menucontainer" align="center"> <b class="menurtop1"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<a href="" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma">
m1</font></a> <b class="menurbottom1"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</td>
<td width="5%">
<font color="#FFFFFF" size="2" face="Tahoma">
3427 </font>
</td>
</tr>
</table> </td>
</tr>
</table></td>
</tr>
</table>
<table style="border-collapse:collapse;">
<tr>
<td valign="top">
<table style="border-collapse:collapse;">
<tr>
<td> </td>
</tr>
<tr>
<td><font color="#FFFFFF" size="4" face="Tahoma">
<a href="?m=10&y=2007" STYLE="text-decoration: none">
</a> </font></td>
</tr>
<tr><td>
<table width="100%">
<tr>
<td> <div class="container1"> <b class="rtop1"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<a class="one" href="?v=3612" target="_blank">
<h1>Big Star Wars Toys Collection -
And a nice thumbnail interface too</h1>
</a> submitted on 11-10-2007 Via
<a class="one" href="http://www.okfuture.net" target="_blank">OKFuture</a>
<b class="rbottom1"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div></td>
</tr>
<tr>
<td> <div class="container2"> <b class="rtop2"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<a class="one" href="?v=3611" target="_blank">
<h1>Haunted Memories - Pictures of people
that turn nasty when you catch them
at an angle </h1>
</a> submitted on 11-10-2007 <b class="rbottom2"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div></td>
</tr>
<tr>
<td> <div class="container1"> <b class="rtop1"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<a class="one" href="?v=3609" target="_blank">
<h1>Launchball - Tricky strategy game.
Get the ball to the goal by using
different objects</h1>
</a> submitted on 11-10-2007 <b class="rbottom1"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div></td>
</tr>
<tr>
<td> <div class="container2"> <b class="rtop2"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<a class="one" href="?v=3610" target="_blank">
<h1>Launchball - Tricky strategy game.
Get the ball to the goal by using
different objects</h1>
</a> submitted on 11-10-2007 <b class="rbottom2"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div></td>
</tr>
<tr>
<td> <div class="container1"> <b class="rtop1"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<a class="one" href="?v=3608" target="_blank">
<h1>Cuddly Tardis</h1>
</a> submitted on 11-10-2007 <b class="rbottom1"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div></td>
</tr>
</table>
</td></tr>
</table>
</td>
<td valign="top" class="verticalline"><table cellpadding="4">
<tr>
<td valign="top"> </td>
</tr>
</table>
</td>
</tr>
</table>
</div></td>
</tr>
</table>
</div></td>
<td rowspan="3" valign="top"> </td>
</tr>
<tr></tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</html>
Similar TutorialsHello, So my question is this: How do 'we' go about targeting browsers with IE7 between Vista and XP? The two versions render differently, and in my case, I need to be able to target one in a conditional comment (like I do for IE6 of course) to fix it in that version. The site is www.justmythoughts.com , and it renders correctly in IE7 Vista, however is a good 150px pushed to the side in IE7 XP. What is the 'new' remedy for this type of situation these days?? Is there any solution for this yet? Thanks, Nick I'm sure this is something stupid and simple I've overlooked.. So I am hoping that someone here can see what I am missing here.. I am FINALLY in the home stretch for this site, and I cannot for the life of me figure this out.. This only happens on the gallery pages.. The side border disappears when viewing the site in IE7 but ONLY under the Vista OS.. (At home I have IE7 and WinXP and the gallery pages display just fine..) http://clients.overthehillweb . com/hairisle/index.php?main_page=page&id=2&chapter=0 What the is different with IE7 and Vista? Screenshot of what's happening: http://i25.tinypic . com/2gtq4jr.png Perhaps a better question is this.. It appears that my method for applying that border to the center content and dropdown nav menu is not working well under IE7 with Vista (and for some folks XP and IE7). Is there a better way to apply this border to the center content and the nav menu that WILL work with IE7?? Im just playing around with CSS and Photoshop and made this so far:- http://www.o0matte0o.myby.co.uk/windows-vista/ Lazy Link It look as its ment to in IE7, Vista IE and IE6 (apart from the PNG Transparancy in IE6) but when I view the site in Firefox there are spaces between each of the sub titles and the Title on the Transparent part is not in the correct place can any one help to see where Im going wrong please? I have tested the CSS and XHTML and bouth complie to the standard so I cant see what Im doing wrong :S Code:
body { color:#565656; font-family: "Segoe UI", "Trebuchet MS", sans-serif; font-size: 80%; }
hr { display:none; }
img { border:none; }
body { padding:12px 0 25px; background-image:url(../images/background.png); }
h1 { padding:3px; font-size: 165%; padding-left:40px; }
h2 { font-size: 100%; padding-left:110px; line-height:8px; }
h3 { padding-left:225px; }
.p1, .p2, .p3, .p4, .p5 { padding-left: 230px; padding-right:15px;}
a { color:#6666FF; }
a:hover,a:active { background-color:#9999FF; color: #565656; }
#container { margin-left:10%; }
#pageHeader { width:822px; height:80px; overflow:hidden; background-image:url(../images/header-test.png); text-shadow:#333333;}
#quickSummary { width:822px; background-image:url(../images/content.png);}
#preamble { width:822px; background-image:url(../images/content.png); }
#explanation { width:822px; background-image:url(../images/content.png); }
#participation { width:822px; background-image:url(../images/content.png); }
#benefits { width:822px; background-image:url(../images/content.png); }
#requirements { width:822px; background-image:url(../images/content.png); }
#footer { width:822px; height:27px; text-align:center; background-image:url(../images/footer-test.png); }
#linkList { position:absolute; float:left; top:100px; }
#linkList h3 { padding-left:30px; padding-top:1px }
#linkList h3, li, ul { list-style:none; display:list-item; }
Any other idears people comment (noting that the XHTML file should not be changed as Im trying to only do every thing with CSS like the name of the site HTML page is from.) |
|||||||