 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / July 2003DIV and UL: two different blocks in IE ?
Hi all, I am new to CSS (and web technologies in general) and trying to do some basic stuff with it. For example, I'd like to position a block element centered in a page: the text inside this block should be also centered. Here is what I tried: <html> <head> <style type="text/css"> <!-- body, ul, div { margin: 0 ; padding: 0 ; } .test { text-align: center ; width: 95% ; margin: 1em auto ; border: #3333ff 1px solid ; } --> </style> </head> <body> <div class="test">test</div> </body> </html> In Mozilla, what I get is a blue rectangle around the div that's 95% wide as the body, with some space left and right (presumably 2.5% each side), plus text centered in this rectangle. Exactly what I want. In IE6, the div pushed to left side, i.e. it's not centered at all. The strange thing (to me) is that if I replace the div by an ul, then I get what I want. Can you explain that ? And can you explain me how to center the div (I don't need any ul here, actually I want to have an address element, but it behaves just the same as the div...) ? >I am new to CSS (and web technologies in general) and trying to do some >basic stuff with it. For example, I'd like to position a block element [quoted text clipped - 3 lines] ><html> ><head> No Doctype so you're putting IE6 into quirks mode. ><style type="text/css"> ><!-- [quoted text clipped - 8 lines] > width: 95% ; > margin: 1em auto ; If you're setting the width to 95% why not use margin: 1em 2.5%; It's supported by a wider range of browsers than the auto value. > border: #3333ff 1px solid ; >} [quoted text clipped - 14 lines] >strange thing (to me) is that if I replace the div by an ul, then I get >what I want. Can you explain that ? Actually, not the case. The UL is not centered, the standard left indent makes it look as if it is. If you put both the div and the ul in the same page you'll see that they end at the same point. i.e. the 95% includes the ul's left indent. Have a look at the source of http://steve.pugh.net/test/test58-s.html (standards mode) and http://steve.pugh.net/test/test58-s.html (quirks mode) Steve  Signature"My theories appal you, my heresies outrage you, I never answer letters and you don't like my tie." - The Doctor Steve Pugh <steve@pugh.net> <http://steve.pugh.net/> Well, first, thanks for your quick, clear and documented explanations ! I have a few remarks, though (just because I like details...) > No Doctype so you're putting IE6 into quirks mode. Actually, when I made my test, I had a doctype specifying XHTML, so I thought I could also include the ?xml? process instruction. Here is what I first had at the very top of my document: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> With these two lines, IE6 behaves just the same as without them, that's why I posted my example without them. But after reading your answer, I simply added the doctype line without the PI and then it worked ! Do you know why this ?xml? interferes ? > If you're setting the width to 95% why not use > margin: 1em 2.5%; > It's supported by a wider range of browsers than the auto value. I guess you're right: the simpler, the better... (although this auto stuff is neat) >>In IE6, the div pushed to left side, i.e. it's not centered at all. The >>strange thing (to me) is that if I replace the div by an ul, then I get [quoted text clipped - 4 lines] > in the same page you'll see that they end at the same point. i.e. the > 95% includes the ul's left indent. On this point, I disagree: I took care to set margins and paddings to 0 for the div AND the ul so that default settings of UA should not play any role. This is illustrated by the first two div and ul in test58-q.html file: the div is not centered (no doctype, quirk mode, ok), but the ul is not indented, I think it is centered, because if you widen your window, the left and right spaces around the ul grow even if you add the "text-indent: 0" property. Am I wrong ? Anyway, thanks again. Vincent. > I simply added the doctype line without the PI and then it worked ! Do you > know why this ?xml? interferes ? It's a bug in Internet Explorer. It's present in early Opera 7.x releases too. SignatureJim Dabell >> No Doctype so you're putting IE6 into quirks mode. > [quoted text clipped - 10 lines] >simply added the doctype line without the PI and then it worked ! Do you >know why this ?xml? interferes ? Because Microsoft are stupid. IE is programmed to look only at the first non-white space line of the file for a doctype. If there's anything before the doctype (XML, a comment, anything) then it goes into Quirks mode. >>>In IE6, the div pushed to left side, i.e. it's not centered at all. The >>>strange thing (to me) is that if I replace the div by an ul, then I get [quoted text clipped - 8 lines] >for the div AND the ul so that default settings of UA should not play >any role. "Should" and IE rarely have anything to do with each other. You effectively have UL { margin: 0} UL {margin 1em auto} The first style might as well not be there. It's completely wiped out by the second. As IE in Quirks mode takes auto to mean the default, the default margin on the UL is present. >This is illustrated by the first two div and ul in test58-q.html file: >the div is not centered (no doctype, quirk mode, ok), but the ul is not >indented, I think it is centered, because if you widen your window, the >left and right spaces around the ul grow Change the width to 70% and you'll see that the UL is certainly not centered. > even if you add the "text-indent: 0" property. I don't think that text-indent should have any effect on UL anyway. The indent is actually caused by margins and/or padding on the UL itself and on the LI elements (the exact details varies from browser to browser). I've changed the two test cases to better illustrate this. http://steve.pugh.net/test/test58-q.html http://steve.pugh.net/test/test58-s.html You can now see how in Quirks mode everything is screwed up one way or another, whilst in Standards mode everything works as it should. Steve Signature"My theories appal you, my heresies outrage you, I never answer letters and you don't like my tie." - The Doctor Steve Pugh <steve@pugh.net> <http://steve.pugh.net/> > Because Microsoft are stupid. IE is programmed to look only at the > first non-white space line of the file for a doctype. If there's > anything before the doctype (XML, a comment, anything) then it goes > into Quirks mode. Amazing... > Change the width to 70% and you'll see that the UL is certainly not > centered. Ok, you convinced me. Thanks a lot for your time and explanations... Vincent. |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.