page is good in IE but not firefox? very simple problem. [Archive]

View Full Version : page is good in IE but not firefox? very simple problem.

konartis

15th November 06, 04:07 AM

ok. this time i have screenshots and code. :$
i am trying to get the text to fit over the top of the menu bar.
all of the other elements (4 pictures all up-left logo, right logo, left menu, right menu) are rendered together in both browsers.
in IE it renders perfectly, but firefox does not (2.0)

here it is in IE:
http://img299.imageshack.us/img299/6370/mysiteinieaa9.jpg (http://imageshack.us)

and here in FF:
http://img299.imageshack.us/img299/2106/mysiteinffpy6.jpg (http://imageshack.us)

here is the code, and i would really appreciate some pointers. i do not know what i am doing wrong.
thank you

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>website title!</title>
</head>
<style type="text/css">

body, html {padding: 0; margin: 0;}
body {width: 1007px;}
#top-a {width: 100%;}
#top-b {height: 30px; margin: 0; position: absolute; top: 131px}
#topleftimage {float: left;}
#menubar {float: left;}
#menutxt li { color: #FFFFFF;
list-style: none;
display: inline;
padding-right: 18px;
padding-left: 18px;

}
#menutxt {z-index: 1; position: absolute; top: 135; left: 0;}
#menutxt ul {margin-left: 0; }

</style>
<body>
<div id="container">
<div id="top-a">
<img id="topleftimage" src="images/top-left.jpg" alt="" width="566" height="131" />
<img src="images/top-right.jpg" alt="" width="441" height="131" />
</div>

<div id="top-b">
<div id="menuback">
<img id="menubar" src="images/menu-bar.gif" alt="" width="871" height="30" />
<img src="images/menu-end.gif" alt="" width="136" height="30" />
</div>
</div>

<div id="menutxt">
<ul>
<li>home</li>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</div>

</div>
</body>
</html>

quiller

16th November 06, 02:41 AM

Well, beyond my confusion on your stylesheet and markup, the problem you reference is due to <ul>. By default, <ul> (and <ol>, for that matter) has a top and bottom margin/padding. For some reason, IE has ignored it, but Firefox is correct in its placement.

Solution:

#menubar ul {
margin: 0;
padding: 0;
}

konartis

16th November 06, 06:24 AM

thank you very much for your help. but can i ask:
where is a good source to teach me things like that? i mean the part about <ul>/<ol> having top and bottom margin? it seems like these are fundamental. i sat through a lynda video on the basics of css2 and it taught me nothing more than w3 could.
i dont know why my code is so sloppy, i guess i just do what works and clean it up later. i am not very experienced. thanks again for your reply.

quiller

16th November 06, 07:52 PM

I don't know of any good 'beginner' guides to CSS, since I learned by experimentation. Hopefully somebody around here can suggest something, but overall: some elements (p, h1-h6, div, etc) are block while others (a, img, span, etc) are inline. The difference: inline elements flow with the content, block separate themselves. Block elements will traditionally contain a default top/bottom margin/padding (with the exception of div, most notably).

This (http://www.autisticcuckoo.net/archive.php?id=2005/01/11/block-vs-inline-1) looks like a decent introduction to inline v. block.

konartis

16th November 06, 10:54 PM

thank you

stef686

27th November 06, 12:57 PM

A good tip is to put this at the top of you CSS:

* {
padding: 0;
margin: 0;
}

This will reset padding and margins on everything from browser defaults. This is really helpful as different browsers have different defaults and everything is then on an level par. It also sets it up nicely so you can have complete control over the paddings & margins in the rest of your CSS