margins different in ie7 and firefox 3
newbie
Posted: Tue, 2008-11-18 22:44
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>
Guru
Posts: 2746
Joined: 2005-11-20
Location: STL
is that all your html? you
Posted: Tue, 2008-11-18 22:46
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
newbie
Posts: 5
Joined: 2008-10-31
Thanks for helping. Here's
Posted: Tue, 2008-11-18 22:50
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>Leader
Posts: 949
Joined: 2008-08-15
Location: Waco, TX
I added margin to .databases
Posted: Wed, 2008-11-19 00:15
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; margin-bottom: 15px; }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 few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic XHTML
3. Validate
4. Design the prototype
5. Style using CSS
http://www.pixelbehavior.com
newbie
Posts: 5
Joined: 2008-10-31
Still doesn't work. If you
Posted: Wed, 2008-11-19 00:17
Still doesn't work. If you try it, it doesn't render correctly in IE.
Leader
Posts: 949
Joined: 2008-08-15
Location: Waco, TX
looks good in my IE
Posted: Wed, 2008-11-19 00:21
You simply want to add margin under your H2, right? It renders fine in IE7 and FF with the example I provided.
--------------------------------------------------
First few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic XHTML
3. Validate
4. Design the prototype
5. Style using CSS
http://www.pixelbehavior.com
newbie
Posts: 5
Joined: 2008-10-31
compare ie7 and firefox
Posted: Tue, 2008-11-25 00:21
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?
Guru
Posts: 2935
Joined: 2005-12-14
Location: Victoria British Columbia
lemix wrote:If you look
Posted: Tue, 2008-11-25 01:59
Er, since you haven't given a link to your site, how are we supposed to do that?
Ed Seedhouse
The leading cause of death? Birth!