PDA

View Full Version : IE v Firefox


Jim_Shady
03-20-2006, 11:21 AM
Hey all.

Now let me first say I know I'm being a bit cheeky posting this lot - but I wasn't sure what else to do. I've been working on a site for someone and I've got it looking nice in Internet Explorer - but in Firefox (and I guess Safari) it loses the layout a bit. Specifically in the 'BOTTOM BAR' and the 'TOP BAR' . I haven't publiched yet so can't show you what I mean - but hopefully from looking at the margins and coding someone might say - "oh - you need to put this fix in...! "

Cheers - Shady.

code tags added (dj)

/* CSS Document */

/* General Stuff */

Body{
padding: 3px
}

h1{
font-family: verdana;
font-size: 14px;
color: #800000;
}

/* Lets get a top bar */

#TopBar{
margin: 0 0 3px 3px;
border: 1px solid;
height: 50px;
background-color: #C0C0C0;
background-image: url(images/MGF_main_logo.png);
background-repeat: no-repeat;
background-position: center;
}

/* Now a menu bar */

#MenuBarContainer{
margin: 0px 0 3px 3px;
height: 1px;
background-color: #C0C0C0;
border: 1px solid;
}
#MenuBarContainer ul{
list-style: none;
margin: 0;
padding: 0;
font-family: verdana;
font-size: 12px;
}
#MenuBarContainer li{
display: block;
float: left;
width: auto;
}
#MenuBarContainer A{
background: #C0C0C0;
color: #800000;
display: block;
text-decoration: none;
padding: 3px 6px 3px 6px;
}
#MenuBarContainer A:hover{
background: #800000;
color: #C0C0C0;
}
#MenuBarContainer A:active{
background: #800000;
color: #C0C0C0;
}

/* Lets sort out the main section */

#ColumnSection{
margin: 0 0 3px 3px;
height: 60%;
width: 100%;
padding: 5px 0 0 0;
}

/*Stuff for the index page */

#IndexLeftSection{
height: 100%;
width: 80%;
float: Left;
font-family: verdana;
font-size: 12px;
}
#IndexRightSection{
height: 100%;
width: 10%;
Float: Right;
}

/* layout for the custom page */

#CustomLeftSection{
height: 100%;
width: 45%;
float: Left;
font-family: verdana;
font-size: 12px;
}
#CustomRightSection{
height: 100%;
width: 45%;
Float: Right;
}

/* layout for Top Covers Left Menu */

#TopCoversLeftMenu{
height: 1px;
}
#TopCoversLeftMenu ul{
list-style: none;
font-family: verdana;
font-size: 12px;
}
#TopCoversLeftMenu li{
display: block;
float: left;
}
#TopCoversLeftMenu A{
background: #C0C0C0;
color: #800000;
display: block;
text-decoration: none;
padding: 3px 10px 3px 10px;
}
#TopCoversLeftMenu A:hover{
background: #800000;
color: #C0C0C0;
}
#TopCoversLeftMenu A:active{
background: #800000;
color: #C0C0C0;
}

/* stuff for the top covers and materials page */

#TopCoversLeftSection{
height: 100%;
width: 45%;
float: Left;
font-family: verdana;
font-size: 12px;
}
#TopCoversRightSection{
height: 100%;
width: 45%;
Float: Right;
}

/* now a bottom bar */

#BottomBar{
padding: 3px;
margin: 0 0 3px 3px;
border: 1px solid;
height: 50px;
background-color: #C0C0C0;
font-family: verdana;
font-size: 12px;

}
#BottomBar a{
color: #800000;
text-decoration: none;
}
#BottomBarRight{
width: 50%;
float: right;
height: 100%;
text-align: right;
}

#BottomBarLeft{
width: 50%;
float: left;
height: 100%;
text-align: left;
}

/* Intricate Designs Page */

#IntricateDesignsLeftSection{
height: 100%;
width: 45%;
float: Left;
font-family: verdana;
font-size: 12px;
}
#IntricateDesignsRightSection{
height: 100%;
width: 45%;
Float: Right;
}

/* Contact Us */

#ContactUsLeftSection{
height: 100%;
width: 70%;
float: Left;
font-family: verdana;
font-size: 12px;
}

/* stuff for the preforned page */

#PreformedTopLeftSection{
height: 15%;
width: 49%;
float: Left;
font-family: verdana;
font-size: 12px;
margin-left: 1px;
}
#PreformedTopRightSection{
height: 15%;
width: 49%;
Float: Left;
background-color: blue;
}
#PreformedBottomLeftSection{
height: 15%;
width: 49%;
float: Left;
font-family: verdana;
font-size: 12px;
background-color: yellow;
margin-bottom: 5px;
margin-left: 1px;
}
#PreformedBottomRightSection{
height: 15%;
width: 49%;
Float: Left;
background-color: green;
margin-bottom: 5px;
}
#PreformedContentArea{}
.clearfloats {
clear: both;
}

dthomsen8
03-20-2006, 12:36 PM
Hey all.

Now let me first say I know I'm being a bit cheeky posting this lot - but I wasn't sure what else to do. I've been working on a site for someone and I've got it looking nice in Internet Explorer - but in Firefox (and I guess Safari) it loses the layout a bit. Specifically in the 'BOTTOM BAR' and the 'TOP BAR' . I haven't publiched yet so can't show you what I mean - but hopefully from looking at the margins and coding someone might say - "oh - you need to put this fix in...! "


It is impossible to say what you need to do to fix your CSS without the HTML code, but you can start by considering the warnings that www.w3.org CSS validator provides.

Note the ones about 'BOTTOM BAR' about halfway down. When you have reduced many of the warnings, try it again with your HTML.

Incidentally, I am told that the way to get a good layout is to make it work in Firefox, and then struggle with MS IE bugs.

* Line : 10 font-family: You are encouraged to offer a generic family as a last alternative
* Line : 10 (Level : 2) font-family: You are encouraged to offer a generic family as a last alternative : h1
* Line : 12 (Level : 1) Same colors for color and background-color in two contexts #TopCoversLeftMenu A:hover and h1
* Line : 12 (Level : 1) Same colors for color and background-color in two contexts #MenuBarContainer A:hover and h1
* Line : 12 (Level : 1) Same colors for color and background-color in two contexts #TopCoversLeftMenu A:active and h1
* Line : 12 (Level : 1) Same colors for color and background-color in two contexts #MenuBarContainer A:active and h1
* Line : 12 (Level : 1) You have no background-color with your color : h1
* Line : 21 (Level : 1) You have no color with your background-color : #TopBar
* Line : 32 (Level : 1) You have no color with your background-color : #MenuBarContainer
* Line : 39 font-family: You are encouraged to offer a generic family as a last alternative
* Line : 39 (Level : 2) font-family: You are encouraged to offer a generic family as a last alternative : #MenuBarContainer ul
* Line : 78 font-family: You are encouraged to offer a generic family as a last alternative
* Line : 78 (Level : 2) font-family: You are encouraged to offer a generic family as a last alternative : #IndexLeftSection
* Line : 93 font-family: You are encouraged to offer a generic family as a last alternative
* Line : 93 (Level : 2) font-family: You are encouraged to offer a generic family as a last alternative : #CustomLeftSection
* Line : 109 font-family: You are encouraged to offer a generic family as a last alternative
* Line : 109 (Level : 2) font-family: You are encouraged to offer a generic family as a last alternative : #TopCoversLeftMenu ul
* Line : 138 font-family: You are encouraged to offer a generic family as a last alternative
* Line : 138 (Level : 2) font-family: You are encouraged to offer a generic family as a last alternative : #TopCoversLeftSection
* Line : 154 (Level : 1) You have no color with your background-color : #BottomBar
* Line : 155 font-family: You are encouraged to offer a generic family as a last alternative
* Line : 155 (Level : 2) font-family: You are encouraged to offer a generic family as a last alternative : #BottomBar
* Line : 160 (Level : 1) Same colors for color and background-color in two contexts #MenuBarContainer A:hover and #BottomBar a
* Line : 160 (Level : 1) Same colors for color and background-color in two contexts #TopCoversLeftMenu A:active and #BottomBar a
* Line : 160 (Level : 1) Same colors for color and background-color in two contexts #TopCoversLeftMenu A:hover and #BottomBar a
* Line : 160 (Level : 1) You have no background-color with your color : #BottomBar a
* Line : 160 (Level : 1) Same colors for color and background-color in two contexts #MenuBarContainer A:active and #BottomBar a
* Line : 183 font-family: You are encouraged to offer a generic family as a last alternative
* Line : 183 (Level : 2) font-family: You are encouraged to offer a generic family as a last alternative : #IntricateDesignsLeftSection
* Line : 198 font-family: You are encouraged to offer a generic family as a last alternative
* Line : 198 (Level : 2) font-family: You are encouraged to offer a generic family as a last alternative : #ContactUsLeftSection
* Line : 208 font-family: You are encouraged to offer a generic family as a last alternative
* Line : 208 (Level : 2) font-family: You are encouraged to offer a generic family as a last alternative : #PreformedTopLeftSection
* Line : 216 (Level : 1) You have no color with your background-color : #PreformedTopRightSection
* Line : 222 font-family: You are encouraged to offer a generic family as a last alternative
* Line : 222 (Level : 2) font-family: You are encouraged to offer a generic family as a last alternative : #PreformedBottomLeftSection
* Line : 224 (Level : 1) You have no color with your background-color : #PreformedBottomLeftSection
* Line : 232 (Level : 1) You have no color with your background-color : #PreformedBottomRightSection

Jim_Shady
03-20-2006, 12:46 PM
Heya,

What does this mean?

"You are encouraged to offer a generic family as a last alternative"

?

Thanks for running it through the analyzer - I've never done that before - I'll have a proper look at what it suggests later. Just tried to publish the pages using Firefox's FTP client but as I'm on a work network I couldn't get it to connect. I guess it's something to do with the ports but I'm not THAT techy...! :D

PS: Thanks!

Jim_Shady
03-20-2006, 12:47 PM
The code by the way.... the problem is that the border of the menu bit does not actually go AROUND the menu in Firefox. Also the 'bottombarright' and 'bottombarleft' bits do not float inside the large enclosing DIV as they should.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="MGF.css" rel="stylesheet" type="text/css">
</head>

<body marginwidth="0" marginheight="0">
<div id="TopBar"></div>
<div id="MenuBarContainer">
<ul>
Home (menu.htm)
Intricate Designs (IntricateDesigns.htm)
Custom Made Orthoses (CustomOrthoses.htm)
Pre-formed Orthoses (PreformedOrthoses.htm)
Contact Us (ContactUs.htm)
Other Products (OtherProducts.htm)
Machinery / Equiptment (MachineryEquipment.htm)
Top Covers / Materials (TopCoversMaterials.htm)
[/list]
</div>
<div id="ColumnSection">
<div id="TopCoversLeftSection">
</div>
<div id="TopCoversRightSection">
</div>
</div>
<div id="BottomBar">
<div id="BottomBarLeft">E-mail: mark@mgf-labs.com (mailto:mark@mgf-labs.com)
Mobile: 07812071759
Tel: 01159412901</div>
<div id="BottomBarRight">MGF Labs
5 The Ridings
Bulcote
Nottingham
England
NG14 5GW</div>
</div>
</body>
</html>

domedia
03-20-2006, 12:55 PM
Heya,

What does this mean?

"You are encouraged to offer a generic family as a last alternative"
serif and sans-serif are examples of generic font families.
Read gmcones http://www.dreamweaverclub.com/typography-web-1.php for more info on fonts and the web :)

dthomsen8
03-20-2006, 02:06 PM
Heya,

What does this mean?

"You are encouraged to offer a generic family as a last alternative"

?

Thanks for running it through the analyzer - I've never done that before - I'll have a proper look at what it suggests later. Just tried to publish the pages using Firefox's FTP client but as I'm on a work network I couldn't get it to connect. I guess it's something to do with the ports but I'm not THAT techy...! :D

PS: Thanks!

Use the Dreamweaver validator on your HTML, and run both the CSS and HTML throught the www.w3.org validators. You can check with copy and paste if you haven't published. Your work network may have a firewall or other security software to prevent you from publishing.

Correcting your validation errors may not fix your problem, but doing so won't do any harm. I find that the fixing helps me learn CSS.

Jim_Shady
03-21-2006, 02:56 PM
Hhmm. I've just changed the font-family in my CSS to 'sans-serif' . But to be honest I think it looks crap. Verdana is much cleaner and professional. Any tips? For example the text on this forum is nice?

d a v e
03-21-2006, 03:19 PM
i the forum message bit is verdana

what this means "You are encouraged to offer a generic family as a last alternative" is that you should END with a generic font such as sans-serif at the end of your list in order of desirability so start with the font that you would prefer at the begining and end with a generic one: the user's browser will work along the list til it encounters a font installed on that users system
so e.g.
font-family: Verdana, Arial, Helvetica, sans-serif;

dthomsen8
03-21-2006, 11:45 PM
Hhmm. I've just changed the font-family in my CSS to 'sans-serif' . But to be honest I think it looks crap. Verdana is much cleaner and professional. Any tips? For example the text on this forum is nice?

Dave has already told you about what to put in your CSS for a font.

How are you doing with CSS validation in general? Not having an alternative font is not likely to be the cause of the problems you have described.

Beyond that, we don't have any HTML to look at, so we really don't know why you are having problems getting acceptable results in different browsers.

Jim_Shady
03-22-2006, 12:48 PM
Heya...

I've changed the font to font-family: Verdana, Arial, Helvetica, sans-serif; which is good and working well. I didn't understand previously how the font aspect of CSS worked - but do now!

The HTML is above in this thread... a message or so after the CSS...

Shady

Jim_Shady
03-22-2006, 07:45 PM
Finally got the site published! Long story.

www.mgf-labs.com

As you can see I'm not working very fast...! (PT project)

See my problem with the layout on the page guys when using firefox? Any help would be really appreciated. I've learnt CSS from scratch trying to use a crap book!

Also my contact us form isn't working. I guess it's my php script. Again - if someone would be so kind...?! I thought I'd followed the instructions in the tutorial but obviously not.

Shady

dthomsen8
03-23-2006, 10:16 AM
To start with, I don't like the entry pages, or the mouseover effect switching from the company name to the word "Enter" on your site. It is distracting to the user and search engines will do better with your site if you have content on the first page they encounter.

I don't like the way the contact information is in tiny print in the bottom left and right of the pages. Contact information shouldn't be burried.

I hope others will comment on the general design. Perhaps we have some forum members who like entry pages. At least it isn't a Flash entry, I like that even less.

I see the obvious problem with the background color boxes in Firefox on some of the linked pages, but I will leave it to others to try to figure that problem out. If you are using PHP, remember that we don't see the PHP code from the browser, only the end result as rendered by the browser.

I really don't want to be too hard on your design, but I am sure that it can be improved.

dthomsen8
03-23-2006, 10:25 AM
The quote below is what the www.w3.org HTML Validator says. You only had warnings in the CSS validation. An error is likely to be serious, and could, of course, be the source of your problems in Firefox.

Error Line 35 column 90: document type does not allow element "BODY" here.

...ges/MGF_FrontPageLogo_rollover.gif')">

The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).

Jim_Shady
03-23-2006, 03:31 PM
The quote below is what the www.w3.org HTML Validator says. You only had warnings in the CSS validation. An error is likely to be serious, and could, of course, be the source of your problems in Firefox.

Error Line 35 column 90: document type does not allow element "BODY" here.

...ges/MGF_FrontPageLogo_rollover.gif')">

The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).



I don't like entry pages either. The client (friend) on the other hand loves them.

Will look into the error....

d a v e
03-23-2006, 03:33 PM
i would drop the entry page as well: pointless and the rollover is a bit annoying ;)

Jim_Shady
03-23-2006, 03:39 PM
The quote below is what the www.w3.org HTML Validator says. You only had warnings in the CSS validation. An error is likely to be serious, and could, of course, be the source of your problems in Firefox.

Error Line 35 column 90: document type does not allow element "BODY" here.

...ges/MGF_FrontPageLogo_rollover.gif')">

The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).




The error that the validator reports is only on my 'entry/splash' page. Something about the rollover image. I don't think it's anything to do with the menu bar not displaying well on the rest of the pages?

Jim_Shady
03-23-2006, 03:44 PM
To start with, I don't like the entry pages, or the mouseover effect switching from the company name to the word "Enter" on your site. It is distracting to the user and search engines will do better with your site if you have content on the first page they encounter.

I don't like the way the contact information is in tiny print in the bottom left and right of the pages. Contact information shouldn't be burried.

I hope others will comment on the general design. Perhaps we have some forum members who like entry pages. At least it isn't a Flash entry, I like that even less.

I see the obvious problem with the background color boxes in Firefox on some of the linked pages, but I will leave it to others to try to figure that problem out. If you are using PHP, remember that we don't see the PHP code from the browser, only the end result as rendered by the browser.

I really don't want to be too hard on your design, but I am sure that it can be improved.

By the way DThomson I didn't recall ASKING for any comments on the general layout or design thankyou very much! I'm making it look almost exactly how my client wants it to look. They're very pleased with how it is shaping up and once they've provided me with a load of pictures and art-work I don't think it'll look too bad myself.