-
I Have the Cart,...
...I am looking for the horse that goes with it.
Below is the resulting HTML from my ASP. I've tried to stick as close to the W3C standards as possible, but I'm still learning. What I have written passes the standards, but I feel like I'm leaving out stuff to do what I want.
The following looks like I expect in IE 5.5. The 'TabStrip' is 600px wide. Each of the 'TabButtons' takes just under 25% percent of that and are just under 150px each. It looks fine. Also, the 'Footer' is placed at the bottom of the page like I want.
But in Netscape 6, the page doesn't show up 600 wide. It shows up as narrow as possible. And in Opera 5.12, it not only shows up narrow, but short top to bottom.
Do I have to set some sort of body size or something? Is that allowed?
I'm also pleased to say that all three browsers will dynamicly hide the panels like I expect, and IE and Netscape will even change the buttons' color on mouse over.
All help will be appreciated.
Code:
<html>
<head>
<title>Dynamic Model</title>
<style type="text/css">
.TabStrip {
position: relative;
width: 600px;
}
.TabButton {
position: relative;
width: 23%;
border-color: #c0c0c0 #000000 #000000 #c0c0c0;
border-style: solid;
border-width: 1px;
background-color: #000a66;
color: #ffffff;
text-align: center;
}
.TabButtonHighlighted {
position: relative;
width: 23%;
border-color: #c0c0c0 #000000 #000000 #c0c0c0;
border-style: solid;
border-width: 1px;
background-color: #0ac0ff;
color: #ffffff;
text-align: center;
}
.PanelSpace {
position: relative;
width: 600px;
margin-top: 30px;
}
.Panel {
position: absolute;
top: 0px;
left: 0px;
}
.Footer {
position: absolute;
bottom: 0;
}
</style>
<script type="text/javascript">
function highlight(event) {
this.style.backgroundColor = "#0ac0ff";
this.style.color = "#ffffff";
}
function restore(event) {
this.style.backgroundColor = "#000a66";
this.style.color = "#ffffff";
}
function pushin(event) {
this.style.borderColor = "#000000 #c0c0c0 #c0c0c0 #000000";
}
function pushout(event) {
this.style.borderColor = "#c0c0c0 #000000 #000000 #c0c0c0";
}
function showPanel(which) {
var which = Number(which);
var currEl;
for (var i = 0; i < 4; i++) {
if (i != which) {
currEl = document.getElementById("TabButton" + i);
currEl.onmouseover = highlight;
currEl.onmouseout = restore;
currEl.style.color = "#ffffff";
currEl.style.backgroundColor = "#000a66";
currEl.onmousedown = pushin;
currEl.onmouseup = pushout;
currEl = document.getElementById("Panel" + i);
currEl.style.visibility = "hidden";
}
}
currEl = document.getElementById("TabButton" + which);
currEl.onmouseover = "";
currEl.onmouseout = "";
currEl.style.color = "#ffffff";
currEl.style.backgroundColor = "#000aff";
currEl.onmousedown = "";
currEl.onmouseup = "";
currEl = document.getElementById("Panel" + which);
currEl.style.visibility = "visible";
}
</script>
</head>
<body onload="JavaScript:showPanel('0');">
<div class="TabStrip">
<span class="TabButton" id="TabButton0"
onclick="JavaScript:showPanel('0');"
>Alpha</span>
<span class="TabButton" id="TabButton1"
onclick="JavaScript:showPanel('1');"
>Beta</span>
<span class="TabButton" id="TabButton2"
onclick="JavaScript:showPanel('2');"
>Gamma</span>
<span class="TabButton" id="TabButton3"
onclick="JavaScript:showPanel('3');"
>Delta</span>
</div>
<div class="PanelSpace">
<div class="Panel" id="Panel0">
<p>Alpha Text</p>
</div>
<div class="Panel" id="Panel1">
<p>Beta text.</p>
</div>
<div class="Panel" id="Panel2">
<p>Gamma text</p>
</div>
<div class="Panel" id="Panel3">
<p>Delta text</p>
</div>
</div>
<div class="Footer">
<span><a href="http://validator.w3.org/check/referer"><img
src="http://www.w3.org/Icons/valid-html401"
alt="Valid HTML 4.01!" height="31" width="88"></a>
</span>
<span><a href="http://jigsaw.w3.org/css-validator/validator-text.html"><img
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid HTML 4.01!" height="31" width="88"></a>
</span>
</div>
</body>
</html>
-
Okay, another problem. If I move the CSS elements to a seperate CSS file and use a link tag to incorporate the style sheets, I run into problems.
IE now won't set the correct width. Opera won't display the 'TabStrip' or 'TabButtons'. ***?
-
the width of span cannot be set, so use DIV instead.
-
Okay, I was considering them inline, which is why I was using span. Not a problem using div, i just have to set their float and margins to have the same look.
Now the page has the same width in all three browsers. It is still short top to bottom in Opera.
And I still can't get the link tag to work.
-
opera is not fully standards compliant, so don't feel bad about it not working there. As far as i understand it has some errors in it's DOM. Now, what exactly are you putting in the external .css file?
-
NEVERMIND
After I wrote this post I see that I never took the VBScript out of the CSS!
Opera Deviates from the standard as much as IE and Netscape do.
This is my CSS file
Code:
.TabStrip {
position: relative;
width: 600px;
}
.TabButton {
position: relative;
float: left;
width: <%=(1 / (UBound(TabNames, 1) + 1) * 100) - 2%>%;
border-color: #c0c0c0 #000000 #000000 #c0c0c0;
border-style: solid;
border-width: 1px;
background-color: #000a66;
color: #ffffff;
text-align: center;
margin-left: 3px;
}
.TabButtonHighlighted {
position: relative;
width: <%=(1 / (UBound(TabNames, 1) + 1) * 100) - 2%>%;
border-color: #c0c0c0 #000000 #000000 #c0c0c0;
border-style: solid;
border-width: 1px;
background-color: #0ac0ff;
color: #ffffff;
text-align: center;
}
.PanelSpace {
position: relative;
width: 600px;
margin-top: 30px;
margin-bottom: 30px;
}
.Panel {
position: absolute;
top: 0px;
left: 0px;
}
.Footer {
position: absolute;
bottom: 0;
}
The TabButtonHighlighted class isn't being used. I can't find a way to change the class of an object. I was trying to put all of the colors in the CSS file. But now if you want to change the TabButton colors, you have to change the colors in the JavaScript, too. Another thing I'm trying to find a fix for.
This is what is in my ASP now.
Code:
<!---<link rel="stylesheet" href="gabby.css" type="text/css">-->
<style type="text/css">
<!---#include virtual="/test/gabby.css"-->
</style>
I've commented the link tag out since it wasn't working and built the style block to do an include. I would like to delete that style block, but for now it does let me keep the CSSs seperate from the ASPs.
-
glad to see that you got that worked out. It's not that Opera intentionally dievates from the standards, it's just that they have some errors in their DOM, which will probably be corrected in later versions. Don't label me wrong, i'm not an opera basher :)
