Jump to content
  • Advertisement
Sign in to follow this  
Promit

[web] I need help making this work on Firefox

This topic is 3652 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Linktastic So, uh...it's broken on Firefox 2 and 3, and I don't know why. It's an ASP.NET site which was basically autogenerated, but the generation is a one time thing, so I can edit it freely. The problems I see are: * Right pane has no scroll bar and doesn't respond to scroll wheel. It does respond to middle click scroll widget and keyboard scroll. * On a page like this one, the header is screwed up in the right pane; the drop down and cookie crumb nav are halfway in the box. I don't care if they go in or out, but they've gotta choose one and be the same in IE and FF both. There's weirdness with the navigation javascript and the sidebar sync and junk too, but I'm going to pretend those aren't happening for now, unless one of you has a bright solution to that stuff.

Share this post


Link to post
Share on other sites
Advertisement
Progress update: with some help I've fixed the scrolling, but now the right pane is too wide on Firefox.

Share this post


Link to post
Share on other sites
Just an observation: It seems that in IE when you scroll the right pane, the header stays visible where it is. In FF when you scroll, the header moves too.

Share this post


Link to post
Share on other sites
For the scrollbar/overflow issue, looking at the style sheet (presentation.css), there seem to be quite a lot of elements that have a width of a 100% and an additional padding, which according to the box model, will result in a little over a 100%. Try to remove some of the "width: 100%" entirely, especially for the surrounding divs. Most of them will be displayed at a 100% width anyway, so the style property is probably redundant.

For the select box hanging in mid air, you could consider giving the surrounding light blue header box a fixed height (I guess something like 60 or 70 pixels). I can imagine that the number of lines of text are pretty much consistent throughout the documentation, so unless text need to be wrapped around in case of a very narrow browser window, it should look okay. It's a bit of a hack, but it might be appropriate in this case.

I haven't tested any of this in any browser, so you'll just have to see if it does anything.

Share this post


Link to post
Share on other sites
You might want to add adapters for asp.net controls
http://www.asp.net/CssAdapters/TreeView.aspx

1.Adding (you should use some extra css-class)
html > body div, p{float: left;clear: left;}
2. Removing
span#languageFilter { height:1px; max-height:1px;}
should fix the problem on firefox.

Also changing padding to margin in div#main and removing 100% widths (this is bad/illegal for floated blocks).

EDIT:
After viewing the page with IE7 float+clear should go to div#main div,p

[Edited by - grusifix_ on June 21, 2008 3:18:18 PM]

Share this post


Link to post
Share on other sites
Quote:
Original post by Promit

* On a page like this one, the header is screwed up in the right pane; the drop down and cookie crumb nav are halfway in the box. I don't care if they go in or out, but they've gotta choose one and be the same in IE and FF both.


As mentioned above, the right header scrolls in FF, but stays fixed in IE. You can fix that part by giving it position: fixed in FF, at least, but don't know if that'll cause IE to puke instead.

As for the cookie crumbs poking outside the header div, that's because they're floats. The parent div doesn't expand to fit around float elements. (Which is according to spec)
In FF, at least, there seems to be no reason for them to be float, though. When I disable that, it renders correctly. If they have to be float, you'll have to be creative. Making the parent div (#control) float as well seems to fix it. Of course, you might then have to give #main clear:both, in order to force it to stay down below.

The width of the header can be fixed as mentioned above, disable either the 100% width or the padding.

I haven't noticed the problems with navigation or sidebar sync though. Care to elaborate? :p

Btw, you know about Firebug for debugging this stuff, right?

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

Participate in the game development conversation and more when you create an account on GameDev.net!

Sign me up!