margins different in ie7 and firefox 3

7 replies [Last post]

Tue, 2008-11-18 22:44

lemix

Offline

newbie

Joined: 2008-10-31

Posts: 5

Points: 0

I'm trying to adjust the margin betwwen the h1/p tags and the list below it. It does what I want in FireFox but not IE. And even stranger is that IE treats the first h1/p/list combo completely different from the others.

Any help is greatly appreciated. I've been stuck on this for days.

CSS

.databases {
	font-size: 12px;
}
.databases h2 {
	font-size: 20px;
	float: left;
	width: 50%;
	margin: 0;
	font-size: 14px;
	color: #333366;
	border-bottom: 1px solid #CCCCCC;
	padding: 0;
}
.databases p {
	font-size: 10px;
	float: right;
	width: 50%;
	margin: 0;
	clear: right;
	text-align: right;
	height: 16px;
	border-bottom: 1px solid #CCCCCC;
	vertical-align: middle;
	padding: 0;
}
.databases ul {
	clear: left;
	background-color: #FFFFCC;
	list-style-type: circle;
	margin: 0 0 20px 25px;
	padding: 0;
}

HTML

<div class="databases">
        <h2>heading 2</h2>
        <p>Back to top</p>
        <ul>
          <li>item 1</li>
          <li>item 2</li>
          <li>item3</li>
        </ul>
        <h2>heading 2</h2>
        <p>Back to top</p>
        <ul>
          <li>item 1</li>
          <li>item 2</li>
          <li>item 3</li>
        </ul>
        <h2>heading 2</h2>
        <p>Back to top</p>
        <ul>
          <li>item 1</li>
          <li>item 2</li>
        </ul>

Tags:

Beginners CSS Questions

Tue, 2008-11-18 22:46

Deuce

Online

Guru

Timezone: GMT-8

Joined: 2005-11-20

Posts: 3185

Points: 431

is that all your html? you

is that all your html?
you are missing quite a bit of the important stuff.

If it's not all your html - how about a link to it?

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Tue, 2008-11-18 22:50

lemix

Offline

newbie

Joined: 2008-10-31

Posts: 5

Points: 0

Thanks for helping. Here's

Thanks for helping. Here's the whole thing (sorry!)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.databases {
	font-size: 12px;
}
.databases h2 {
	font-size: 20px;
	float: left;
	width: 50%;
	margin: 0;
	font-size: 14px;
	color: #333366;
	border-bottom: 1px solid #CCCCCC;
	padding: 0;
}
.databases p {
	font-size: 10px;
	float: right;
	width: 50%;
	margin: 0;
	clear: right;
	text-align: right;
	height: 16px;
	border-bottom: 1px solid #CCCCCC;
	vertical-align: middle;
	padding: 0;
}
.databases ul {
	clear: left;
	background-color: #FFFFCC;
	list-style-type: circle;
	margin: 0 0 20px 25px;
	padding: 0;
}
 
-->
</style>
</head>
 
<body>
<div class="databases">
        <h2>heading 2</h2>
        <p>Back to top</p>
        <ul>
          <li>item 1</li>
          <li>item 2</li>
          <li>item3</li>
        </ul>
        <h2>heading 2</h2>
        <p>Back to top</p>
        <ul>
          <li>item 1</li>
          <li>item 2</li>
          <li>item 3</li>
        </ul>
        <h2>heading 2</h2>
        <p>Back to top</p>
        <ul>
          <li>item 1</li>
          <li>item 2</li>
        </ul>
 
</div>
</body>
</html>

Wed, 2008-11-19 00:15

CupidsToejam

Offline

Elder

Timezone: GMT-6

Joined: 2008-08-15

Posts: 1760

Points: 589

I added margin to .databases

I added margin to .databases h2. see below.

.databases h2 {
	font-size: 20px;
	float: left;
	width: 50%;
	margin: 0;
	font-size: 14px;
	color: #333366;
	border-bottom: 1px solid #CCCCCC;
	<span style="font-weight:bold">margin-bottom: 15px;</span>
}

This added 15px margin under the h2. Also to help your page look more consistent across browsers, insert browser reset code at the top of your CSS.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

--------------------------------------------------

First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS

http://www.pixelbehavior.com

Wed, 2008-11-19 00:17

lemix

Offline

newbie

Joined: 2008-10-31

Posts: 5

Points: 0

Still doesn't work. If you

Still doesn't work. If you try it, it doesn't render correctly in IE.

Wed, 2008-11-19 00:21

CupidsToejam

Offline

Elder

Timezone: GMT-6

Joined: 2008-08-15

Posts: 1760

Points: 589

looks good in my IE

You simply want to add margin under your H2, right? It renders fine in IE7 and FF with the example I provided.

--------------------------------------------------

First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS

http://www.pixelbehavior.com

Tue, 2008-11-25 00:21

lemix

Offline

newbie

Joined: 2008-10-31

Posts: 5

Points: 0

compare ie7 and firefox

When I compared them in the two different browsers it wasn't working.

If you look closely, Firefox is displaying the correct (?) margins. In IE, the first list displays properly, but the ones below it look like the margin is doubled.

If I could just figure this out.... Anyone else have any suggestions?

Tue, 2008-11-25 01:59

Ed Seedhouse

Offline

Guru

Timezone: GMT-8

Joined: 2005-12-14

Posts: 3047

Points: 125

lemix wrote:If you look

lemix wrote:

If you look closely

Er, since you haven't given a link to your site, how are we supposed to do that?

Ed Seedhouse

From the shores of the Salish sea.

margins different in ie7 and firefox 3

is that all your html? you

Thanks for helping. Here's

I added margin to .databases

Still doesn't work. If you

looks good in my IE

compare ie7 and firefox

lemix wrote:If you look

New forum topics

User login

Navigation