Link to home
Start Free TrialLog in
Avatar of Brian
BrianFlag for United States of America

asked on

CSS Navigation help!

Hello Experts,

I have been trying to figure out why my main navigation is getting pushed down when I visit a certain page in my application. If I visit any othe page within my application using IE8 then everything is perfect. My "Main navigation" is labeled in a "div" as "parature_navigation". This includes the main navigation and login/logout links which display fine except when I few a certain page and when I do everything included in the "parature_navigation" div gets pushed down. I'm going to upload the CSS file, HTML markup for the page that looks good, and the HTML markup for the page that pushes down the navigation. Hopefully someone here can help. I have exhausted myself out for a fix :(

Please keep in mind, I don't have access to modify the HTML content, I'm only able to make changes to the CSS file.

Also, the only way that I can get the navigation to work fine when viewing the page that is associated to the bad HTML is if I modify the following below, but then when I do the navigation is bad for the other pages.

div#parature_wrapper div#parature_navigation ul { list-style: none; margin-top: -490px; }

to

div#parature_wrapper div#parature_navigation ul { list-style: none; margin-top: -600px; }
css.txt
HTML-Markup-Good.txt
HTML-Markup-Bad.txt
Avatar of Tom Beck
Tom Beck
Flag of United States of America image

Complex code, images, tons of javascript and javascript include files. It would be much easier to troubleshoot with a live link. There's not enough information to recreate the pages locally.
Avatar of Brian

ASKER

Hi tommyBoy,

Here is the live link.
http://support.backpacksis.com/ics/support/default.asp?deptID=16147

If you visit the page using IE8 everything is fine. For now, I'm only having issues once you login and when you login the top navigation along with the "welcome guest" info gets pushed down into the content. Please refer to the HTML_Markup_Bad for that.
Try adding this style definition to your style sheet.

.parature_page_content
{
     margin-bottom:-490px
}
Avatar of Brian

ASKER

Hi tommyBoy,

Well that did fix the navigation issue, but now is moved the white content and footer up :(

I'm going to attach a screen shot for you to see.
ee.gif
ASKER CERTIFIED SOLUTION
Avatar of Tom Beck
Tom Beck
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Brian

ASKER

man your good.....

Well the navigation is PERFECT!!!

But, the search info got moved to the left. I attached a screenshot of what the search info looks like now.
ee.png
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Brian

ASKER

Hi tommyBoy,

Thank you!!! Every thing works very well...

Before I close the post I wanted to ask you what tools you use for CSS. I currenlty use notepad which works well but was just curious what you use.

Also, do you use any other web tools that you use alot?
For creating stylesheets I just use my web development platform, Visual Studio. It adds auto-complete and intelesense to make the process a little easier, and it does color code the markup for you.

For troubleshooting css and javascript problems I use the Firebug web developer add-on for Firefox. If the css problem is specific to a certain browser like IE or Chrome, I'll try to use the web developer tools provided by those browsers, but they don't seem to work as well as Firebug.

Aside from those two tools, I use either Corel Photo-Paint (it's cheaper than Photoshop) or Adobe Fireworks to create my web graphics. I tried Adobe Dreamweaver for web development but didn't like it, plus I wanted to work with ASP.NET, so VS was the way to go.
Avatar of Brian

ASKER

Ok, thanks for the info. I did want to ask you this question before submitting. I promise I will only ask you this last question. What do you use for testing multiple browsers and the many different versions of those browsers. For example, ie7, ie8 and ie9 along with Firefox and its multiple versions?
For testing web pages on multiple browsers, I use multiple browsers. I have Chrome, Firefox, Opera, Safari and IE, all latest version except IE (I'm still on 8). I can run older versions of Firefox simply by putting something like this in the Run dialog:

"C:\Program Files\Mozilla Firefox_3-6\firefox.exe" -P "default" -no-remote

For older versions of IE, I use Microsoft Virtual PC (free download) to run copies of XP Pro with older versions of IE installed.

I know there are web services available for testing new web pages on multiple browsers, but I've never used them.
Avatar of Brian

ASKER

Thank you very much for all your help and information concerning the tools you use for web testing / developement.