PDA

View Full Version : Firefox issues


Marblez
August 15th, 2009, 11:07 AM
Hi everyone,

I just finished designing my first website and was really happy with the results...until i found out that certain elements - namely, these:

- images i had used for link pages, nside divs with absolute positioning
- a simple html/php form

look all weird if the viewer is using firefox. I work on a mac and i was using safari as default. Does anybody know why this happens? I can provide more details if you need.

Many thanks in advance for your help.
NeoDreamer
August 15th, 2009, 10:09 PM
Give us the website URL or paste the code. It's hard to help without either one.

Browser differences can be alleviated with a CSS reset. They level the playing ground, making each browser approximately render the same thing. Import it before any of your other CSS files. Chances are, you didn't begin with the CSS reset so applying it at this stage may screw up your page more than actually helping it. But for future reference, use it:



/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.7.0
*/
/**
* YUI Reset
* @module reset
* @namespace
* @requires
*/
html {
color: #000;
background: #FFF;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td {
margin: 0;
padding: 0;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

fieldset,
img {
border: 0;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var,
optgroup {
font-style: inherit;
font-weight: inherit;
}

del,
ins {
text-decoration: none;
}

li {
list-style: none;
}

caption,
th {
text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal;
}

q:before,
q:after {
content: '';
}

abbr,
blockquote {
border: 0;
font-variant: normal;
}

sup {
vertical-align: baseline;
}

sub {
vertical-align: baseline;
}

/*because legend doesn't inherit in IE */
legend {
color: #000;
}

input,
button,
textarea,
select,
optgroup,
option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
}

/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input,
button,
textarea,
select {
*font-size: 100%;
}
Marblez
August 16th, 2009, 01:02 AM
Hi there,

Thanks a lot for your response.
Here's the code for the contact page. Does anything look out of order? Really appreciate your help with this.
Cheers.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
</head>
<title>Contact IvanSharpe</>
</head>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
top:0px;
left:0px;
width:1024px;
height:700px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:475px;
top:167px;
width:203px;
height:27px;
z-index:2;
}
#apDiv3 {
position:absolute;
left:475px;
top:226px;
width:203px;
height:26px;
z-index:3;
}
#apDiv4 {
position:absolute;
left:477px;
top:279px;
width:250px;
height:26px;
z-index:4;
}
#apDiv5 {
position:absolute;
left:695px;
top:494px;
width:50px;
height:25px;
z-index:5;
}
#apDiv6 {
position:absolute;
left:310px;
top:373px;
width:203px;
height:26px;
z-index:6;
}
#Home {
position:absolute;
left:680px;
top:25px;
width:60px;
height:21px;
z-index:7;
}
#Blog{
position:absolute;
left:680px;
top:55px;
width:60px;
height:23px;
z-index:7;
}
</style>
<body>
<div id="apDiv1"><img src="form.jpg" width="1024" height="700" /></div>
<div id="Home"><a href="index.html"><img src="header_homeSmall.jpg"/></a></div>
<div id="Blog"><a href="blogPage.html"><img src="header_blogSmall.jpg"/></a></div>
<form action="emailing.php" method="post">
<div id="apDiv2"><input type="text" name="name,first" /></div>
<div id="apDiv3"><input type="text" name="name,last" /></div>
<div id="apDiv4"><input type="text" name="email" /></div>
<div id="apDiv5"><input type="submit" value="Send"/></div>
<div id="apDiv6"><textarea name="message" rows="10" cols="50"/></div>
</form>
</body>
</html>
a tadster
August 16th, 2009, 11:21 AM
not too sure what could be the problem, but you've got the beginning of a comment (<!--) at the start of your styles,
and it does not have a closer. That should be taken out.
Syous
August 16th, 2009, 12:27 PM
Firefox does not treat the "absolute position" property different than other browsers.

I'd recommend you rework this code using floats and such instead of using position absolute everywhere - it's definitely not the best way to do it.
Marblez
August 16th, 2009, 12:34 PM
Thanks guys. I will try out your suggestions and see if it works out the problems.
Marblez
August 16th, 2009, 02:41 PM
Hi all,

The reset method worked perfectly. I was getting blue lines around my images and now they are gone and the page looks fine.
I have just one problem. In the text area of my form, the last parts of my code appear. Basically this is what shows up:
</div>
</form>
</body>
</html>

Does anybody know why this is happening?
Thank you all for your help.
NeoDreamer
August 16th, 2009, 05:10 PM
You need to close your textarea so no HTML is put inside it:


<textarea></textarea>


Just remember that all tags needs to be closed. Unary tags like BR need to be written like <br /> instead of <br>. It looks like you're using a strict doctype. From my intuition that's going to be stricter about proper standards complicancy with your HTML.
Marblez
August 16th, 2009, 05:57 PM
That solves it (how could I have overlooked that! :)

Thank you everyone for all your help - it was much, much appreciated!
NeoDreamer
August 16th, 2009, 06:17 PM
I did some more reading on the Transitional VS Strict doctype.

http://24ways.org/2005/transitional-vs-strict-markup

Strict is better. Keep it.
Marblez
August 16th, 2009, 07:24 PM
Thanks for the link. I learned html/css from this book published by sitepoint - ISBN 9780975240298. It strongly advocates using strict as well.
Cheers