Sun, 2005-03-06 22:21
For some reference, here's what I'm currently working on:
http://georgio.pcplayground.com/csstest.html
It looks exactly like I want it to in IE, however in Mozilla I have three big problems with it.
1) (The least important) There is no blue border showing up around my updates (the main page posts in the <h4>).
2) I want the updates to take up the whole page minus the 133 pixels that the right navigation bar takes up.
3) In the right navigation bar, there is a gap between the images which I would like to make gone.
This is all linked to an external stylesheet:
http://georgio.pcplayground.com/csstest.css
That's the only way I know how to do CSS right now, so if any of your solutions involve putting the CSS directly onto the HTML page, please elaborate somewhat.
Thanks!
Sun, 2005-03-06 23:06
#1
3 Major IE -> Mozilla Problems
Before going any further, you should fix the errors in your xhtml source.
It's pretty much a lost cause to debug the css if the html is bad.
cheers,
gary
Mon, 2005-03-07 00:14
#2
3 Major IE -> Mozilla Problems
Interesting, thanks. I did not know the HTML had to be compliant with XHTML, now I need to read up on this and make some changes.
Mon, 2005-03-07 05:09
#3
3 Major IE -> Mozilla Problems
XHTML is actually stricter than html. When served as text/html, the browser treats it as html with all the fault tolerance. If the xhtml is served as application/xhtml+xml, its natural MIME type, there is no fault tolerance, and the smallest error means no display at all.
For an example, view this XHTML Doc. View in a modern browser. IE is not a modern browser. This xhtml doc has author defined elements. It will not validate only because I have not published a public DTD.
Now view this broken XHTML Doc. This file is a duplicate of the first except that one closing tag was removed.
You can try to open the file in IE. My IE says it doesn't know what kind of file it is and would I like to save to disk or open in Firefox. 
cheers,
gary
Mon, 2005-03-07 05:48
#4
3 Major IE -> Mozilla Problems
Interesting, but I got a 404 error with both pages.
(Loading with Firefox.)
As for the XHTML, I'm trying to conform my HTML page to it, and I've got it down from 120something errors to 33.
The remaining errors that it shows me however, I just don't understand, if someone could enlighten me as to what they mean, what to avoid, and how to fix them, that would be spectacular.
Edit: Sorry, I forgot to mention the new link:
http://georgio.pcplayground.com/csstest2.html
Thanks.
Mon, 2005-03-07 06:39
#5
3 Major IE -> Mozilla Problems
You've got about three or four errors repeated a time or three.
A replaced element like img or br must be self closed, thus; <img /> or <br />
Target is a deprecated attribute and is not allowed in html4 strict or xhtml1.0 strict. If you want to open a new window, you should use javascript.
Notice the improperly nested elements;
<h4>
<strong>Big Update<br />posted...<br /><br />
<p>
</strong>Let's see.... <br />Godspeed.
</h4> Try again on my pages. My host has been flakey, I was getting 404s about every third try
cheers,
gary
Mon, 2005-03-07 07:08
#6
3 Major IE -> Mozilla Problems
Thanks, I have it down to 9 errors now.
What does this mean:
"document type does not allow element "br" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag"
And I'll work on getting the target thing to use JavaScript, many thanks.
As for your pages, I see them now after a couple refreshes. Interesting, however when I loaded the first page in IE I was able to see it just as well as I was in FireFox.
Mon, 2005-03-07 07:18
#7
3 Major IE -> Mozilla Problems
randomguy132 wrote:
Thanks, I have it down to 9 errors now.
What does this mean:
"document type does not allow element "br" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag"
It means you're using <br /> for your layout between elements, instead of within a proper element where they belong. From your page source:
Quote:
<h2>
<img src="http://georgio.pcplayground.com/logo.jpg" alt="logo" />
</h2>
<br /> < ~~~ these don't belong here
<br /> < ~~~
<br /> < ~~~
<br /> < ~~~
<h4> ...
</h4>
If you want space between the <h2> and <h4> texts, you can get it by adding margins to the elements themselves, like for instance:
h2 {margin-bottom: 20px;} (you can use px, em, %, etc to get the distance you need)
Mon, 2005-03-07 07:35
#8
3 Major IE -> Mozilla Problems
Excellent, many thanks, I am now down to this one pesky error - the target="blank" opening a new window.
I understand it's not supported in XHTML, and I should use JavaScript, but when I tried using a script it just erupted in errors.
The script I tried to use was:
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function Start(page) {
OpenWin = this.open(page, "CtrlWindow", "toolbar=yes,menubar=yes,location=yes,scrollbars=yes,resizable=yes");
}
// End -->
</SCRIPT>
</HEAD>
<BODY>
<a href="javascript:Start('http://interactives.alxnet.com/cgi-bin/slither/Driver.py/InterActives/Guestbook/Guestbook.render?guestbook_id=33984')";>
<img src="http://homepages.nyu.edu/~wlb211/layout/guestbook3.gif"></a>
Is there something better I can use?
Mon, 2005-03-07 08:33
#9
3 Major IE -> Mozilla Problems
<a href="http://yourlink.com/webpage.htm" onclick="window.open(this.href, 'new');false;">
Its better to place the link in its correct place, then the user will see where they are going in the status bar as normal. Also if they have javascript disabled they will still go to the place you are directing them.
Mon, 2005-03-07 09:01
#10
3 Major IE -> Mozilla Problems
The syntax would be something like this;
<a href="http://someurl.com/"
onclick="window.open('http://someurl.com/'); return false;">
click here</a>The reason you have both the href and window.open() method is so that if javascript is not enabled, the link will operate normally. If js works, the 'return false' stops the link from activating. cheers,
gary
*That's what I get for stopping to make a sandwich, Chris jumps up and beats me to the punch.
--gt
Mon, 2005-03-07 09:27
#11
3 Major IE -> Mozilla Problems
Now that your html is about valid, try this css
body {
padding: 0;
font-family: tahoma, arial, helvetica;
font-size: .75em;
color: #000000;
background-color: #CCCCCC; }
A:link { color: blue; } /* unvisited link */
A:visited { color: blue; } /* visited links */
A:active { color: blue; } /* active links */
img {border: 0;}
h1 {<!-- Main Nav Bar -->
text-align: right;
position: absolute;
top: 0;
right: 0;
width: 133px;
font-size: .8em;
background-color: #CCCCCC; }
h2 {<!-- Logo Placement -->
text-align: center;
margin-right: 150;
margin: 0;
margin-bottom: 20px;
font-size: 1.35em;
background-color: #CCCCCC; }
h3 {<!-- Top Menu -->
text-align: center;
margin-right: 150px;
font-size: 1.25em;
color: #000000;
background-color: #DDDDDD; }
h4 {<!-- Updates -->
text-align: left;
position: relative;
border: 2px solid blue;
margin-top: 5px;
margin-right: 150px;
padding: 3px;
font-size: 1em;
background-color: #DDDDDD; }
h5 {<!-- First Update -->
text-align: left;
position: relative;
border: 2px solid blue;
margin-top: 55px;
margin-bottom: 2px;
margin-left: 2px;
margin-right:150px;
padding: 3px;
background-color: #DDDDDD; }Is that closer to what you wanted?
Now work on the structure and semantics of the html.
cheers,
gary
Mon, 2005-03-07 13:52
#12
3 Major IE -> Mozilla Problems
Chris/Gary - problem with that JavaScript is it opens the page in both the window I'm in, and the new window, I just want a new page with the new URL, and the current page to not even refresh, is that possible?
As for the CSS, wow many thanks, it's still gonna take some work, but I'll try and tweak when I get back from class.
Sorry to keep changing it, but the current link is now reverted to:
http://georgio.pcplayground.com/csstest.html
Mon, 2005-03-07 14:26
#13
3 Major IE -> Mozilla Problems
where I had
<a href="http://yourlink.com/webpage.htm" onclick="window.open(this.href, 'new');false;">
it should be
<a href="http://yourlink.com/webpage.htm" onclick="window.open(this.href, 'new');return false;">
with that correction it works fine for me in IE6, FF1 and O7.51.
Mon, 2005-03-07 21:16
#14
3 Major IE -> Mozilla Problems
This Page Is Valid XHTML 1.0 Strict!
Excellent.
That's for both:
http://georgio.pcplayground.com/csstest.html
and
http://georgio.pcplayground.com/csstest2.html
csstest2.html functions fine in IE, and csstest.html is what I'm now working on conforming to work in Mozilla.
Then after that I'll dl Opera and see how it is there.
Mon, 2005-03-07 23:02
#15
3 Major IE -> Mozilla Problems
Looks great in all my Mac browsers - but your right-hand column is smack up against the viewscreen border & looks scrunched - can you give it (or at least the right-hand "Archived Updates" links) some room to the right?
Tue, 2005-03-08 00:20
#16
3 Major IE -> Mozilla Problems
Which looks great, csstest.html, or csstest2.html?
Tue, 2005-03-08 00:39
#17
3 Major IE -> Mozilla Problems
Whups, sorry, I meant csstest.
csstest2 has troubles, see attached screenshot in Mac Firefox:
Tue, 2005-03-08 00:45
#18
3 Major IE -> Mozilla Problems
Yeah that's what I thought.
csstest.html is better than csstest2.html in Firefox right now.
What I really want is to get a page working for both that looks like csstest2.html does in IE.
It'll get there, just needs some work.