Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts

    @!$#%! Mozilla giving extra margin until refresh

    Let me just say, I've had this exact problem before, and never solved it... so I'm a little frustrated. Here's the deal. I have a page where a sidebar is floated to the right, it consists of an image, a header, and an unordered list. The header and list are aligned to the right. The main content is on the left and sits exactly how I need it.

    I used to declare a fixed width on the sidebar until I realized I might want to change the width of the images. So I changed the sidebar width to "width: auto," and now Mozilla is having kittens. Basically it renders the headers and ul off to the left, until the window is refreshed, when it scoots everything back to where it needs to be. Everything looks fine in IE. Here's what I mean, the outlines are from the FF Web Developer Extension; they are outlining the block elements of the page.

    Here's what it looks like when the page first renders:




    When it's refreshed:




    At first I thought I could solve it by adding "width: 100% to the header and ul, and that would at least fake it rendering correctly the first time because they would expand to the width of the sidebar. But instead it did this (100% applied to the header only in this shot):




    Of course, I could always just make the sidebar a fixed width, but this problem is driving me insane. Is there anyway to get this to render how I want it to? Since this is a reoccuring problem, am I just approaching this layout all wrong?

    Here's the link:
    http://aztalentsource.com/artists/artistroster/

    visit any artist page within in Mozilla and you'll see what I mean.

    The CSS (look for /* individual artist pages */, although the float is declared earlier, in the /* welcome */ section:
    http://aztalentsource.com/css/style.css

    the first occurence of this problem, if you're interested:
    http://cathyrivers.com/press

    Please, please help if you can before I throw this computer out of my window...

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Okay I know I'm the wrong person to be trying this but oh well.

    #sidebar img h3 ul li { float: right }

    ?

    or

    #sidebar img h3 ul li { margin-right: Xpx }

    it seems MOZ/FF is floating the box but not the content. If you force the content to float as well?
    Last edited by harbingerOTV; 02-09-2005 at 03:46 AM.

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by harbingerOTV
    Okay I know I'm the wrong person to be trying this but...
    Are you kidding? Thanks for the help!

    I've tried floating the content within the float, but then the main content gets pushed down to the bottom, unless I set an explicit width, which defeats the purpose of having the adjustable width on the sidebar.

    I've tried the margins too, hoping that setting margins could trick Moz for a sec, but instead I got a result much like the third screenshot above...

    it seems MOZ/FF is floating the box but not the content.
    Actually, it seems like it is floating the content, because when I give it a "width: 100%" it only expands to where it's being pushed by Mozilla. What should be happening is the header and ul, since they are text-aligned to the right, should be on the right side of the box they are contained in, which is the sidebar, which is floated to the right and is the width of the largest thing in it.

    Right?

    Edit: I also just tried "min-width" on the sidebar thinking that setting some kind of width would work on Moz, but no such luck...
    Last edited by rmedek; 02-09-2005 at 04:14 AM.

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    okay since I'm up I'll try these and see if you gave them a shot.

    Make the sidebar have the image as the background aligning it top center.

    #artists #sidebar ul li { width: auto; float: right } <--not even sure if that is the correct way to do that

    okay I'm rambling and not editing. You have the #welcome sidebar all defined but not the #artist sidebar. Could that be the problem?

    Or could you just float the content and not the side bar? Thus giving the sidebar on the artist pages a width:auto and have the content float and compensate for whatever the side bar width would be? iving it this way should make the side box (with the ul set to right) expand and keep everything to the right and make the floated(left) content text-align: left in the main content.

    Edit:
    Actually, it seems like it is floating the content, because when I give it a "width: 100%" it only expands to where it's being pushed by Mozilla. What should be happening is the header and ul, since they are text-aligned to the right, should be on the right side of the box they are contained in, which is the sidebar, which is floated to the right and is the width of the largest thing in it.


    Had to reread that a few times.

    It's floating the box. IE is floating the extra content. Try anaother div floated right for the UL.
    Last edited by harbingerOTV; 02-09-2005 at 04:29 AM.

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by harbingerOTV
    okay since I'm up I'll try these and see if you gave them a shot.

    Make the sidebar have the image as the background aligning it top center.
    I'd prefer not to as then I'd have to have a separate id for every band within the artist category.

    #artists #sidebar ul li { width: auto; float: right } <--not even sure if that is the correct way to do that
    I've tried, at least floating the individual elements, but then other than all the clearing elements I need it pushes the main content to the bottom of the side bar.

    You have the #welcome sidebar all defined but not the #artist sidebar. Could that be the problem?
    The #welcome sidebar is defined for the welcome page and sets the float and a width. The #artist sidebar is redefined a little furthur down (see /* individual artist pages */ to reset the width.

    Or could you just float the content and not the side bar? Thus giving the sidebar on the artist pages a width:auto and have the content float and compensate for whatever the side bar width would be?
    Actually... yes. I had it like that at first, but I wanted the quotes and additional info to stretch visually past where the image started. I could get it to work by assigning a larger width to the additional info in the main content, but it wouldn't work in IE. So I flipped it around and floated the sidebar instead.

    I've also just tried "max-width," "min-width," "width: 100%," a few others, but nothing works except for declaring a fixed width so far... thanks for the help though!

    Anyone else?

  • #6
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    okay I'm no help but since I'm here...

    You tried continaining the UL in a div and then positioning it?

    Anyone else want to jump in here? I'm spent and sleepy

  • #7
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Yes, I did that when I read your edit... I thought that would do the trick, but then things got really crazy

  • #8
    Regular Coder
    Join Date
    Feb 2005
    Posts
    400
    Thanks
    0
    Thanked 0 Times in 0 Posts
    How about nesting a div with a style of "float:none" just inside your sidebar div?

  • #9
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    You, sir, have a funny name but are A FREAKIN' GENIUS.

    Funny thing is, I could have sworn I tried that one; obviously I didn't because I did just now and there you go. Problem solved. Only thing is, now I have four divs to get into before I hit any content, and this one isn't structural markup, but I'll take it anyway I can...

    So, my question is, is this just a random hack/fix, or is this how it's supposed to act? My guess is it's the first, since it displays properly when its refreshed, right?
    Last edited by rmedek; 02-10-2005 at 11:04 AM.

  • #10
    Regular Coder
    Join Date
    Feb 2005
    Posts
    400
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Random hack. I had a similar problem (cured by refresh) where pop-down menus weren't rendered in the correct position in Moz/FF. In mine, the menu would jump to the correct position when a link inside was hovered over. I'm somewhat surprised that yours didn't do the same.

  • #11
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Yeah... I couldn't remember checking the link so I went back and added one to see if the same behavior you had applied to mine. No dice. But all's well that end well, right?

    I tried using this technique to fix the original "Moz refresh bug," and it didn't work... but that turned out to be something ridiculously easy; something I wouldn't have noticed if it wasn't for an additional year of doing this (declaring height on an image if you're interested)

    Either way, thanks for the help; your first post here and you've solved a problem that's been bugging me for over a year! I owe you a drink.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •