Problems with <div> heights wraping weblog feeds in firefox
Posted: 17 May 2008 02:45 PM
[ Ignore ]
Summer Student
Total Posts: 17
Joined 05-17-2008
Here is the url to the site I am creating www.chrisdasbach.com/colonie
As you can see my footer divs are not being pushed by the above div that wraps the feed. How do I fix this?
Thanks for any help.
Posted: 17 May 2008 03:12 PM
[ Ignore ]
[ # 1 ]
Moderator
Total Posts: 1557
Joined 01-07-2008
You need to clear the div.
#botbar { clear : both ; height : 300px ; background - image : url ( 'http://chrisdasbach.com/colonie/images/layout/mainbottombg.png' ); background - repeat : repeat - x ; }
There also appears to be a problem with the Town Departments link, the whole thing jumps when I mouse over (Safari 3.1).
Signature
Posted: 17 May 2008 04:21 PM
[ Ignore ]
[ # 2 ]
Summer Student
Total Posts: 17
Joined 05-17-2008
Thanks very much for the help, and thank you for the feedback on other items, i have only been testing in FF so far.
Posted: 17 May 2008 04:25 PM
[ Ignore ]
[ # 3 ]
Summer Student
Total Posts: 17
Joined 05-17-2008
One more quick question, if you look now the 300px div with the blue fade is behind the feed I would like that to somehow be anchored to the bottom of the feed wrap. Is that possible?
Posted: 17 May 2008 04:31 PM
[ Ignore ]
[ # 4 ]
Lab Assistant
Total Posts: 109
Joined 09-17-2007
Not sure if this is what you’re looking to do, but on your background image, try doing this:
background : url ( http : //chrisdasbach.com/colonie/images/layout/mainbottombg.png) repeat-x bottom;
I did some shortening for you there by combining the background-repeat, background-position and background-image.
Does that help?
Posted: 17 May 2008 05:12 PM
[ Ignore ]
[ # 5 ]
Summer Student
Total Posts: 17
Joined 05-17-2008
It didn’t achieve what I was going for but the shorthand is something I’m going to apply to all my tags now. Thanks
Posted: 17 May 2008 05:59 PM
[ Ignore ]
[ # 6 ]
Moderator
Total Posts: 1557
Joined 01-07-2008
Hmm, there’s all kinds of trouble here.
* No doctype
Definitely get those cleaned up before trying to debug any layout issues.
As a sidenote, you have a lot of repeating id’s - those should be classes.
Signature
Posted: 17 May 2008 06:05 PM
[ Ignore ]
[ # 7 ]
Summer Student
Total Posts: 17
Joined 05-17-2008
hah yes i know about the repeating ids, just learned about classes / all this stuff so I will be consolidating my css file. I guess I will do it now tho possibly solve some issues.
I see a close for the testwrap tho.
Posted: 17 May 2008 06:17 PM
[ Ignore ]
[ # 8 ]
Summer Student
Total Posts: 17
Joined 05-17-2008
can i apply 2 classes to a div? if so is it just class=“blh, blah” ?
Posted: 17 May 2008 06:23 PM
[ Ignore ]
[ # 9 ]
Moderator
Total Posts: 1557
Joined 01-07-2008
Yes you can, just separate them with a space.
Also, you’re not closing your stylesheet link tag (/>).
Signature
Summer Student
Total Posts: 17
Joined 05-17-2008
The date spacing for the feeds got messed up but im getting there. Changed all the odd even stuff over to just an odd and even class.
Summer Student
Total Posts: 17
Joined 05-17-2008
I got the effect I wanted but it is not a dynamic height. I added an empty div between two 300px tall gradient divs. I would much rather this be a dynamic height instead of just the sum, 300+300+buffer div(150) in case that feeds are ever much shorter or longer then 750px tall. If u have any ideas on how to get it dynamic let me know. =) Thanks for the other feedback inparo I will go through and make those changes, and hopefully get in the habit of always doing it.
< div id = main > div id = maincontent > div id = mainfarleft ></ div > div id = mainleft > div id = feedhead > img height = 53 ></ img > div > {exp : weblog : entries weblog = "events" limit "7" } if ( {count} % 2 != 0 ) $odd = "odd" ; else $odd = "even" ; ?> < div id = feedleft<? echo $odd?> > {begins format = "%n.%j.%Y" } </ div > div id = feedright<? echo $odd?> > div id = storyhead > a href = "{title_permalink=" article / event "}" > {title} </ a > div > {exp : char_limit total = "120" }{desc}{ / exp : char_limit} </ div > { / exp : weblog : entries} < div id = feedbottom >< center > older events , < a href = "http://chrisdasbach.com/colonie/index.php/Calendar/index/" > click here .</ a ></ center > div > div > div id = mainright > div id = feedheadr > img src = http : //www.chrisdasbach.com/colonie/images/newsicon.png> </ div > {exp : weblog : entries weblog = "library|police" limit "7" } if ( {count} % 2 != 0 ) $odd = "odd" ; else $odd = "even" ; ?> < div id = feedleft2<? echo $odd?> > {entry_date format = "%n.%j.%Y" } </ div > div id = feedright2<? echo $odd?> > div id = storyhead >< a href = "{title_permalink=" article / news "}" > {title} </ a > div > {exp : char_limit total = "120" }{body}{ / exp : char_limit} </ div > { / exp : weblog : entries} < div id = feedbottom2 > center > To older news , click here .</ center > div > div > div id = mainfarright ></ div > div > div > div > div id = botbarspace ></ div > //* 150px push *\\ < div id = botbar ></ div > //* HAS THE BOTTOM BLUE FADE IN IT*\\ < div id = botbar2 ></ div > div id = botbar3 ></ div > body > html >
I want the main div the wrap the feeds but when I don’t set a height It just goes to zero.
Summer Student
Total Posts: 17
Joined 05-17-2008
I think i might just scrap the bottom fade
Moderator
Total Posts: 1557
Joined 01-07-2008
What you want is to make the bottom fade the background of the maincontent div. That div currently reverts to a height of 0, which it shouldn’t. I just grabbed your html directly so I could modify it, but the moment I add a doctype it totally collapses. Not something I have the nerve to do tonight. Maybe tomorrow.
Signature
Summer Student
Total Posts: 17
Joined 05-17-2008
np thanks for the help so far, ill try to comb through it all tonight see where i messed up
Summer Student
Total Posts: 17
Joined 05-17-2008
The collapse of that div happens when I float the contents, is there another way to get two columns without floating or by using some other technique?
.