Skulltrail Posted March 23, 2010 Share Posted March 23, 2010 Everyone looks A-OK in Mozilla Firefox (my fav. browser) but most people in this building and the members of the board use Internet Explorer so I have to make sure the upgrade looks good on both (if not all browsers) before upgrading the website. I've linked below a test page. If you view it in FF it should look good enough while in IE the heading segment of the page is broken. Any tips or clue of what could be causing this? The space to the left of the search engine is missing and the navigation bar is stretched out. I checked the CSS of both and so far found nothing. I'm a kiddy web developer so bare with me. http://www.boardofreps.org/content/91788/99581/default.aspx Link to comment Share on other sites More sharing options...
DeathLace Posted March 23, 2010 Share Posted March 23, 2010 Add this to your css: .center-wrapper { background: #333; } The nav spacing is because you have margin: 0 0 1.4em IE doesn't like margins in EM most of the time from what I've encountered. I'd recommended just using a fixed px #, I'm guessing around 20px. The other issues are because you haven't put: cellpadding="0" and cellspacing="0" when you're declaring those tables. The tables for the menu aren't recommdned, but I don't want to tell you to recode it all, if you want a quick fix, that should do it (there's 2 tables for the nav, put those in <table> part like: <table cellpadding="0" cellspacing="0"> I believe that should work. Link to comment Share on other sites More sharing options...
Brian M. Veteran Posted March 23, 2010 Veteran Share Posted March 23, 2010 I know it's not an issue for you because you only want to check IE, but your drop down menus are screwed in Safari (they render at the same width as the page). Link to comment Share on other sites More sharing options...
DeathLace Posted March 23, 2010 Share Posted March 23, 2010 I know it's not an issue for you because you only want to check IE, but your drop down menus are screwed in Safari (they render at the same width as the page). It does it in IE to, probably the same issue for both. Link to comment Share on other sites More sharing options...
Skulltrail Posted March 24, 2010 Author Share Posted March 24, 2010 Add this to your css: .center-wrapper { background: #333; } The nav spacing is because you have margin: 0 0 1.4em IE doesn't like margins in EM most of the time from what I've encountered. I'd recommended just using a fixed px #, I'm guessing around 20px. The other issues are because you haven't put: cellpadding="0" and cellspacing="0" when you're declaring those tables. The tables for the menu aren't recommdned, but I don't want to tell you to recode it all, if you want a quick fix, that should do it (there's 2 tables for the nav, put those in <table> part like: <table cellpadding="0" cellspacing="0"> I believe that should work. Sorry but none of what you said worked. I converted all of the size units to px and all it did was make the fonts bigger. I tried adapting a background color to .center-wrapper but resulted to the entire white space of the front page to turn that color as well. The menu remains stretch even after adding the table attributes. Any other suggestions? Need to have access to my CSS files for better troubleshooting? Link to comment Share on other sites More sharing options...
Skulltrail Posted March 24, 2010 Author Share Posted March 24, 2010 Update: @DeathLace: Instead of adding the background-color attribute to .center-wrapper, I establish .center-wrapper2 with the suggested background-color attribute so that only the header is effected. Thus far, that problem has been resolved however the navigation menu is still stretched. I'll continue fooling around with the CSS to see if I can get it fixed. If anyone has any suggestions, please reply or PM. Link to comment Share on other sites More sharing options...
Skulltrail Posted March 24, 2010 Author Share Posted March 24, 2010 Update: Problem resolved. One of the entries in the CSS was directed to all tables and causing the width to be 100% which caused the drop down menu to stretch out the width of the page. Thanks guys. Link to comment Share on other sites More sharing options...
Recommended Posts