...

View Full Version : @!$#%! Mozilla giving extra margin until refresh



rmedek
02-09-2005, 03:15 AM
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:

http://richardmedek.com/temp/screenshot1.jpg


When it's refreshed:

http://richardmedek.com/temp/screenshot2.jpg


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):

http://richardmedek.com/temp/screenshot3.jpg


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...

harbingerOTV
02-09-2005, 03:43 AM
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?

rmedek
02-09-2005, 03:52 AM
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? :confused:

I also just tried "min-width" on the sidebar thinking that setting some kind of width would work on Moz, but no such luck...

harbingerOTV
02-09-2005, 04:25 AM
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.



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.

rmedek
02-09-2005, 04:34 AM
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? :confused:

harbingerOTV
02-09-2005, 05:51 AM
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 :D

rmedek
02-09-2005, 05:58 AM
Yes, I did that when I read your edit... I thought that would do the trick, but then things got really crazy :)

Harry Armadillo
02-09-2005, 12:58 PM
How about nesting a div with a style of "float:none" just inside your sidebar div?

rmedek
02-10-2005, 07:18 AM
You, sir, have a funny name but are A FREAKIN' GENIUS. :D

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? :confused:

Harry Armadillo
02-10-2005, 10:53 AM
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.

rmedek
02-10-2005, 11:33 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum