...

View Full Version : Firefox VS IE problem



masterofollies
11-06-2008, 12:15 AM
Take a look at the website I am coding here.

http://www.rodgame.org/downloads/bruce2/index.html

At the top Welcome, About, Listings, etc. It looks perfect in firefox browsers. However it is all screwed up in IE. I don't understand, I tested by taking out lots of letters to see if it would pop back in place but it didn't work.


<div id="menu">
<ul>
<li><a href="index.html">Welcome</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="conf.html">Conf. Form</a></li>
<li><a href="#">Buy</a></li>
<li><a href="#">Sell</a></li>
<li><a href="#">Listings</a></li>
<li><a href="#">Buyer</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>


#menu {
float: left;
clear: left;
height: 50px;
background: url(images/img02.gif) no-repeat;
}

#menu ul {
margin: 0;
padding: 0;
list-style: none;
}

#menu li {
display: inline;
}

#menu a {
float: left;
display: block;
margin: 14px 10px 0 10px;
padding: 0 10px;
background: #40C1D4;
text-decoration: none;
letter-spacing: -1px;
font-size: 1.4em;
color: #FFFFFF;
}

#menu a:hover {
background: #0083A9;
}

Doctor_Varney
11-06-2008, 03:50 AM
Right, well I'm seeing it "screwed up" in both FF and IE, but this all depends on which physical screen I'm using. A larger monitor displays as intended, but a standard sized one compresses the menu bar.

Try reducing the font size a little, in your menu bar.

Make sure you have a global reset inserted at the top of your stylesheet.
* {margin:0; padding:0;} IE does silly things with margin and padding, just to piss us off.

destruction
11-06-2008, 06:05 AM
why you not put the order syntax for not screw up?


<!--[if lte IE 7]><link href="your css files" rel="stylesheet" type="text/css" /><![endif]-->
<!--[if IE 7]><link href="your css files" rel="stylesheet" type="text/css" /><![endif]-->
<!--[if IE 6]><link href="your css files" rel="stylesheet" type="text/css" /><![endif]-->
<!--[if lt IE 7]>

tagnu
11-06-2008, 06:30 AM
Adding width attribute to the menu resolves the issue.


#menu {/*style.css (line 94)*/
background:transparent url(images/img02.gif) no-repeat scroll 0 0;
clear:left;
float:left;
height:50px;
width:800px;
}

masterofollies
11-06-2008, 04:18 PM
why you not put the order syntax for not screw up?


<!--[if lte IE 7]><link href="your css files" rel="stylesheet" type="text/css" /><![endif]-->
<!--[if IE 7]><link href="your css files" rel="stylesheet" type="text/css" /><![endif]-->
<!--[if IE 6]><link href="your css files" rel="stylesheet" type="text/css" /><![endif]-->
<!--[if lt IE 7]>

Because I can code CSS decently, but I haven't learn that part.

Hmm so try margin/padding, and a set width. I shall be back!

masterofollies
11-07-2008, 06:08 PM
*bump* I tried everything and I can't get a happy medium. If I use this


#menu {
float: left;
clear: left;
height: 50px;
width: 750px;
background: url(images/img02.gif) no-repeat;
}

It works fine in firefox but wrong in IE, and if I use this


#menu {
float: left;
clear: left;
height: 50px;
width: 850px;
background: url(images/img02.gif) no-repeat;
}

it works in IE but is totally screwed up in Firefox. I tried things like 780, 790, 800, 805, 810, etc. It won't set right for any of it.

tagnu
11-08-2008, 07:40 AM
I've changed the width of #menu to 800px and uploaded here (http://tagnu.freehostia.com/debug/Business%20Ventures.htm).

The menu look fine in both IE and FF. Where exactly is the issue? The search part?

masterofollies
11-10-2008, 06:56 PM
It is still bugged in Firefox. Here is a screen shot of it. My screen res is 1024 X 768

http://www.rodgame.org/downloads/ffss.jpg

Doctor_Varney
11-10-2008, 07:14 PM
My screen res is 1024 X 768

As a rule, I usually build for an 800x600 screen, so that users on a larger screen only have to deal with a little more whitespace (which nobody minds), whilst the smaller screens are accommodating my layout, well within their constraints.

In my opinion, I feel the layout is too wide and is therefore wrapping, somehow. I'm not sure if this is a cross-browser issue, but a flaw in the design. No offence, because of course, I'd have to look deeper into the problem, before asserting this.

Doctor_Varney
11-10-2008, 07:34 PM
Ahh... Hang on... Could you try putting a minimum width on the header; perhaps even the page, to stop the content maxing out in the #divs, as the page is narrowed. As I'm seeing it, the page will hang together alright in FF, but only if I pull my screen to a width to accommodate. It's a similar story in IE7, although here, the elements are 'dropping out' at a different width-threshold.

The code I suggest you could try, would be:
(highlighted in yellow)


#header {
BACKGROUND: url(images/img01.gif) repeat-x left bottom; HEIGHT: 100px; MIN-WIDTH:590px;
}


Or you could try it like this; applied to the whole page:


BODY {

MIN-WIDTH:590px; FONT-SIZE: 13px; BACKGROUND: #ffffff; MARGIN: 20px; COLOR: #666666; FONT-FAMILY: Georgia, "Times New Roman", Times, serif;

}

Hope this helps...
Let us know how you get on...?

Doctor V

Apostropartheid
11-10-2008, 07:38 PM
Also... More importantly, it appears you have neglected to fit operators to the ends of some of your rules...

For instance, this:

OL {

MARGIN-LEFT: 3em

}...is not acceptable. You must end a style rule with ;
Incorrect syntax will inevitably lead to problems.

Use the w3C validator to weed out any problems in your code.
Alas, it is. The last semi-colon of any series of properties (the last one before a closing bracket) is implied, so this is perfectly acceptable.

Doctor_Varney
11-10-2008, 08:05 PM
That's right, Cyan. I just looked up the syntax on the W3C site to make absolutely sure. You don't have to put a ; after the last command, but it is necessary between them. Damn you, for getting here, before I managed to edit my own steaming baloney.:o:D

(One learns something new, every day... Providing one does CSS, every day...)

tagnu
11-11-2008, 05:58 AM
It is still bugged in Firefox. Here is a screen shot of it. My screen res is 1024 X 768


I should have checked the resolution.

Here you go: Updated Link (http://tagnu.freehostia.com/debug/BusinessVentures-updated.htm)
2 Changes.

1. Reduce the margin-left/right from 10px to 5px

#menu a {/*style.css (line 80)*/
background:#40C1D4 none repeat scroll 0 0;
color:#FFFFFF;
display:block;
float:left;
font-size:1.4em;
letter-spacing:-1px;
margin:14px 5px 0;
padding:0 10px;
text-decoration:none;
}

2. Change the width attribute, so that it won't overlap with #search.
Edit: This works fine (verified only in FF) even if you remove the width attribute completely.

#menu {/*style.css (line 70)*/
background:transparent url(images/img02.gif) no-repeat scroll 0 0;
clear:left;
float:left;
height:50px;
width:758px;
}

Ps: This layout will break in 800x600 resolution. As a quick workaround, you can position #search as absolute instead of 'float:right'. Something like:

#search {/*style.css (line 86)*/
background:transparent url(images/img03.gif) repeat scroll 0 0;
/*float:right;*/
height:100px;
position:absolute;
right:0;
width:200px;
}

masterofollies
11-11-2008, 07:21 PM
Rock on tagnu you got it! Thanks

Doctor_Varney
11-12-2008, 12:00 AM
Rock on tagnu you got it! Thanks

Not sure he has. The links are still dropping out. Might be worth applying the min-width attribute to the body, as I suggested.

In my opinion, I think the #header should perhaps be given a width attribute as well. One which is wider than the #menu, to accommodate it.

drhowarddrfine
11-12-2008, 04:58 AM
If you must use the transitional doctype ( and no one needs to for new pages ) use the correct one:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

In addition, validate html and css for those lists of errors.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum