0

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 :)

4
Contributors
12
Replies
13
Views
6 Years
Discussion Span
Last Post by Arkinder
0

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

0

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.

Edited by loveforfire33: n/a

0

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.

0

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>

Edited by Pro2000: n/a

Votes + Comments
This isn't 1996, tables should not be used for layout.
0

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

0
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

0

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..

Edited by Pro2000: n/a

-1

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

Edited by Ezzaral: User request

Votes + Comments
Please don't be so offensive!!!
0

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

0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.