CSS Firefox Form Issues

[loveforfire33]

Hey guys,

A website a friend of mine has developed is having a few issues with firefox compatability.
Ive have a look at it for him and cant seem to find a solution (although im far from a expert - hence why im coming here!)

basically he's used labels for layout of his PHP form. and this works fine in I.E / Chrome - however in FF the layout is really not what he is going for!

ive done some reasearch and have been led to belive it may be to do with the <br /> tags?

could someone please advise on what is causing this issue and a possible solution? the code in question is below and the active website can be viewed Here

<label>Title: </label> <input type="text" name="title"  value ='<?php echo $Title;?>'/> <br />
<label>Author: </label> <input type="text" name="author" value ='<?php echo $Author;?>'/><br />
<label>Published Date:</label> <input type="text" name="pdate" value ='<?php echo $PublishedDate;?>' /><br />
<label>Publisher Location:</label> <input type="text" name="loc" value ='<?php echo $Loc;?>'/><br />
<label> Publisher: </label><input type="text" name="publisher" value ='<?php echo $Publisher;?>' /><p>

Thanks :)

[TerryJuneJr]

Can you take a snapshot of what the form is doing? I can't see the form on the webstie :)

[Arkinder]

The form isn't on the link that you provided. If the layout is broken in Firefox then your friend is using bad practices when designing. Firefox is the official browser of the W3C, and should always be the initial test browser.

There are several things wrong with the markup, but if you can get the form on the active site, or a test site, then I can give you a better solution.

Regards
Arkinder

[loveforfire33]

Thanks for the info arkinder, we are both very new to this and any constructive criticism that you may have with any aspect of the code, will be welcomed by him.

an example can be seen below.

displays correctly in chrome and I.E as seenHERE

Whereas on the same machine with the same resolution it displays like This using FF.

The page shown above is http://www.harvardreferencegenerator.com/website.php

Thanks for all your help guys, really appreciated.

[Pro2000]

Well I tried your code.. It worked the same on FF and IE9..
Also, I guess your problem has to do with CSS itself not with the code you posted.

[Pro2000]

You can try using the following code instead:

<P align="center">
<table align="center" border="0" cellspacing="0" cellpadding="0">
<tr><td width="300"> Website Name:</td><td> <input type="text" name="name"  value =''/> </td></tr>
<tr><td> Author:</td><td> <input type="text" name="author" value =''/> </td></tr>
<tr><td>Published Date:</td><td> <input type="text" name="pdate" value ='<?php echo $PublishedDate;?>' /></td></tr>
<tr><td>Publisher Location:</td><td> <input type="text" name="loc" value ='<?php echo $Loc;?>'/></td></tr>
<tr><td> Publisher: </td><td><input type="text" name="publisher" value ='<?php echo $Publisher;?>' /></td></tr>
</table>
	
<input type="submit" name="submit" /> </P>

[loveforfire33]

Hi, thanks for the reply.

im not sure how it can be with the css as he hasent used any in that section of the form? either way the css is below :) - and he really wants to avoid using tables if possible. it was the point of this whole website for him to practice using css for layout. :)

@charset "utf-8";
/* CSS Document */

body{
color:#FFFFFF;
font-size: 14px;
margin:0;
padding:0;
background-color:#00adee;
background-image:url(topimage.png);
background-repeat:repeat-x;
}

#phpOutput{
text-align:center;
background-color:#FFFFFF;
font-szie:14px;
font-family:"Times New Roman", Times, serif;
color:#000000;
}

label {
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:14px;
display: block;
width:200px;
float: left;
margin: 2px 4px 6px 4px;
text-align: right;
}

#wrapper{
width:780px;
	margin-left:auto;
	margin-right:auto;
}

/*contains main content and referencing */
#content{
width:590px;
margin-right:10px;
margin-top:10px;
float:left;
}

#rightcolumn
{
width:180px;
float:left;
}

/* contains links to other references */
#rightnavbar{
width:180px;
}





/* Header and all elements within the header */
#logo{
size:300px;
background-color:inherit;
position:relative;
float: left;
}

#social{
float:left;
position:relative;
width:138px;
margin-left: 60px;
margin-top: 65px;
}


#header{
height:60px;
Margin: none;
padding: 50px;
border: none;
background:none;
}


#Home{
display: block;
width: 100px;
height: 25px;
background:url(homeBtn.png) no-repeat 0 0; 
float:left;
margin-left:45px;	
text-decoration:none;
}

/* Home button image shift*/
#Home:hover
{ 
  background-position: 0 -25px;
}	

#Home span
{
  position:relative;
  top: -999em;
}

/* About button image shift*/
#About{
  display: block;
  width: 100px;
  height: 25px;
  background:url(aboutBtn.png);  
float:left;
margin-left: 10px;
text-decoration:none;	
}

#About:hover
{ 
  background-position: 0 -25px;
  
}	

#About span
{
  position:relative;
  top: -999em;
}

/* Text Formatting */

h1{
font-family:Georgia, "Times New Roman", Times, serif
}

h2{
font-family:Arial, Helvetica, sans-serif;
}

#p1{
font-size:16px;
font-family:Arial, Helvetica, sans-serif;
line-height:25px;
letter-spacing:0.5px;
}

#p2{
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
line-height:22px;
letter-spacing:0.5px;
color:#FF0000;
}

#p3{
font-size:10px;
font-style:italic;
font-family:Arial, Helvetica, sans-serif;
letter-spacing:0.5px;
}
/* List for referencing links */

#rightnavbar ul{
margin: 0;
padding: 0;
list-style-type: none;
font-family:Arial, Helvetica, sans-serif
}

#rightnavbar a{
display:block;
width:180px;
padding: 2px 2px 2px 5px;
border: none;
background: #1e75a4;
text-decoration: none;
}

#rightnavbar li{

display:block;
}

#rightnavbar a:link, #rightnavbar a:active, #rightnavbar a:visited {
color: #ffffff;
}

#rightnavbar a:hover {
border: none;
background: #2691d0;
color: #ffffff;
}

thanks guys

[Arkinder]

label {
    color: #FFFFFF;
    display: block;
    float: left;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 14px;
    margin: 2px 4px 6px; /* <----- the problem */
    text-align: right;
    width: 200px;
}

The height added by the margin is pushing the elements to the right.

You should fix these. Also, if you're not parsing XML data you should be using an HTML doctype instead of an XHTML doctype. Also, using a transitional doctype on any new site is simple lazy. You also have a few errors in your CSS.

If you don't mind my asking, what kind of Computer Science Major was Scott? Sorry if that question is vague.

Regards
Arkinder

[Pro2000]

I'll check it and tell you right back..

[Pro2000]

Using that validator, I couldn't find any website that doesn't hold errors except for w3c.org of course!!
I've checked Daniweb, Google, Youtube, and Facebook... All of these websites were executed with errors!!
Even my own website :icon_mad: did have errors!! What a shame!
No comment! (More than this :icon_mrgreen:)

However, I don't think the error lies in the margin: .......
I think it's correct..

[Arkinder]

Using that validator, I couldn't find any website, except for w3c.org, that doesn't hold errors!!
I tried using Daniweb, Google, Youtube, and Facebook... All of those were executed with errors!! No comment!

Ironically, the W3C makes HTML and CSS. It's funny that they would know what they're talking about, huh? A lot of web sites don't validate because they are using the wrong doctype, deprecated markup, or because of IE fixes. However, if you're testing in modern browsers first, then your code should be valid. It's not difficult. People are just lazy and then wonder why their sites aren't doing what they want them to.

You clearly have no idea what you're talking about, or you would know why each site is returning those errors from the validation service. You honestly think a website like Facebook is a credible place for, well, anything. http://mozilla.com/ validates with only two errors that have absolutely nothing to do with what's actually happening with the page. It's still a perfectly valid document.

@loveforfire33
I apologize for this. On the original topic: I wasn't very clear. Simply remove 2px from the top margin, bottom margin, or 1px from the top and bottom margins. EDIT: Each browser adds its own margin and padding by default. So it can differ from browser to browser. If you use a universal rule to reset this, then it's usually not an issue.

* {
    margin: 0;
    padding: 0;
}

This will set every elements margin and padding to 0. This may throw your design off a little bit, but you'll be able to adjust the margin and padding as you please.

Regards
Arkinder

[loveforfire33]

Thanks very much guys, that was the issue. he did a degree in computing for business applications, which focused mainly on windows applications - he's just trying to get a basic knowledge of web technologies. thanks again xx

[Arkinder]

Awesome, and I was asking because I'm going into college as a freshman BSc Computer Science major this Fall, and wasn't sure if I would have to reference anything like what was mentioned in the about section of the site. If you run into anymore issues, or have a question about anything, just let us know.

Regards
Arkinder