FF problem

daygon · #1 Jan 29th, 2007, 19:26

I have a post in the critique and my site looks fine in IE but when you look at it in fire fox, it doesn't give the same results. Could someone explain this and maybe help me out to fix it.

karinne · #2 Jan 30th, 2007, 12:51

got a link?

daygon · #3 Jan 30th, 2007, 15:52

http://schools.cfisd.net/cysprings/index.html

ukgeoff · #4 Jan 30th, 2007, 16:11

Can I suggest you run your page through a validator.

You have a number of problems including invalid values and the use of propriatory attributes, eg, an attribute that only IE understands.

moojoo · #5 Jan 30th, 2007, 16:46

Right off the bat just looks like you need a clearing div placed at the bottom of your code right before the closing of the containing div.

Edit: I looked at your source and why are you using tables and divs? Just do the layout entirely with CSS and no tables man!

Looks like you let Dreamweaver take the wheel on that one. =/

"<font color="000000" size="2">" is depreciated and image maps will just make your life that much more difficult. I will be happy to help you build a standards compliant version. Not to be mean but using DW's WYSIWYG editor will cause you problems like this.

"<script language="JavaScript">" should be "<script type="text/javascript">" etc..

"<DIV id=nav>" should be "<div id="nav">"

1. Separate the design from the content by using a external CSS style sheet

2. Lose the tables in exchange for divs (Which will ultimately reduce the amount of code you need and make your site faster and easier to update/edit)

3. You need to lose the outdated tags i.e. <font> etc and add alt tags to your images.

4. Your main nav should be styled lists. Not sure if you have viewed the page with styles disabled or in a print preview but its not working out so hot.

We will be happy to help you with all of this. This may seem harsh but at your pages current state I don't think a "fix" is the answer. In this case a complete overhaul is required. The source is really too jacked up to correct and a complete rewrite would probably be easier and faster.

daygon · #6 Jan 30th, 2007, 17:59

Basicly like i said... it has to be noob friendly for the people who put in the info. I'm not the one that puts in the info, its the students that put that it and i had restrictions by my teacher. My grade depended on it. The tables stay. The java script is from fw because thats where i made the menu. Again another restriction from my teacher. I havent went back to fix thos problems yet and i didnt figure thats why ff wasnt working properly. I shall go and fix those problems. But will that solve the browser issues?

moojoo · #7 Jan 30th, 2007, 18:12

Well you should then correct your teacher and tell him you have a better way. Tell him to talk to me. I will give you my cell phone number. =) of course he may not be happy at the end of the convo and I wouldn't want to get you in trouble.

The menus should be done with CSS and unordered lists, the content should be structured using heading tags, paragraph tags etc not breaks, font tags and such. The layout is breaking in FF because Firefox unlike IE actually renders pages correctly. IE leaves room for error because of its sloppy engine.

As for being "noob" friendly, a well structured and semantically coded page is far easier to use, view and edit.

Just aggravates me that people are teaching students to use "Frontpage" ethics and code practice. Not your fault but I feel very strongly about this. I am an Intarweb hippy heh.

karinne · #8 Jan 30th, 2007, 18:17

Very well said moojoo ... he (teacher) can call me too, I'll give him a peace of it

daygon · #9 Jan 30th, 2007, 18:19

Thats the way i wanted to do the menus but he's like "no no no i dont want there to be any problems" becaue we had alot of problems with the menu last year. Trust me. I think he's talking to my math teacher to fail me to keep me here another year because he cant build a site worth crap. But im going to try to fix what i can to be able to view the site in all browsers. It just has to be w3 compliant no? If i fix those errors it should work right?

moojoo · #10 Jan 30th, 2007, 18:20

The validator is a tool not a fix all. Your code can validate and still be broken.

daygon · #11 Jan 30th, 2007, 18:20

I've argued and argued with him but like i said my grade depends on it. And i really wanna pass being that this is my senior year and all. Wanna leave on a good record.

daygon · #12 Jan 30th, 2007, 18:22

I have to do all that just to make it work on all browsers? Because thats alot of work. (in a sense)

karinne · #13 Jan 30th, 2007, 18:22

Give me a few minutes I'll whip something up for ya

karinne · #14 Jan 30th, 2007, 19:16

Well ... I'm not completely done but the menu work and it's CSS only.

Here's the html

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-CA" xml:lang="EN-CA">

<head>
    <title>Cypress Springs High School</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" media="all" href="css/styles.css" />
</head>

<body>

<div id="navigation">

<ul class="current">
    <li><a href=""><span>1.</span> Home</a></li>
</ul>

<ul class="select">
    <li><a href=""><span>2.</span> Information<!--[if IE 7]><!--></a>
    <!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="sub">
        <li><a href="">Directions</a></li>
        <li><a href="">Registration</a></li>
        <li><a href="">Profile</a></li>
        <li><a href="">Calendars</a></li>
        <li><a href="">Performance</a></li>
        <li><a href="">Improvement</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>

<ul class="select">
    <li><a href=""><span>3.</span> CSHS History<!--[if IE 7]><!--></a></li>
</ul>

<ul class="select">
    <li><a href=""><span>4.</span> Staff<!--[if IE 7]><!--></a>
    <!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="sub">
        <li><a href="">Office</a></li>
        <li><a href="">Administration</a></li>
        <li><a href="">Couselors</a></li>
        <li><a href="">Teachers</a></li>
        <li><a href="">Nurse</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>

<ul class="select">
    <li><a href=""><span>5.</span> Academics<!--[if IE 7]><!--></a>
    <!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="sub">
        <li><a href="">English</a></li>
        <li><a href="">Math</a></li>
        <li><a href="">Science</a></li>
        <li><a href="">Social Studies</a></li>
        <li><a href="">L.O.T.E</a></li>
        <li><a href="">View all</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>

<ul class="select">
    <li><a href=""><span>6.</span> Activities<!--[if IE 7]><!--></a>
    <!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="sub">
        <li><a href="">Athletics</a></li>
        <li><a href="">Organizations</a></li>
        <li><a href="">Performing Arts</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>

<ul class="select">
    <li><a href=""><span>7.</span> Library<!--[if IE 7]><!--></a></li>
</ul>

</div>

<div id="header"><h1>Cypress Springs High School</h1></div>

<!-- Put content here -->

<div class="clear"></div>

<div id="footer"></div>

</body>
</html>

Here's the css

Code: Select all

* {
    margin: 0;
    padding: 0;
}

html {
    background: #000 url(../i/gradient.jpe) repeat 0 0;
    padding: 30px 0;
    color: #000;
    font: 12px Arial, Arial, Helvetica, sans-serif;
}

body {
    background: #fff;
    margin: 0 auto;
    width: 700px;
    border-top: 3px solid #808080;
    border-bottom: 3px solid #808080;
}

/* -------------- common elements ------------------*/
.clear {
    clear: both;
}

#header h1 {
    display: none;
}


/* -------------- main separations ------------------*/
#header {
    width: 700px;
    height: 125px;
    background: #fff url(../i/Banner.jpe) no-repeat 0 0;
    margin-bottom: 10px;
}


#footer {
    background: #fff url(../i/Logo-panther-thing.gif) no-repeat 0 0;
    width: 700px;
    height: 124px;
}

/* -------------- main navigation -------------------*/
#navigation {
    width:700px;
    height: 50px;
    position:relative;
    background-color: #fff;
    border-bottom: 3px solid #808080;
    padding-top: 20px;
}

#navigation .select, #navigation .current {
    list-style:none;
    display:block;
}

#navigation li {
    display:inline;
    height:auto;
}

#navigation .select a, #navigation .current a {
    display: block;
    height: 35px;
    float: left;
    padding: 0 10px;
    text-decoration: none;
    line-height: 20px;
    white-space: nowrap;
    margin-left: 2px;
    font-size: 13px;
    font-weight: bold;
    color: #000;
}

#navigation .select a span, #navigation .current a span {
    color: #f00;
}

* html #navigation .select a, * html #navigation .current a {
    width:1px;
}

#navigation .select a:hover, #navigation .select li:hover a {
    border-color:#090;
    cursor:pointer;
}

#navigation .sub {
    display:none;
}

/* for IE5.5 and IE6 only */
#navigation table {
    position:absolute;
    border-collapse:collapse;
    left:0;
    top:0;
    font-size: 11px;
}

#navigation .current a {
    border-color:#046;
}


#navigation .sub li a:hover, #navigation .select a:hover .sub li a:hover, #navigation .select li:hover .sub li a:hover {
    background: #ccc;
    color:#000;
    text-decoration:underline;
}

#navigation .sub_active .current_sub a, #navigation .sub_active a:hover {
    background:#ccc;
    color:#000;
    text-decoration:underline;
}

#navigation .select li a:hover .sub, #navigation .select li:hover .sub {
    display:block;
    position:absolute;
    width:700px;
    top:40px;
    left:0;
    background:#fff;
    margin-top:1px;
    padding:0;
    z-index:100;
}

#navigation .sub, #navigation .sub_active {
    list-style:none;
}

#navigation .sub_active {
    display:block;
    position:absolute;
    width:700px;
    top:21px;
    left:0;
    background: #005984;
    margin-top:1px;
    padding:0;
    z-index:10;
    color:#000;
}

* html #navigation .sub_active, * html #navigation .select a:hover .sub {
    z-index:-1;
    margin-top:0;
    margin-t\op:1px;
}

#navigation .sub_active a {
    height:25px;
    float:left;
    text-decoration:none;
    line-height:24px;
    white-space:nowrap;
    font-weight:normal;
}

#navigation .sub_active a, #navigation .select a:hover .sub li a, #navigation .select li:hover .sub li a {
    display:inline;
    background:#666;
    padding:0 10px;
    margin:0;
    width:auto;
    white-space:nowrap;
    font-weight:normal;
    border:0;
    color:#fff;
    height:25px;
    line-height:24px;
}

hope this helps a bit

That was fun ... never done one of those menus before

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
First image problem and inline list problem	konnor5092	Web Page Design	8	Dec 1st, 2007 09:08

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
FF problem