so I’m learning CSS and i came up with this very basic page, i tried adding <hr> or some other seperators between the Title and the to-be <li> section. Chrome seems to add a rectangle to the page (sort of invisible Div) which can be seen in the screenshot(used select-all). How do i get the text/objects under title aligned properly in all browsers?
Screenshot: img194.imageshack.us/img194/9017/css00.jpg
Site/source: http://dl.dropbox.com/u/23916103/layout1.html
SOLVED: apparently this was a bug in Opera, the rotated div on which my title text was had height set to 0 so that it has transparent background, for some unknown reason Opera replaces the 0 with some valid height.
here’s a screenie ( http://img6.imageshack.us/img6/4315/divvs.jpg )
on which you can see the zero-height div that caused bug
thnx for answers.
Firefox and chrome seems to be rendering it properly. Opera seems to be arguing differently with default margins… you should try something like normalize.css. And what you selected in that screenshot is just part of the body. Try inspect-element in chrome- there’s no mysterious div there!