Forum Moderators: not2easy
I am trying to use CSS to create a simple calendar. I have 1 main div (#farouter) that I use for the entire page. The problem comes when I try to create a calendar page.
The way I am going about it is to create a new div (#calwrapper) that wraps the entire calendar entry (date, info, etc). I want the date of the event to be in the upper left of this div, and the description to be on the right side. The bottom of this div is to have a border on it's bottom that separates it from the next calendar entry.
I created 2 divs, one for the date (#caldate) and one for the description (#caldesc) and I nested them in the #calwrapper div, and floated them left so they would line up.
The page looks good when previewed in Firefox, but when I go into IE6, it is not being formatted correctly. The #calwrapper div's border is on TOP (instead of the bottom), and it's bottom margin is being ignored.
I am completely stuck now. I am fairly certain that this is one of those fun little IE bugs, but I have no idea what to do for it. I am also not sure what to call it, so my forum searches come up fruitless. Any help would be appreciated.
Here is my code and HTML (Test case) (I tried to make it as short as possible):
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: 600;
background-color: #000000;
}
#farouter {
width: 760px;
border: 1px solid #3A291F;
margin: 20px auto 20px auto;
text-align: left; /* IE 5.5 hack */
top: auto;
background-color: #000000;
color: #999999;
}
#calwrapper {
width 760px;
margin-bottom: 20px;
border-bottom: 1px white solid;
}
#calwrapper:after { /* Code to keep the floats contained in the wrapper */
content: ".";
clear: both;
display: block;
visibility: hidden;
height: 0;
}
#calwrapper .caldate {
width: 160px;
font-family: "Courier New", Courier, monospace;
font-size: 14px;
text-decoration: underline;
color: 999999;
float:left;
margin-left: 3px;
}
#caldesc{
width: 580px;
float: left;
font-family: "Courier New", Courier, monospace;
font-size: 18px;
text-align: left;
font-weight: normal;
margin-left: 5px;
}
#calwrapper #caldesc p:first-letter {
text-transform: capitalize;
}
#caldesc img{
display: block;
margin-bottom: 40px;
margin-left: auto;
margin-right: auto
}
#caldesc .footer{
font-family: "Courier New", Courier, monospace;
font-size: 14px;
text-decoration: underline;
color: #999999;
}
#caldesc .caltitle{
font-family: "Times New Roman", Times, serif;
color: #CCCCCC;
font-size: 24px;
text-decoration: underline;
font-style: italic;
text-align: center;
margin-bottom: 50px;
}
</style>
<body>
<div id="farouter">
<div id="masthead"></div>
<div id="calwrapper">
<div class="caldate">
Lorem ipsum dolor sit amet
</div>
<div id="caldesc">
<p class="caltitle">Calendar Title</p>
<img src="promo.jpg">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
<p class="footer">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
</div>
</div>
<div id="calwrapper">
<div class="caldate">
Lorem ipsum dolor sit amet
</div>
<div id="caldesc">
<p class="caltitle">Calendar Title</p>
<img src="promo.jpg">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit </p>
<p class="footer">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
</div>
</div>
</div>
If not the definition, typically when a person thinks of calendar, they think of the square boxes in a month, and 12 months. 'Cased off your code, it looks like that's not want you want though.
you just want a vertical list of days where some event is happening... like an itenery, or schedule, I guess.
Anyways, it works fine on my test for IE6... I put a doctype on mine... yours may not have had, which means IE would be running in quirks mode. Search these forums about using a proper doctype. You could google it as well.
For refernce, this is the doc type I used (you put it before the HTML tag):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
It's downside (which is very minor) is that it renders in quirksmode for Konquerer (not too often used browser though). Also there's one more thing which is different than standards mode: images inside tables align in quirks mode manner (called almost standards mode, for Gecko browsers).
The upside is that all sorts of old tags will validate (namely iframe and font)
[edited by: Xapti at 9:36 pm (utc) on June 4, 2007]
Well, I am not sure what my issue is, I still see the problem in IE6 (unless I did a bad job of explaining it). I Did add the Doctype (I did have one though), and change my font sizes to EM's (good suggestion, thank you), but the main issue remains. I have added a link to a picture of what I see. The left is Firefox, the right is IE6.
Notice the white lines above the text on the right picture? That is my "border-bottom" for my #calwrapper ID. It appears correctly in FF.
FF also correctly shows the 20px bottom margin I have on the #calwrapper ID. If you look at the IE6 screen, you'll see that the text is right under the white border. It is as if IE is collapsing my #calwrapper ID, but allowing the 2 floated elements to act correctly in the #Farouter div, and I do not know why. (I hope I am not being too confusing).
Thanks again for your help!
[edited by: SuzyUK at 8:56 am (utc) on June 6, 2007]
[edit reason] Please no screenshots/example links - see charter link at top for more [/edit]
edit:
gah.... I tested it again... It doesn't seem to do anything... I was quite certain it rendered properly though... I guess not?
edit:
Okay... anyways: I noticed you had a #calwrapper:after style there. I don't know if you know this and did a workaround for IE, but IE doesn't support the :after pseudo-element.
A somewhat interesting way to fix this float containment problem is setting the container to oveflow:auto. For IE 6 and below you'll also have to make sure it has HasLayout, which is a strange attribute in IE you can get to be true if you set a height or a width of the element. Zoom:1 can also work (won't validate though, and doesn't work on IE<6)
I personally just like adding a clear element after it, since it's the easiest way to get compliance out of all the browsers easily. Some people complain about how "it adds unnecessary markup to your page which is associated with presentational display", but no client viewing your page (except maybe your client from hell) would complain about something like that, because they can't even see it. They'd have to look in the source.
The bigger problem IMO is using tables for presentational layout, but that's another topic.
edit reason: - see charter [webmasterworld.com] on linking policy, thanks
[edited by: SuzyUK at 8:58 am (utc) on June 6, 2007]
Anyway, adding overflow:auto to #calwrapper did not appear to fix anything in IE (unless I Was using it improperly) I tried using it both with "* html" and applying it right to "#calwrapper". It just ended up making scroll bars appear in FF, and left the problem in IE.
It appears as though Zoom:1 did work. I applied it by adding the following code:
* html #calwrapper { Zoom:1;}
While this did work, you had mentioned that this may not be the best solution. I got to playing a bit, and it appears I found another way to get this to work: apply a height (any height) to #calwrapper. I had to apply it as follows:
* html #calwrapper {height: 1px;}
If I just applied the height to #calwrapper, without "* html", it would mess up Firefox (FF would obey the height). For some reason, this works as well. It allows #calwrapper to expand as far as it needs to as well.
I don't know if I am correct (I'm sure you know gobs more than I about this), but it appears to me as though IE needs *something* in a div, otherwise it will collapse it. Is this a correct statement?
Now, my question which solution is the best? Will the "height" solution be more compatible?
Thank you again for your help. I was having a tough time with this one. It seems like most of the trouble with coding CSS comes from IE. I am really begining to dislike IE! :/
At first, I thought there'd be some magic medium of correct CSS code and a succinct arsenal of hacks I could use to accommodate every browser, but eventually, I came to the conclusion that I wasted more and more time on cross-testing and perfecting a single style sheet to work for everyone than moving on to more important things.
So, my favorite, and surprisingly efficient, method of pleasing my favorite browsers cross the board (FF, IE7, IE6 and below) is by making conditional IF statements within the XHTML to link my style sheets with fixes for each particular browser that's giving me problems... or import if that's your fancy.
I personally begin my designing in FF2.0 and IE7.0, test down the IE line (6.0, 5.5, etc)and then I use an "IE-override.css" to amend JUST the CSS that's giving me a problem. Usually, IE 6 and below are the only ones that gives me painful problems.
[code]
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]> <style type="text/css">@import "IE-override.css";</style> <![endif]-->
<!--[if IE 5.5]> <style type="text/css">@import "IE-override.css";</style> <![endif]-->
<!--[if IE 5.0]> <style type="text/css">@import "IE-override.css";</style> <![endif]-->
<!--[if IE 5]> <style type="text/css">@import "IE-override.css";</style> <![endif]-->
[code]
re:
zoom: 1;* html #calwrapper { Zoom:1;}* html #calwrapper {height: 1px;}height is just another way to set hasLayout [webmasterworld.com], but it will definitely only work for IE6 and below with or without the
* HTMLThere is much to more to say on the subject of haslayout, but I'll leave it for another day in order to help answer your original question.
The problem is not entirely hasLayout it is IE's Float Model, which also has it's foibles. You've said it yourself in a later post:
FF also correctly shows the 20px bottom margin I have on the #calwrapper ID. If you look at the IE6 screen, you'll see that the text is right under the white border. It is as if IE is collapsing my #calwrapper ID,
IE is incorrectly collapsing DEFAULT margins inside floated divs. you can check this by using the hasLyout fix mentioned above it fixes the top margin but not the bottom margin on the last <p> in your #caldesc div.
The best way to handle margins in IE is to explicitly declare them rather than relying on the defaults.
Also I would remove the bottom margin from the #calwrapper div, and instead space the #caldate div using a top margin. After you explicitly declare margins in the <p> or <hn> elements (caltitle element) You will have double spaces if you leave the bottom margin intact.
Changes I would make..
#calwrapper {
width 760px;
/* margin-bottom: 20px; */ /* remove this */
border-bottom: 1px white solid;
}#calwrapper .caldate {
width: 160px;
font-family: "Courier New", Courier, monospace;
font-size: 14px;
text-decoration: underline;
color: 999999;
float:left;
margin-left: 3px;
margin-top: 20px; /* add */
}#calwrapper p {margin: 20px 0;} /* add */
This will give you spacing at the bottom of your entries also , just like FF and the code will suit all browsers without separate CSS. IE does not follow the rules about collapsing margins properly when Float interaction is present
anyway another way to look at it and I hope it helps
Suzy
I had originally fixed this by adding the following code:
* html #caldesc .footer { /* IE fix */
/*margin-bottom: 1em; */
}
This added some space between the bottom border of #calwrapper, and the .footer class. I used the code you suggested and that did the trick as well, without adding any extra IE-specific code. Thank you for the suggestion.
I am not sure I completely understand why it works though. Why do I have to explicitly add a top margin to "#calwrapper .caldate" to get this to work? I would think that only adding the margin to "#calwrapper p" would have have "#calwrapper .caldate" inherit this property, since the "caldate" class is being applied to a <p> tag in the #calwrapper div.
Other than that I think I am good on this one. Thank you all for your help, your suggestions have been great!
Why do I have to explicitly add a top margin to "#calwrapper .caldate" to get this to work? I would think that only adding the margin to "#calwrapper p" would have have "#calwrapper .caldate" inherit this property, since the "caldate" class is being applied to a <p> tag in the #calwrapper div.
you are right, it,
#calwrapper p<div class="caldate">
Lorem ipsum dolor sit amet
</div>
that's why I added the margin to it too - divs do not have default margins so I set it the same as the <p> but if you've a <p> inside that div or "caldate" is a <p> instead of a <div>, you should be good to go without it :)
re your original fix..
* html #caldesc .footer { /* IE fix */
margin-bottom: 1em;
}
That is simply doing the same as I'm suggesting by explicitly setting any margins for IE you "help" IE realise there is a margin there.. it just can't handle them in floats, if left to their default value. You just got more specific about which <p> you set it on than I did ;)
My main reason for encouraging the setting of them outwith the
* html* HTMLbtw.. this happens a lot in IE with any element that has default margins, <p>, <form>, <hx>, <ul>
[edited by: SuzyUK at 2:35 pm (utc) on June 6, 2007]
I understand why you offered the suggestion without the * html hack, and I am going to use it in my code. The less hacks I need to use, the happier I am. Again, thank you for your help I've learned a lot from this (seemingly simple) question.
this will not work in IE7 and the problem still exists in IE7
Ok.. I think I am stuck again.. What do I have to do to get this to work in IE7? Are there any hacks out there that I Can use?
it's the Hacks which won't work in IE7 - * HTML, the parse filter, is no longer read by IE7 so if you're trying to feed IE only some rule that IE7 now needs to see this filter is no longer useful.
BUT if you have changed your CSS so there are no * HTML filters, and you're happy with the outcome, then IE7 should now work too, another reason I suggested "unhacking"
generally these days you should not be looking for hacks, you should be looking to lose them ;)
added: re: the quoted bit you referred to, apart from the fact IE7 won't read either of the rules because of the
* HTML[edited by: SuzyUK at 11:03 pm (utc) on June 7, 2007]
* html #calwrapper {height: 1px;}
Would it help if I take it out and put it in it's own CSS file with an "If, then" statement, like suggested above? If I am understanding correctly (which I may not be), that would not make a difference, since IE7 ignores the * html hacks anyway, correct?
With the hack, the page looks fine in IE6, firefox, Safari, etc, using the code above (w/ the hack) but not IE7. #Calwrapper is still being collapsed.
The best way to handle margins in IE is to explicitly declare them rather than relying on the defaults.
I failed to mention, that this schedule can be of varying sizes, depending on how much/little info I have for the event. Sometimes, it can be 2-3 sentences, and others it can be 20-30. It seems to me that explicitly declaring margins would be more work, and defeat the purpose of using CSS in the first place.
As it stands, now that I have the rest of the margins set up it doesn't look BAD in IE7(I'm probably the only one will notice) it just doesn't look the way it should. Again, I really appreciate your help.
#calwrapper { width 760px;
Notice anything missing? Yep.. appears as though I failed to add a colon after the width peoperty. FF, Safari, IE6, and the like were cutting me some slack. Appears as though IE7 was not so kind.
Anyway, I want to thank you again for your help. You all did help me quite a bit.
I hope I don't make the wall of shame.
