I created my WP blog using safari and I just noticed the background (the main page background, not the side backgrounds) is not white on Firefox like it should be. I realize this has to do with cross-browser compatibility.

The css code for the stuff is this:

/* Page Structure */

body {
font-size: 65%; /* Resets 1em to 10px */
color: #444;
background: #FF9900;
text-align: center;
}

body.lang-ar,
body.lang-fa,
body.lang-he,
body.lang-hi,
body.lang-km,
body.lang-ko,
body.lang-ja,
body.lang-th,
body.lang-zh {
font-size: 75%; /* Resets 1em to 12px, for internationalized K2s */
}

#page,
body.smartposition #rollingarchives {
background: #white;
}

#page {
text-align: left;
margin: 0 auto;
padding-top: 0px;
position: relative;
border: 0px solid #ddd;
border-top: none;
clear: both;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
}

.columns-one #page {
width: 560px;
}

.columns-two #page {
width: 1000px;
}

.columns-three #page {
width: 980px;
}

I'm just not sure what to change in it to make the main page background white in both firefox and safari.

THANKS for any help I can get!!

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

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.

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!

You changed your margins...
</blocquote>

I meant your menu... *sigh*

Thanks in advance!

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.

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

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. :)

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

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

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!) :)

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.

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!

I'll gladly look into your code but unfortunately I can't right now. Like I said in one of my previous posts:

I can't look into your code right now since I have other projects to take care of, next week, whenever I have a chance, I'll see what I can do for you if you're still interested.

Thanks.

Do you know how I can fix the "box model" so my blog looks correct in Safari and Chrome? I've tried to find some codes online, but haven't had any luck.

Thanks.

That article is excellent. In fact, that's one of the articles I'm planning to link to in a short post I'm planning to write.