Hi, I am working on a website. My css works fine in IE6 but have issues in Mozilla. I have'nt tested on IE 7 yet. The issue is that in Firefox 2.0.0.6 the margins don't seem to work fine, there is a gap between the header image and the hortizontal navigation. I'd appreciate if someone can help me fix this. Thanks! P.S. you can replace my header image name and path in the CSS to test. Following is my code. CSS CODE: /* CSS Document */ html,body{ margin:0; padding:0} body{ font: 76% arial,sans-serif; text-align:center} p{ margin:0px 5px 5px} a{ display:block;color: #981793; padding:0px} div#header { height:151px; line-height:100px;margin:0; margin-bottom: 1px; padding-left:10px; background: #fff; color: #fff; background-image: url(/dk/images/test.jpg)} div#menu ul{ padding-left: 0; margin-left: 0; background-color: #203758; color: White; float: left; width: 100%; font-family: arial, helvetica, sans-serif} div#menu ul li { display: inline} div#menu ul li a{ padding: 5px 40px; background-color: #203758; color: White; text-decoration: none; float: left; border-right: 1px solid #fff; margin-top: 0.5px} div#menu ul li a:hover{ background-color: #CACE33; color: #fff} div#container{ text-align:left; background: #fff} div#content p{ line-height:1.5} div#footer{ font-size:10px; background:#203758; color: #FFF} div#footer p{ margin:0; padding:5px 10px} div#container{ width:650px; margin:0 auto} div#wrapper{ float:left; width:100%} div#content{ margin-right: 200px; margin-top: 20px; margin-bottom: 20px; text-align: left} div#extra{ float:left; width:150px; margin-left:-150px; margin-top:1.5px; } .buttons a { color: #FFFFFF; background-color: #203758; padding: 2px; padding-left: 3px; display: block; border-left: 10px solid #203758; font: 12px Arial, sans-serif; font-weight: regular; text-decoration: none; text-align: left; margin-top: 1px;} .buttons a:hover { border-left: 10px solid #CACE33; text-decoration: none; color: #FFFFFF;} div#footer{ clear:left; width:100%} XHTML CODE: <body> <div id="container"> <div id="header"></div> <div id="menu"> <ul id="navlist"> <li id="active"><a href="" id="current">Criminal Law</a></li> <li><a href="">Family Law</a></li> <li><a href="">Civil Litigation</a></li> </ul> </div> <div id="wrapper"> <div id="content"> <p><strong>heretext,</strong> heretextheretextheretextheretextheretextheretextheretextheretextheretextheret </p> <p>heretextheretextheretextheretextheretextheretextheretextheretext </p> <p><strong>heretext</strong></p> <p><i>heretextheretextheretextheretextheretextheretextheretextherextheretext </i></p> <p>test content.</p> </p> </div> </div> <div id="extra"> <div class="buttons"> <a href="">Home</a> <a href="In The News</a> <a href="">What's Doing?</a> <a href="">Contact Us</a> </div> </div> <div id="footer"> <p align="center">my website © 2007</p> </div> </div> </body>
That's a lot of code. I'd go for a more minimalistic approach myself (with the amount of code used). Tell you what. I'm too lazy to copy/paste all that (especially with me working on four Web sites of my own right now, including my online portfolio/personal site/blog among other things), so if you can put that up into a demo page and link it here, I'll show you what to do to clean that up (unless deathshadow beats me to it, which he's more than welcome to do so).
Maybe Dan can answer this, but why do some people zero out padding and margin on both HTML and BODY? Isn't it just fine with BODY? Do some browsers actually assign padding/margin on HTML? Anyway, you need to start using either a reset.css or the universal reset, which resets margins/paddings and makes spacing a little more consistent cross-browser. Add this at the top of your stylesheet: *{margin:0;padding:0;} I believe FF had some default margins on your div#menu ul, which explains the spacing.
Because some browsers will actually put padding (or margins) on the HTML element, even though technically they shouldn't.
It's better to design the site to look good in FireFox, then you need to make alternate stylesheets so it renders correctly in IE. Zeroing out all the default margins & padding will help accomplish some of this.
Bullcrap, baloney and malarky. You can make your site look virtually identical cross-browser and you don't even need conditional comments or even hacks 9.997 times out of ten. You just have to know what you're doing is all.
I'll admit the universal selector (I think that's what you're referring to) is pretty darn handy, but it should (and I'm saying this for the benefit of others who will be reading this thread in the future, not you) be used only to reset the margins and padding on everything to zero. Also note it can wreak havoc with forms if you're not careful.
I was just giving a another option for the person to use. Now when I've used the unverisal selector I've normally used it like this: I used the technique I posted, in example, if I wanted to display a certain block to only IE users...just little things. Never hurts to know more options/avenues.
Using that to reset the borders will wreak havoc with the usability of forms, the font weight is already normal for all elements save for headings (which are bold by default), list-style should be applied only to lists, and text-decoration is best used for anchors and elements that need styling on text (such as underlining a span of text).
I personally prefer to zero everything out, and customize the style to my liking, which I feel gives me more control of my layout and has never failed me yet.
How many of your users has it failed though? As I've said before, it's a powerful tool, but like any kind of power, a certain level of responsibililty has to be taken for its use.
That doesn't mean that anyone's been affected. What it means is that if anyone has been affected, they haven't taken the time to contact you about it.
Well, I'll just agree with you to make you happy, as you seem to have an answer for everything. No point in dragging theshad_ow's thread any longer. The thread starter need help, you've presented an option as I did as well. I imagine theshad_ow take the route he wishes to take and go from there. If you still wish to talk you can pm me.
Eh, things like this happen when your mother's been hospitalized and you have to quit working to stay home for a year to nurse her back to health (or just give up and ship her out to a nursing home - something I can never stand for, I'm too family-oriented) and decide to spend all that free time learning CSS inside and out (and I do mean to the point where one becomes an expert or authority on it). It's weird, since not only did it happen to me, but had it not, I'd probably be on the streets right now.
I commend yo for taking care of your mother. I've read several books on CSS. I'm currently diving into Php 5, C++, javascript and AJAX...i have way too many books and not enough time to read them all and practice what I've learned.