Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13

Thread: css problem

  1. #1
    Banned
    Join Date
    Mar 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation css problem

    Hi!
    Why Do I get different result with IE och FireFox

    Code:
    #container{
    float:left;
    width:600px;
    height:400px;
    margin:5px;
    }
    #content1{
    float:left;
    width:60px;
    height:40px;
    margin:5px;
    }
    #content2{
    float:left;
    width:60px;
    height:40px;
    margin:5px;
    }
    #content3{
    float:left;
    width:60px;
    clear:left;
    height:40px;
    margin:5px;
    }
    #content4{
    float:left;
    width:60px;
    height:40px;
    margin:5px;
    }
    <div id= “container” >
    
         <div id= “content1” > </div>
         <div id= “content2” > </div>
         <div id= “content3” > </div>
         <div id= “content4” > </div>
    
    </div>

  • #2
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    Because IE messes up positioning on floats.

    http://www.brunildo.org/test/#ief

    Take your pick of solutions ...

    and empty div's have nothing to show. Both IE6 and FF2 display the same blank page for me...
    Perhaps a live demo would be in order. One with content and a Doctype, maybe???
    Last edited by jlhaslip; 03-20-2007 at 12:15 PM.

  • #3
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Just curious as to why you have floated the container element? You shouldn't need to worry about that.

    IE 6 adds it's own padding and margin to elements on the page, so does Firefox and all the other browsers. THis means that things are going to look a little different in each browser.

    One way to help this is the add the * selector to zero out all margins and padding, although you should be warned that it does so on everything including <p> tags, forms and tables. These will need to be redefined by you in the CSS:

    * {
    margin: 0;
    padding: 0;
    }
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #4
    Regular Coder karinne's Avatar
    Join Date
    May 2006
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ahallicks View Post
    One way to help this is the add the * selector to zero out all margins and padding, although you should be warned that it does so on everything including <p> tags, forms and tables. These will need to be redefined by you in the CSS:

    * {
    margin: 0;
    padding: 0;
    }
    or just set it like

    Code:
    html, body, p, ul, ol, h1, h2, h3, h4, h5, h6 {
    	margin: 0;
    	padding: 0;
    }
    and put all the elements you want to reset the margins and padding to 0

    See No Margin For Error and scroll down 'til you get to "Global White Space Reset" and keep reading
    a web design portfolio - blog - last.fm - del.icio.us - widow's walk

    Getting on the Web Standards band-wagon? Get these books - Designing With Web Standards and Web Standard Solutions

  • #5
    New Coder
    Join Date
    Mar 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    similar probs

    Firefox really rips my css based design apart. URL is www.thezonerocks.ca
    Anyone have any insight?? I believe it's with my float. I also see firefox gets rid of my padding (doh!) any way to get it to recognize this? I am a bit of a newcomer to css so any help is appreciated.

  • #6
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Ermm... to the guy above... try a proper doctype declaration first:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    and it's most likely IE that is doing things wrong... add the * selector to the beginning of your stylesheet and see what it looks like then
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #7
    New Coder
    Join Date
    Mar 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ahallicks View Post
    Ermm... to the guy above... try a proper doctype declaration first:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    and it's most likely IE that is doing things wrong... add the * selector to the beginning of your stylesheet and see what it looks like then
    Thanks! I will add the doctype declaration. I am not sure what you mean by adding a * selector . . . can you elaborate?

  • #8
    Regular Coder karinne's Avatar
    Join Date
    May 2006
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    See the posts above.
    a web design portfolio - blog - last.fm - del.icio.us - widow's walk

    Getting on the Web Standards band-wagon? Get these books - Designing With Web Standards and Web Standard Solutions

  • #9
    New Coder
    Join Date
    Mar 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, thanks all! First time poster here so I appreciate the insight! I see how the * selector works . . . . but I really need that padding to make my design all pretty Is it better to work without padding and margins? No way to get them to display in firefox?

  • #10
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    The concept is to eliminate all margin and padding the Browser uses by default and then re-apply the margin and padding you need to those elements which require it to accommodate your design.

    Trust us, it works.

  • #11
    New Coder
    Join Date
    Mar 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks again to all for the info and help . . . I will try out these techiques tonight and maybe post the results tomorrow . . . thanks again!

    Matt
    www.annunaki.net

  • #12
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by ahallicks View Post
    Ermm... to the guy above... try a proper doctype declaration first:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    I would not solely recommend the XHTML DTD to people. Internet Explorer doesn’t support it, so most authors, which insist upon support for that browser, get little to no benefit from using it. Instead, they get a bunch of strict rules that they probably won’t bother to follow.

    To the OP, I recommend that you use a full document type declaration—with a URL at the end—to get your page out of quirks mode; check the second set of resources below for information pertaining to that mode. The first resource lists all of the W3C DTDs.

    Related Resources (Copied and Pasted):
    Quote Originally Posted by thedeadpress View Post
    Thanks! I will add the doctype declaration. I am not sure what you mean by adding a * selector . . . can you elaborate?
    The asterisk is referred to as the universal selector. It represents all elements. For example, the selector p * would select all elements that are descendants (inside) of all paragraph elements (the space in between them is called the descendant combinator).

    Quote Originally Posted by thedeadpress View Post
    Is it better to work without padding and margins? No way to get them to display in firefox?
    Firefox supports padding and margins fine. The point of setting them to zero from the outset is to avoid inconsistencies in browser defaults. For example, Firefox gives list elements a default left padding whereas Internet Explorer gives them a default left margin. You specify zero margins and padding so that there are no surprises and you know what the defaults are for all browsers: zero margins and zero padding.

    Some people end up doing this by declaring zero margins and padding on every element that they use and then set them. This is inefficient. Using the method ahallicks noted, you only have to do this once.

    As an additional issue, you may want to consider the semantics of your code. Last time I checked, “south of the Totem Store,” did not constitute a paragraph. This would probably be more semantic:

    Code:
    <p><span>Book the VIP room for your next night out!</span> 
    <span>Call The Zone @ 352 – 8825 for details.</span>
    <span>The Zone is located on <abbr title="Gaetz Avenue">Gaetz Ave</abbr> and <abbr title="77th Street">77th St</abbr>, just</span>
    <span>south of the Totem Store.</span></p>
    The CSS rule might look like:
    Code:
    abbr {
      border: 0 none;
      }
    p span {
      display: block;
      }
    Last edited by Arbitrator; 03-20-2007 at 08:08 PM. Reason: Noted an additional issue.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #13
    New Coder
    Join Date
    Mar 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    thanks

    Thanks for the additional advice. I am getting more familar with doctypes now, I will look into it tonight and try to find an appropriate one for my site.

    On a side note, notice my calender in the sidebar. This is a CSS based popup design . . . yet it does not work in IE6 (or earlier, I believe). Any way to get around this without using javascript?

    Anyways, again ,thanks for the help, this is my first major site for a client, just trying to get it as good as possible for them.

    Matt
    www.annunaki.net


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •