473,240 Members | 1,448 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,240 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 2400
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

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

Similar topics

0
by: PJ | last post by:
I have an issue w/ padding on a form page. I am using a technique described at: http://www.alistapart.com/articles/practicalcss/ for laying out a typical form sheet w/ left floated span labels and...
2
by: Knoxy | last post by:
Hello, I've noticed one or two people post on this before but nobody seems to have replied so raising the issue again... is this a known IE6 CSS bug? I have placed the following in my...
5
by: Gustaf Liljegren | last post by:
I use to trust Firefox, but in this case, I don't know what to think. My test page: http://gusgus.cn/test/index.html IE6 does the right thing. The containting <div> is 600px, and within it,...
7
by: Gustaf Liljegren | last post by:
I continued on the example shown earlier today: http://gusgus.cn/test/index.html Now I get some unwanted space in Firefox (the red space just below the first image) which doesn't appear in...
3
by: Steve Sabljak | last post by:
I seem to having a little trouble getting a table to display correctly in both msie and firefox. I want to set the table and column widths in pixels, and have some cell padding too. The table...
26
by: Spondishy | last post by:
Hi, I have a problem with divs and padding in IE6 and Firefox. Basically my example that I have attached works exactly how I want in IE6, but padding is treated differently in Firefox. My...
36
by: phil-news-nospam | last post by:
Here is a simpler (no drop shadows) example of the padding bug I see: http://phil.ipal.org/usenet/ciwas/2006-05-08/buttons-1.html So far I find nothing in the CSS2 document that says I should...
10
by: Alan Silver | last post by:
Hello, In my (seemingly) endless quest to understand CSS, I have yet another problem. Please look at http://www.kidsinaction.org.uk/ph/x.html in Opera, where you will see it how I expected. If...
3
by: Daz | last post by:
Hi everyone. I have just been making a JavaScript chat applet, which should open in a new child window. It does all of this fine, and works within Firefox beatifully. However, IE thinks it's...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...

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.