471,618 Members | 1,153 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,618 software developers and data experts.

Padding issue between IE and Firefox

219 100+
I've got a problem with my padding of the bottom border on the title, and section
div's on my page. In firefox the borders line up, but in IE the section border is slightly below the title border.

Expand|Select|Wrap|Line Numbers
  1.     <div id="headerContainer">
  2.         <div id="title">
  3.             <h1>HealthAlliance Hospital</h1>
  4.             <h4>Capacity Status</h4>
  5.         </div>
  6.         <div id="section">
  7.                <h4>The Big Picture</h4>
  8.         </div>
  9.     </div>
  10.  
Expand|Select|Wrap|Line Numbers
  1. #headerContainer{
  2.     height:35px;
  3.    background-color:#369;
  4.     padding:10px 0;
  5. }
  6. #title{
  7.     width:520px;
  8.     float : left;
  9. }
  10. #title h1{
  11.     font-size:18px;
  12.     color:#FFFF99;
  13.     padding-left:10px;
  14. }
  15. #title h4{
  16.     font-size:12px;
  17.     color:#FFF;
  18.     font-style:italic;
  19.     padding-left:10px;
  20.     border-bottom:1px solid #CCC;
  21. }
  22. #section{
  23.     width : 258px;
  24.     float:left;
  25.     padding-top:23px;
  26. }
  27. #section h4{
  28.     font-size:11px;
  29.     color:#FFCC66;
  30.     text-align:right;
  31.     padding-right:10px;
  32.     border-bottom:1px solid #CCC;
  33. }
  34.  
Oct 12 '07 #1
10 2267
drhowarddrfine
7,435 Expert 4TB
It doesn't line up in Firefox for me either. Are you using a doctype?
Oct 12 '07 #2
dmorand
219 100+
It doesn't line up in Firefox for me either. Are you using a doctype?
Yes, here's the top of my html

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Big Pic</title>
  6.     <link rel="stylesheet" type="text/css" href="codegrey_v2.css" />
  7.  
Oct 12 '07 #3
drhowarddrfine
7,435 Expert 4TB
Yes, here's the top of my html

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Big Pic</title>
  6.     <link rel="stylesheet" type="text/css" href="codegrey_v2.css" />
  7.  
All new pages should always use a strict doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

The <html xmlns... line is for XHTML only and you should change it to <html>. The ending tags /> are also only for XHTML and you need to remove the slashes.

Your charset is fine but we are turning into a global market so you should internationalize yourself, too: charset=utf-8.

You don't need all those divs unless you're planning on doing something else. I didn't get to the underline but look at this:
[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#headerContainer{
position:relative;
background-color:#369;
padding:0 10px;
overflow:auto;
}
#headerContainer h1{
font-size:18px;
color:#FF9;
}
h4{
font-size:12px;
}
#headerContainer #status{
float:left;
font-style:italic;
color:#fff;
}
#headerContainer #big-picture{
float:right;
color:#FFCC66;
}
</style>
</head>
<body>
<div id="headerContainer">

<h1>HealthAlliance Hospital</h1>
<h4 id="status">Capacity Status</h4>
<h4 id="big-picture">The Big Picture</h4>

</div>
</body>
</html>[/HTML]
Oct 12 '07 #4
drhowarddrfine
7,435 Expert 4TB
Ack! I checked in IE7 but not IE6. We have to hack IE to make my markup work since IE is the worst browser on the planet.

This takes care of "HasLayout" in stupid IE. We need to use "conditional comments" and can modify the above by adding this to the <head>:

<!--[if IE 6]>
<style type="text/css">
#headerContainer {
height: 1%;
}
</style>
<![endif]-->
Oct 12 '07 #5
dmorand
219 100+
All new pages should always use a strict doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

The <html xmlns... line is for XHTML only and you should change it to <html>. The ending tags /> are also only for XHTML and you need to remove the slashes.

Your charset is fine but we are turning into a global market so you should internationalize yourself, too: charset=utf-8.
Thanks for the tips on the DOCTYPE and charset. I have the extra div's as "containers" so that I can float things properly. The people in my organization mostly use IE 6 so I'm stuck developing on that, but I use firefox on my workstation so I test against that as well. IE is definitely the worst browser ever, it's annoying all the quirks it has and all the hacks that are necessary.

I have it setup as a pixel layout, and it looks good on IE and firefox, other than I can't get the underline to work properly, so for the time being I scrapped it until I can figure out what the hell is wrong with it.

Thanks for all your help. Do you happen to recommend any good css sites or books that I can read up on to get better acquainted? It seems that everyone has their own way to create pages whether it's using positioned elements, floats, pixels, em's, etc etc.
Oct 12 '07 #6
drhowarddrfine
7,435 Expert 4TB
The people in my organization mostly use IE 6 so I'm stuck developing on that, but I use firefox on my workstation so I test against that as well.
Do yourself a favor. If you initially test your markup on Firefox, then your markup will probably work everywhere. If you test your markup using IE, chances are it won't work anywhere else and then, like now, you can't figure why certain things don't work.

It's easier to get your markup right and hack IE than it is to write for a buggy browser and try and adjust those bugs, once for FF, a different way for Opera, still another way for Safari. The hacks and bugs are all known and easy to fix (though sometimes hard to figure out).

Marking up using IE as your reference is just plain stupid and I'm not afraid to say that to anyone. (Present company excepted :) )

I have heard of some of the books out there but don't remember which ones I've glanced at. CSS Mastery is the last one I heard. However, the latest one which I highly recommend is "Transcending CSS". I don't recall if it might be too advanced for a newbie to this but it opened my eyes to some things I wasn't thinking about.

You might be told about Eric Meyer's book but that one is just too old.
Oct 12 '07 #7
dmorand
219 100+
Do yourself a favor. If you initially test your markup on Firefox, then your markup will probably work everywhere. If you test your markup using IE, chances are it won't work anywhere else and then, like now, you can't figure why certain things don't work.

It's easier to get your markup right and hack IE than it is to write for a buggy browser and try and adjust those bugs, once for FF, a different way for Opera, still another way for Safari. The hacks and bugs are all known and easy to fix (though sometimes hard to figure out).

Marking up using IE as your reference is just plain stupid and I'm not afraid to say that to anyone. (Present company excepted :) )

I have heard of some of the books out there but don't remember which ones I've glanced at. CSS Mastery is the last one I heard. However, the latest one which I highly recommend is "Transcending CSS". I don't recall if it might be too advanced for a newbie to this but it opened my eyes to some things I wasn't thinking about.

You might be told about Eric Meyer's book but that one is just too old.
Lol, thanks. I knew that I should develop for FF, and that's what I test my own private site in. I just have to rely on IE for work so I've been testing in that. I should go with your method though and just always use FF, and hack for IE.

I actually have that Eric Meyer book, but you're right. It's a little dated now. I just picked up the CSS Anthology v2 as I hear it's pretty good, and I also got the "CSS Definitive Guide" O Reilly book, so we'll see how those are. All of the books I read show you how to develop sites a different way so it's annoying. I'm enjoying the web development, I just need to learn all the quirks.
Oct 13 '07 #8
drhowarddrfine
7,435 Expert 4TB
I knew that I should develop for FF
Just to be clear, I'm not saying develop for Firefox. I'm saying develop with to web standards with the most standards compliant browser. You cannot depend on IE to do that so you must use Firefox or Opera or Safari.

And if anyone thinks Microsoft and the IE team have standards compliance on the fast track, lead developer Chris Wilson has already stated they will comply with what they think is important.

In the meantime, IE market share is dwindling as Firefox share increases.
Oct 13 '07 #9
dmorand
219 100+
Just to be clear, I'm not saying develop for Firefox. I'm saying develop with to web standards with the most standards compliant browser. You cannot depend on IE to do that so you must use Firefox or Opera or Safari.

And if anyone thinks Microsoft and the IE team have standards compliance on the fast track, lead developer Chris Wilson has already stated they will comply with what they think is important.

In the meantime, IE market share is dwindling as Firefox share increases.
Yeah I haven't used IE for a couple of years now. Firefox is much better from what I have seen. Do you have any work I can check out? I appreciate all the help you've been giving me. Books are one thing, but it's good to hear from people who know what they are doing developing standards. I have to make sure I use the right DOCTYPE from now on because I've noticed that having the wrong one causes my page to look messed up.
Oct 13 '07 #10
drhowarddrfine
7,435 Expert 4TB
Doctype is short for "Document Type Definition". It's the set of rules you tell the browser you are using to create your page. Without one, your leaving it up to the browser which, in IEs case, is its broken "box model" where they screwed up and misinterpreted the W3C published standards and we are still paying the price for that 10 years later. Technically, that is the ONLY reason you need a doctype!

I have a paranoia about giving out the sites I link to. Then strange people start calling you. But go to Eric Meyer's site and Cameron Moll's. Look at their source and their "friend's" pages.
Oct 13 '07 #11

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

reply views Thread by PJ | last post: by
2 posts views Thread by Knoxy | last post: by
5 posts views Thread by Gustaf Liljegren | last post: by
7 posts views Thread by Gustaf Liljegren | last post: by
3 posts views Thread by Steve Sabljak | last post: by
36 posts views Thread by phil-news-nospam | last post: by
10 posts views Thread by Alan Silver | last post: by
reply views Thread by leo001 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.