/    Sign up×
Community /Pin to ProfileBookmark

Strange Cross-Browser Behavior

Copy linkTweet thisAlerts:
Sep 05.2007

HI there –

I’m used to getting differences between IE6 and Firefox/Safari, but this one is throwing me for a loop.

This link looks fine in Firefox 2.0.0.6 and Safari 2 for the Mac as well as IE6 in Windows:

[url]http://domino-80.prominic.net/magnitude/v3/home.nsf/testnav[/url]

However, in Firefox 2.0.0.6 and IE7 for Windows it is off a few pixels. If adjust for browsers that don’t work, the others break. I can understand IE7 not working, but why the difference in the same version of Firefox?

Here is the pertinent positioning CSS:

[CODE]* {margin:0;padding:0;}
body {background-color:#333;margin-top:25px;text-align:center;font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;font-size:10px}
img {padding:0;border:0;margin:0;}
#wrap {padding:0;margin:0;}
#menu {position:relative;width:auto;padding:0 100px 0 0;margin:0;background:url(menu_bg.png)}
ul.navbar {height:47px;list-style-type:none;position:relative;margin:0;width:auto;padding:0;}

li.nav {float:right;margin:0;padding:0;display:block;}
li.nav img {vertical-align:top;}
li.nav a{padding:0px 2px 36px 2px;}[/CODE]

Any thoughts or suggestions?

Thanks,

Mike

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@walpatalSep 05.2007 — Float the menu div to the left or right. Should work ?

-Sam
Copy linkTweet thisAlerts:
@drhowarddrfineSep 06.2007 — Do you make this stuff up as you go along? Take your doctype. Where did you ever come up with that thing? And you are mixing xhtml end tags with html without declaring either. Not to mention a made up css property and 10 html errors. No wonder you have 'cross-browser' problems.
Copy linkTweet thisAlerts:
@WebJoelSep 06.2007 — Maybe you do not understand the purpose of:

[B]* {margin:0; padding:0;}[/B] ?

This removes padding and margin from [I]everything[/I], every element that can appear in your page, has margin & padding rendered to "zero", therefore:* {margin:0;padding:0;}

body {background-color:#333;margin-top:25px;text-align:center;font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;font-size:10px}

img {[B]padding:0;[/B]border:0;[B]margin:0;[/B]}

#wrap {[B]padding:0;margin:0;[/B]}

#menu {position:relative;width:auto;padding:0 100px 0 0;[B]margin:0;[/B]background:url(menu_bg.png)}

ul.navbar {height:47px;list-style-type:none;position:relative;[B]margin:0;[/B]width:auto;[B]padding:0;[/B]}

li.nav {float:right;[B]margin:0;padding:0;[/B]display:block;}

li.nav img {vertical-align:top;}

li.nav a{padding:0px 2px 36px 2px;}[/QUOTE] is needlessly re-stated and can be safely removed.They only contrubute to code-bloat and confusion. :p

You provided the 'universal selector' of " * [B]{margin:0; padding:0;}[/B] ", -so why not let it do what it does? ?
Copy linkTweet thisAlerts:
@magnitudeauthorSep 06.2007 — Float the menu div to the left or right. Should work ?[/QUOTE]

Thanks walpatal. That kinda worked. It fixed the Firefox/Win issue. but not IE7. I'll keep playing with it because I think you put me on the right track.
Copy linkTweet thisAlerts:
@magnitudeauthorSep 06.2007 — Do you make this stuff up as you go along? Take your doctype. Where did you ever come up with that thing? And you are mixing xhtml end tags with html without declaring either. Not to mention a made up css property and 10 html errors. No wonder you have 'cross-browser' problems.[/QUOTE]

Do I make it up? No, not intentionally anyway. Where did it come from? Here:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

I started swapping out loose.dtd and strict.dtd to observe any differences, but obviously I forgot to change to this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 [B]Transitional[/B]//EN"

as well when using loose.dtd.

The link portion points to locally stored files because I was working on a disconnected machine at the time. I downloaded the files from W3C.

Yeah I ran the page through the validators too ... but those errors shouldn't contribute to the CSS differences between the browsers. Obviously I don't know that for sure so I'll fix the errors and see where I am then.
Copy linkTweet thisAlerts:
@magnitudeauthorSep 06.2007 — Maybe you do not understand the purpose of:

[B]* {margin:0; padding:0;}[/B] ?

This removes padding and margin from [I]everything[/I], every element that can appear in your page, has margin & padding rendered to "zero", therefore: is needlessly re-stated and can be safely removed.They only contrubute to code-bloat and confusion. :p

You provided the 'universal selector' of " * [B]{margin:0; padding:0;}[/B] ", -so why not let it do what it does? ?[/QUOTE]

Thanks webJoel. I do understand the * and the impact it has. It was added to the top of my CSS to make sure everything started with 0 when trying to trouble shoot this problem. I did not double back yet and remove the redundant margin/padding settings.
×

Success!

Help @magnitude spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...