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>
Elder
Posts: 1912
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
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>Enthusiast
Posts: 364
Joined: 2008-08-15
Location: 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 to building a webpage.
1. Gather and collect content
2. Organize Content into meaningful XHTML
3. Validate XHTML
4. Prototype look and feel
5. Style design
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.
Enthusiast
Posts: 364
Joined: 2008-08-15
Location: 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 to building a webpage.
1. Gather and collect content
2. Organize Content into meaningful XHTML
3. Validate XHTML
4. Prototype look and feel
5. Style design
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: 2699
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?
I am not now, nor was I ever, any kind of "dude".
Ed Seedhouse