Hey guys, could you please take a look at my code: http://www.sportsgfx.net/tests/css/ As you can see, in FF text-align: center doesn't appear to be working, along with the line that seems to be separating the content from the nav bar for some reason. It works pretty much the way it should in IE. Thanks for your help.
What do you expect to happen? When text is added, it is indeed centered. <div id="midarea"> <p>centered text?</p> <div id="content"> <div id="bluenav"/> <!-- not good practice --> </div> <div id="bottombar"/> <!-- again, empty block element and shorthand close --> </div> Code (markup): If IE renders one way, and Firefox another, assume IE got it wrong. cheers, gary
Seconding the suggestion to assume that IE got it wrong. Always code to Firefox first, it is more compliant. Then make adjustments for IE. Also, about the empty block elements: kk5st is right, its bad practice. However, when doing a page layout with CSS and creating a div solely for an image, you're going to end up with them, right? What I usually do: <style> .hidden{display:none;} #picture{background-image:url('blahblah.jpg');} </style> <div id="picture"> <p class="hidden"> Filler </p> </div> Code (markup): But I still haven't addressed your issue. My best input is just to code to Firefox first and then work around to IE, like I said. For starters, don't use text-align:center; to align a div. Use margin:0 auto; or simply margin:auto;.
Ok thanks for your help guys. Here's what I have now: http://www.sportsgfx.net/tests/css/usc/ I'm not sure how I could put this box in though: http://www.sportsgfx.net/tests/css/usc/bluenav.jpg Also, I'm not sure what to do for the padding for the content. If I add padding, it just screws up the positioning of the content bg-image. Sorry if I'm not making sense here. Help/comments/criticism/suggestions are extremely welcome.
Never code to Firefox first. Assuming you're running Windows, code as you go along in Internet Explorer, Firefox, Opera and Safari. Whenever you add or change something, stop for a moment and check in the browsers. You can download IE standalones (which require modifiying - read: hacking - the Windows Registry), Firefox, Opera and Safari here: http://tredosoft.com/MultipleIE http://www.getfirefox.com http://www.opera.com/download http://www.apple.com/safari
I agree with Dan. I use FF, but I am a developer and I know that only 15% of web users are using it too. So I always check in this order: IE6 (slogan: it's better than 5.5!), IE7, FF, Safari, Opera. Back to sunster's problem. It looks like you added the box you were looking for, are you trying to add something else? What do you want to add padding to?
I don't check in any given order. I check them all at the same time (not the exact same time mind you, but I check after adding or changing an element/style/script/component).