PDA

View Full Version : Firefox



mysterybks
Mar 15th, 2007, 04:39 PM
Can anyone explain why Firefox doesn't show my pages well. Here are three examples:

1. www.mysteryloverscorner.com is the existing home page for my business. On IE it looks great. It's completely written in tables. On Firefox it doesn't look good.

2. www.sleuthedit.com/test.html was my first attempt at rewriting my home page to be CSS. On IE most of it looks great. Never could fix the bottom. On Firefox things are on top of each other.

3. www.sleuthedit.com/test2.html is my CSS version rewritten with tables but using a style sheet for the formatting of text, etc. On IE it looks great. On Firefox it still isn't very good.

Why with even tables doesn't Firefox look the same?

Dawn

karinne
Mar 15th, 2007, 04:51 PM
1. www.mysteryloverscorner.com is the existing home page for my business. On IE it looks great. It's completely written in tables. On Firefox it doesn't look good.

- Don't see a difference in IE6 and FF
- Missing a DOCTYPE.
- Validate


2. www.sleuthedit.com/test.html was my first attempt at rewriting my home page to be CSS. On IE most of it looks great. Never could fix the bottom. On Firefox things are on top of each other.

- Missing DOCTYPE


3. www.sleuthedit.com/test2.html is my CSS version rewritten with tables but using a style sheet for the formatting of text, etc. On IE it looks great. On Firefox it still isn't very good.

- Missing DOCTYPE


Moral of the story ... the proper DOCTYPE might fix your problem. I didn't check the code thoroughly since you didn't have one and couldn't really validate. Once code has a proper doctype and validated, then it's easier for us to see where the problem lies. ;)

mysterybks
Mar 15th, 2007, 04:57 PM
I just added:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

to both test.html and test2.html and Firefox is still messed up.

You're right, www.mysteryloverscorner.com doesn't look much different between the two. Only on Firefox does the graphic overlap the border below.

Dawn

karinne
Mar 15th, 2007, 05:00 PM
The DOCTYPE must be on the first line of the HTML document. :rolleyes:

mysterybks
Mar 15th, 2007, 05:20 PM
If I put that above <html>, then I lose ALL my formatting.

Dawn

karinne
Mar 15th, 2007, 05:22 PM
Well ... that's where it's suppose to go!

The basic HTML document with an XHTML Transitional DOCTYPE should look like this.


<!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>Some title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

<body>

</body>
</html>

Put it in the right spot, add a character encoding and validate. Then ... once you've ironed out the errors, we can have a better look at why it's not working properly.

mysterybks
Mar 15th, 2007, 06:29 PM
Okay. I added the items mentioned. It looks like I want it to in IE6. Firefox is still messed up. What else can I do? I have only adjusted the table version as the CSS version seemd to have even more troubles.

www.sleuthedit.com/test2.html

Dawn

Excavator
Mar 15th, 2007, 06:51 PM
Goodmorning Mysterybks,
Working off your link #2, the XHTML/CSS one...because I don't do tables.
I changed your CSS to look like this:

* {
margin: 0;
padding: 0;
}
body {
text-align: center;
background-color:99ccff;

}
a:link { color:000080;}
a:visited { color:0000FF;}
a:active {color: 000080;}

#container {
margin: 5 0 auto;
width: 762px;
text-align:left;
overflow: hidden;
}

#nav li {
display: inline;
padding: 0 20px 0 0;
font-family: Verdana;
font-size : x-small;
}
#nav {
background: navy;
padding: 4px;
margin: 0;
width: 762px;
}
#nav a:link {
text-decoration: none;
color: white;
}
#nav a:visited {
text-decoration: none;
color: silver;
}
.h1 {
font-family: "Times New Roman", Times, serif;
font-size: x-large;
color: 6600cc;
font-weight: bold;
text-align: center;
width: 762px;
float:right;
clear:none;
}
#nav2 {
background: black;
padding: 0;
margin: 0;
width: 762px;
line-height: 2px;
}
#main {
margin-top: 13px;
width: 762px;
overflow: hidden;
}
#main .sideimg {
background: url('../sitebuildercontent/sitebuilderpictures/books2.jpg') no-repeat top left;
float: left;
}
#main .sideimg2 {
background: url('../sitebuildercontent/sitebuilderpictures/myslovcrnrnav.jpg') no-repeat top left;
clear: none;
float: left;
}
#main .content {
padding:5px;
height: 130px;
width : 365px;
font-family: Verdana;
font-size: small;
font-weight: bold;
color : black;

}
#main .container {
float:left;
clear:none;
width:365px;
}
#main .contest {
margin-top: 10px;
height: 90px;
border: thin black solid;
clear:none;
float:left;
padding:2px;
width:300px;
}
#main .contest_image {
background-image: url('../sitebuildercontent/sitebuilderpictures/DaVinciCook.gif');
background-repeat: no-repeat;
background-position: top left;
}
#main .contest_content {

height: 130px;
width : 365px;
font-family: Verdana;
font-size: small;
font-weight: bold;
color : black;
margin-left:90px;
}
#main .join {
height: 183px;
width : 150px;
font-family: Verdana;
font-size: small;
color : black;
border: thin black solid;
float: right;
clear: none;
padding: 5px;
}
#main .new {
width : 150px;
font-family: Verdana;
font-size: x-small;
color : black;
border: thin black solid;
float: right;
clear: none;
padding: 5px;
}

#main .info {
margin-top:10px;
width : 500px;
font-family: Verdana;
font-size: x-small;
color : black;
border: thin black solid;
float: left;
clear: none;
padding: 5px;
}
#main .contact {
margin-top: 10px;
height: 173px;
clear:none;
float:left;
padding:2px;
width:576px;
}
#main .contact_image {
background-image: url('../sitebuildercontent/sitebuilderpictures/signmlc2.jpg');
background-repeat: no-repeat;
background-position: top left;
}
#main .contact_content {

height: 62px;
width : 369px;
font-family: Verdana;
font-size: small;
font-weight: bold;
color : black;
margin-left:170px;
margin-top:10px;
clear:none;
float:left;

}
#main .contact_mail {
background-image: url('../sitebuildercontent/sitebuilderpictures/mail.jpg');
background-repeat: no-repeat;
background-position: top left;
}

#navmain {
margin-top: 13px;
width: 762px;
height: 110px;
}

#navmain .sideimg2 {
background: url('../sitebuildercontent/sitebuilderpictures/myslovcrnrnav.jpg') no-repeat top left;
clear: none;
float: left;
}
#navmain .h1 {
font-family: "Times New Roman", Times, serif;
font-size: x-large;
color: 6600cc;
font-weight: bold;
text-align: center;
margin-top:50px;
}



It's a good start but there's more to fix. In your markup you have #container, #join and #contest in an unamed/unstyled div. It's not needed.

There were several divs that had height specified and then you put more conent in than would fit in that height. Part of the nice thing about CSS is just letting divs flow with content, if you leave the height out it will enclose the content you put in it (assuming you know how to clear floats (http://www.quirksmode.org/css/clearing.html)).

To get container/join/contest to sit next to each other I just narrowed up join and contest. I didn't add up the widths but I imagine they would have lined up the way you intended before you added margin/padding to them. Look up "boxmodel". It will show you how to calculate widths.

I see you've been having trouble with DocTypes, check out the sticky topic at the top of this forum and the link in my sig below.
Also in my sig, look at the links about validating and tables while your at it.

mysterybks
Mar 15th, 2007, 07:00 PM
Thank you for the info on validating. I have bookmarked it and will use it often.

One thing it says is not valid is in


<ul id="nav">
<li><a href="mlc.html">Home</a></li>
<li><a href="authors.html">Meet The Authors</a></li>
<li><a href="bookstore.html">Bookstore</a></li>
<li><a href="library.html">Library</a></li>
<li><a href="featuring.html">Featuring</a></li>
<li><a href="Spotlight.html">Spotlight</a></li>
<li><a href="RecentAdds.html">Recent Additions</a></li>
<li><a href="Calendar/Month_3_1_2007_0.htm">Calendar</a></li>
<li><a href="http://blog.mysteryloverscorner.com">Blog</a></li>
<p id="nav2">&nbsp;</p>

<li><a href="2007mys.html">2007 Mysteries</a></li>
<li><a href="newThis.html">New This Month</a></li>
<li><a href="newNext.html">New Next Month</a></li>
<li><a href="pricing.html">Authors Only</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="News.html">News</a></li>
<li><a href="Updates.html">Receive Updates</a></li>
</ul>


<p id="nav2">&nbsp;</p> is not valid.

Then how do I get the black line between the two lines of text and make it so that it breaks the same way on every browser so that items aren't spread across the two lines?

Thanks.

MattyUK
Mar 15th, 2007, 07:11 PM
A UL tag can only contain LI or OL tags. Hence not valid.

Why not apply the ID attribute to an empty LI tag?



<li><a href="http://blog.mysteryloverscorner.com">Blog</a></li>
<li id="nav2">&nbsp;</li>
<li><a href="2007mys.html">2007 Mysteries</a></li>

mysterybks
Mar 15th, 2007, 08:07 PM
I did try that already. It doesn't work.

Dawn

Excavator
Mar 15th, 2007, 08:30 PM
Don't make an empty li.
I have a rule of thumb, if it's empty...you probably don't need it.


Get rid of the <p id="nav2"> line and give the second ul that id. <ul id="nav2">
Then style that ul with a border-top, start like this:


#nav2 ul {
border-top: 2px solid #000000;
}

mysterybks
Mar 15th, 2007, 08:44 PM
Tried that but see what I end up with:

www.sleuthedit.com/test.html
www.sleuthedit.com/test2.html

I don't know if this is worth it.

Dawn

MattyUK
Mar 15th, 2007, 11:21 PM
This is a learning curve for you. They are usually worth it, even if difficult.

Excavator is right, avoid empty elements if they need to be empty you may not need them. Sometimes a &nbsp; is an easy way to achieve a spacing at normal line height (and resizable with text) but then margin: 1em; works well too. Choose your poison.

I haven't looked at any of the examples, just the code posted. But you can apply the style inline:


<li><a href="http://blog.mysteryloverscorner.com">Blog</a></li>
<li style="border-top: 2px solid #000000;"><a href="2007mys.html">2007 Mysteries</a></li>

Via an ID:

#nav2 ul {
border-top: 2px solid #000000;
}
<li><a href="http://blog.mysteryloverscorner.com">Blog</a></li>
<li id="nav2"><a href="2007mys.html">2007 Mysteries</a></li>

Or break up the single UL list into two as Excavator suggests.

Honestly, I'm unsure what effect you are aiming for so I'm restricting my advice to how to apply the CSS rules rather than what they should be (you might want to examine display: block; position: relative; ).

I suggest creating a test page with just this one list on it and your test CSS rules and (make sure it validates) and play around with the approaches until you get what you want then put it back into your main page. Thats assuming you haven't already.

Well thats my two cents. Hope it helps.

Excavator
Mar 15th, 2007, 11:51 PM
Why is this here????

* {
margin: 0;
padding: 0;
}

Should be this only:

* {
margin: 0;
padding: 0;
}

mysterybks
Mar 16th, 2007, 02:11 PM
That's all I do have.

Thanks for the info for my menu. It's working well now.

Dawn