Missing something easy in CSS?

[wbodger]

On this page

http://www.spu.edu//depts/facman/new/

you can see that the page is always 285 pixels wider than it should be. I know where that problem is coming from, but can't find a solution. The code

<div id="greybar">
	<div id="weather"><%= getWeather(1)%><div id="scrollbar"><script language="JavaScript1.2" type="text/javascript">
.
.
.

and the css

div#greybar
{
	position:relative;
	top:-6px;
	background-color: #666664;
	width: auto;
	height: 30px;
	margin: 0px;
	padding:1px;
}
div#greybar #weather
{
	position:relative;
}
div#greybar #weather #scrollbar
{
	position:relative;
	top:-33px;
	left:285px;
	clear:both;
}

What I am after is a horizontal bar (greybar) that has the weather from Yahoo!s RSS feed (works) and a scrolling marquee (works cross browser), but I can't get them to play nicely on the same line without getting that big wide empty space on the right outside of the container.

Help?

Willie

 

[BillyRayPreachersSon]

If I give #scrollbar a width (any width, it seems) in Fx3, the extra space goes away...

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[wbodger]

OK, that must have been like the only thing I didn't try, thanks! Now, any idea why that would be? Is there a 'default' width?

wb

 

[BillyRayPreachersSon]

The default width of a DIV is 100%, so if you're pushing its left-hand position along, it would push its right-hand edge out as well.

I'd make it the correct width for your needs.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[Vragabond]

To be honest, the way you have this set up is so awkward that it is a miracle it works in more than one browser/font-size/operating system/screen size. I would recommend rewriting the part to achieve the same effect with 2 floated elements.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[wbodger]

When I tried it with two floated elements I couldn't get it to work, I'll give it another shot.

wb

 

[ChrisHunt]

You should be able to do it with just one float, giving one bit a load of padding for the other to float into.

Can you give a bit more info on how you want it to appear? Is one/both of the elements fixed-width, and what width?

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[wbodger]

Well, here's the issue... I want the width to be fairly fluid, but I would like to have a minimum width. If you look at that page, the grey bar is it's own div tag and then inside of that I have a call for the output of the RSS feed in one DIV and and then all of the code for the scrolling message in another div. That scrolling message has a width built into the code, but it can be changed. What I would like (and it does it now, just that the code isn't pretty) is the date and temp indented about 15 pixels from the left gutter and then the scrolling message covering the next 550 or so pixels. I think 200 should be plenty for the Date and temp.

Thanks for any help you can give me to help clean up the code, I'm always looking for a chance to learn more!

wb

 

[Vragabond]

What you want to do is a simple as Chris said it. Simply define one of the two elements (either the date or the scroller) to fill the entire row and provide the background colour. Then float the other element next to it (be careful though, the code requires you to put the floated element first and then the non-floated one). Use paddings (on non-floated element) or margins (on the floated one) to manage where exactly they appear in your code. For IE (maybe only 6, but I am not sure), you might have to add width for the floated element.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[wbodger]

That makes sense. I'll give it a shot and see what happens, thanks!

 

[wbodger]

Well, I can't get it to work other than the way I have done it, so apparently I am in need of more help. Here is the CSS for this piece

div#greybar
{
	position:relative;
	top:-6px;
	background-color: #666664;
	width: auto;
	height: 30px;
	margin: 0px;
	padding:1px;
}
div#greybar #weather
{
	position:relative;
}
div#greybar #weather #scrollbar
{
	position:relative;
	top:-33px;
	left:285px;
	clear:both;
	width:550px;
}

and here is where it is in the code

<div id="greybar">
	<div id="weather"><%= getWeather(1)%><div id="scrollbar"><script language="JavaScript1.2" type="text/javascript">
...
			</script></div>
	</div>
</div>

So, above this, there is another DIV tag that is fully closed that encases the red header section. If I try to take this grey bar down to just two DIVs, then I get some weird problems and if I try to float either of the two DIV tags, they both disappear. So, given that I tend to learn best by seeing a proper sample, could somebody do this more cleanly for me? Than I can have a better look at it and (hopefully) understand better how to do this.

Thanks,
Willie