Cross Browser CSS problems

Discussion in 'Web Design' started by mjrzasa, Jan 21, 2012.

to remove all ads.
  1. mjrzasa

    mjrzasa New Member

    Messages:
    67
    So I'm trying to do a website right now, and it looks good on IE but not Mozilla. I am using margins with negative, like : margin-top:-6px
    Is there a list of things to know that will/wont work with browsers? Is there a way to do CSS so that all browsers will look the same?
     
  2. DHDdirect

    DHDdirect New Member

    Messages:
    383
    is there a particular reason you are using negative values?
     
  3. mjrzasa

    mjrzasa New Member

    Messages:
    67
    Sometimes it is because I want to move a logo up, but in this case, I want to add just 2 px horizontal lines (<hr>) to a header. And when I use the <hr> normally, it leaves a space under it, so I have to start it underneath where I want it and move it up from there.

    Also, different question, but what are things you need all web pages to start with? I know:
    * {margin:0;padding:0;} so that there is no space outside you container
    body {text-align:center;} so that the page centers on the screen
    .container {text-align:right;} so that text is not center aligned

    Am I right, and what else?

    Another side question: I have a "logo" class div, inside my "header" div, and in my logo div, I simply have the one image, but it will not show up while it is inside the "logo" div. If I delete the "logo" div and just leave the image inside the header div, it is fine, but then how do I margin the logo? I get the feeling by going through this that the "header" div background color may have something to do with it...

    Thanks guys for helping.
     
    Last edited: Jan 21, 2012
  4. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    Body text-align center wont centre your page, at all, it will centre your text, then your container with text align right will right align your text, if everything is contained within your container, the centre alignment will be redundant.

    Margin:0 auto; with defined width on container will centre your page.
    (as long as its not absolutely positioned!)
     
  5. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    IIRC, that was an old page centering trick for IE<=7.
     
  6. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    Yes, but only works in < ie7.
     
  7. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    That's <= to you, sir. ;)

    Wasn't condoning the practice. Just remembering the days when I was first starting out *shudder*.
     
  8. DHDdirect

    DHDdirect New Member

    Messages:
    383
    I tend to believe if you have to use negative values for positioning then most likely you aren't coding correctly. Meaning there is usually underlining reason such as default formatting/values getting in the way.
     
  9. Angus

    Angus New Member

    Messages:
    9
    Even if you are avoiding html5, for some reason, this site is a great one to get an idea of a lot of tips and tricks that designers have come up with to overcome differences across browsers.

    http://html5boilerplate.com/

    Hope that firehose helps.
     
  10. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    Gotta disagree, though I grasp what you're trying to say. If you're doing it because things aren't lining up, then yeah, you're wrong, but if you're doing it to intentionally shift something out of its normal boundaries...
     
  11. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    Not bad thinking, though I suspect the problem is deeper than that...

    There are many charts running around that show support for various features, but I haven't come across a definitive feature list comparison for the major browsers.
     
  12. DHDdirect

    DHDdirect New Member

    Messages:
    383
    Yes exactly as you have a fairly decent grasp of css where as most tend to attempt negative values first to correct layouts that are not obeying for other reasons.
     
  13. saber mogaddas

    saber mogaddas New Member

    Messages:
    8
    use css reset in css..
    for example :
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    }
     
  14. mjrzasa

    mjrzasa New Member

    Messages:
    67
    So the only thing you need for a centered website in Mozilla and IE is "Margin:0 auto 0 auto;" for container? I use "width:100%" for my container, right? but "width:960px" for my body/nav/etc.

    Also, I haven't found an answer to the negative value, so ill post a few pictures.

    Dang, so the image is small, but I have a few horizontal lines on the header, 2 px size in the middle gray box, but I use <hr> so it creates a space below them because <hr> starts a new line. This is the code I was using to let me get it working:

    <hr style="color:#333333;height:2px;margin-top:-6px;">
    <hr style="color:#333333;height:2px;margin-top:-17px;">

    To move the lines from the 3rd header box, up to be in the middle box, make sense?
     

    Attached Files:

    Last edited: Jan 23, 2012
  15. mjrzasa

    mjrzasa New Member

    Messages:
    67
    Last edited: Jan 23, 2012
  16. mjrzasa

    mjrzasa New Member

    Messages:
    67
    I've been working on this a bit and almost done. I have a few problems though.
    1) Where I wrote "test text" if nothing is there, it is just an empty bar going across the screen there, in white (and will change colors with the body:background-color:COLOR CSS).

    2) The lines in the header and footer that I added are completely screwed up in IE. I have found nothing that works, I tried <hr>, <div>, now <img>, but they all add spaces underneath themselves. My last chance that I know of is to just make the entire header and footer a background image all together, but I have been trying to use as little images on this as possible.

    If someone could look into my "view source" and see if I'm screwing up somewhere, that would be great. I have been going over all my code and cant find what will help, other than possibly filling in the "billboard" and "main" with content, but still that didn't seem to work when I tested it.
    http://home.comcast.net/~mjrzasa/test.html

    Thanks.
     
  17. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    At first glance i saw a bad case of divitis...
     
  18. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    HTML:
    <body>
    <div id=“container“>
    <header><img src=“logo.png“></header>
    <nav> ul ... </nav>
    <div id=“content“>
    ...content ...
    </div>
    <footer>ul... </footer>
    </div>
    </body>
    
    Start with something basic like that.
     
  19. mjrzasa

    mjrzasa New Member

    Messages:
    67
    Ya I did, but then how am I suppose to get the background colors for each part of my page?
     
  20. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    small bg image slithers should do the trick.
    Always best to have neat and tidy markup.
     

Share This Page