| Raw Kuts |
07-17-2004 08:39 PM |
Valid XHTML 1.0 Strict & CSS? IE implodes...
Making a page to replace this god awful site http://gcrc.ucsd.edu/ (if you look at the source, it's made by MS Word :eek:)
EDIT: Forgot a link to the site... http://rawhide.homelinux.org:1201/html/gcrc
I was making it and checking it in Windows 2000, Firefox 0.9.2
When I got home, I checked it in Konqueror 3.2.3, Firefox 0.9.2, and Opera 7.5.2, and eLinks 0.9.1-r1 :D
http://rawhide.homelinux.org:1201/im...owser-test.png
As you can see all displayed it pretty well, I have to change how far the title gets pushed down, but that's not a big deal. Note the curve looks a little funky and misplaced. Try resizing the font, ohhhhh, ahhhhh, the curve moves with it.
I try it in Internet Explorer, and it's completly fucked. The left menu bar doesn't float on the left, it is pushed to the right as far as the images would be if they wern't covered up by the oversided top bar. Is it worth it trying to get the image resizing working in IE, or should I just go back to fixed width images for the curve, or do browser detection and do fixed with for just IE? Is it my use of CSS that's doing it, or is it IE?
stdTheme.css
Code:
body {
background: #FFFFFF;
font-family: Verdana, Arial, Geneva, sans-serif, Helvetica, Utopia, Times;
color: #3A3A3A;
}
p { text-indent: 1.5em; }
a { text-decoration: none; }
img.curve { float: left; height: 1.42em; clear:left; }
img.validator { border: 0; height: 3em; }
h3#topBarTitle { position: absolute; top: 2.5em; left: 8em; }
.topBarContainer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2.91em;
background: #333399;
}
.leftMenuContainer {
display: block;
position: absolute;
padding: 9em 0 0 0;
width: 6.49em;
height: 100%;
background: #333399;
}
.leftMenuItem {
display: block;
left: 1em;
width: 6em;
height: .66em;
color: #CCCC99;
font-weight: bold;
text-decoration: none;
}
div.leftMenuItem a {
display: block;
padding: .05em .1em .05em .1em;
left: 1em;
width: 6em;
color: #CCCC99;
}
div.leftMenuItem a#home { width: 3.3em; }
div.leftMenuItem a#overviews { width: 5.8em; }
div.leftMenuItem a#resources { width: 5.7em; }
div.leftMenuItem a#studies { width: 4.1em; }
div.leftMenuItem a#forms { width: 3.4em; }
div.leftMenuItem a#events { width: 3.9em; }
div.leftMenuItem a#staff { width: 2.8em; }
div.leftMenuItem a#links { width: 2.6em; }
div.leftMenuItem a#comments { width: 5.9em; }
div.leftMenuItem a:hover { background-color: #3333BB; }
.mainContainer {
margin: 9em 0 5em 8em;
background: transparent;
border-color: #000022;
border-style: groove;
border-width: .1em
}
.mainItemContainer {
margin: .66em .66em .66em .66em;
padding: .33em;
background: #F5F5F5;
border-color: #CCCCCC;
border-style: groove;
border-width: .09em;
}
.mainItem { margin: .5em .5em .5em .5em; padding: .25em; }
.pageContainer { position: absolute; left: 0; top: 0; }
.footerContainer {
position: relative;
left: 75px;
text-align: center;
font-size: 65%;
}
index.php (not the php, but the resulting html. code tag didn't like it, so I had to use the php tag)
PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>GCRC - Home Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Keywords" content="GCRC, General Clinical Research Center, University of California, UCSD, School of Medicine,
National Institutes of Health, NIH, investigators, knowledge, home, page, index" />
<meta name="Description" content="The General Clinical Research Center at the University of California at San Diego - Home Page" />
<link rel="stylesheet" type="text/css" href="./stdTheme.css" />
</head>
<body>
<div class="pageContainer">
<div class="topBarContainer">
<img style="border:0" src="./images/curve-1.png" alt="Menu Curve 1" class="curve"/>
<img style="border:0" src="./images/curve-2.png" alt="Menu Curve 1" class="curve"/>
<img style="border:0" src="./images/curve-3.png" alt="Menu Curve 1" class="curve"/>
<img style="border:0" src="./images/curve-4.png" alt="Menu Curve 1" class="curve"/>
<img style="border:0" src="./images/curve-5.png" alt="Menu Curve 1" class="curve"/>
<img style="border:0" src="./images/curve-6.png" alt="Menu Curve 1" class="curve"/>
<h3 id="topBarTitle">Home Page</h3>
</div>
<div class="leftMenuContainer">
<div class="leftMenuItem">home</div><br />
<div class="leftMenuItem"><a href="./index.php?pageNum=2" title="overviews" id="overviews">overviews</a></div><br />
<div class="leftMenuItem"><a href="./index.php?pageNum=3" title="resources" id="resources">resources</a></div><br />
<div class="leftMenuItem"><a href="./index.php?pageNum=4" title="studies" id="studies">studies</a></div><br />
<div class="leftMenuItem"><a href="./index.php?pageNum=5" title="forms" id="forms">forms</a></div><br />
<div class="leftMenuItem"><a href="./index.php?pageNum=6" title="events" id="events">events</a></div><br />
<div class="leftMenuItem"><a href="./index.php?pageNum=7" title="staff" id="staff">staff</a></div><br />
<div class="leftMenuItem"><a href="./index.php?pageNum=8" title="links" id="links">links</a></div><br />
<div class="leftMenuItem"><a href="./index.php?pageNum=9" title="comments" id="comments">comments</a></div><br />
</div>
<div class="mainContainer">
<div class="mainItem">
Look at the text that isn't inside a mainItemContainer. we are all doomed. the background shows through!<br />
Whatever are we to do? maybe put it in a container of some kind...
</div>
<div class="mainItemContainer">
Hallo container. how are you doing. you are very ugly, but at least you make me readable. What to do, I hate thee, yet I'm drawn to you're container like qualities
<div class="mainItemContainer">
Now this is just silly.<br />
A box inside a box... have you gone mad?<br />
Let's just call it quits now, because you obviously don't understand the intricite workings of the silliness of having a box inside of a box
</div>
</div>
<br />
<br />
<div class="mainItemContainer">
she sells sea shells by the sea shore<br />
<p>holy stromboli bolongie. a paragraph, who woulda thunk it. Well, now we've started the paragraph may as well have something substantial here.
Let's start with horrible Capitalization Of Every Word In A Title. It's very annoying eh? what about making everything lowercase?
well, that's ok if the font doesn't have uppercase, but otherwise, it gets kind of repetitive or some other word that makes more sense there...<br />
Wait, we made a newline, but we forgot to end the paragraph. so in fact this is the same paragraph. shame on you, that's bad mojo</p>
<p>And what about making the current page link more distinguishable. You can't really tell it's not a link until you move you're mouse over it. But how to fix it.
And also change the colors, they are fugly, nauseating, and downright confusing</p>
<br />And how the do you get the boxes to only be as long as the words are for the menu on the left... the world may never know
</div>
</div>
<div class="footerContainer">
<p>
<a href="./index.php?pageNum=10" title="SITEMAP" id="SITEMAP">SITEMAP</a> |
<a href="./index.php?pageNum=11" title="HELP" id="HELP">HELP</a> |
<a href="./index.php?pageNum=12" title="PRIVACY" id="PRIVACY">PRIVACY</a>
</p>
<p>
<a href="http://jigsaw.w3.org/css-validator/"><img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" class="validator"/></a>
<a href="http://validator.w3.org/check?uri=referer"> <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" class="validator"/></a>
</p>
</div>
</div></body>
</html>
|
