1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Help needed to make CSS compatible in Mozilla

Discussion in 'CSS' started by theshad_ow, Aug 13, 2007.

0
  1. #1
    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>
     
    theshad_ow, Aug 13, 2007 IP
  2. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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). :)
     
    Dan Schulz, Aug 15, 2007 IP
  3. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #3
    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.
     
    soulscratch, Aug 15, 2007 IP
  4. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Because some browsers will actually put padding (or margins) on the HTML element, even though technically they shouldn't.
     
    Dan Schulz, Aug 15, 2007 IP
  5. dalton

    dalton Peon

    Messages:
    39
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    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.
     
    dalton, Aug 17, 2007 IP
  6. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #6
    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.
     
    Dan Schulz, Aug 17, 2007 IP
  7. dalton

    dalton Peon

    Messages:
    39
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I don't ever have to use the technique I posted. I just zero out everything then go from there.
     
    dalton, Aug 17, 2007 IP
  8. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #8
    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.
     
    Dan Schulz, Aug 17, 2007 IP
  9. dalton

    dalton Peon

    Messages:
    39
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    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.
     
    dalton, Aug 17, 2007 IP
  10. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #10
    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).
     
    Dan Schulz, Aug 17, 2007 IP
  11. dalton

    dalton Peon

    Messages:
    39
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11

    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.
     
    dalton, Aug 17, 2007 IP
  12. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #12
    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.
     
    Dan Schulz, Aug 17, 2007 IP
  13. dalton

    dalton Peon

    Messages:
    39
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Like I said, it's my personal preference.
     
    dalton, Aug 17, 2007 IP
  14. dalton

    dalton Peon

    Messages:
    39
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Forgot to mention, it also hasn't failed any of my users.
     
    dalton, Aug 17, 2007 IP
  15. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #15
    And how do you know this?
     
    Dan Schulz, Aug 17, 2007 IP
  16. dalton

    dalton Peon

    Messages:
    39
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #16
    Recieved no complaints :)
     
    dalton, Aug 17, 2007 IP
  17. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #17
    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.
     
    Dan Schulz, Aug 17, 2007 IP
  18. dalton

    dalton Peon

    Messages:
    39
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #18
    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.
     
    dalton, Aug 17, 2007 IP
  19. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #19
    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.
     
    Dan Schulz, Aug 17, 2007 IP
  20. dalton

    dalton Peon

    Messages:
    39
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #20
    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.
     
    dalton, Aug 17, 2007 IP