Steven Posted February 25, 2009 Share Posted February 25, 2009 http://www.ngaguild.com/steve/sites/map/about.htmlIn firefox, all the divs except #header, are somehow bumped to the right 1px (note the white line on the left side of the brown box). I already had to make a special iexplorer.css file to bump #top down a ways, so I tried to just modify the main.css file to suit the needs of firefox. Well, when I did that, it messed up Safari (which is already by itself bumped over to the left 1px)!Here's the markup:<body><center><div id="container"><div id="top_nonindex"><div id="header"><a href="index.html"><img class="map" src="images/MAP.gif" /></a> <ul id="navlist"> <li><a href="about.html">About</a></li> <li><a href="employers.html">Employers</a></li> <li><a href="administrators.html">Administrators</a></li> <li><a href="brokers.html">Brokers</a></li> <li><a href="contact.html">Contact</a></li> </ul></div></div><div id="brownbox"></div></div></center></body> And finally, here's the CSS: html, ul, body { margin:0; padding:0; }body { background:#616d57 url(../images/page_bg.gif) repeat-y center; }img {border:0}#container { width:774px; text-align:left; overflow:hidden;} /* grabs all content and forces it to width and center */#header { width:728px; height:125px; margin:22px; background:url(../images/header_bg.gif) repeat-x; }#top_nonindex { width:775px; height:146px; background:url(../images/top_bg.gif) repeat-x bottom; } /* FF requires a 1px bump from the right, Chrome IE Opera are okay. Safar, however, is bumped 1px to the -left- on its own. To compensate for the FF 1px-to-right issue would magnify the Safari 1px-to-left issue. */#navlist li { display:inline; list-style-type:none; padding-right:15px; position:relative; left:60px; top:108px; font-family:Verdana, Geneva, sans-serif; font-size:12px; font-weight:500; }#navlist li a { color:#96a7b9; text-decoration:none; }#navlist li a:hover { color:#3c5e83; border-top: 4px solid #8eb072; padding-top:10px; }#flash {padding-left:8px; position:relative; bottom:12px;}.map {float:left; position:relative; bottom:3px;}#brownbox { width:775px; height:248px; background:url(../images/brownbox.gif) left; } Link to comment Share on other sites More sharing options...
jeffman Posted February 25, 2009 Share Posted February 25, 2009 I suggest the following:1. Use a strict doctype to force IE and other browsers to render things more consistently.2. Don't use the <center> tag. Give your container div this css:margin: 0 auto;To cover your ###, give your html, body this css:text-align: center;I don't know if this is the problem, but I have seen results like this when elements use different centering/alignment algorithms. The fact that the effect happens in some browsers and not others reinforces my suspicion. One browser will center things one way, another will center things a different way. Since the <center> tag is deprecated anyway, browsers might not be updating its algorithm when they update other stuff.It's worth a shot. Link to comment Share on other sites More sharing options...
Steven Posted February 25, 2009 Author Share Posted February 25, 2009 Okay, I made your changes. Maybe I'm really confused or just too tired, but it's still acting exactly the same way. The content is centering itself even after I remove text-align:center from html, body. Link to comment Share on other sites More sharing options...
jeffman Posted February 26, 2009 Share Posted February 26, 2009 The text-align thing was for older browsers.After your changes, I now see the white line on the right side. I'm also in different software. (Firefox normal at work, beta version at home.) So maybe that's the difference. Or are you seeing it on the right now also?Anyway, I downloaded ALL your stuff. I was prepared to change as many features as I had to, but an instinct told me to mess with the overflow first. I simply removed it from the container div, and BOOM! no more white line. I even bumped the container width to 775px, and things still look okay. (I didn't like putting a 775px element inside a 774px element.)So is this just my beta version giving different results (hard to imagine, but possible) or did the changes you made earlier solve the problem? It looks correct in Safari, also.If these changes work for you too, then I'm convinced it was as I said. The <center> tag centers things using one set of calculations, but the way your body background is centered uses another set of calculations. So the results are off. Switching to the conventional centering technique probably has all things centered using the same set of calculations.I hope. Link to comment Share on other sites More sharing options...
Steven Posted February 26, 2009 Author Share Posted February 26, 2009 Strange. My firefox is 3.0.6; that's normal build, right?My white line is on the left, not right. And removing overflow:hidden doesn't change much:This is with overflow:hidden.This is with no overflow settings.I was thinking, I could just make the brown box a part of the page_bg image and just make it really tall, but I'm too curious to know exactly what's going on here to do that, as I've run into this problem already a few times in the past. The weird thing is that even after removing any and all snippets of code that might even hint at centering any element, everything is still centered!Thanks for the help so far! Link to comment Share on other sites More sharing options...
jeffman Posted February 26, 2009 Share Posted February 26, 2009 Yeah, I'm back in my office with regular Firefox, and it is as you say.Centering is a tricky business. When you divide by two, do you round up or down? I think our problem is related to that mechanism somehow.Your background image is 807px wide. Right off the bat, I suggest enlarging it to 812px or so, so you have something you can cut in halves and quarters if you need to. If you need padding or margins, you still end up with the same number of pixels everywhere.How about a concept change? Instead of making that image the background of the body, and centering it in the viewport, try this:1. Make your image 812px wide, as I said above.2. Create a container div 812px wide.3. Make that image the background of the container. The background will print from the top left corner of the container, so there will be no centering involved.4. Give the container exactly as much padding as it takes to put content at the edge of the white area.I'd be very surprised if your problems didn't just vanish.These are a lot of big changes. If it were me, I'd start with a copy of my originals so I could come back to them if things don't work out. Link to comment Share on other sites More sharing options...
Steven Posted February 27, 2009 Author Share Posted February 27, 2009 Alrighty, it's working great now.. mostly.No issues with centering stuff anymore, that all got fixed.To make the container div stretch the entire height of the page, I gave html,body height:100%, and container height:inherit. This worked for all except IE.I think that's the only issue I've found so far. A few came up, but after a while I was able to track them all down and take them out. Link to comment Share on other sites More sharing options...
Steven Posted March 11, 2009 Author Share Posted March 11, 2009 *shameless bump*I still can't figure out how to draw the container/centering div to the bottom of the page in IE.I've also encountered some more issues in FF concerning 100% height on the div and a non-maximized window... it turns goofy. But for now I'm looking for answers to the top question most. Link to comment Share on other sites More sharing options...
jlhaslip Posted March 12, 2009 Share Posted March 12, 2009 Have a look at Ryan Fait sticky footer via Google. Link to comment Share on other sites More sharing options...
Steven Posted March 12, 2009 Author Share Posted March 12, 2009 Excellent! Thank you very much. I remember using this before, lol. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.