Margins change depending on browser?!

  • Author
    Posts
  • #443804

    imaprile
    Member

    Oh, sorry. I completely missed that. Take your time. I’m just thankful for your help. Thanks again.

    #443846

    cvanhasselt
    Member

    “Do you know how I can fix the ‘box model’?” That is really, really funny. I mean hilariously funny. Seriously, I’d say at least 75% of the banter back and forth on the web about CSS over, oh, the past 10 years, has been about the fact that all the browsers (especially older ones from certain large companies) really mangle the box model, but they all mangle it in their own peculiar ways.

    For what my opinion is worth, look at the relative popularity of all browsers, and aim for getting things right in the most popular browsers. If you get that much right, count your blessings. If you end up fiddling with getting it right in every browser, you’ll never have time to write your blog!

    Good luck, again!

    #443847

    timethief
    Member

    @cvanhasselt
    I’m liking your attitude and laughing as I read what you type because it validates what I know. w00t!

    #443848

    imaprile
    Member

    @cvanhasselt Thank you very much for the info. I designed my blog entirely in Firefox, and happy I did so as I’m told it’s the best to use. There is only 1 area that is majorly troubling me with this whole “box model” thing and I wouldn’t care much however, it’s the fact that something, “box model” or something else, has my menu bar scrunched up into my header image and I have white space above the entire wrapper area. It’s like the whole thing is scrunched up more than the margins are set for in Firefox?

    It looks A-OK in Firefox and IE 8.0 ONLY. It’s the same (off) in Chrome, Windows Safari, Opera, IE 7.0-, and from what I’m told, Mac OS.

    So, as you can see it’s not just one browser. If it was I’d gladly leave it alone. I’ve heard of CSS “hacks” but nothing I do seems to work. I know devblog said he’d look into it when he had time. I’m crossing my fingers.

    Thanks again.

    #443853

    imaprile
    Member

    OK, due to my very nature and being addicted to my computer, I have “tinkered” with the problem I was having where my menu bar was scrunched up into the header img in Safari & Opera, Chrome, IE 7.0, but looked perfect in IE 8.0 & Firefox ONLY….

    the only way I could (on my own) figure out how to fix this was to re-design the header, header title, and menu bar alltogether. I decided to move the menu bar above the header itself. LOVE it this way. Margins great, and I think it even looks better. One problem…. it’s not scrunched up in the problematic browsers anymore, now the menu bar just doesn’t show up at all. Looks the same (great) in IE 8.0 (XP & WIN 7) & Firefox (XP & WIN 7) only. Help?

    Any help would be very, very appreciated. :)

    http://imaprile.com (please don’t be stern about design over function… it’s my OCD!) :)

    #443854

    cvanhasselt
    Member

    hello, finally getting round to check things out in IE. What it looks like you’ve done is specify a line-height (or perhaps you are inheriting it) for the DIV with id=”nav” .
    I can’t point you to anything explaining why, perhaps DevBlog or others can, but after looking with the IE Developer Toolbar, I experimented and found that if you set the height of the div to 250px, it should show up correctly in IE. I’m using IE 7.0. I tried, using Firebug, to see what happens with this in Firebox, and it didn’t seem to have any ill effects.

    I see you’ve moved the div#nav above the header by using a negative top margin, and that, I think, may be the root of the problem. Because of the different box model interpretations (or misinterpretations, if you prefer) negative margins can cause problems. But, try setting the height of the div, as in
    height: 250px;
    and then see what happens

    #443855

    cvanhasselt
    Member

    P.S. Noticed you are a North Carolinian, too! Go Heels! (hope you aren’t a pack fan, or, god forbid, a dookie!)

    #443856

    ztstar
    Member

    Hello,

    I have been all over WORDPRESS to learn how to do this simple thing. No, I don’t know any of this stuff! I can navigate however around the computer. I just don’t know CSS. All I want to do is increase the width of the area that contains what I have posted. It is too small. I am using the PressRow theme. I was able to add my custom header. I know this a simple request, and somthing I should know how to do, and perhaps after someone helps me, I will. I have tried going thru changing the css, but haven’t quite got the positioning down yet. I was able to place the left closer to the edge of the screen but the overall width remained the same. can anyone help? Send me a reply and I will check tomorrow. Going to bed now. Thanks

    #443857

    imaprile
    Member

    @cvanhasselt Thanks for getting back with me! I had the margin/alignment issue before I moved the menu/bar up. I only did that after trying a few things to see if I could figure it out. After tinkering I realized I liked it like this, but again, can’t figure out why it’s not showing up at all on Safari or IE 7.0, Chrome.

    I’m not sure if any of my current #nav code is correct, but it worked on the ‘live’ Firebug CSS ad-on. This might be obvious to someone else, yet I’m still somewhat a newbie… where should I put the height: 250px; and will this make the menu appear on Safari? I appreciate your help!

    ps. My husband went to UNC & NCSU so we’re split. But, then again we’re not really sports fanatics! It’s safer that way. :)

    #443861

    imaprile
    Member

    I still have the unresolved issue of my navigation/menu bar not appearing in Safari, Opera, Chrome, and IE 7.0. It ONLY appears correctly in Firefox & IE 8.0.

    Can someone please let me know if there is a fix to possibly the “box model” of if my CSS is just completely wrong and the other browsers hate me for it? :)

    Everything else is perfect, except the nav bar. ANY help is appreciated. Thanks!
    http://imaprile.com

    #443864

    devblog
    Member

    April,

    Although I’ve completed the project I’ve been working on, we’re still ironing some details out. I hope that by Friday or Saturday, I’ll have more time and I will take a look at your code.

    Please let me know if you’re still interested.

    #443865

    imaprile
    Member

    Hi DevBlog! Yes, I’m still interested and would most certainly appreciate your help! I love the current look, minus the fact that my nav/meny bar doesn’t appear at all on Safari, Chrome, and IE 7.0.

    Thanks in advance!

    April

    #443867

    devblog
    Member

    You changed your margins… where are you gonna place the menu? above or below the header?

    #443868

    devblog
    Member

    You changed your margins…
    </blocquote>

    I meant your menu… *sigh*

    #443869

    tobyfoord
    Member

    I know you weren’t trying to help me but alas your sorted my prob. cheers guys!

    #443873

    imaprile
    Member

    Hi Devblog,

    I want my menu bar above my header, right-aligned, where it is correctly displayed in Firefox and IE 8.0. Again, thank you for your help!

    #443874

    devblog
    Member

    April

    Add this to your “#wrapper” definition:

    position:relative;
    overflow:hidden;

    Modify your existing #nav definition; replace these properties:

    position:relative;
    margin:-335px 0 0;

    with these:

    position:absolute;
    top:-45px;

    -45px work for my tests, you might need to play with that value.

    That should fix your menu.

    #443875

    imaprile
    Member

    @devblog,

    You are my hero! It worked splendidly! Thank YOU once again for being able to help me. -35 worked here on my end, using IE 7.0 at work – I’ll see what Firefox & Safari looks like when I get home. Thank you Thank you Thank you!

    :)

    April

    #443881

    Designers everywhere, who cares? Why hasn’t WordPress just fix it yet? These margins make the blog look really unprofessional…

    #443882

    raincoaster
    Member

    WordPress doesn’t “fix” custom CSS. When you act as your own designer, it’s up to you to make sure the design works.

The topic ‘Margins change depending on browser?!’ is closed to new replies.