18 replies [Last post]
randomguy132
randomguy132's picture
Offline
Enthusiast
NYC
Last seen: 16 years 39 weeks ago
NYC
Timezone: GMT-5
Joined: 2005-03-02
Posts: 69
Points: 0

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!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 17 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

3 Major IE -&gt; 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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

randomguy132
randomguy132's picture
Offline
Enthusiast
NYC
Last seen: 16 years 39 weeks ago
NYC
Timezone: GMT-5
Joined: 2005-03-02
Posts: 69
Points: 0

3 Major IE -&gt; 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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 17 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

3 Major IE -&gt; 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. Laughing out loud

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

randomguy132
randomguy132's picture
Offline
Enthusiast
NYC
Last seen: 16 years 39 weeks ago
NYC
Timezone: GMT-5
Joined: 2005-03-02
Posts: 69
Points: 0

3 Major IE -&gt; 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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 17 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

3 Major IE -&gt; 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 Sad

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

randomguy132
randomguy132's picture
Offline
Enthusiast
NYC
Last seen: 16 years 39 weeks ago
NYC
Timezone: GMT-5
Joined: 2005-03-02
Posts: 69
Points: 0

3 Major IE -&gt; 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.

Helen
Offline
Enthusiast
NYC
Last seen: 16 years 45 weeks ago
NYC
Timezone: GMT-6
Joined: 2005-01-16
Posts: 135
Points: 0

3 Major IE -&gt; 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)

randomguy132
randomguy132's picture
Offline
Enthusiast
NYC
Last seen: 16 years 39 weeks ago
NYC
Timezone: GMT-5
Joined: 2005-03-02
Posts: 69
Points: 0

3 Major IE -&gt; 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?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

3 Major IE -&gt; 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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 17 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

3 Major IE -&gt; 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.Smile --gt

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 17 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

3 Major IE -&gt; 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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

randomguy132
randomguy132's picture
Offline
Enthusiast
NYC
Last seen: 16 years 39 weeks ago
NYC
Timezone: GMT-5
Joined: 2005-03-02
Posts: 69
Points: 0

3 Major IE -&gt; 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

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

3 Major IE -&gt; 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.

randomguy132
randomguy132's picture
Offline
Enthusiast
NYC
Last seen: 16 years 39 weeks ago
NYC
Timezone: GMT-5
Joined: 2005-03-02
Posts: 69
Points: 0

3 Major IE -&gt; 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.

Helen
Offline
Enthusiast
NYC
Last seen: 16 years 45 weeks ago
NYC
Timezone: GMT-6
Joined: 2005-01-16
Posts: 135
Points: 0

3 Major IE -&gt; 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? Smile

randomguy132
randomguy132's picture
Offline
Enthusiast
NYC
Last seen: 16 years 39 weeks ago
NYC
Timezone: GMT-5
Joined: 2005-03-02
Posts: 69
Points: 0

3 Major IE -&gt; Mozilla Problems

Which looks great, csstest.html, or csstest2.html?

Helen
Offline
Enthusiast
NYC
Last seen: 16 years 45 weeks ago
NYC
Timezone: GMT-6
Joined: 2005-01-16
Posts: 135
Points: 0

3 Major IE -&gt; Mozilla Problems

Whups, sorry, I meant csstest.

csstest2 has troubles, see attached screenshot in Mac Firefox:

randomguy132
randomguy132's picture
Offline
Enthusiast
NYC
Last seen: 16 years 39 weeks ago
NYC
Timezone: GMT-5
Joined: 2005-03-02
Posts: 69
Points: 0

3 Major IE -&gt; 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.